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

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

    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <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.components.index')}}" method="get" files="true" enctype="multipart/form-data">
                @csrf
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idName" class="control-label">Nombre</label>
                      <input type="text" name="name" class="form-control" id="idName" placeholder="Nombre">
                    </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.components.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="box" id="idContentComponent">
            <div class="box-header with-border">
              <div class="row align-items-center">
                <div class="col-6">
                  <h4 class="box-title">Component Location</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>
                      <a href="javascript:;" onclick="openCreateComponent()" class="btn btn-sm btn-success"><i class="fa fa-plus"></i> Agregar</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-body">
              <div class="table-responsive">
                <table class="table table-sm table-hover" id="customTable">
                  <thead>
                    <tr>
                      <th class="text-center">Cliente</th>
                      <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($components)>0)
                      @foreach ($components as $component)
                        <tr>
                            <td>
                            @if($component->getCustomer)
                              {{$component->getCustomer->company}}
                            @else
                              No asignado
                            @endif
                            </td>
                          <td style="vertical-align:middle;" class="font-weight-bold">
                            {{$component->name}}
                          </td>
                          <td>
                            <span class="badge badge-{{Config::get('constants.states')[$component->state]['type']}}">{{Config::get('constants.states')[$component->state]['name']}}</span>
                          </td>
                          <td>
                            <a href="javascript:;" onclick="openTraceability({{$component->id}}, '{{$component->name}}')" class="btn btn-secondary btn-xs" title="Ver Trazabilidad"><i class="fa fa-history" aria-hidden="true"></i></a>
                            <a href="javascript:;" onclick="openEditComponent({{$component->id}}, '{{$component->name}}', '{{$component->state}}')" class="btn btn-info btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                            <a href="javascript:;" onclick="openDeleteComponent({{$component->id}}, '{{$component->name}}')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>
                          </td>
                        </tr>
                      @endforeach
                    @else
                      <tr>
                        <td colspan="3">No se encontraron component location</td>
                      </tr>
                    @endif
                  </tbody>
                </table>
              </div>
            </div>
            <div class="box-footer clearfix">
              <div class="row">
                <div class="col-md-12">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- MODAL -->
  <div class="modal fade" id="idAddComponent" 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">Agregar component location</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form id="formAddComponent" method="post">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label>Customer *</label>
                  <select class="form-control" required name="customer_id">
                    <option value="" selected disabled>
                      Seleccione un cliente
                    </option>
                    @foreach($customers as $customer)
                      <option value="{{$customer->id}}">{{$customer->company}}</option>
                    @endforeach
                  </select>
                </div>
                <div class="form-group">
                  <label for="idAddComponentName" class="control-label">Nombre *</label>
                  <input type="text" id="idAddComponentName" name="name" placeholder="Nombre" autocomplete="off" class="form-control" required>
                  <small class="text-danger msgAddComponent" id="add_component_name"></small>
                </div>
              </div>
            </div>
          </form>
          <br>
          <div class="row">
            <div class="col-md-12">
              <button type="button" onclick="addComponent()" class="btn btn_admin btn-block"><i class="fa fa-floppy-o"></i> Guardar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="idEditComponent" 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">Editar component location</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="fa fa-times"></i>
          </button>
				</div>
        <div class="modal-body">
          <form id="formEditComponent" method="post">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="idEditComponentName" class="control-label">Nombre *</label>
                  <input type="text" id="idEditComponentName" name="name" placeholder="Nombre" autocomplete="off" class="form-control" required>
                  <small class="text-danger msgEditComponent" id="edit_component_name"></small>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="idEditComponentState" class="control-label">Estado *</label>
                  <select class="form-control hg_select select2" id="idEditComponentState" name="state">
                    @foreach (Config::get('constants.states') as $key => $state)
                      <option value="{{$key}}">{{$state['name']}}</option>
                    @endforeach
                  </select>
                  <small class="text-danger msgEditComponent" id="edit_component_state"></small>
                </div>
              </div>
            </div>
          </form>
          <br>
          <div class="row">
            <div class="col-md-12">
              <button type="button" onclick="updateComponent()" class="btn btn_admin btn-block"><i class="fa fa-floppy-o"></i> Guardar cambios</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- MODAL TRAZABILIDAD -->
  <div class="modal fade" id="idTraceabilityModal" tabindex="-1" role="dialog" aria-labelledby="traceabilityModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 90%;">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <h4 class="modal-title text-white" id="traceabilityModalLabel">
            <i class="fa fa-history"></i> Trazabilidad: <strong id="componentNameTitle"></strong>
          </h4>
          <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div id="traceabilityLoading" class="text-center py-5">
            <i class="fa fa-spinner fa-spin fa-3x text-primary"></i>
            <p class="mt-3">Cargando historial...</p>
          </div>
          <div id="traceabilityContent" style="display:none;">
            <div class="row mb-3 align-items-center">
              <div class="col-md-4">
                <strong>Cliente:</strong> <span id="componentCustomer"></span>
              </div>
              <div class="col-md-4">
                <strong>Estado:</strong> <span id="componentState"></span>
              </div>
              <div class="col-md-4">
                <strong>Total de eventos:</strong> <span id="totalEvents">0</span>
              </div>
            </div>
            <hr>
            <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
              <table class="table table-sm table-hover table-bordered">
                <thead class="bg-light sticky-top">
                  <tr>
                    <th class="text-center" style="width: 120px;">Fecha/Hora</th>
                    <th class="text-center" style="width: 130px;">Usuario</th>
                    <th class="text-center" style="width: 110px;">Acción</th>
                    <th class="text-center">Detalles</th>
                    <th class="text-center" style="width: 130px;">Equipo</th>
                    <th class="text-center" style="width: 150px;">Cliente/Cuenta</th>
                  </tr>
                </thead>
                <tbody id="traceabilityTableBody">
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <script type="text/javascript">
    $('#customTable').DataTable();
    $("#idBtnFilter").click(function() {
      $("#idContentFilter").slideToggle("slow");
    });

    function openCreateComponent() {
      $(".msgAddAccount").empty();

      $("#idAddComponent").modal();
    }

    function addComponent() {
      var formData = new FormData(document.getElementById("formAddComponent"));

      var urlPath = urlHost + "/administrator/components/store";
      $.ajax({
        type: 'POST',
        url: urlPath,
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        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) {
            swal({
              title: "Bien!",
              text: response.message,
              type: "success",
            }, function(){
              $(".content_loading").fadeIn("slow");
              location.reload();
            });
          }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");
          if (xhr.responseJSON.errors) {
            $.each(xhr.responseJSON.errors, function( index, value ){
              $("#add_component_"+index).html(value[0]);
            });

            swal("Oops!", "Debe enviar el nombre correctamente", "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        }
      });
    }

    var idComponent = null;

    function openEditComponent(id, name, state) {
      $(".msgAddAccount").empty();

      idComponent = id;

      $("#idEditComponentName").val(name);
      $("#idEditComponentState").val(state).trigger('change.select2');

      $("#idEditComponent").modal();
    }

    function updateComponent() {
      var formData = new FormData(document.getElementById("formEditComponent"));
      formData.append('id', idComponent);

      var urlPath = urlHost + "/administrator/components/update";
      $.ajax({
        type: 'POST',
        url: urlPath,
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        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) {
            swal({
              title: "Bien!",
              text: response.message,
              type: "success",
            }, function(){
              $(".content_loading").fadeIn("slow");
              location.reload();
            });
          }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");
          if (xhr.responseJSON.errors) {
            $.each(xhr.responseJSON.errors, function( index, value ){
              $("#add_component_"+index).html(value[0]);
            });

            swal("Oops!", "Debe enviar el nombre correctamente", "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        }
      });
    }

    function openDeleteComponent(id, name) {
      swal({
          title: "Estás seguro?",
          text: "El component location " + name + " sera eliminado!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Si, Eliminar!",
          closeOnConfirm: false
      }, function(){
        deleteComponent(id);
      });
    }

    function deleteComponent(id) {
      var urlPath = urlHost + "/administrator/components/delete";
      $.ajax({
        type: 'POST',
        url: urlPath,
        data: {
          "id": id
        },
        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) {
            swal({
                title: "Eliminado!",
                text: response.message,
                type: "success",
            }, function(){
              location.reload();
            });
          }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");
        }
      });
    }

    function openTraceability(id, name) {
      $('#componentNameTitle').text(name);
      $('#traceabilityLoading').show();
      $('#traceabilityContent').hide();
      $('#idTraceabilityModal').modal('show');

      var urlPath = urlHost + "/administrator/components/" + id + "/get-traceability";
      $.ajax({
        type: 'GET',
        url: urlPath,
        dataType: 'json',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        success: function(response) {
          $('#traceabilityLoading').hide();
          if (response.state == 1) {
            var component = response.data.component;
            var audit = response.data.audit;
            
            // Actualizar información del componente
            $('#componentCustomer').text(component.get_customer ? component.get_customer.company : 'No asignado');
            
            var stateConfig = {!! json_encode(Config::get('constants.states')) !!};
            var stateBadge = '<span class="badge badge-' + stateConfig[component.state].type + '">' + 
                           stateConfig[component.state].name + '</span>';
            $('#componentState').html(stateBadge);
            $('#totalEvents').text(audit.length);
            
            // Construir tabla de auditoría
            var tbody = '';
            if (audit.length > 0) {
              audit.forEach(function(log) {
                tbody += buildAuditRow(log, stateConfig);
              });
            } else {
              tbody = '<tr><td colspan="6" class="text-center"><em class="text-muted">No se encontraron registros de auditoría</em></td></tr>';
            }
            
            $('#traceabilityTableBody').html(tbody);
            $('#traceabilityContent').show();
          } else {
            swal("Error", response.message, "error");
            $('#idTraceabilityModal').modal('hide');
          }
        },
        error: function(xhr) {
          $('#traceabilityLoading').hide();
          swal("Error", "No se pudo cargar la trazabilidad", "error");
          $('#idTraceabilityModal').modal('hide');
        }
      });
    }

    function buildAuditRow(log, stateConfig) {
      var date = new Date(log.created_at);
      var dateStr = date.toLocaleDateString('es-ES');
      var timeStr = date.toLocaleTimeString('es-ES');
      
      var actionBadge = getActionBadge(log.action);
      var details = getActionDetails(log, stateConfig);
      var equipment = log.equipment ? '<strong>' + log.equipment.unit_id + '</strong>' : '<span class="text-muted">-</span>';
      var customer = getCustomerInfo(log);
      
      return '<tr>' +
        '<td class="text-center"><strong>' + dateStr + '<br>' + timeStr + '</strong></td>' +
        '<td>' + (log.user ? log.user.name + '<br><small class="text-muted">' + (log.user.email || '') + '</small>' : 'Sistema') + '</td>' +
        '<td class="text-center">' + actionBadge + '</td>' +
        '<td>' + details + '</td>' +
        '<td class="text-center">' + equipment + '</td>' +
        '<td>' + customer + '</td>' +
        '</tr>';
    }

    function getActionBadge(action) {
      var badges = {
        'created': '<span class="badge badge-success"><i class="fa fa-plus-circle"></i> Creado</span>',
        'renamed': '<span class="badge badge-info"><i class="fa fa-edit"></i> Renombrado</span>',
        'assigned': '<span class="badge badge-primary"><i class="fa fa-link"></i> Asignado</span>',
        'unassigned': '<span class="badge badge-warning"><i class="fa fa-unlink"></i> Desasignado</span>',
        'state_changed': '<span class="badge badge-secondary"><i class="fa fa-toggle-on"></i> Estado</span>',
        'customer_changed': '<span class="badge badge-purple"><i class="fa fa-exchange"></i> Cliente</span>',
        'equipment_change': '<span class="badge badge-info"><i class="fa fa-arrows-h"></i> Cambio Equipo</span>',
        'deleted': '<span class="badge badge-danger"><i class="fa fa-trash"></i> Eliminado</span>'
      };
      return badges[action] || '<span class="badge badge-light">' + action + '</span>';
    }

    function getActionDetails(log, stateConfig) {
      if (log.action === 'created') {
        var stateBadge = stateConfig[log.new_values.state] ? 
          '<span class="badge badge-' + stateConfig[log.new_values.state].type + '">' + 
          stateConfig[log.new_values.state].name + '</span>' : '';
        return '<strong>Nombre:</strong> ' + (log.new_values.name || '-') + '<br><strong>Estado:</strong> ' + stateBadge;
      } else if (log.action === 'renamed') {
        return '<div class="row align-items-center"><div class="col-5"><strong>Anterior:</strong><br><span class="text-danger">' + 
               (log.old_values.name || '-') + '</span></div>' +
               '<div class="col-2 text-center"><i class="fa fa-arrow-right text-muted"></i></div>' +
               '<div class="col-5"><strong>Nuevo:</strong><br><span class="text-success">' + 
               (log.new_values.name || '-') + '</span></div></div>';
      } else if (log.action === 'state_changed') {
        var oldBadge = stateConfig[log.old_values.state] ? 
          '<span class="badge badge-' + stateConfig[log.old_values.state].type + '">' + 
          stateConfig[log.old_values.state].name + '</span>' : '';
        var newBadge = stateConfig[log.new_values.state] ? 
          '<span class="badge badge-' + stateConfig[log.new_values.state].type + '">' + 
          stateConfig[log.new_values.state].name + '</span>' : '';
        return '<div class="row"><div class="col-5"><strong>Anterior:</strong><br>' + oldBadge + '</div>' +
               '<div class="col-2 text-center"><i class="fa fa-arrow-right text-muted"></i></div>' +
               '<div class="col-5"><strong>Nuevo:</strong><br>' + newBadge + '</div></div>';
      } else if (log.action === 'assigned') {
        return '<span class="text-success"><i class="fa fa-check"></i> Componente asignado a equipo</span>';
      } else if (log.action === 'unassigned') {
        return '<span class="text-warning"><i class="fa fa-times"></i> Componente desasignado</span>';
      } else if (log.action === 'deleted') {
        return '<span class="text-danger"><i class="fa fa-trash"></i> Registro eliminado</span>';
      }
      return log.notes || '<em class="text-muted">Sin detalles</em>';
    }

    function getCustomerInfo(log) {
      if (log.equipment && log.equipment.get_fleet && log.equipment.get_fleet.user) {
        return '<strong>' + log.equipment.get_fleet.user.company + '</strong><br>' +
               '<small class="text-muted">' + log.equipment.get_fleet.name + '</small>';
      } else if (log.customer) {
        return '<strong>' + log.customer.company + '</strong>';
      }
      return '<span class="text-muted">-</span>';
    }
  </script>
@endsection