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

@extends('layouts/layoutMaster')

@section('title', 'Organización')

@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', function(){
  const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  const citySupportModalEl = document.getElementById('citySupportModal');
  const citySupportForm = document.getElementById('citySupportForm');
  const citySupportList = document.getElementById('citySupportList');
  const citySupportCityId = document.getElementById('support_city_id');
  const companyTargetsWrapper = document.getElementById('company_targets');
  const cityTargetsWrapper = document.getElementById('city_targets');
  const zoneTargetsWrapper = document.getElementById('zone_targets');
  const statCompaniesEl = document.getElementById('stat_companies');
  const statCitiesEl = document.getElementById('stat_cities');
  const statZonesEl = document.getElementById('stat_zones');
  const companySearchInput = document.getElementById('search_companies');
  const organizationTabButtons = document.querySelectorAll('#organizationTabs [data-bs-toggle="tab"]');
  const companyCitiesContainer = document.getElementById('company_cities_list');
  const cityCompaniesContainer = document.getElementById('city_companies_list');
  const zoneCityContainer = document.getElementById('zone_city_list');
  const DEFAULT_TARGETS = @json($globalTargets ?? []);
  const defaultTargetMap = new Map(
    (DEFAULT_TARGETS || []).map(item => {
      const hours = Number(item.weekly_hours || item.weeklyHours || 0);
      const orders = Number(item.expected_orders_month || item.expectedOrdersMonth || 0);
      return [hours.toFixed(2), orders];
    })
  );
  const createDebounce = (fn, delay = 300) => {
    let timeout;
    return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(() => fn.apply(null, args), delay);
    };
  };
  const updateStatValue = (el, value) => {
    if (!el) return;
    const parsed = Number(value);
    el.textContent = Number.isFinite(parsed) && parsed >= 0 ? parsed.toLocaleString() : '0';
  };
  const bindTableCount = (dt, el) => {
    if (!dt || !el || typeof dt.on !== 'function') return;
    const refresh = () => {
      let total = 0;
      try {
        if (dt.page && typeof dt.page === 'function' && typeof dt.page().info === 'function') {
          const info = dt.page().info();
          total = info && Number.isFinite(info.recordsDisplay) ? info.recordsDisplay : (info && Number.isFinite(info.recordsTotal) ? info.recordsTotal : 0);
        } else if (typeof dt.page === 'function' && typeof dt.page.info === 'function') {
          const info = dt.page.info();
          total = info && Number.isFinite(info.recordsDisplay) ? info.recordsDisplay : (info && Number.isFinite(info.recordsTotal) ? info.recordsTotal : 0);
        } else if (dt.data && typeof dt.data === 'function') {
          const data = dt.data();
          total = typeof data.toArray === 'function' ? data.toArray().length : (Array.isArray(data) ? data.length : 0);
        }
      } catch (error) {
        // ignore - fallback to zero
      }
      updateStatValue(el, total);
    };
    dt.on('draw', refresh);
    dt.on('xhr', refresh);
    refresh();
  };
  const applyChipState = (chip, isActive) => {
    if (!chip) return;
    chip.classList.toggle('chip-selected', isActive);
    chip.classList.toggle('btn-primary', isActive);
    chip.classList.toggle('text-white', isActive);
    chip.classList.toggle('btn-outline-secondary', !isActive);
    chip.setAttribute('aria-pressed', isActive ? 'true' : 'false');
  };
  const ensureChipContainer = container => {
    if (!container || container.dataset.chipsBound) return;
    container.dataset.chipsBound = 'true';
    container.addEventListener('click', event => {
      const chip = event.target.closest('.chip-toggle');
      if (!chip || !container.contains(chip)) return;
      const multiple = container.dataset.chipsMultiple !== 'false';
      const isActive = chip.classList.contains('chip-selected');
      if (multiple) {
        applyChipState(chip, !isActive);
      } else {
        const newState = !isActive;
        container.querySelectorAll('.chip-toggle.chip-selected').forEach(other => {
          if (other !== chip) applyChipState(other, false);
        });
        applyChipState(chip, newState);
      }
    });
  };
  const renderChipList = (container, items, selectedIds = [], options = {}) => {
    if (!container) return;
    const { multiple = true, emptyMessage = 'No hay elementos disponibles.' } = options;
    container.dataset.chipsMultiple = multiple ? 'true' : 'false';
    ensureChipContainer(container);
    const normalizedIds = Array.isArray(selectedIds) ? selectedIds : (selectedIds == null ? [] : [selectedIds]);
    const selectedSet = new Set(normalizedIds.map(id => Number(id)).filter(Number.isFinite));
    if (!Array.isArray(items) || !items.length) {
      container.innerHTML = `<span class="text-muted small">${emptyMessage}</span>`;
      return;
    }
    container.innerHTML = '';
    items.forEach(item => {
      if (!item || typeof item.id === 'undefined') return;
      const chip = document.createElement('button');
      chip.type = 'button';
      chip.className = 'btn btn-sm chip-toggle btn-outline-secondary me-2 mb-2';
      chip.dataset.value = item.id;
      chip.textContent = item.name || `Ciudad ${item.id}`;
      applyChipState(chip, selectedSet.has(Number(item.id)));
      container.appendChild(chip);
    });
  };
  const getChipValues = container => {
    if (!container) return [];
    return Array.from(container.querySelectorAll('.chip-toggle.chip-selected'))
      .map(chip => Number(chip.dataset.value))
      .filter(Number.isFinite);
  };
  document.querySelectorAll('[data-trigger-click]').forEach(triggerBtn => {
    const selector = triggerBtn.getAttribute('data-trigger-click');
    if (!selector) return;
    triggerBtn.addEventListener('click', () => {
      const target = document.querySelector(selector);
      if (target) target.click();
    });
  });

  const toTargetMap = targets => {
    const map = new Map();
    (Array.isArray(targets) ? targets : []).forEach(item => {
      const hours = Number(item.weekly_hours ?? item.weeklyHours ?? 0);
      const orders = Number(item.expected_orders_month ?? item.expectedOrdersMonth ?? 0);
      if (!Number.isFinite(hours) || hours <= 0) return;
      if (!Number.isFinite(orders) || orders <= 0) return;
      map.set(hours.toFixed(2), orders);
    });
    return map;
  };

  const fillTargets = (wrapper, targets, useFallback = true) => {
    if (!wrapper) return;
    const map = toTargetMap(targets);
    const fallback = useFallback ? defaultTargetMap : new Map();
    wrapper.querySelectorAll('[data-target-hours]').forEach(input => {
      const hours = Number(input.dataset.targetHours || 0);
      if (!Number.isFinite(hours) || hours <= 0) {
        input.value = '';
        return;
      }
      const key = hours.toFixed(2);
      if (map.has(key)) {
        input.value = map.get(key);
      } else if (fallback.has(key)) {
        input.value = fallback.get(key);
      } else {
        input.value = '';
      }
    });
  };

  const collectTargets = wrapper => {
    if (!wrapper) return [];
    const items = [];
    wrapper.querySelectorAll('[data-target-hours]').forEach(input => {
      const hours = Number(input.dataset.targetHours || 0);
      const orders = Number(input.value);
      if (!Number.isFinite(hours) || hours <= 0) return;
      if (!Number.isFinite(orders) || orders <= 0) return;
      items.push({
        weekly_hours: Number(hours.toFixed(2)),
        expected_orders_month: Number(orders.toFixed(2)),
      });
    });
    return items;
  };

  function buildSupportRow(item) {
    const wrapper = document.createElement('div');
    wrapper.className = 'border rounded p-3 d-flex flex-column gap-3';
    wrapper.dataset.supportRow = 'true';
    wrapper.dataset.companyId = item.company_id;

    const heading = document.createElement('div');
    heading.className = 'd-flex justify-content-between align-items-center flex-wrap gap-2';
    const title = document.createElement('h6');
    title.className = 'mb-0';
    title.textContent = item.company_name;
    heading.appendChild(title);
    wrapper.appendChild(heading);

    const row = document.createElement('div');
    row.className = 'row g-3';

    const emailCol = document.createElement('div');
    emailCol.className = 'col-md-6';
    const emailLabel = document.createElement('label');
    emailLabel.className = 'form-label mb-1';
    emailLabel.textContent = 'Email de soporte';
    const emailInput = document.createElement('input');
    emailInput.type = 'email';
    emailInput.className = 'form-control';
    emailInput.name = 'support_email';
    emailInput.value = item.support_email || '';
    emailCol.appendChild(emailLabel);
    emailCol.appendChild(emailInput);

    const phoneCol = document.createElement('div');
    phoneCol.className = 'col-md-6';
    const phoneLabel = document.createElement('label');
    phoneLabel.className = 'form-label mb-1';
    phoneLabel.textContent = 'Teléfono de soporte';
    const phoneInput = document.createElement('input');
    phoneInput.type = 'text';
    phoneInput.className = 'form-control';
    phoneInput.name = 'support_phone';
    phoneInput.value = item.support_phone || '';
    phoneCol.appendChild(phoneLabel);
    phoneCol.appendChild(phoneInput);

    row.appendChild(emailCol);
    row.appendChild(phoneCol);
    wrapper.appendChild(row);

    return wrapper;
  }

  async function openCitySupportModal(cityId) {
    if (!citySupportModalEl || !citySupportList || !citySupportCityId) return;
    citySupportCityId.value = cityId;
    citySupportList.innerHTML = '<p class="text-muted mb-0">Cargando contactos...</p>';
    try {
      const res = await fetch(`{{ url('/admin/api/cities') }}/${cityId}/support`);
      if (!res.ok) throw new Error();
      const j = await res.json();
      const items = Array.isArray(j.data) ? j.data : [];
      citySupportList.innerHTML = '';
      if (!items.length) {
        citySupportList.innerHTML = '<p class="text-muted mb-0">Asocia la ciudad a alguna empresa antes de configurar el soporte.</p>';
      } else {
        items.forEach(item => citySupportList.appendChild(buildSupportRow(item)));
      }
      bootstrap.Modal.getOrCreateInstance(citySupportModalEl).show();
    } catch (e) {
      citySupportList.innerHTML = '<p class="text-danger mb-0">No se pudo cargar la información de soporte.</p>';
    }
  }

  if (citySupportForm) {
    citySupportForm.addEventListener('submit', async function(ev){
      ev.preventDefault();
      if (!citySupportCityId) return;
      const cityId = citySupportCityId.value;
      const rows = Array.from(citySupportList?.querySelectorAll('[data-support-row]') || []);
      const contacts = rows.map(row => ({
        company_id: parseInt(row.dataset.companyId, 10),
        support_email: row.querySelector('input[name="support_email"]').value.trim() || null,
        support_phone: row.querySelector('input[name="support_phone"]').value.trim() || null,
      })).filter(item => Number.isFinite(item.company_id));
      try {
        const res = await fetch(`{{ url('/admin/api/cities') }}/${cityId}/support`, {
          method: 'PUT',
          headers:{ 'Content-Type':'application/json','X-CSRF-TOKEN': csrf, 'Accept':'application/json' },
          body: JSON.stringify({ contacts })
        });
        if (!res.ok) throw new Error();
        bootstrap.Modal.getOrCreateInstance(citySupportModalEl).hide();
        dtCities && dtCities.ajax.reload(null,false);
      } catch (error) {
        alert('No se pudo guardar el contacto de soporte.');
      }
    });
  }
  // Toolbar options
  const fc = document.getElementById('filter_company');
  const fcities = document.getElementById('filter_company_cities');
  const fcity = document.getElementById('filter_city');
  const factive = document.getElementById('filter_active');

  async function loadCompanies(){
    const res = await fetch(`{{ url('/admin/api/companies') }}`); const j = await res.json();
    const list = j.data || [];
    if (fc) { fc.innerHTML = '<option value=\"\">Empresa: Todas</option>'; list.forEach(c=>{ const o=document.createElement('option'); o.value=c.id; o.textContent=c.name; fc.appendChild(o); }); }
    if (fcities) { fcities.innerHTML = '<option value=\"\">Empresa: Todas</option>'; list.forEach(c=>{ const o=document.createElement('option'); o.value=c.id; o.textContent=c.name; fcities.appendChild(o); }); }
  }
  async function fetchCities(companyId){
    const url = new URL(`{{ url('/admin/api/cities') }}`);
    if (companyId) url.searchParams.set('company_id', companyId);
    const res = await fetch(url); const j = await res.json();
    return j.data || [];
  }
  async function loadCities(companyId){
    fcity.innerHTML = '<option value="">Todas</option>';
    const items = await fetchCities(companyId);
    items.forEach(c=>{ const o=document.createElement('option'); o.value=c.id; o.textContent=c.name; fcity.appendChild(o); });
  }
  async function renderZoneCityChips(companyId, selectedId){
    if (!zoneCityContainer) return;
    const items = await fetchCities(companyId);
    const selected = selectedId ? [Number(selectedId)] : [];
    renderChipList(zoneCityContainer, items, selected, { multiple: false, emptyMessage: 'No hay ciudades disponibles.' });
  }
  loadCompanies();
  loadCities('');

  // Companies DT
  const elC = document.querySelector('.dt-companies');
  const dtCompanies = elC ? new DataTable(elC, {
    ajax: '{{ url('/admin/api/companies') }}',
    columns: [
      { data: 'id' },
      { data: 'name' },
      { data: 'cities_count' },
      { data: 'id' }
    ],
    columnDefs: [
      { className: 'control', orderable:false, searchable:false, targets:0, render: () => '' },
      { targets:3, orderable:false, searchable:false, render: (id)=> `<button class=\"btn btn-text-secondary rounded-pill btn-icon edit-company\" data-id=\"${id}\" title=\"Editar\"><i class=\"icon-base ti tabler-edit icon-22px\"></i></button>` }
    ],
    order: [[1,'asc']]
  }) : null;

  if (dtCompanies && companySearchInput && typeof dtCompanies.search === 'function') {
    const runCompanySearch = createDebounce(query => {
      dtCompanies.search(query || '').draw();
    }, 250);
    companySearchInput.addEventListener('input', event => {
      runCompanySearch(event.target.value);
    });
  }

  bindTableCount(dtCompanies, statCompaniesEl);

  // Edit company handler
  if (elC) {
    elC.addEventListener('click', async function(ev){
      const btn = ev.target.closest('.edit-company');
      if (!btn) return;
      const row = dtCompanies.row(btn.closest('tr')).data();
      const f = document.getElementById('companyForm');
      if (!f) return;
      f.reset();
      f.dataset.id = row.id;
      f.name.value = row.name || '';
      f.tax_id.value = row.tax_id || '';
      f.support_email.value = row.support_email || '';
      f.support_phone.value = row.support_phone || '';
      document.getElementById('company_active').checked = !!row.active;
      const items = await fetchCities('');
      const selectedIds = Array.isArray(row.city_ids) ? row.city_ids.map(Number) : [];
      renderChipList(companyCitiesContainer, items, selectedIds, { emptyMessage: 'No hay ciudades disponibles.' });
      fillTargets(companyTargetsWrapper, Array.isArray(row.targets) ? row.targets : null, true);
      bootstrap.Modal.getOrCreateInstance(document.getElementById('companyModal')).show();
    });
  }

  // Zones DT
  const elZ = document.querySelector('.dt-zones');
  const fzq = document.getElementById('filter_zone_q');
  const dtZones = elZ ? new DataTable(elZ, {
    ajax: {
      url: '{{ url('/admin/api/zones') }}',
      data: function(d){
        d.company_id = fc.value || '';
        d.city_id = fcity.value || '';
        d.active = factive.value || '';
        d.q = fzq ? fzq.value : '';
      }
    },
    columns: [
      { data: 'id' },
      { data: 'name' },
      { data: 'city' },
      { data: 'companies' },
      { data: 'active' },
      { data: 'id' }
    ],
    columnDefs: [
      { className: 'control', orderable:false, searchable:false, targets:0, render: () => '' },
      { targets:3, orderable:false, render: (data)=> (data||[]).map(n=>`<span class="badge bg-label-secondary me-1">${n}</span>`).join('') },
      { targets:4, render: (v)=> {
          const checked = v ? 'checked' : '';
          return `<div class="form-check form-switch"><input type="checkbox" class="form-check-input zone-toggle" ${checked} /></div>`;
        }
      },
      { targets:5, orderable:false, searchable:false, render: (id)=> `<button class="btn btn-text-secondary rounded-pill btn-icon edit-zone" data-id="${id}" title="Editar"><i class="icon-base ti tabler-edit icon-22px"></i></button>` }
    ],
    order: [[1,'asc']]
  }) : null;

  bindTableCount(dtZones, statZonesEl);

  const reloadZones = () => { dtZones && dtZones.ajax.reload(null, false); };
  [fc, fcity, factive].forEach(sel => sel && sel.addEventListener('change', reloadZones));
  if (fzq) fzq.addEventListener('input', createDebounce(reloadZones, 300));

  // Toggle zone active
  if (elZ) {
    elZ.addEventListener('change', async function(ev){
      const cb = ev.target.closest('.zone-toggle');
      if (!cb) return;
      const row = cb.closest('tr');
      const id = dtZones.row(row).data().id;
      const res = await fetch(`{{ url('/admin/api/zones') }}/${id}/toggle`, { method:'PATCH', headers: { 'X-CSRF-TOKEN': csrf, 'Accept':'application/json' } });
      if (!res.ok) { alert('No se pudo actualizar'); dtZones.ajax.reload(null,false); }
    });
    elZ.addEventListener('click', async function(ev){
      const btn = ev.target.closest('.edit-zone');
      if (!btn) return;
      const id = btn.getAttribute('data-id');
      // Prefill modal with row data
      const row = dtZones.row(btn.closest('tr')).data();
      document.getElementById('zone_id').value = id;
      document.getElementById('zone_name').value = row.name;
      document.getElementById('zone_support_email').value = row.support_email || '';
      document.getElementById('zone_support_phone').value = row.support_phone || '';
      await renderZoneCityChips(fc.value || '', row.city_id);
      document.getElementById('zone_active').checked = !!row.active;
      fillTargets(zoneTargetsWrapper, Array.isArray(row.targets) ? row.targets : null, true);
      bootstrap.Modal.getOrCreateInstance(document.getElementById('zoneModal')).show();
    });
  }

  // Create company
  const btnNewCompany = document.getElementById('btnNewCompany');
  if (btnNewCompany) {
    btnNewCompany.addEventListener('click', async function(){
      const f = document.getElementById('companyForm');
      f.reset(); f.dataset.id = '';
      f.support_email.value = '';
      f.support_phone.value = '';
      fillTargets(companyTargetsWrapper, null, true);
      const items = await fetchCities('');
      renderChipList(companyCitiesContainer, items, [], { emptyMessage: 'No hay ciudades disponibles.' });
      bootstrap.Modal.getOrCreateInstance(document.getElementById('companyModal')).show();
    });
  }
  // Save company
  const companyForm = document.getElementById('companyForm');
  if (companyForm) {
    companyForm.addEventListener('submit', async function(ev){
      ev.preventDefault();
      const id = companyForm.dataset.id;
      const city_ids = getChipValues(companyCitiesContainer);
      const targets = collectTargets(companyTargetsWrapper);
      const payload = {
        name: companyForm.name.value,
        tax_id: companyForm.tax_id.value,
        support_email: companyForm.support_email.value.trim() || null,
        support_phone: companyForm.support_phone.value.trim() || null,
        active: companyForm.active.checked ? 1 : 0,
        city_ids,
        performance_targets: targets
      };
      const url = id ? `{{ url('/admin/api/companies') }}/${id}` : `{{ url('/admin/api/companies') }}`;
      const method = id ? 'PUT' : 'POST';
      const res = await fetch(url, { method, headers:{ 'Content-Type':'application/json','X-CSRF-TOKEN': csrf, 'Accept':'application/json' }, body: JSON.stringify(payload) });
      if (!res.ok) { alert('Error al guardar empresa'); return; }
      bootstrap.Modal.getOrCreateInstance(document.getElementById('companyModal')).hide();
      dtCompanies && dtCompanies.ajax.reload(null,false);
      await loadCompanies();
    });
  }

  // Cities DT
  const elCity = document.querySelector('.dt-cities');
  const fcityq = document.getElementById('filter_city_q');
  const dtCities = elCity ? new DataTable(elCity, {
    ajax: {
      url: '{{ url('/admin/api/cities') }}',
      data: function(d){ d.company_id = (fcities && fcities.value) ? fcities.value : ''; d.q = fcityq ? fcityq.value : ''; }
    },
    columns: [
      { data: 'id' },
      { data: 'name' },
      { data: 'country_code' },
      { data: 'companies' },
      { data: 'zones_count' },
      { data: 'active' },
      { data: 'id' }
    ],
    columnDefs: [
      { className: 'control', orderable:false, searchable:false, targets:0, render: () => '' },
      { targets:3, orderable:false, render: (data)=> (data||[]).map(n=>`<span class="badge bg-label-secondary me-1">${n}</span>`).join('') },
      { targets:5, render: (v)=> `<div class=\"form-check form-switch\"><input type=\"checkbox\" class=\"form-check-input city-toggle\" ${v?'checked':''} /></div>` },
      { targets:6, orderable:false, searchable:false, render: (id)=> `
        <div class=\"d-flex gap-1\">
          <button class=\"btn btn-text-secondary rounded-pill btn-icon support-city\" data-id=\"${id}\" title=\"Contacto de soporte\"><i class=\"icon-base ti tabler-headset icon-22px\"></i></button>
          <button class=\"btn btn-text-secondary rounded-pill btn-icon edit-city\" data-id=\"${id}\" title=\"Editar\"><i class=\"icon-base ti tabler-edit icon-22px\"></i></button>
        </div>` }
    ],
    order: [[1,'asc']]
  }) : null;

  bindTableCount(dtCities, statCitiesEl);

  if (elCity) {
    elCity.addEventListener('change', async function(ev){
      const cb = ev.target.closest('.city-toggle');
      if (!cb) return;
      const id = dtCities.row(cb.closest('tr')).data().id;
      const res = await fetch(`{{ url('/admin/api/cities') }}/${id}/toggle`, { method:'PATCH', headers:{ 'X-CSRF-TOKEN': csrf, 'Accept':'application/json' } });
      if (!res.ok) { alert('No se pudo actualizar'); dtCities.ajax.reload(null,false); }
    });
    elCity.addEventListener('click', async function(ev){
      const supportBtn = ev.target.closest('.support-city');
      if (supportBtn) {
        const id = supportBtn.getAttribute('data-id');
        if (id) {
          await openCitySupportModal(id);
        }
        return;
      }

      const btn = ev.target.closest('.edit-city');
      if (!btn) return;
      const row = dtCities.row(btn.closest('tr')).data();
      document.getElementById('city_id').value = row.id;
      document.getElementById('city_name').value = row.name;
      document.getElementById('city_country_code').value = row.country_code || 'ES';
      document.getElementById('city_active').checked = !!row.active;
      fillTargets(cityTargetsWrapper, Array.isArray(row.targets) ? row.targets : null, true);
      // Load companies for chip selector
      const res = await fetch(`{{ url('/admin/api/companies') }}`);
      const j = await res.json();
      const selectedIds = Array.isArray(row.company_ids) ? row.company_ids.map(Number) : [];
      renderChipList(cityCompaniesContainer, j.data || [], selectedIds, { emptyMessage: 'No hay empresas disponibles.' });
      bootstrap.Modal.getOrCreateInstance(document.getElementById('cityModal')).show();
    });
  }

  const reloadCities = () => { dtCities && dtCities.ajax.reload(null, false); };
  [fcities].forEach(sel => sel && sel.addEventListener('change', reloadCities));
  if (fcityq) fcityq.addEventListener('input', createDebounce(reloadCities, 300));

  // New city
  const btnNewCity = document.getElementById('btnNewCity');
  if (btnNewCity) {
    btnNewCity.addEventListener('click', async function(){
      const f = document.getElementById('cityForm');
      f.reset();
      document.getElementById('city_id').value = '';
      fillTargets(cityTargetsWrapper, null, true);
      const res = await fetch(`{{ url('/admin/api/companies') }}`);
      const j = await res.json();
      renderChipList(cityCompaniesContainer, j.data || [], [], { emptyMessage: 'No hay empresas disponibles.' });
      bootstrap.Modal.getOrCreateInstance(document.getElementById('cityModal')).show();
    });
  }
  const cityForm = document.getElementById('cityForm');
  if (cityForm) {
    cityForm.addEventListener('submit', async function(ev){
      ev.preventDefault();
      const id = document.getElementById('city_id').value;
      const company_ids = getChipValues(cityCompaniesContainer);
      const targets = collectTargets(cityTargetsWrapper);
      const payload = {
        name: document.getElementById('city_name').value,
        country_code: document.getElementById('city_country_code').value,
        active: document.getElementById('city_active').checked ? 1 : 0,
        company_ids,
        performance_targets: targets
      };
      const url = id ? `{{ url('/admin/api/cities') }}/${id}` : `{{ url('/admin/api/cities') }}`;
      const method = id ? 'PUT' : 'POST';
      const res = await fetch(url, { method, headers:{ 'Content-Type':'application/json','X-CSRF-TOKEN': csrf, 'Accept':'application/json' }, body: JSON.stringify(payload) });
      if (!res.ok) { alert('Error al guardar ciudad'); return; }
      bootstrap.Modal.getOrCreateInstance(document.getElementById('cityModal')).hide();
      dtCities && dtCities.ajax.reload(null,false);
      loadCities(fc.value || '');
    });
  }
  // New zone
  const btnNewZone = document.getElementById('btnNewZone');
  if (btnNewZone) {
    btnNewZone.addEventListener('click', async function(){
      const f = document.getElementById('zoneForm');
      f.reset();
      document.getElementById('zone_id').value = '';
      fillTargets(zoneTargetsWrapper, null, true);
      await renderZoneCityChips(fc.value || '', null);
      bootstrap.Modal.getOrCreateInstance(document.getElementById('zoneModal')).show();
    });
  }
  // Save zone
  const zoneForm = document.getElementById('zoneForm');
  if (zoneForm) {
    zoneForm.addEventListener('submit', async function(ev){
      ev.preventDefault();
      const id = document.getElementById('zone_id').value;
      const targets = collectTargets(zoneTargetsWrapper);
      const selectedCityIds = getChipValues(zoneCityContainer);
      const city_id = selectedCityIds.length ? selectedCityIds[0] : null;
      if (!city_id) { alert('Selecciona una ciudad para la zona.'); return; }
      const payload = {
        name: zoneForm.name.value,
        city_id,
        support_email: zoneForm.support_email.value.trim() || null,
        support_phone: zoneForm.support_phone.value.trim() || null,
        active: zoneForm.active.checked ? 1 : 0,
        performance_targets: targets
      };
      const url = id ? `{{ url('/admin/api/zones') }}/${id}` : `{{ url('/admin/api/zones') }}`;
      const method = id ? 'PUT' : 'POST';
      const res = await fetch(url, { method, headers:{ 'Content-Type':'application/json','X-CSRF-TOKEN': csrf, 'Accept':'application/json' }, body: JSON.stringify(payload) });
      if (!res.ok) { alert('Error al guardar zona'); return; }
      bootstrap.Modal.getOrCreateInstance(document.getElementById('zoneModal')).hide();
      dtZones && dtZones.ajax.reload(null,false);
    });
  }

  const adjustTableLayout = () => {
    try {
      DataTable.tables({ api: true }).columns.adjust().draw(false);
    } catch (error) {
      // ignore layout errors silently
    }
  };
  organizationTabButtons.forEach(btn => {
    btn.addEventListener('shown.bs.tab', () => {
      setTimeout(adjustTableLayout, 120);
    });
  });
  setTimeout(adjustTableLayout, 320);
});
</script>
@endsection

