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

@extends('layouts/layoutMaster')

@section('title', 'Riders (Gerente)')

@section('vendor-style')
@vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss','resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss'])
@endsection

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

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', async function(){
  const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  const fcomp = document.getElementById('filter_company');
  const fcity = document.getElementById('filter_city');
  const fzone = document.getElementById('filter_zone');
  async function loadCompanies(){ const r=await fetch(`{{ url('/gerente/api/companies') }}`); const j=await r.json(); (j.data||[]).forEach(c=>{ const o=document.createElement('option'); o.value=c.id; o.textContent=c.name; fcomp.appendChild(o); }); }
  async function loadCities(){ fcity.innerHTML='<option value="">Todas</option>'; const url=new URL(`{{ url('/gerente/api/cities') }}`); if (fcomp.value) url.searchParams.set('company_id', fcomp.value); const r=await fetch(url); const j=await r.json(); (j.data||[]).forEach(c=>{ const o=document.createElement('option'); o.value=c.id; o.textContent=c.name; fcity.appendChild(o); }); }
  async function loadZones(){ fzone.innerHTML='<option value="">Todas</option>'; const url=new URL(`{{ url('/gerente/api/zones') }}`); if (fcomp.value) url.searchParams.set('company_id', fcomp.value); if (fcity.value) url.searchParams.set('city_id', fcity.value); const r=await fetch(url); const j=await r.json(); (j.data||[]).forEach(z=>{ const o=document.createElement('option'); o.value=z.id; o.textContent=z.name + (z.city?` (${z.city})`:''); fzone.appendChild(o); }); }
  await loadCompanies(); await loadCities(); await loadZones();
  const el = document.querySelector('.dt-riders'); if (!el) return;
  const dt = new DataTable(el, {
    ajax: { url: '{{ url('/gerente/api/riders') }}', data: d=>{ d.company_id=fcomp.value||''; d.city_id=fcity.value||''; d.zone_id=fzone.value||''; } },
    columns: [ { data:'id' }, { data:'name' }, { data:'email' }, { data:'companies' }, { data:'cities' }, { data:'zones' }, { data:'id' } ],
    columnDefs: [ { className:'control', orderable:false, searchable:false, targets:0, render: ()=>'' }, { targets:[3,4,5], orderable:false, render: (data)=> (data||[]).map(n=>`<span class=\"badge bg-label-secondary me-1\">${n}</span>`).join('') }, { targets:6, orderable:false, searchable:false, render: (id)=> `<button class=\"btn btn-sm btn-outline-primary assign-zone\" data-id=\"${id}\">Asignar a Zona</button>` }],
    order: [[1,'asc']]
  });
  [fcomp, fcity, fzone].forEach(s => s.addEventListener('change', async ()=>{ await loadCities(); await loadZones(); dt.ajax.reload(null,false); }));

  el.addEventListener('click', async function(ev){
    const btn = ev.target.closest('.assign-zone'); if (!btn) return;
    const rid = btn.getAttribute('data-id'); document.getElementById('assign_rider_id').value = rid; await loadZones(); bootstrap.Modal.getOrCreateInstance(document.getElementById('assignZoneModal')).show();
  });
  const form = document.getElementById('assignZoneForm');
  form.addEventListener('submit', async function(ev){ ev.preventDefault(); const rid=document.getElementById('assign_rider_id').value; const zid=document.getElementById('assign_zone_id').value; const payload={ zone_ids: zid ? [parseInt(zid,10)] : [] }; const res=await fetch(`{{ url('/gerente/api/riders') }}/${rid}/zones`, { method:'PUT', headers:{ 'Content-Type':'application/json','X-CSRF-TOKEN': csrf, 'Accept':'application/json' }, body: JSON.stringify(payload) }); if(!res.ok){ alert('No se pudo asignar'); return; } bootstrap.Modal.getOrCreateInstance(document.getElementById('assignZoneModal')).hide(); dt.ajax.reload(null,false); });
});
</script>
@endsection

@section('content')
<div class="card">
  <div class="card-header">
    <div class="d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Riders</h5>
      <div class="d-flex gap-2">
        <select id="filter_company" class="form-select form-select-sm" style="width:auto"><option value="">Empresa: Todas</option></select>
        <select id="filter_city" class="form-select form-select-sm" style="width:auto"><option value="">Ciudad: Todas</option></select>
        <select id="filter_zone" class="form-select form-select-sm" style="width:auto"><option value="">Zona: Todas</option></select>
      </div>
    </div>
  </div>
  <div class="card-datatable table-responsive">
    <table class="table dt-riders border-top">
      <thead>
        <tr>
          <th></th>
          <th>Nombre</th>
          <th>Email</th>
          <th>Empresas</th>
          <th>Ciudades</th>
          <th>Zonas</th>
          <th>Acciones</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

<!-- Modal asignar zona -->
<div class="modal fade" id="assignZoneModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Asignar rider a zona</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <form id="assignZoneForm" class="p-0 m-0">
        <div class="modal-body">
          <input type="hidden" id="assign_rider_id">
          <div class="mb-3"><label class="form-label">Zona</label>
            <select id="assign_zone_id" class="form-select"></select>
          </div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button><button class="btn btn-primary" type="submit">Guardar</button></div>
      </form>
    </div>
  </div>
</div>
@endsection