@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title','Cuenta Glovo - Vista')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
  'resources/assets/vendor/libs/animate-css/animate.scss',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

@section('page-style')
@vite('resources/assets/vendor/scss/pages/page-user-view.scss')
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
  'resources/assets/vendor/libs/select2/select2.js'
])
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
  <a href="{{ route('admin.credenciales') }}" class="btn btn-label-secondary">
    <i class="icon-base ti tabler-arrow-left me-2"></i>Volver
  </a>
  <div></div>
</div>

<div class="row">
  <!-- Sidebar -->
  <div class="col-xl-4 col-lg-5 order-1 order-md-0">
    <div class="card mb-6">
      <div class="card-body pt-12">
        <div class="user-avatar-section">
          <div class="d-flex align-items-center flex-column">
            <div class="avatar avatar-xl mb-4">
              <div class="avatar-initial rounded-circle bg-label-primary">
                <i class="icon-base ti tabler-key icon-lg"></i>
              </div>
            </div>
            <div class="user-info text-center">
              <h5>{{ $credential->rider_id ?? $credential->courier_id }}</h5>
              <span class="badge bg-label-{{ $credential->status === 'active' ? 'success' : ($credential->status==='blocked' ? 'danger' : 'secondary') }}">{{ ucfirst($credential->status ?? 'inactive') }}</span>
            </div>
          </div>
        </div>
        <h5 class="pb-4 border-bottom mb-4 mt-6">Detalles</h5>
        <div class="info-container">
          <ul class="list-unstyled mb-6">
            <li class="mb-2"><span class="h6">Rider ID:</span> <span>{{ $credential->rider_id ?? '—' }}</span></li>
            <li class="mb-2"><span class="h6">Courier ID:</span> <span>{{ $credential->courier_id ?? '—' }}</span></li>
            <li class="mb-2"><span class="h6">Email:</span> <span>{{ $credential->login_email }}</span></li>
            <li class="mb-2"><span class="h6">Empresa:</span> <span>{{ $credential->company?->name ?? '—' }}</span></li>
            <li class="mb-2"><span class="h6">Rider:</span> <span>{{ $credential->rider?->name ?? 'Sin asignar' }}</span></li>
            <li class="mb-2"><span class="h6">Teléfono:</span> <span>{{ $credential->phone ?? '—' }}</span></li>
            <li class="mb-2"><span class="h6">Vehículo:</span> <span>{{ $credential->vehicle ?? '—' }}</span></li>
            <li class="mb-2"><span class="h6">Ciudad:</span> <span>{{ $credential->city_code ?? '—' }}</span></li>
            <li class="mb-2"><span class="h6">Recibida:</span> <span>{{ optional($credential->provided_at)->toDateString() ?? '—' }}</span></li>
            <li class="mb-2"><span class="h6">Revocación:</span> <span>{{ optional($credential->revoked_at)->toDateString() ?? '—' }}</span></li>
          </ul>
          <div class="d-flex justify-content-center gap-2">
            <a href="{{ route('admin.credenciales') }}" class="btn btn-primary">Editar</a>
            <a href="{{ route('admin.credenciales') }}" class="btn btn-label-secondary">Asignar</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Resumen -->
    <div class="card mb-6 border border-2 border-primary rounded primary-shadow">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start">
          <span class="badge bg-label-primary">Resumen</span>
        </div>
        <ul class="list-unstyled g-2 my-6">
          <li class="mb-2 d-flex align-items-center"><i class="icon-base ti tabler-building icon-10px text-secondary me-2"></i><span>Empresa: {{ $credential->company?->name ?? '—' }}</span></li>
          <li class="mb-2 d-flex align-items-center"><i class="icon-base ti tabler-user icon-10px text-secondary me-2"></i><span>Rider: {{ $credential->rider?->name ?? '—' }}</span></li>
          <li class="mb-2 d-flex align-items-center"><i class="icon-base ti tabler-bolt icon-10px text-secondary me-2"></i><span>Estado: {{ ucfirst($credential->status ?? 'inactive') }}</span></li>
        </ul>
      </div>
    </div>
  </div>
  <!--/ Sidebar -->

  <!-- Content -->
  <div class="col-xl-8 col-lg-7 order-0 order-md-1">
    <!-- Tabs -->
    <div class="nav-align-top">
      <ul class="nav nav-pills flex-column flex-md-row flex-wrap mb-6 row-gap-2" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-account" role="tab"><i class="icon-base ti tabler-eye icon-sm me-1_5"></i>Cuenta</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-assignments" role="tab"><i class="icon-base ti tabler-users icon-sm me-1_5"></i>Asignaciones</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-events" role="tab"><i class="icon-base ti tabler-activity icon-sm me-1_5"></i>Eventos</a></li>
      </ul>
    </div>

    <div class="tab-content">
      <div class="tab-pane fade show active" id="tab-account">
        <div class="card mb-6">
          <h5 class="card-header">Resumen de actividad</h5>
          <div class="card-body">
            <ul class="timeline mb-0">
              <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-primary"></span>
                <div class="timeline-event">
                  <div class="timeline-header mb-3">
                    <h6 class="mb-0">Cuenta creada</h6>
                    <small class="text-body-secondary">{{ optional($credential->created_at)->diffForHumans() }}</small>
                  </div>
                  <p class="mb-2">{{ $credential->rider_id ? 'Rider ID '.$credential->rider_id : ('Courier ID '.$credential->courier_id) }}</p>
                </div>
              </li>
              @if($credential->rider)
              <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-success"></span>
                <div class="timeline-event">
                  <div class="timeline-header mb-3">
                    <h6 class="mb-0">Asignada a {{ $credential->rider->name }}</h6>
                    <small class="text-body-secondary">Actual</small>
                  </div>
                  <p class="mb-2">Empresa: {{ $credential->company?->name ?? '—' }}</p>
                </div>
              </li>
              @endif
            </ul>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="tab-assignments">
        <div class="card mb-6">
          <h5 class="card-header">Asignaciones</h5>
          <div class="card-datatable table-responsive">
            <table class="table datatable-assignments">
              <thead>
                <tr>
                  <th>Inicio</th>
                  <th>Fin</th>
                  <th>Rider</th>
                  <th>Asignado por</th>
                  <th>Motivo</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="tab-events">
        <div class="card mb-6">
          <h5 class="card-header">Eventos</h5>
          <div class="card-datatable table-responsive">
            <table class="table datatable-events">
              <thead>
                <tr>
                  <th>Fecha</th>
                  <th>Tipo</th>
                  <th>Actor</th>
                  <th>Detalle</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/ Content -->
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', async function(){
  const credId = {{ (int)$credential->id }};
  const url = `{{ url('/admin/api/glovo-credentials') }}/${credId}`;
  try {
    const res = await fetch(url); const data = await res.json();
    // Asignaciones table
    const aTable = document.querySelector('.datatable-assignments');
    if (aTable) {
      new DataTable(aTable, {
        data: (data.assignments||[]),
        columns: [
          { data: 'assigned_at' },
          { data: 'unassigned_at' },
          { data: 'user_name' },
          { data: 'assigned_by_name' },
          { data: 'reason' }
        ],
        order: [[0,'desc']],
        searching: false,
        lengthChange: false
      });
    }
    // Events table
    const eTable = document.querySelector('.datatable-events');
    if (eTable) {
      new DataTable(eTable, {
        data: (data.events||[]),
        columns: [
          { data: 'created_at' },
          { data: 'type' },
          { data: 'actor' },
          { data: 'message' }
        ],
        order: [[0,'desc']],
        searching: false,
        lengthChange: false
      });
    }
    // Fix layout when changing tabs
    const tabElList = document.querySelectorAll('a[data-bs-toggle="tab"]');
    tabElList.forEach(function(tabEl){
      tabEl.addEventListener('shown.bs.tab', function(){
        document.querySelectorAll('.table').forEach(t => {
          if (t.dataset.dt) {
            try { DataTable.tables({api:true}).columns.adjust().draw(false); } catch(e){}
          }
        });
      });
    });
  } catch (e) { console.error(e); }
});
</script>
@endpush