@extends('layouts.tabler')

@section('content')

<div class="page-wrapper">

  <div class="d-flex justify-content-center mt-2">
    <div class="card card-md" style="border-radius:30px;border-color: #3478f6;width: 80%;max-width: 90%;">

      <div class="card-body" style="padding-top: 10px;">

        <div class="d-flex flex-column justify-content-around">
          <div class="d-flex mt-2" >
            <div class="m-2 h2">
              <a href="{{route('home',['pais_id'=>$pais_id])}}"><i class="fa-solid fa-arrow-left fa-lg"></i></a>
            </div>
            <div class="ml-2 m-2"><h2 class="d-flex justify-content-start">Tus Datos</h2></div>
          </div>


          @if(session('info'))
          <div class="alert alert-success" id="success-alert">
              <strong>{{session('info')}}</strong>
          </div>
          @endif
          <div><hr style="height:1px;border-width:0;background-color:#3478f6;opacity: 1;margin-top: 10px;margin-bottom: 10px;"></div>

          <div class="d-none d-md-block">
            <div class="d-flex flex-row justify-content-between align-items-center">
              <div class="d-flex flex-row justify-content-start gap-3 align-items-center">
                <div>
                    <label style="display: inline-block;
                    cursor: pointer;
                    width: 100%; height: 100%">
                          <div style="width: 100px;height: 100px;
                            display: flex;
                            justify-content: center;
                            align-items: center;">
                            <img id="imageSelected"
                                class="avatar avatar-lg rounded-circle"
                                style="background-image: url({{ $user->avatar == null ? asset('img/perfil.png') : (strpos($user->avatar, "http") !== false ? $user->avatar : asset('users/' . $user->avatar)  )}});position: relative;">
                          </div>
                    </label>
                </div>
                <div id="lname">
                  <strong><span>{{$user->name}}</span></strong>
                </div>
              </div>
              <div class="d-flex align-items-center" >
                <a href="{{route('users.edit')}}"  class="btn btn-primary rounded-pill w-100 " style="background-color: #3478f6;">EDITAR PERFIL</a>
              </div>
            </div>
          </div>

          <div class="d-block d-md-none">
            <div class="d-flex flex-column">
              <div class="d-flex flex-row justify-content-start gap-3 align-items-center">
                <div style="width: 100px;height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;">
                <img id="imageSelected"
                    class="avatar avatar-lg rounded-circle"
                    style="background-image: url({{ $user->avatar == null ? asset('img/perfil.png') : (strpos($user->avatar, "http") !== false ? $user->avatar : asset('users/' . $user->avatar)  )}});position: relative;">
                </div>
                <div id="lname">
                  <strong><span>{{$user->name}}</span></strong>
                </div>
              </div>
              <div class="d-flex align-items-center mt-2 w-100" >
                <a href="{{route('users.edit')}}"  class="btn btn-primary rounded-pill w-100 " style="background-color: #3478f6;">EDITAR PERFIL</a>
              </div>
            </div>
          </div>





          <div> <hr style="height:1px;border-width:0;background-color:#3478f6;opacity: 1;margin-top: 10px;margin-bottom: 10px;"></div>
          <div>
            <div class="card" style="border-left-width: 0px;border-left-style: solid;border-right-width: 0px;border-right-style: solid;border-top-width: 0px;border-top-style: solid;border-bottom-width: 0px;border-bottom-style: solid;border-bottom-color: #3478f6;">
              <div class="card-body">
                <div class="divide-y">
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>País:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong> {{$user->country->country_name ?? ''}}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>Provincia:</strong> {{$user->state->state_name ?? ''}}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>Ciudad:&nbsp&nbsp&nbsp&nbsp</strong> {{$user->city->city_name ?? ''}}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>Barrio:&nbsp&nbsp&nbsp&nbsp</strong> {{$user->neighborhood ?? ''}}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>Dirección:</strong> {{$user->address}}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>Código Postal:</strong> {{$user->post_code ?? ''}}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>Mail:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong> {{$user->email}}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>Teléfono:&nbsp</strong> {{$user->phone_number ?? ''}}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>DNI:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong> {{$user->dni}}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-12">
                        <strong>Activar Facturación:&nbsp</strong> {{$user->is_billing == 0 ? 'No' : 'Si' }}
                      </div>
                    </div>
                  </div>
                  <div style="display: {{ $user->is_billing == 1 ? 'block' : 'none' }};">
                    <div class="row">
                      <div class="col-12">
                        <strong>Condición frente a IVA:</strong> {{ $responsibleType->name ?? 'No asignado' }}
                      </div>
                    </div>
                  </div>
                  <div style="display: {{ $user->is_billing == 1 ? 'block' : 'none' }};">
                    <div class="row">
                      <div class="col-12 d-flex gap-2">
                        <strong>Documento: </strong> 
                        <label style="text-transform: uppercase;">
                          {{$user->document_type }} - {{$user->cuit }}
                        </label>
                      </div>
                    </div>
                  </div>
                  <!-- <div style="display: {{ $user->is_billing == 1 ? 'block' : 'none' }};">
                    <div class="row">
                      <div class="col-12">
                        <strong>CUIT: </strong> {{$user->cuit }}
                      </div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>




@endsection
@section('js')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const hiddenAlert = () => {
      window.setTimeout(function () {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function () {
          $(this).remove();
        });
      }, 5000);
  }

  $(document).ready(function() {
    hiddenAlert()
  })

</script>
@endsection