@section('content')
<div class="row g-4 mb-4">
  <div class="col-12">
    <div class="card border-0 shadow-sm text-white position-relative overflow-hidden" style="background: linear-gradient(135deg, #1e7dd6 0%, #5b36ff 100%);">
      <div class="card-body p-4 p-lg-5 position-relative">
        <div class="row g-4 align-items-center">
          <div class="col-lg-8">
            <span class="badge bg-white text-primary fw-semibold d-inline-flex align-items-center gap-2 px-3 py-2 mb-3">
              <i class="ti tabler-settings-cog icon-16px"></i>
              Centro de organización
            </span>
            <h4 class="text-white mb-2">Orquesta empresas, ciudades y zonas de forma intuitiva</h4>
            <p class="text-white-50 mb-0">Activa filtros rápidos, visualiza totales y lanza acciones sin perder de vista el contexto.</p>
          </div>
          <div class="col-lg-4 text-lg-end">
            <div class="d-flex flex-wrap justify-content-lg-end gap-2">
              <button class="btn btn-light text-primary fw-semibold" data-trigger-click="#btnNewCompany">
                <i class="ti tabler-building-plus icon-18px me-1"></i> Nueva empresa
              </button>
              <button class="btn btn-outline-light" data-trigger-click="#btnNewCity">
                <i class="ti tabler-map-pin-plus icon-18px me-1"></i> Nueva ciudad
              </button>
              <button class="btn btn-outline-light" data-trigger-click="#btnNewZone">
                <i class="ti tabler-current-location icon-18px me-1"></i> Nueva zona
              </button>
            </div>
          </div>
        </div>
      </div>
      <span class="position-absolute top-0 end-0 rounded-circle" style="width: 240px; height: 240px; background: radial-gradient(circle at center, rgba(255,255,255,0.45) 0, rgba(255,255,255,0) 70%); transform: translate(25%, -35%);"></span>
    </div>
  </div>
