@extends('layout.administrator.index')
@section('title', 'Clientes')

@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      {{-- <h1>Clientes</h1> --}}
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{route('administrator.dashboard')}}"><i class="fa fa-dashboard"></i> Inicio</a></li>
        <li class="breadcrumb-item"><a href="{{route('administrator.customers.index')}}"> Clientes</a></li>
        <li class="breadcrumb-item active">Detalle</li>
      </ol>
    </section>

    <section class="content">
      @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
          {{session('success')}}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      @endif
      @if(session('danger'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
          {{session('danger')}}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      @endif
      <div class="row">
        <div class="col-md-8">
          <div class="box box-solid bg_dark">
            <div class="box-header with-border">
              <div class="row align-items-center">
                <div class="col-12">
                  <h4 class="box-title">Información</h4>
                </div>
              </div>
            </div>
            <div class="box-body">
              <div class="row">
                <div class="col-md-12">
                  <h4 class="font-weight-bold">DOCUMENTO</h4>
                  <h5><strong>{{$user->document_type_ref}} {{$user->document}}</strong></h5>
                </div>
              </div>
              <div class="row mt-10">
                <div class="col-md-6">
                  <h4 class="font-weight-bold">USUARIO</h4>
                  <h5><strong>{{$user->username}}</strong></h5>
                </div>
                <div class="col-md-6">
                  <h4 class="font-weight-bold">EMPRESA</h4>
                  <h5><strong>{{$user->company}}</strong></h5>
                </div>
              </div>
              <div class="row mt-10">
                <div class="col-md-6">
                  <h4 class="font-weight-bold">NOMBRE</h4>
                  <h5><strong>{{$user->name}} {{$user->last_name}}</strong></h5>
                </div>
                <div class="col-md-6">
                  <h4 class="font-weight-bold">CORREO</h4>
                  <h5><strong>{{$user->email}}</strong></h5>
                </div>
              </div>
              <div class="row mt-10">
                <div class="col-md-6">
                  <h4 class="font-weight-bold">CELULAR/TELÉFONO</h4>
                  <h5><strong>{{$user->cellphone}}</strong></h5>
                </div>
                <div class="col-md-6">
                  <h4 class="font-weight-bold">DIRECCIÓN</h4>
                  <h5><strong>{{$user->address}}</strong></h5>
                </div>
              </div>
            </div>
          </div>
          <div class="box box-solid bg_dark">
            <div class="box-header with-border">
              <div class="row align-items-center">
                <div class="col-12">
                  <h4 class="box-title">Flotas</h4>
                </div>
              </div>
            </div>
            <div class="box-body">
              <table class="table table-hover table-responsive">
                <thead>
                  <tr>
                    <th class="text-center">Nombre</th>
                    <th class="text-center">Estado</th>
                    <th class="text-center">Acción</th>
                  </tr>
                </thead>
                <tbody class="text-center">
                  @if (count($fleets)>0)
                    @foreach ($fleets as $fleet)
                      <tr>
                        <td class="font-weight-bold vam">
                          {{$fleet->name}}
                        </td>
                        <td class="vam">
                          <span class="badge badge-{{Config::get('constants.states')[$fleet->state]['type']}}">{{Config::get('constants.states')[$fleet->state]['name']}}</span>
                        </td>
                        <td class="vam">
                          <a href="javascript:;" onclick="listEquipment({{$fleet->id}})" class="btn btn-info btn-sm">Ver mas</a>
                        </td>
                      </tr>
                    @endforeach
                  @else
                    <tr>
                      <td colspan="3">No se encontraron cuentas</td>
                    </tr>
                  @endif
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box">
            <div class="box-body">
              @if(!empty($user->photo) && Storage::disk('public')->exists('customers/images/'.$user->photo))
                <img class="imgCustomer" src="{{ asset('storage/customers/images/'.$user->photo) }}">
              @else
                <img class="imgCustomer" src="{{ asset('assets/images/user_default.png') }}">
              @endif
            </div>
          </div>
          <div class="box box-solid bg_dark">
            <div class="box-header with-border">
              <div class="row align-items-center">
                <div class="col-12">
                  <h4 class="box-title">Estado</h4>
                </div>
              </div>
            </div>
            <div class="box-body">
              <div class="row">
                <div class="col-md-12">
                  <div class="label-{{Config::get('constants.states')[$user->state]['type']}} state_details">{{Config::get('constants.states')[$user->state]['name']}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- MODAL -->
  <div class="modal fade" id="idModalListEquipment" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">Unit ID (Equipo)</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="fa fa-times"></i>
          </button>
				</div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 text-center">
              <h4 class="font-weight-bold" id="idNameFleet"></h4>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="contentEquipment">
                <table class="table table-hover table-responsive">
                  <thead>
                    <tr>
                      <th class="text-center">Nombre</th>
                      <th class="text-center">Estado</th>
                    </tr>
                  </thead>
                  <tbody class="text-center" id="idListEquipment">

                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
  <script type="text/javascript">
    function listEquipment(id) {
      var id_customer = '{{$user->uuid}}';

      $("#idNameFleet").html("");
      $("#idListEquipment").empty();

      var urlPath = urlHost + "/administrator/customers/show/equipment";
      $.ajax({
        type: 'POST',
        url: urlPath,
        data: {
          "id_fleet": id,
          "id_customer": id_customer
        },
        dataType: 'json',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){
          // $('#loader_content').removeClass('hidden');
          $(".content_loading").fadeIn("slow");
        },
        success:function(response){
          $(".content_loading").fadeOut("slow");
          if (response.state == 1) {
            $("#idNameFleet").html(response.data.fleet.name);
            if (!$.isEmptyObject(response.data.equipment)) {
              var configState = {!! json_encode(Config::get('constants.states')) !!};
              $.each(response.data.equipment, function( index, equipment ){
                $("#idListEquipment").append('<tr>'+
                  '<td style="vertical-align:middle;" class="font-weight-bold">'+equipment.unit_id+'</td>'+
                  '<td>'+
                    '<span class="badge badge-'+configState[equipment.state]['type']+'">'+configState[equipment.state]['name']+'</span>'+
                  '</td>'+
                '</tr>');
              });
            }else{
              $("#idListEquipment").append('<tr><td colspan="2">Esta flota no tiene equipos</td></tr>');
            }

            $("#idModalListEquipment").modal();
          }else if (response.state == 2) {
            swal("Oops!", response.message, "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        },
        error: function(xhr){
          $(".content_loading").fadeOut("slow");
          swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
        }
      });
    }
  </script>
@endsection