{##
# @file orders_carrier_modal.html
# Copyright (C) 2015 Pressa. All rights reserved.
#}

<!-- START | DASHBOARD/ORDERS_CARRIER/MODAL -->
<div id="orders-carrier-modal" class="modal fade" role="dialog" data-backdrop="static">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2 bg-info text-white">
        <h4 class="modal-title" id="orders-carrier-modal-title">
        </h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="form-horizontal needs-validation" id="orders-carrier-modal-form">
          <div class="modal-subtitle">
            <span class="fa fa-solid fa-truck-plane modal-subtitle-icon" aria-hidden="true"></span>
            {{ lang['dashboard']['orders']['modal']['order_carrrier_title'] }}
          </div>
          <!-- Toggle: Crear nueva empresa o seleccionar existente -->
          <div class="form-group row pl-4">
            <label class="col-sm-3 col-form-label col-form-label-sm"></label>
            <div class="col-sm-7">
              <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                <label class="btn btn-outline-info btn-sm active" id="carrier-toggle-existing-label">
                  <input type="radio" name="carrier-mode" id="carrier-mode-existing" value="existing" checked>
                  <i class="fa fa-building mr-1"></i> Seleccionar empresa existente
                </label>
                <label class="btn btn-outline-info btn-sm" id="carrier-toggle-new-label">
                  <input type="radio" name="carrier-mode" id="carrier-mode-new" value="new">
                  <i class="fa fa-plus-circle mr-1"></i> Crear nueva empresa
                </label>
              </div>
            </div>
          </div>

          <!-- Select empresa existente (visible por defecto) -->
          <div class="form-group row pl-4" id="carrier-existing-select-group">
            <label class="col-sm-3 col-form-label col-form-label-sm">Empresa</label>
            <div class="col-sm-5">
              <select class="form-control form-control-sm selectpicker border border-secondary" data-width="100%"
                data-live-search="true" data-size="6" data-style="text-dark"
                data-placeholder="Buscar empresa..."
                title="Buscar empresa..."
                id="order-carrier-select">
              </select>
            </div>
          </div>

          <!-- Campos ocultos para carrier (se llenan desde el select o al crear nueva) -->
          <input type="hidden" id="order-carrier">
          <input type="hidden" id="order-carrier-cuit">
          <div class="modal-subtitle">
            <span class="fa fa-solid fa-truck modal-subtitle-icon" aria-hidden="true"></span>
            {{ lang['dashboard']['orders']['modal']['order_carrrier_vehicle_type'] }}
          </div>
          <!-- Toggle: Nuevo vehículo o seleccionar existente -->
          <div class="form-group row pl-4">
            <label class="col-sm-3 col-form-label col-form-label-sm"></label>
            <div class="col-sm-7">
              <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                <label class="btn btn-outline-info btn-sm active" id="vehicle-toggle-existing-label">
                  <input type="radio" name="vehicle-mode" id="vehicle-mode-existing" value="existing" checked>
                  <i class="fa fa-truck mr-1"></i> Seleccionar existente
                </label>
                <label class="btn btn-outline-info btn-sm" id="vehicle-toggle-new-label">
                  <input type="radio" name="vehicle-mode" id="vehicle-mode-new" value="new">
                  <i class="fa fa-plus-circle mr-1"></i> Nuevo vehículo
                </label>
              </div>
            </div>
          </div>
          <!-- Select vehículo existente (visible por defecto) -->
          <div class="form-group row pl-4" id="vehicle-existing-select-group">
            <label class="col-sm-3 col-form-label col-form-label-sm">Vehículo</label>
            <div class="col-sm-5">
              <select class="form-control form-control-sm selectpicker border border-secondary" data-width="100%"
                data-live-search="true" data-size="6" data-style="text-dark"
                data-placeholder="Buscar vehículo..."
                title="Buscar vehículo..."
                id="order-vehicle-select">
              </select>
            </div>
          </div>
          <!-- Tipo de vehículo: select (modo nuevo) / texto (modo existente) -->
          <div class="form-group row pl-4" id="vehicle-type-edit-group">
            <label class="col-sm-3 col-form-label col-form-label-sm" for="order-vehicle-type">
              {{ lang['dashboard']['orders']['modal']['order_vehicle_type'] }}</label>
            <div class="col-sm-5">
              <div class="input-group">
                <select class="form-control form-control-sm selectpicker border border-secondary" data-width="150px"
                  data-live-search="false" data-size="8" data-style="text-dark" data-actions-box="false"
                  data-placeholder="{{ lang['dashboard']['orders']['modal']['order_vehicle_type_placeholder'] }}"
                  title="{{ lang['dashboard']['orders']['modal']['order_vehicle_type_placeholder'] }}"
                  data-header="{{ lang['dashboard']['orders']['modal']['order_vehicle_type_placeholder'] }}"
                  id="order-vehicle-type" required>
                  {% for vt in lang['dashboard']['orders']['modal']['vehicle_types'] %}
                  <option value="{{ vt.id }}">{{ vt.name }}</option>
                  {% endfor %}
                </select>
                <div class="has-error invalid-feedback">
                  {{ lang['dashboard']['orders']['modal']['select_error'] }}
                </div>
              </div>
            </div>
          </div>
          <div class="form-group row pl-4" id="vehicle-type-display-group" style="display:none;">
            <label class="col-sm-3 col-form-label col-form-label-sm">
              {{ lang['dashboard']['orders']['modal']['order_vehicle_type'] }}</label>
            <div class="col-sm-5">
              <p class="form-control-plaintext form-control-sm" id="order-vehicle-type-display">—</p>
            </div>
          </div>

          <!-- Dominio Tractor: input (modo nuevo) / texto (modo existente) -->
          <div class="form-group row pl-4" id="truck-license-edit-group">
            <label class="col-sm-3 col-form-label col-form-label-sm" for="order-truck-license">
              {{ lang['dashboard']['orders']['modal']['order_truck_license'] }}</label>
            <div class="col-sm-5">
              <div class="input-group">
                <input type="text" class="form-control form-control-sm border border-secondary"
                  pattern="{{ config['dashboard']['patterns']['orders']['licensePlate'] }}" id="order-truck-license" required>
              </div>
              <div class="has-error invalid-feedback">
                {{ lang['dashboard']['orders']['modal']['license_error'] }}
              </div>
            </div>
          </div>
          <div class="form-group row pl-4" id="truck-license-display-group" style="display:none;">
            <label class="col-sm-3 col-form-label col-form-label-sm">
              {{ lang['dashboard']['orders']['modal']['order_truck_license'] }}</label>
            <div class="col-sm-5">
              <p class="form-control-plaintext form-control-sm" id="order-truck-license-display">—</p>
            </div>
          </div>

          <!-- Dominio Remolque: input (modo nuevo) / texto (modo existente) -->
          <div class="form-group row pl-4" id="trailer-license-edit-group">
            <label class="col-sm-3 col-form-label col-form-label-sm" for="order-trailer-license">
              {{ lang['dashboard']['orders']['modal']['order_trailer_license'] }}</label>
            <div class="col-sm-5">
              <div class="input-group">
                <input type="text" class="form-control form-control-sm border border-secondary"
                  id="order-trailer-license" pattern="{{ config['dashboard']['patterns']['orders']['licensePlate'] }}" required>
              </div>
              <div class="has-error invalid-feedback">
                {{ lang['dashboard']['orders']['modal']['license_error'] }}
              </div>
            </div>
          </div>
          <div class="form-group row pl-4" id="trailer-license-display-group" style="display:none;">
            <label class="col-sm-3 col-form-label col-form-label-sm">
              {{ lang['dashboard']['orders']['modal']['order_trailer_license'] }}</label>
            <div class="col-sm-5">
              <p class="form-control-plaintext form-control-sm" id="order-trailer-license-display">—</p>
            </div>
          </div>
          <div class="modal-subtitle">
            <span class="fa fa-solid fa-user modal-subtitle-icon" aria-hidden="true"></span>
            {{ lang['dashboard']['orders']['modal']['order_driver_title'] }}
          </div>

          <!-- Toggle: Crear nuevo chofer o asignar existente -->
          <div class="form-group row pl-4">
            <label class="col-sm-3 col-form-label col-form-label-sm"></label>
            <div class="col-sm-7">
              <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                <label class="btn btn-outline-info btn-sm active" id="driver-toggle-existing-label">
                  <input type="radio" name="driver-mode" id="driver-mode-existing" value="existing" checked>
                  <i class="fa fa-address-book mr-1"></i> Asignar chofer existente
                </label>
                <label class="btn btn-outline-info btn-sm" id="driver-toggle-new-label">
                  <input type="radio" name="driver-mode" id="driver-mode-new" value="new">
                  <i class="fa fa-plus-circle mr-1"></i> Crear nuevo chofer
                </label>
              </div>
            </div>
          </div>

          <!-- Select chofer existente (visible por defecto) -->
          <div class="form-group row pl-4" id="driver-existing-select-group">
            <label class="col-sm-3 col-form-label col-form-label-sm" for="order-driver-select">
              Seleccionar chofer</label>
            <div class="col-sm-5">
              <div class="input-group">
                <select class="form-control form-control-sm selectpicker border border-secondary" data-width="100%"
                  data-live-search="true" data-size="6" data-style="text-dark"
                  data-placeholder="Buscar chofer..."
                  title="Buscar chofer..."
                  id="order-driver-select">
                </select>
              </div>
            </div>
          </div>

          <!-- Campos ocultos para el driver data (se llenan desde el select o al crear nuevo) -->
          <input type="hidden" id="order-driver-name">
          <input type="hidden" id="order-driver-dni">
          <input type="hidden" id="order-driver-cel">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-sm border" data-dismiss="modal">
          {{ lang['dashboard']['orders']['modal']['cancel'] }}
        </button>
        <button type="button" class="btn btn-primary btn-sm" id="orders-carrier-modal-accept"
          data-loading-text="{{ lang['dashboard']['orders']['modal']['processing'] }}"
          data-text="{{ lang['dashboard']['orders']['modal']['accept'] }}">
          {{ lang['dashboard']['orders']['modal']['accept'] }}
        </button>
      </div>
    </div>
  </div>
</div>
<!-- END | DASHBOARD/ORDERS_CARRIER/MODAL -->