</div>

<div class="row g-4 mb-4">
  <div class="col-md-4 col-sm-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-label-primary text-primary d-flex align-items-center justify-content-center flex-shrink-0" style="width:48px;height:48px;">
          <i class="ti tabler-building icon-28px"></i>
        </div>
        <div>
          <small class="text-muted text-uppercase fw-semibold">Empresas visibles</small>
          <h4 class="mb-0" id="stat_companies">0</h4>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-label-success text-success d-flex align-items-center justify-content-center flex-shrink-0" style="width:48px;height:48px;">
          <i class="ti tabler-building-community icon-28px"></i>
        </div>
        <div>
          <small class="text-muted text-uppercase fw-semibold">Ciudades activas</small>
          <h4 class="mb-0" id="stat_cities">0</h4>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-label-info text-info d-flex align-items-center justify-content-center flex-shrink-0" style="width:48px;height:48px;">
          <i class="ti tabler-current-location icon-28px"></i>
        </div>
        <div>
          <small class="text-muted text-uppercase fw-semibold">Zonas operativas</small>
          <h4 class="mb-0" id="stat_zones">0</h4>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card border-0 shadow-sm mb-5">
  <div class="card-header border-bottom-0 pb-0">
    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
      <div>
        <h5 class="mb-1">Explora tu organización</h5>
        <p class="text-muted mb-0">Cambia de pestaña para gestionar cada nivel con sus filtros y acciones específicos.</p>
      </div>
      <ul class="nav nav-pills flex-wrap gap-2" id="organizationTabs" role="tablist">
        <li class="nav-item" role="presentation">
          <button type="button" class="nav-link active d-flex align-items-center gap-2" data-bs-toggle="tab" data-bs-target="#tab-companies" role="tab" aria-selected="true">
            <i class="ti tabler-building-bank icon-18px"></i>
            <span>Empresas</span>
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button type="button" class="nav-link d-flex align-items-center gap-2" data-bs-toggle="tab" data-bs-target="#tab-cities" role="tab" aria-selected="false">
            <i class="ti tabler-building-community icon-18px"></i>
            <span>Ciudades</span>
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button type="button" class="nav-link d-flex align-items-center gap-2" data-bs-toggle="tab" data-bs-target="#tab-zones" role="tab" aria-selected="false">
            <i class="ti tabler-current-location icon-18px"></i>
            <span>Zonas</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="tab-content" id="organizationTabsContent">
      <div class="tab-pane fade show active" id="tab-companies" role="tabpanel">
        <div class="px-4 pt-4 pb-2 border-bottom">
          <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
            <div>
              <h6 class="mb-1">Empresas conectadas</h6>
              <p class="text-muted mb-0 small">Configura datos fiscales, contactos de soporte y objetivos globales.</p>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-2">
              <div class="input-group input-group-sm" style="max-width: 240px;">
                <span class="input-group-text bg-transparent border-end-0 text-muted"><i class="ti tabler-search icon-16px"></i></span>
                <input type="search" id="search_companies" class="form-control border-start-0 ps-0" placeholder="Buscar empresa...">
              </div>
              <button id="btnNewCompany" class="btn btn-sm btn-primary">
                <i class="ti tabler-building-plus icon-16px me-1"></i> Nueva empresa
              </button>
            </div>
          </div>
        </div>
        <div class="table-responsive px-4 pb-4">
          <table class="table align-middle table-hover dt-companies">
            <thead class="table-light">
              <tr>
                <th></th>
                <th>Nombre</th>
                <th>Ciudades</th>
                <th>Acciones</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="tab-pane fade" id="tab-cities" role="tabpanel">
        <div class="px-4 pt-4 pb-2 border-bottom">
          <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
            <div>
              <h6 class="mb-1">Ciudades operativas</h6>
              <p class="text-muted mb-0 small">Asocia empresas, define objetivos y gestiona el soporte local.</p>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-2">
              <div class="input-group input-group-sm" style="max-width: 240px;">
                <span class="input-group-text bg-transparent border-end-0 text-muted"><i class="ti tabler-search icon-16px"></i></span>
                <input id="filter_city_q" type="search" class="form-control border-start-0 ps-0" placeholder="Buscar ciudad...">
              </div>
              <select id="filter_company" class="form-select form-select-sm" style="min-width: 180px;">
                <option value="">Empresa: Todas</option>
              </select>
              <button id="btnNewCity" class="btn btn-sm btn-primary">
                <i class="ti tabler-map-pin-plus icon-16px me-1"></i> Nueva ciudad
              </button>
            </div>
          </div>
        </div>
        <div class="table-responsive px-4 pb-4">
          <table class="table align-middle table-hover dt-cities">
            <thead class="table-light">
              <tr>
                <th></th>
                <th>Ciudad</th>
                <th>País</th>
                <th>Empresas</th>
                <th>Zonas</th>
                <th>Estado</th>
                <th>Acciones</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="tab-pane fade" id="tab-zones" role="tabpanel">
        <div class="px-4 pt-4 pb-2 border-bottom">
          <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
            <div>
              <h6 class="mb-1">Zonas detalladas</h6>
              <p class="text-muted mb-0 small">Filtra por empresa, ciudad o estado y ajusta objetivos específicos.</p>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-2">
              <div class="input-group input-group-sm" style="max-width: 220px;">
                <span class="input-group-text bg-transparent border-end-0 text-muted"><i class="ti tabler-search icon-16px"></i></span>
                <input id="filter_zone_q" type="search" class="form-control border-start-0 ps-0" placeholder="Buscar zona...">
              </div>
              <select id="filter_company_cities" class="form-select form-select-sm" style="min-width: 180px;">
                <option value="">Empresa: Todas</option>
              </select>
              <select id="filter_city" class="form-select form-select-sm" style="min-width: 180px;">
                <option value="">Ciudad: Todas</option>
              </select>
              <select id="filter_active" class="form-select form-select-sm" style="min-width: 150px;">
                <option value="">Estado: Todos</option>
                <option value="1">Activa</option>
                <option value="0">Inactiva</option>
              </select>
              <button id="btnNewZone" class="btn btn-sm btn-primary">
                <i class="ti tabler-current-location icon-16px me-1"></i> Nueva zona
              </button>
            </div>
          </div>
        </div>
        <div class="table-responsive px-4 pb-4">
          <table class="table align-middle table-hover dt-zones">
            <thead class="table-light">
              <tr>
                <th></th>
                <th>Zona</th>
                <th>Ciudad</th>
                <th>Empresas</th>
                <th>Estado</th>
                <th>Acciones</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- City Modal -->
