<div class="modal fade" id="priceRulesModal" tabindex="-1" aria-labelledby="priceRulesModalLabel" aria-hidden="true"
  data-index-url="{{ route('owner.settings.price-rules.index') }}"
  data-store-url="{{ route('owner.settings.price-rules.store') }}"
  data-update-base-url="{{ url('/owner/configuracion/reglas-precio') }}"
  data-destroy-base-url="{{ url('/owner/configuracion/reglas-precio') }}">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header border-bottom">
        <h5 class="modal-title" id="priceRulesModalLabel">Reglas de precio: <span class="text-primary" id="priceRulesTargetLabel">Ítem</span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="priceRuleCreateForm" class="mb-4">
          <div class="row g-4">
            <div class="col-12 col-xl-4">
              <div class="card border shadow-none h-100">
                <div class="card-body">
                  <h6 class="mb-3" id="priceRuleFormTitle">Crear regla</h6>

                  <div class="mb-3">
                    <label class="form-label">Nombre de la regla</label>
                    <input type="text" class="form-control" name="name" placeholder="Ej: Lunes a viernes" required>
                  </div>

                  <div class="row g-3 mb-3">
                    <div class="col-12">
                      <label class="form-label">Tipo</label>
                      <select class="form-select" name="rule_type" id="priceRuleType" required>
                        <option value="always">Todo el año</option>
                        <option value="weekday">Días de semana</option>
                        <option value="date_range">Rango de fechas</option>
                        <option value="specific_date">Fecha puntual</option>
                      </select>
                    </div>
                    <div class="col-6">
                      <label class="form-label">Prioridad</label>
                      <input type="number" class="form-control" min="1" max="9999" name="priority" value="100" required>
                    </div>
                    <div class="col-6">
                      <label class="form-label">Estado</label>
                      <select class="form-select" name="is_active" required>
                        <option value="1" selected>Activa</option>
                        <option value="0">Inactiva</option>
                      </select>
                    </div>
                  </div>

                  <div class="row g-3">
                    <div class="col-12">
                      <label class="form-label">Costo interno (COP)</label>
                      <input type="number" min="0" step="1000" class="form-control" name="internal_cost" placeholder="Opcional">
                    </div>
                    <div class="col-12">
                      <label class="form-label">Precio cliente (COP)</label>
                      <input type="number" min="0" step="1000" class="form-control" name="customer_price" placeholder="Opcional">
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-12 col-xl-8">
              <div class="card border shadow-none h-100">
                <div class="card-body">
                  <h6 class="mb-3">Aplicación de la regla</h6>

                  <div class="mb-3 d-none" id="priceRuleWeekdayWrap">
                    <label class="form-label d-block">Aplica en días</label>
                    <div class="d-flex flex-wrap gap-3">
                      @foreach ([1 => 'Lun', 2 => 'Mar', 3 => 'Mié', 4 => 'Jue', 5 => 'Vie', 6 => 'Sáb', 7 => 'Dom'] as $weekdayValue => $weekdayLabel)
                        <label class="form-check form-check-inline m-0">
                          <input class="form-check-input" type="checkbox" name="weekday_values[]" value="{{ $weekdayValue }}">
                          <span class="form-check-label">{{ $weekdayLabel }}</span>
                        </label>
                      @endforeach
                    </div>
                  </div>

                  <div class="mb-3 d-none" id="priceRuleRangeWrap">
                    <div class="row g-3">
                      <div class="col-md-6">
                        <label class="form-label">Desde</label>
                        <input type="date" class="form-control" name="start_date">
                      </div>
                      <div class="col-md-6">
                        <label class="form-label">Hasta</label>
                        <input type="date" class="form-control" name="end_date">
                      </div>
                    </div>
                  </div>

                  <div class="mb-3 d-none" id="priceRuleSpecificWrap">
                    <label class="form-label">Fecha puntual</label>
                    <input type="date" class="form-control" name="specific_date">
                  </div>

                  <div class="d-none" id="priceRulePackageWrap">
                    <div class="border rounded p-3">
                      <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                        <h6 class="mb-0">Composición especial del paquete</h6>
                        <label class="form-check m-0">
                          <input class="form-check-input" type="checkbox" name="apply_package_items_override" id="priceRuleApplyItemsOverride" value="1">
                          <span class="form-check-label">Aplicar composición especial</span>
                        </label>
                      </div>
                      <p class="small text-body-secondary mb-3">Define una composición distinta para esta temporada/regla.</p>
                      <div class="row g-0 border rounded overflow-hidden">
                        <div class="col-md-4 border-end">
                          <div class="nav flex-column nav-pills p-3 gap-2" id="rule-package-catalog-tabs" role="tablist">
                            <button class="btn btn-label-primary text-start active" data-bs-toggle="pill" data-bs-target="#rule-tab-gifts-included" type="button">Obsequios incluidos</button>
                            <button class="btn btn-label-primary text-start" data-bs-toggle="pill" data-bs-target="#rule-tab-gifts-additional" type="button">Obsequios adicionales</button>
                            <button class="btn btn-label-primary text-start" data-bs-toggle="pill" data-bs-target="#rule-tab-artists" type="button">Artistas</button>
                            <button class="btn btn-label-primary text-start" data-bs-toggle="pill" data-bs-target="#rule-tab-other-costs" type="button">Otros costos</button>
                          </div>
                        </div>
                        <div class="col-md-8">
                          <div class="tab-content p-3">
                            <div class="tab-pane fade show active" id="rule-tab-gifts-included">
                              <div class="small text-body-secondary mb-2">Selecciona obsequios incluidos.</div>
                              <div class="row g-2" id="priceRuleGiftIncludedCards"></div>
                            </div>
                            <div class="tab-pane fade" id="rule-tab-gifts-additional">
                              <div class="small text-body-secondary mb-2">Selecciona obsequios adicionales.</div>
                              <div class="row g-2" id="priceRuleGiftAdditionalCards"></div>
                            </div>
                            <div class="tab-pane fade" id="rule-tab-artists">
                              <div class="small text-body-secondary mb-2">Selecciona artistas.</div>
                              <div class="row g-2" id="priceRuleArtistCards"></div>
                            </div>
                            <div class="tab-pane fade" id="rule-tab-other-costs">
                              <div class="small text-body-secondary mb-2">Selecciona otros costos.</div>
                              <div class="row g-2" id="priceRuleOtherCostCards"></div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="border rounded p-3 mt-3">
                        <h6 class="mb-3">Resumen calculado de la composición</h6>
                        <div class="row g-3">
                          <div class="col-md-4">
                            <label class="form-label">Costo interno calculado (COP)</label>
                            <input type="text" id="priceRuleCalculatedInternal" class="form-control" value="$0" readonly>
                          </div>
                          <div class="col-md-4">
                            <label class="form-label">Precio cliente calculado (COP)</label>
                            <input type="text" id="priceRuleCalculatedCustomer" class="form-control" value="$0" readonly>
                          </div>
                          <div class="col-md-4">
                            <label class="form-label">Comisión estimada (COP)</label>
                            <input type="text" id="priceRuleCalculatedCommission" class="form-control" value="$0" readonly>
                          </div>
                        </div>
                        <small class="text-body-secondary d-block mt-2">Este cálculo usa los precios internos y cliente del catálogo seleccionado para la regla.</small>
                      </div>
                    </div>
                  </div>

                  <div class="d-flex justify-content-end gap-2 mt-3">
                    <button type="button" class="btn btn-label-secondary d-none" id="priceRuleCancelEditBtn">Cancelar edición</button>
                    <button type="submit" class="btn btn-primary" id="priceRuleSubmitBtn">
                      <i class="icon-base ti tabler-plus icon-xs me-1"></i>
                      Guardar regla
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>

        <div class="card">
          <div class="card-header">
            <h6 class="mb-0">Reglas existentes</h6>
          </div>
          <div class="table-responsive">
            <table class="table mb-0">
              <thead>
                <tr>
                  <th>Nombre</th>
                  <th>Tipo</th>
                  <th>Aplica en</th>
                  <th>Costo interno</th>
                  <th>Precio cliente</th>
                  <th>Composición</th>
                  <th>Prioridad</th>
                  <th>Estado</th>
                  <th>Acciones</th>
                </tr>
              </thead>
              <tbody id="priceRulesTableBody">
                <tr>
                  <td colspan="9" class="text-center text-body-secondary py-4">Sin reglas de precio.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="deletePriceRuleModal" tabindex="-1" aria-labelledby="deletePriceRuleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deletePriceRuleModalLabel">Eliminar regla</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ¿Eliminar esta regla de precio? Esta acción no se puede deshacer.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmDeletePriceRuleBtn">Eliminar</button>
      </div>
    </div>
  </div>
</div>
