@extends('layout.administrator.index')
@section('title', 'Flotas/Equipos')

@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      {{-- <h1>Flotas/Equipos</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 active">Cuentas/Equipos</li>
      </ol>
    </section>

    <section class="content">
      @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-lg-6">
          <div class="box">
            <div class="box-header with-border">
              <div class="row align-items-center">
                <div class="col-6">
                  <h4 class="box-title">Flotas</h4>
                </div>

                <div class="col-6">
                  <div class="box-controls pull-right">
                    <div class="box-header-actions">
                      <button type="button" class="btn btn-sm btn-info" id="idBtnFilter"><i class="fa fa-filter"></i> Filtro</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-body">
              <div id="idContentFilter" class="box box-solid bg_dark hide">
                <div class="box-header with-border">
                  <div class="row align-items-center">
                    <div class="col-12">
                      <h4 class="box-title">Busqueda avanzada</h4>
                    </div>
                  </div>
                </div>
                <div class="box-body">
                  <form action="{{route('administrator.accounts.index')}}" method="get" files="true" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="nameFleet" class="control-label">Account</label>
                          <input type="text" name="nameFleet" class="form-control input-text" id="nameFleet"
                          placeholder="Account">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="idState" class="control-label">Estado</label>
                          <select name="state" class="form-control select2" id="idState">
                            <option value="">Todos</option>
                            @foreach (Config::get('constants.active') as $key => $state)
                              <option value="{{$key}}">{{$state['name']}}</option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6 text-left">
                        <a href="{{route('administrator.accounts.index')}}" class="btn btn-danger"><i class="fa fa-refresh"
                          aria-hidden="true"></i> Limpiar</a>
                        </div>
                        <div class="col-md-6 text-right">
                          <button type="submit" class="btn btn-info"><i class="fa fa-search" aria-hidden="true"></i> Buscar</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              <div class="card_box">
                <table class="table table-sm table-hover table-responsive">
                  <thead>
                    <tr>
                      <th class="text-center">Nombre</th>
                      <th class="text-center">Estado</th>
                    </tr>
                  </thead>
                  <tbody class="text-center">
                    @if (count($fleets)>0)
                      @foreach ($fleets as $fleet)
                        <tr>
                          <td style="vertical-align:middle;" class="font-weight-bold">
                            <a href="javascript:;" onclick="listEquipment({{$fleet->id}}, {{$fleet->id_customer}})">
                              {{$fleet->name}}
                            </a>
                          </td>
                          <td>
                            <span class="badge badge-{{Config::get('constants.states')[$fleet->state]['type']}}">{{Config::get('constants.states')[$fleet->state]['name']}}</span>
                          </td>
                        </tr>
                      @endforeach
                    @else
                      <tr>
                        <td colspan="4">No se encontraron cuentas</td>
                      </tr>
                    @endif
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="box">
            <div class="box-header with-border">
              <div class="row align-items-center">
                <div class="col-6">
                  <h4 class="box-title" id="titleEquipment">Unit ID (Equipo)</h4>
                </div>
                <div class="col-6">
                  <div class="box-controls pull-right">
                    <div class="box-header-actions">
                        <button type="button" class="btn btn-sm btn-info" id="idBtnFilterUnit"><i class="fa fa-filter"></i> Filtro</button>
                      <a href="#" id="idButtonEquipment" style="display: none" class="btn btn-sm btn-success" onclick="openModalAddEquipment()"><i class="fa fa-plus"></i> Agregar</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="box-body">
              <div id="idContentFilterUnit" class="box box-solid bg_dark hide">
                <div class="box-header with-border">
                  <div class="row align-items-center">
                    <div class="col-12">
                      <h4 class="box-title">Busqueda avanzada</h4>
                    </div>
                  </div>
                </div>
                <div class="box-body">
                  <form action="{{route('administrator.accounts.index')}}" method="get" files="true" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="nameClient" class="control-label">Unit ID</label>
                          <input type="text" name="unitid" class="form-control" id="unitidSearch" placeholder="Unit ID" onchange="filterTable()" >
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="idStateC" class="control-label">Estado</label>
                          <select name="stateC" class="form-control select2" id="idStateC" onchange="filterTable()">
                            <option value="">Todos</option>
                            @foreach (Config::get('constants.active') as $key => $state)
                              <option value="{{$key}}">{{$state['name']}}</option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6 text-left">
                        <a href="{{route('administrator.accounts.index')}}" class="btn btn-danger"><i class="fa fa-refresh" aria-hidden="true"></i> Limpiar</a>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <table class="table table-sm table-hover table-responsive" id="tablaTeam">
                <thead>
                  <tr>
                    <th class="text-center">Unit ID</th>
                    <th class="text-center">Estado</th>
                  </tr>
                </thead>
                <tbody class="text-center" id="idListEquipment">

                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>


  <div class="modal modal-fill fade" id="idEditEquipment" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalContentFill">
        <div class="modal-header">
          <h3 class="modal-title font-weight-bold" id="myModalLabel">Editar equipo</h3>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="fa fa-times"></i>
          </button>
				</div>
        <div class="modal-body">
          <div id="idDataEquipment" class="tab-pane active" aria-expanded="true">
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label for="idEditEquipmentCustomer" class="control-label">Cliente *</label>
                  <input type="text" id="idEditEquipmentCustomer" autocomplete="off" class="form-control" disabled>
                  <small class="text-danger msgEditEquipment" id="edit_equipment_customer"></small>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="idEditEquipmentFleet" class="control-label">Flota *</label>
                  <input type="text" id="idEditEquipmentFleet" autocomplete="off" class="form-control" disabled>
                  <small class="text-danger msgEditEquipment" id="edit_equipment_fleet"></small>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="idEditEquipmentUnitId" class="control-label">Unit ID *</label>
                  <input type="text" id="idEditEquipmentUnitId" name="unit_id" placeholder="Unit ID" autocomplete="off" class="form-control" required>
                  <small class="text-danger msgEditEquipment" id="edit_equipment_unit_id"></small>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label for="idEditEquipmentMake" class="font-weight-bold">Unit Make</label>
                  <select class="form-control select2 selectMake" id="idEditEquipmentMake" name="unit_make" data-id="idEditEquipmentModel">
                    @foreach ($arrayCOmponents['make'] as $make)
                      <option value="{{$make->id}}">{{$make->name}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="idEditEquipmentModel" class="font-weight-bold">Unit Model</label>
                  <select class="form-control select2" id="idEditEquipmentModel" name="unit_model">
                    {{-- @foreach ($arrayCOmponents['model'] as $model)
                      <option value="{{$model->id}}">{{$model->name}}</option>
                    @endforeach --}}
                  </select>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="idEditEquipmentState" class="control-label">Estado *</label>
                  <select class="form-control hg_select select2" id="idEditEquipmentState" name="state">
                    @foreach (Config::get('constants.states') as $key => $state)
                      <option value="{{$key}}">{{$state['name']}}</option>
                    @endforeach
                  </select>
                  <small class="text-danger msgEditAccount" id="edit_account_state"></small>
                </div>
              </div>
            </div>
            <div id="idLoadEditComponent">
              @foreach ($components as $key => $component)
                <div class="row rowEditComponent hide" id="idRowEditComponent_{{$component->id}}">
                  <div class="col-md-12">
                    <div class="box box-slided-up itemComponent">
                      <div class="box-header with-border">
                        <label class="custom-control custom-checkbox">
                          <h5><b class="font-weight-bold">{{$component->name}}</b></h5>
                        </label>
                        <ul class="box-controls pull-right">
                          <li><a class="box-btn-slide" href="#"></a></li>
                        </ul>
                      </div>
                      <div class="box-content">
                        <div class="box-body">
                          <div class="row">
                            <div class="col-md-3">
                              <div class="form-group">
                                <label class="font-weight-bold">Component Make</label>
                                <select class="form-control select2 selectMake" id="idEditComponentMake_{{$component->id}}" name="componentMake[{{$component->id}}]">
                                  @foreach ($arrayCOmponents['make'] as $make)
                                    <option value="{{$make->id}}">{{$make->name}}</option>
                                  @endforeach
                                </select>
                              </div>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                <label class="font-weight-bold">Component Model</label>
                                <select class="form-control select2" id="idEditComponentModel_{{$component->id}}" name="componentModel[{{$component->id}}]">

                                </select>
                              </div>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group m-0">
                                <label class="font-weight-bold">Lubricant</label>
                                <select class="form-control select2" id="idEditLubricant_{{$component->id}}" name="lubricant[{{$component->id}}]">
                                  @foreach ($arrayCOmponents['lubricant'] as $lubricant)
                                    <option value="{{$lubricant->id}}">{{$lubricant->name}}</option>
                                  @endforeach
                                </select>
                              </div>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group m-0">
                                <label class="font-weight-bold">System Type</label>
                                <select class="form-control select2" id="idEditSystemType_{{$component->id}}" name="systemType[{{$component->id}}]">
                                  @foreach ($arrayCOmponents['systemType'] as $systemType)
                                    <option value="{{$systemType->id}}">{{$systemType->name}}</option>
                                  @endforeach
                                </select>
                              </div>
                            </div>
                          </div>
                          <div class="row justify-content-end" id="idInputButtonsReports_{{$component->id}}">

                          </div>
                          <div class="formhidden_{{$component->id}}" formtarget="_blank">
                            <form method="post" target="_blank" id="form_{{$component->id}}" action=""></form>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('js')
  <script src="{{asset('assets/administrator/js/accounts/select2.js')}}"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#idBtnFilter").click(function() {
        $("#idContentFilter").slideToggle("slow");
      });

      $("#idBtnFilterUnit").click(function() {
        $("#idContentFilterUnit").slideToggle("slow");
      });
    });
  </script>

  <script type="text/javascript">
    var idFleet = null;

    function listEquipment(id) {
      $("#idListEquipment").empty();

      $.ajax({
        type: 'POST',
        url: '/administrator/equipments/list',
        data: {
          'idFleet': id
        },
        dataType: 'json',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){},
        success:function(response){
          if (response.state == 1) {
            idFleet = id;

            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">'+
                    '<a href="javascript:;" onclick="showEquipment('+equipment.id+')">'+equipment.unit_id+'</a>'+
                  '</td>'+
                  '<td>'+
                    '<span class="badge badge-'+configState[equipment.state]['type']+'">'+configState[equipment.state]['name']+'</span>'+
                  '</td>'+
                '</tr>');
              });
            }else{
              $("#idListEquipment").append('<tr>'+
                '<td colspan="2">No se encontraron equipos</td>'+
              '</tr>');
            }
          }else if (response.state == 2) {
            swal("Oops!", response.message, "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        },
        error: function(xhr){
          swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
        }
      });
    }

    function showEquipment(id) {
      var lastroute = "{{route('administrator.accounts.lastreport')}}";
      var allroute = "{{route('administrator.accounts.allreport')}}";
      console.log(lastroute)
      console.log(allroute)
      $(".rowEditComponent").fadeOut();
      $.ajax({
        type: 'POST',
        url: '/administrator/equipments/edit',
        data: {
          "id": id,
          "idFleet": idFleet
        },
        dataType: 'json',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){
          $(".content_loading").fadeIn("slow");
        },
        success:function(response){
          $(".content_loading").fadeOut("slow");
          console.log(response.data);
          if (response.state == 1) {
            if (response.data.customer.last_name!=null) {
              var varName = response.data.customer.name + ' ' + response.data.customer.last_name;
            }else{
              var varName = response.data.customer.name;
            }

            $("#idEditEquipmentModel").empty();
            $.each(response.data.equipment.model, function(j, modelData) {
              $("#idEditEquipmentModel").append('<option value="'+modelData.id+'">'+modelData.name+'</option>');
            });

            $("#idEditEquipmentCustomer").val(varName).prop('disabled', true);
            $("#idEditEquipmentFleet").val(response.data.fleet.name).prop('disabled', true);
            $("#idEditEquipmentUnitId").val(response.data.equipment.unit_id).prop('disabled', true);
            $("#idEditEquipmentMake").val(response.data.equipment.unit_make).prop('disabled', true);
            $("#idEditEquipmentModel").val(response.data.equipment.unit_model).prop('disabled', true);
            $("#idEditEquipmentState").val(response.data.equipment.state).prop('disabled', true);


            $.each(response.data.components, function(j, componentsLct) {
              $("#idRowEditComponent_"+componentsLct.component_location).fadeIn();

              console.log(componentsLct.component_location);
              console.log();

              // $("#idSeletedShow_"+componentsLct.component_location).prop('disabled', true);
              // $("#idSeletedShow_"+componentsLct.component_location).html('<i class="fa fa-lock" aria-hidden="true"></i> Seleccionado');

              $("#idEditComponentModel_"+componentsLct.component_location).empty();
              $.each(componentsLct.model, function(j, model) {
                $("#idEditComponentModel_"+componentsLct.component_location).append('<option value="'+model.id+'">'+model.name+'</option>');
              });

              $("#idInputButtonsReports_"+componentsLct.component_location).empty();
              $("#form_"+componentsLct.component_location+" input").remove();

              $("#idEditLubricant_"+componentsLct.component_location).val(componentsLct.lubricant).prop('disabled', true);
              $("#idEditSystemType_"+componentsLct.component_location).val(componentsLct.system_type).prop('disabled', true);
              $("#idEditComponentMake_"+componentsLct.component_location).val(componentsLct.component_make).prop('disabled', true);
              $("#idEditComponentModel_"+componentsLct.component_location).val(componentsLct.component_model).prop('disabled', true);

              $("#idInputButtonsReports_"+componentsLct.component_location).append(
                '<div class="col-md-2 text-right">'+
                '<a href='+"javascript:;"+' onclick="callForm('+componentsLct.component_location+', \''+lastroute+'\')" class="btn btn-success btn-block">Ultimo Reporte</a></div>'+
                '<div class="col-md-2 text-right">'+
                '<a href='+"javascript:;"+' onclick="callForm('+componentsLct.component_location+', \''+allroute+'\')" class="btn btn-success btn-block">Historial de reportes </a></div>'
              );

              $("#form_"+componentsLct.component_location).append(
                '<input type="hidden" name="customer_id" id="customer_id" value="'+response.data.customer.id+'">'+
                '<input type="hidden" name="component_id" id="component_id" value="'+componentsLct.component_location+'">'+
                '<input type="hidden" name="equipment_id" id="equipment_id" value="'+response.data.equipment.id+'">'+
                '<input type="hidden" name="fleet_id" id="fleet_id" value="'+response.data.fleet.id+'">'
              );
            });

            //$('.formhidden').append('<form method="post" id="form_{{$component->id}}"></form>');

            $("#idEditEquipment").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>

  <script>

    function callForm(id, ruta){
      var csrf_token = $('meta[name="csrf-token"]').attr('content');
      $("#form_"+id).attr('action', ruta);
      $("#form_"+id).append('<input type="hidden" name="_token" value="'+csrf_token+'">');
      $("#form_"+id).submit();

    };


    function filterTable(){
      var unitId = document.getElementById("unitidSearch").value;
      var status = document.getElementById("idStateC").value;
      var urlPath = urlHost + "/administrator/filterTable";
      $.ajax({
        type: 'POST',
        url: urlPath,
        data: {
          "unitId": unitId,
          "status": status
        },
        dataType: 'json',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        success:function(response){
          console.log(response);
          $("#idListEquipment").empty();
          if (!$.isEmptyObject(response)) {
            var configState = {!! json_encode(Config::get('constants.states')) !!};
            $.each(response, function( j, data ){
              console.log(data);
              $("#idListEquipment").append('<tr>'+
              '<td style="vertical-align:middle;" class="font-weight-bold">'+data.unit_id+'</td>'+
              '<td>'+
              '<span class="badge badge-'+configState[data.state]['type']+'">'+configState[data.state]['name']+'</span>'+
              '</td>'+
              '<td>'+
              '<a href="javascript:;" onclick="editEquipment('+data.id+')" class="btn btn-info btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></a>'+
              '<a href="javascript:;" onclick="openDeleteEquipment('+data.id+', \''+data.unit_id+'\')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>'+
              '</td>'+
              '</tr>');
            });
          }else{
            $("#idListEquipment").append('<tr>'+
            '<td colspan="4">No se encontraron equipos</td>'+
            '</tr>');
          }
        }
      });
    }
  </script>
@endsection