<div class="modal fade" id="cityModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <h5 class="modal-title mb-0">Ciudad</h5>
          <small class="text-muted">Edita los datos básicos, los objetivos y las empresas asociadas.</small>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="cityForm" class="p-0 m-0">
        <div class="modal-body">
          <input type="hidden" id="city_id">
          <div class="row g-3">
            <div class="col-md-8">
              <label class="form-label">Nombre</label>
              <input type="text" class="form-control" id="city_name" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Código país (ISO-2)</label>
              <input type="text" class="form-control" id="city_country_code" value="ES" maxlength="2">
            </div>
          </div>
          <div class="mt-4 border rounded-3 p-3">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-2">
              <div>
                <label class="form-label mb-1">Objetivos de pedidos mensuales</label>
                <p class="text-muted small mb-0">Los valores definidos aquí sustituyen los objetivos de la empresa. Deja vacío para heredar.</p>
              </div>
              <span class="badge bg-label-success text-success">Ciudad</span>
            </div>
            <div id="city_targets" class="row g-2">
              <div class="col-md-4">
                <label class="form-label small mb-1">Contrato 40h</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text">40h</span>
                  <input type="number" min="0" step="1" class="form-control" data-target-hours="40" placeholder="484">
                  <span class="input-group-text">ped.</span>
                </div>
              </div>
              <div class="col-md-4">
                <label class="form-label small mb-1">Contrato 30h</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text">30h</span>
                  <input type="number" min="0" step="1" class="form-control" data-target-hours="30" placeholder="365">
                  <span class="input-group-text">ped.</span>
                </div>
              </div>
              <div class="col-md-4">
                <label class="form-label small mb-1">Contrato 20h</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text">20h</span>
                  <input type="number" min="0" step="1" class="form-control" data-target-hours="20" placeholder="275">
                  <span class="input-group-text">ped.</span>
                </div>
              </div>
            </div>
            <small class="text-muted">Si dejas un campo vacío se aplicará el objetivo de la empresa o global.</small>
          </div>
          <div class="mt-4">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-1">
              <label class="form-label mb-0">Empresas asociadas</label>
              <small class="text-muted">Activa las empresas que operan en esta ciudad.</small>
            </div>
            <div id="city_companies_list" class="d-flex flex-wrap gap-2 p-2 border rounded-3 bg-body-tertiary"></div>
            <small class="text-muted d-block mt-1">Puedes dejarlo vacío si aún no asignas empresas.</small>
          </div>
          <div class="form-check form-switch mt-3">
            <input class="form-check-input" type="checkbox" id="city_active" checked>
            <label class="form-check-label" for="city_active">Ciudad activa</label>
          </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>

