{##
 # @file camiones_modal.html
 #}

<!-- START | CAMIONES MODAL -->
<div class="modal fade" id="camiones-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="camiones-modal-title">Agregar Vehículo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="camiones-modal-id" value="">

        <!-- Tabs -->
        <ul class="nav nav-tabs mb-3" id="camiones-modal-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="tab-datos-link" data-toggle="tab" href="#tab-datos" role="tab">
              <span class="fa fa-solid fa-truck mr-1"></span> Datos del Vehículo
            </a>
          </li>
          <li class="nav-item" id="tab-choferes-nav" style="display:none;">
            <a class="nav-link" id="tab-choferes-link" data-toggle="tab" href="#tab-choferes" role="tab">
              <span class="fa fa-solid fa-users mr-1"></span> Choferes Vinculados
            </a>
          </li>
        </ul>

        <div class="tab-content">
          <!-- TAB: Datos -->
          <div class="tab-pane fade show active" id="tab-datos" role="tabpanel">
            <form id="camiones-modal-form">
              <div class="form-group row">
                <label class="col-sm-3 col-form-label col-form-label-sm">
                  Patente / Dominio <span class="text-danger">*</span>
                </label>
                <div class="col-sm-4">
                  <input type="text" class="form-control form-control-sm" id="camiones-modal-dominio"
                         placeholder="Ej: ABC123" maxlength="20" style="text-transform: uppercase;">
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-3 col-form-label col-form-label-sm">Tipo</label>
                <div class="col-sm-4">
                  <select class="form-control form-control-sm" id="camiones-modal-tipo">
                    <option value="">— Sin especificar —</option>
                    <option value="pickup">Pick Up</option>
                    <option value="chasis">Chasis</option>
                    <option value="semi">Semi</option>
                    <option value="sider">Sider</option>
                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-3 col-form-label col-form-label-sm">Modelo</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control form-control-sm" id="camiones-modal-modelo"
                         placeholder="Ej: Scania R450, Mercedes Actros..." maxlength="80">
                </div>
              </div>
              <div class="form-group row" id="camiones-modal-remolque-row" style="display:none;">
                <label class="col-sm-3 col-form-label col-form-label-sm">
                  Dominio Remolque <span class="text-danger">*</span>
                </label>
                <div class="col-sm-4">
                  <input type="text" class="form-control form-control-sm" id="camiones-modal-remolque"
                         placeholder="Ej: REM001" maxlength="20" style="text-transform: uppercase;">
                </div>
              </div>
            </form>
          </div>

          <!-- TAB: Choferes -->
          <div class="tab-pane fade" id="tab-choferes" role="tabpanel">
            <div class="mb-2 d-flex align-items-center" style="gap: 6px;">
              <input type="text" class="form-control form-control-sm" id="camiones-choferes-search"
                     placeholder="Filtrar choferes..." style="max-width: 240px;">
              <small class="text-muted">Marcá los choferes que operan este vehículo</small>
            </div>
            <div id="camiones-choferes-loading" class="text-center py-3" style="display:none;">
              <span class="fa fa-spinner fa-spin mr-1"></span> Cargando choferes...
            </div>
            <div id="camiones-choferes-list" class="list-group" style="max-height: 320px; overflow-y: auto;">
              <!-- Items rendered by JS -->
            </div>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default border" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="camiones-modal-save">Guardar</button>
      </div>
    </div>
  </div>
</div>
<!-- END | CAMIONES MODAL -->