@extends('layouts.ownerLayout')

@section('title', 'Planificador de ruta')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/jkanban/jkanban.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
  'resources/assets/vendor/libs/notyf/notyf.scss'
])
@endsection

@section('page-style')
@vite('resources/assets/vendor/scss/pages/app-kanban.scss')
<style>
  .planner-filters .form-label { margin-bottom: .35rem; }
  .kanban-wrapper { overflow-x: auto; padding-bottom: .75rem; }
  .kanban-board header { min-height: 52px; }
  .serenata-kanban-card .btn-open-serenata-view { line-height: 1; }
  .planner-kpis .badge { font-size: .8rem; }
</style>
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/flatpickr/flatpickr.js',
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/jkanban/jkanban.js',
  'resources/assets/vendor/libs/notyf/notyf.js'
])
@endsection

@section('page-script')
@vite('resources/assets/js/owner-serenata-planner.js')
<script>
  window.__plannerDataUrl = @json(route('owner.serenatas.planner.data'));
  window.__plannerMoveUrl = @json(route('owner.serenatas.planner.move'));
  window.__plannerOptimizeUrl = @json(route('owner.serenatas.planner.optimize'));
  window.__plannerDefaults = {
    date: @json($defaultDate),
    cities: ['__all__'],
    mariachiKey: @json($defaultMariachiKey ?? ($mariachiOptions[0]['key'] ?? 'interno:todos'))
  };
</script>
@endsection

@section('content')
<div class="card mb-6">
  <div class="card-body">
    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-end gap-4 planner-filters">
      <div class="row g-4 w-100">
        <div class="col-12 col-md-4">
          <label class="form-label">Mariachi / Grupo</label>
          <select id="planner_mariachi" class="form-select">
            @foreach($mariachiOptions as $opt)
              <option value="{{ $opt['key'] }}">{{ $opt['label'] }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label">Ciudad</label>
          <select id="planner_city" class="form-select" multiple>
            <option value="__all__" selected>Todas las ciudades</option>
            @foreach($cityOptions as $city)
              <option value="{{ $city }}">{{ $city }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label">Fecha</label>
          <input type="text" id="planner_date" class="form-control" value="{{ $defaultDate }}">
        </div>
      </div>
      <div class="d-flex gap-2 w-100 w-lg-auto justify-content-end">
        <button type="button" id="btnPlannerLoad" class="btn btn-label-primary">Cargar</button>
        <button type="button" id="btnPlannerOptimize" class="btn btn-primary">Optimizar ruta</button>
      </div>
    </div>
    <div class="d-flex align-items-center gap-2 mt-4 planner-kpis" id="plannerMeta"></div>
  </div>
</div>

<div class="app-kanban">
  <div class="kanban-wrapper" id="plannerKanbanWrapper"></div>
</div>

<div class="modal fade" id="modalSerenataViewPlanner" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content border-0">
      <div class="modal-header">
        <h5 class="modal-title">Detalle de serenata</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <iframe id="plannerSerenataViewFrame" title="Detalle de serenata" class="w-100 border-0" style="height: calc(100vh - 64px);" src="about:blank"></iframe>
      </div>
    </div>
  </div>
</div>
@endsection