<!-- City Support Modal -->
<div class="modal fade" id="citySupportModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <h5 class="modal-title mb-0">Contacto de soporte por empresa</h5>
          <small class="text-muted">Personaliza los datos que verán los riders según la empresa asociada a la ciudad.</small>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="citySupportForm" class="p-0 m-0">
        <input type="hidden" id="support_city_id">
        <div class="modal-body">
          <p class="text-muted small mb-3">Actualiza únicamente los campos necesarios; los valores vacíos heredarán los datos de la empresa.</p>
          <div id="citySupportList" class="d-flex flex-column gap-3"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-primary">Guardar cambios</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Company Modal -->
<div class="modal fade" id="companyModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <h5 class="modal-title mb-0">Empresa</h5>
          <small class="text-muted">Define los datos generales y los objetivos globales.</small>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="companyForm" class="p-0 m-0">
        <div class="modal-body">
          <input type="hidden" name="id">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Nombre</label>
              <input type="text" class="form-control" name="name" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">CIF/NIF</label>
              <input type="text" class="form-control" name="tax_id">
            </div>
            <div class="col-md-6">
              <label class="form-label">Email de soporte</label>
              <input type="email" class="form-control" name="support_email" placeholder="ej. soporte@empresa.com">
            </div>
            <div class="col-md-6">
              <label class="form-label">Teléfono de soporte</label>
              <input type="text" class="form-control" name="support_phone" placeholder="ej. +34 600 000 000">
            </div>
          </div>
          <div class="mt-4 border rounded-3 p-3">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-2">
              <div>
                <label class="form-label mb-1">Objetivos de pedidos mensuales</label>
                <p class="text-muted small mb-0">Personaliza las expectativas de pedidos por tipo de contrato. Los campos vacíos heredarán el objetivo global.</p>
              </div>
              <span class="badge bg-label-primary text-primary">Global</span>
            </div>
            <div id="company_targets" class="row g-2">
              <div class="col-md-4">
                <label class="form-label small mb-1">Contrato 40h</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text">40h</span>
                  <input type="number" min="0" step="1" class="form-control" data-target-hours="40" placeholder="484">
                  <span class="input-group-text">ped.</span>
                </div>
              </div>
              <div class="col-md-4">
                <label class="form-label small mb-1">Contrato 30h</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text">30h</span>
                  <input type="number" min="0" step="1" class="form-control" data-target-hours="30" placeholder="365">
                  <span class="input-group-text">ped.</span>
                </div>
              </div>
              <div class="col-md-4">
                <label class="form-label small mb-1">Contrato 20h</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text">20h</span>
                  <input type="number" min="0" step="1" class="form-control" data-target-hours="20" placeholder="275">
                  <span class="input-group-text">ped.</span>
                </div>
              </div>
            </div>
          </div>
          <div class="mt-4">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-1">
              <label class="form-label mb-0">Ciudades vinculadas</label>
              <small class="text-muted">Pulsa para activar o desactivar cada ciudad.</small>
            </div>
            <div id="company_cities_list" class="d-flex flex-wrap gap-2 p-2 border rounded-3 bg-body-tertiary"></div>
            <small class="text-muted d-block mt-1">Los cambios se guardarán al confirmar la empresa.</small>
          </div>
          <div class="form-check form-switch mt-3">
            <input class="form-check-input" type="checkbox" name="active" id="company_active" checked>
            <label class="form-check-label" for="company_active">Empresa activa</label>
          </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>

<div class="modal fade" id="zoneModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <h5 class="modal-title mb-0">Zona</h5>
          <small class="text-muted">Define objetivos específicos y el soporte directo para la zona.</small>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="zoneForm" class="p-0 m-0">
        <div class="modal-body">
          <input type="hidden" id="zone_id">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Nombre</label>
              <input type="text" class="form-control" id="zone_name" name="name" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Ciudad</label>
              <div id="zone_city_list" class="d-flex flex-wrap gap-2 p-2 border rounded-3 bg-body-tertiary"></div>
              <small class="text-muted d-block mt-1">Selecciona una única ciudad para asignar la zona.</small>
            </div>
            <div class="col-md-6">
              <label class="form-label">Email de soporte</label>
              <input type="email" class="form-control" id="zone_support_email" name="support_email" placeholder="ej. zonas@empresa.com">
            </div>
            <div class="col-md-6">
              <label class="form-label">Teléfono de soporte</label>
              <input type="text" class="form-control" id="zone_support_phone" name="support_phone" placeholder="ej. +34 600 123 123">
            </div>
          </div>
          <div class="mt-4 border rounded-3 p-3">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-2">
              <div>
                <label class="form-label mb-1">Objetivos de pedidos mensuales</label>
                <p class="text-muted small mb-0">Tiene prioridad sobre ciudad, empresa y objetivos globales. Deja vacío para heredar.</p>
              </div>
              <span class="badge bg-label-info text-info">Zona</span>
            </div>
            <div id="zone_targets" class="row g-2">
              <div class="col-md-4">
                <label class="form-label small mb-1">Contrato 40h</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text">40h</span>
                  <input type="number" min="0" step="1" class="form-control" data-target-hours="40" placeholder="484">
                  <span class="input-group-text">ped.</span>
                </div>
              </div>
              <div class="col-md-4">
                <label class="form-label small mb-1">Contrato 30h</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text">30h</span>
                  <input type="number" min="0" step="1" class="form-control" data-target-hours="30" placeholder="365">
                  <span class="input-group-text">ped.</span>
                </div>
              </div>
              <div class="col-md-4">
                <label class="form-label small mb-1">Contrato 20h</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text">20h</span>
                  <input type="number" min="0" step="1" class="form-control" data-target-hours="20" placeholder="275">
                  <span class="input-group-text">ped.</span>
                </div>
              </div>
            </div>
          </div>
          <div class="form-check form-switch mt-3">
            <input class="form-check-input" type="checkbox" id="zone_active" name="active" checked>
            <label class="form-check-label" for="zone_active">Zona activa</label>
          </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