@extends('layouts.app')

@section('content')
<div class="row invoice-preview">
  <!-- Invoice -->
  <div class="col-xl-9 col-md-8 col-12 mb-md-0 mb-6 position-relative">
    @if($quote->status === 'Cancelada')
      <div class="ribbon-cancelled">CANCELADA</div>
    @endif

    <div class="card invoice-preview-card p-sm-12 p-6">
      {{-- ENCABEZADO --}}
      <div class="card-body invoice-preview-header rounded">
        <div class="row gy-4">
          {{-- Columna izquierda: Resumen rápido de la orden --}}
          <div class="col-xl-7 col-lg-7 col-md-12">
            <div class="d-flex align-items-center gap-2 mb-3">
              <span class="badge rounded-pill bg-label-primary px-3 py-2">
                Orden #{{ $quote->quote_number }}
              </span>
              
              <span class="text-muted small">
                Creada el {{ $quote->created_at ? $quote->created_at->format('d/m/Y H:i') : '—' }}
              </span>
            </div>

            <div class="d-flex flex-wrap gap-3">
              <div class="border rounded px-3 py-2 bg-light">
                <small class="text-muted d-block mb-1">Estado</small>
                @switch($quote->status)
                  @case('Pendiente')
                    <span class="badge bg-warning text-dark">Pendiente</span>
                    @break
                  @case('Pagada')
                    <span class="badge bg-success">Pagada</span>
                    @break
                  @case('Cancelada')
                    <span class="badge bg-danger">Cancelada</span>
                    @break
                  @default
                    <span class="badge bg-secondary">{{ $quote->status ?? 'Sin definir' }}</span>
                @endswitch
              </div>

              <div class="border rounded px-3 py-2 bg-light">
                <small class="text-muted d-block mb-1">Importe total</small>
                <span class="fw-medium">${{ number_format($quote->total, 2) }}</span>
              </div>

              <div class="border rounded px-3 py-2 bg-light">
                <small class="text-muted d-block mb-1">Pagado</small>
                <span class="fw-medium text-success">${{ number_format($pagosCabecera, 2) }}</span>
              </div>

              <div class="border rounded px-3 py-2 bg-light">
                <small class="text-muted d-block mb-1">Saldo</small>
                @if($saldoCabecera > 0)
                  <span class="fw-medium text-danger">${{ number_format($saldoCabecera, 2) }}</span>
                @else
                  <span class="fw-medium text-success">${{ number_format($saldoCabecera, 2) }}</span>
                @endif
              </div>
            </div>

            {{-- Prioridad del evento --}}
            @if($quote->event_priority)
              <div class="mt-3">
                <span class="fw-medium me-1">Prioridad del evento:</span>
                @switch($quote->event_priority)
                  @case('alta')
                    <span class="badge bg-danger">🔴 Urgente</span>
                    @break
                  @case('media')
                    <span class="badge bg-warning text-dark">🟠 Con poco tiempo</span>
                    @break
                  @case('baja')
                    <span class="badge bg-success">🟢 Con tiempo</span>
                    @break
                  @default
                    <span class="badge bg-secondary">⚪ No especificada</span>
                @endswitch
              </div>
            @endif
          </div>

          {{-- Columna derecha: Datos del evento / entrega --}}
          <div class="col-xl-5 col-lg-5 col-md-12">
            <div class="text-end text-md-start text-xl-end">
              <div class="mb-2 text-heading">
                <span class="fw-medium d-block text-muted small">Fecha de Entrega</span>
                <span class="fw-medium">
                  {{ $quote->delivery_date ? \Carbon\Carbon::parse($quote->delivery_date)->format('d/m/Y') : 'No especificada' }}
                </span>
              </div>

              <div class="mb-2 text-heading">
                <span class="fw-medium d-block text-muted small">Lugar de entrega</span>
                <span class="fw-medium">{{ $quote->delivery_type }}</span>
              </div>

              <div class="mb-2 text-heading">
                <span class="fw-medium d-block text-muted small">¿Cómo nos encontró?</span>
                <span class="fw-medium">{{ $quote->customer_source }}</span>
              </div>

              <div class="mt-3 text-heading">
                <span class="fw-medium d-block text-muted small">Anticipo sugerido</span>
                <span class="fw-medium">${{ number_format($anticipoCalc, 2) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {{-- DATOS DEL CLIENTE Y RESUMEN --}}
      <div class="card-body px-0">
        <div class="row">
          <div class="col-xl-6 col-md-12 col-sm-5 col-12 mb-xl-0 mb-md-6 mb-sm-0 mb-6">
            <h6 class="mb-2">Orden para:</h6>

            <p class="mb-1 fw-medium">{{ $customerName }}</p>

            @if($direccion)
              <p class="mb-1">
                <span class="text-muted small d-block">Dirección de entrega</span>
                {{ $direccion }}
              </p>
              @if($mapsLink)
                <p class="mb-1">
                  <a href="{{ $mapsLink }}"
                    class="text-primary small"
                    target="_blank"
                    rel="noopener noreferrer">
                    📍 Ver ubicación en Google Maps
                  </a>
                </p>
              @endif
            @endif

            {{-- WhatsApp --}}
            <p class="mb-1">
              <span class="text-muted small d-block">WhatsApp</span>
              @if($waDigits && strlen($waDigits) >= 10)
                <a href="https://wa.me/52{{ $waDigits }}"
                   class="text-success fw-medium"
                   target="_blank"
                   rel="noopener noreferrer"
                   title="Abrir chat en WhatsApp">
                  {{ $waPretty }}
                </a>
              @else
                <span>—</span>
              @endif
            </p>

            <p class="mb-0">
              <span class="text-muted small d-block">Correo electrónico</span>
              <span>{{ $customerModel->email ?? 'No proporcionado' }}</span>
            </p>
          </div>

          <div class="col-xl-6 col-md-12 col-sm-7 col-12">
            <h6 class="mb-2">Resumen de la orden:</h6>
            <table>
              <tbody>
                <tr>
                  <td class="pe-4 text-muted small">Importe total:</td>
                  <td class="fw-medium">${{ number_format($quote->total, 2) }}</td>
                </tr>
                @if($quote->dynamic_info)
                  <tr>
                    <td class="pe-4 text-muted small">Dinámica / Evento:</td>
                    <td>{{ $quote->dynamic_info }}</td>
                  </tr>
                @endif
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {{-- TABLA DE PRODUCTOS --}}
      <div class="table-responsive border border-bottom-0 border-top-0 rounded">
        <table class="table m-0">
          <thead>
            <tr>
              <th>Producto / Servicio</th>
              <th>Cantidad</th>
              <th>Precio Unitario</th>
              <th>Total</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($quote->items as $item)
              <tr>
                <td class="text-nowrap text-heading">{{ $item->inventory->name }}</td>
                <td>{{ $item->quantity }}</td>
                <td>${{ number_format($item->unit_price, 2) }}</td>
                <td>${{ number_format($item->total_price, 2) }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      {{-- DISEÑO APROBADO + TOTALES DESGLOSADOS --}}
      <div class="table-responsive">
        <table class="table m-0 table-borderless">
          <tbody>
            <tr>
              <td class="align-top pe-6 ps-0 py-6 text-body">
                <p class="mb-1">
                  <span class="me-2 h6">Diseño aprobado</span>
                </p>

                @if($fileUrl && ($isImage || $isPdf))
                  @if($isImage)
                    <div class="border rounded p-2 mt-2 d-inline-block bg-light">
                      <img src="{{ $fileUrl }}"
                           alt="Diseño aprobado"
                           style="width: 600px; height: 293px; object-fit: cover;">
                    </div>
                  @else
                    <a href="{{ $fileUrl }}"
                       target="_blank"
                       rel="noopener noreferrer"
                       class="btn btn-sm btn-outline-primary mt-2">
                      Ver diseño en PDF
                    </a>
                  @endif
                @else
                  <span class="text-muted">No tiene diseño aprobado registrado.</span>
                @endif
              </td>

              {{-- Etiquetas de totales --}}
              <td class="px-0 py-6 w-px-120">
                <p class="mb-2 pb-2">Sub Total:</p>
                <p class="mb-2 border-bottom pb-2">Descuento:</p>
                <p class="mb-2">Adicional por prioridad:</p>
                <p class="mb-2 border-bottom pb-2">Envío:</p>
                <p class="mb-2 pb-2">Base sin IVA:</p>
                <p class="mb-2 pb-2">IVA:</p>
                <p class="mb-2 pb-2">Gran Total:</p>
                <p class="mb-2 pb-2">Pagos / Anticipo:</p>
                <p class="mb-0">Saldo:</p>
              </td>

              {{-- Valores de totales --}}
              <td class="px-0 py-6 w-px-120 text-end">
                <p class="mb-2 pb-2">${{ number_format($subtotal, 2, '.', ',') }}</p>
                <p class="mb-2 border-bottom pb-2">${{ number_format($descuento, 2, '.', ',') }}</p>
                <p class="mb-2">${{ number_format($extra, 2, '.', ',') }}</p>
                <p class="mb-2 border-bottom pb-2">${{ number_format($envio, 2, '.', ',') }}</p>
                <p class="mb-2 pb-2">${{ number_format($baseSinIVA, 2, '.', ',') }}</p>
                <p class="mb-2 pb-2">${{ number_format($iva, 2, '.', ',') }}</p>
                <p class="mb-2 pb-2"><strong>${{ number_format($totalConIVA, 2, '.', ',') }}</strong></p>

                @if($pagos > 0)
                  <p class="mb-2 pb-2 text-success">${{ number_format($pagos, 2, '.', ',') }}</p>
                @else
                  <p class="mb-2 pb-2">${{ number_format(0, 2, '.', ',') }}</p>
                @endif

                @if($saldo > 0)
                  <p class="fw-medium mb-0 text-danger">${{ number_format($saldo, 2, '.', ',') }}</p>
                @else
                  <p class="fw-medium mb-0 text-success">${{ number_format($saldo, 2, '.', ',') }} </p>
                @endif
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <hr class="mt-0 mb-6" />

      {{-- NOTAS --}}
      <div class="card-body p-0">
        <div class="row">
          <div class="col-12">
            <span class="fw-medium text-heading d-block mb-1">Notas de la orden</span>
            <span class="text-muted">{{ $quote->notes ?: 'Sin notas adicionales.' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /Invoice -->

  <!-- Invoice Actions -->
  <div class="col-xl-3 col-md-4 col-12 invoice-actions">
    <div class="card">
      <div class="card-body">
        {{-- Botón Confirmar Orden por WhatsApp --}}
        {{-- <button
          type="button"
          onclick="@if($linkWhatsapp) window.open('{{ $linkWhatsapp }}', '_blank') @endif"
          class="btn btn-primary d-grid w-100 mb-4"
          @if($quote->status === 'Cancelada' || !$linkWhatsapp) disabled @endif>
          <span class="d-flex align-items-center justify-content-center text-nowrap">
            <i class="icon-base ti tabler-brand-whatsapp icon-xs me-2"></i>Confirmar Orden
          </span>
        </button> --}}

        {{-- Descargar PDF --}}
        <a href="{{ route('quotes.pdf', $quote) }}" class="btn btn-label-secondary d-grid w-100 mb-4">
          Descargar PDF
        </a>

        <div class="d-flex mb-4">
          @if ($quote->status === 'Cancelada')
            <div class="me-4 w-100">
              <button 
                type="button"
                class="btn btn-success d-grid w-100"
                data-bs-toggle="modal"
                data-bs-target="#reopenOrderModal">
                <span class="d-flex align-items-center justify-content-center text-nowrap">
                  <i class="icon-base ti tabler-refresh icon-xs me-2"></i>Reabrir Orden
                </span>
              </button>
            </div>
          @else
            {{-- Cancelar orden --}}
            <button
              class="btn btn-label-danger d-grid w-100 me-4"
              data-bs-toggle="modal"
              data-bs-target="#cancelOrderModal">
              Cancelar
            </button>
          @endif

          {{-- Editar --}}
          {{-- <a href="{{ route('quotes.edit', $quote->id) }}" 
            class="btn btn-label-secondary d-grid w-100"
            @if($quote->status === 'Cancelada') 
              style="pointer-events: none; opacity: 0.5;" 
            @endif>
            Editar
          </a> --}}
        </div>

        {{-- Estados de pago --}}
        @if ($quote->status === 'Pagada')
          <button class="btn btn-outline-success d-grid w-100" disabled>
            <span class="d-flex align-items-center justify-content-center text-nowrap">
              <i class="icon-base ti tabler-check icon-xs me-2"></i>Orden Pagada
            </span>
          </button>
        @elseif ($quote->status === 'Pendiente')
          <button
            data-id="{{ $quote->id }}"
            data-total="{{ $quote->total }}"
            data-paid="{{ $quote->payments->sum('amount') }}"
            class="btn btn-warning d-grid w-100 complete-payment"
            data-bs-toggle="modal"
            data-bs-target="#completePaymentModal">
            <span class="d-flex align-items-center justify-content-center text-nowrap">
              <i class="icon-base ti tabler-currency-dollar icon-xs me-2"></i>Completar Pago
            </span>
          </button>
        @elseif ($quote->status !== 'Cancelada')
          <button
            data-id="{{ $quote->id }}"
            data-customer="{{ $customerName }}"
            data-whatsapp="{{ $waPretty }}"
            data-total="{{ $quote->total }}"
            data-anticipo="{{ $anticipoCalc }}"
            data-quote="{{ $quote->quote_number }}" 
            class="btn btn-success d-grid w-100 convert-order"
            data-bs-toggle="modal"
            data-bs-target="#convertOrderModal">
            <span class="d-flex align-items-center justify-content-center text-nowrap">
              <i class="icon-base ti tabler-currency-dollar icon-xs me-2"></i>Convertir en Orden
            </span>
          </button>
        @endif
      </div>
    </div>
  </div>
  <!-- /Invoice Actions -->
</div>

{{-- ================= MODAL COMPLETAR PAGO ================= --}}
<div class="modal fade" id="completePaymentModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-md modal-simple">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

        <div class="text-center mb-4">
          <h4 class="mb-2">💸 Completar Pago de Orden</h4>
          <p class="text-muted mb-0">Verifica el saldo pendiente y confirma el pago.</p>
        </div>

        <div class="mb-3">
          <p><strong>Total de la Orden:</strong> $<span id="modal-total"></span></p>
          <p><strong>Pagado hasta ahora:</strong> $<span id="modal-paid"></span></p>
          <p><strong>Saldo Pendiente:</strong> $<span id="modal-remaining"></span></p>
        </div>

        <form action="{{ route('quotes.complete_payment') }}" method="POST">
          @csrf
          <input type="hidden" name="quote_id" id="quote-id-payment">

          <div class="mb-3">
            <label class="form-label">💵 Cantidad a Pagar</label>
            <input type="number" name="amount" id="amount-payment" class="form-control" step="0.01" required readonly>               
          </div>

          <div class="mb-3">
            <label class="form-label">💳 Método de Pago</label>
            <select name="payment_method" id="payment-method" class="form-select" required>
              <option value="">Selecciona una opción…</option>
              <option value="Efectivo">Efectivo</option>
              <option value="Transferencia">Transferencia</option>
              <option value="Terminal de Pago">Terminal de Pago</option>
            </select>
          </div>

          <div id="transfer-options" class="mb-3 d-none">
            <label class="form-label">🏦 Banco</label>
            <select name="bank_account_id" class="form-select">
              @foreach ($banks as $bankAccount)
                <option value="{{ $bankAccount->id }}">
                  {{ $bankAccount->bank->name }} - {{ $bankAccount->account_number }}
                </option>
              @endforeach
            </select>

            <label class="form-label mt-2">📄 Número de Referencia</label>
            <input type="text" name="reference" class="form-control">
          </div>

          <div class="d-flex justify-content-end mt-4">
            <button type="submit" id="btn-confirm-payment" class="btn btn-success me-2">Confirmar Pago</button>
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- ================= MODAL CONVERTIR EN ORDEN ================= --}}
<div class="modal fade" id="convertOrderModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-simple">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

        <div class="text-center mb-4">
          <h4 class="mb-2">📦 Convertir Cotización en Orden</h4>
          <p class="text-muted mb-0">Registra el pago inicial y confirma los datos del diseño.</p>
        </div>

        <div class="mb-3">
          <p><strong>Número de Cotización:</strong> <span id="modal-quote-id"></span></p>
          <p><strong>Cliente:</strong> <span id="modal-customer-name"></span></p>
          <p><strong>WhatsApp:</strong> <span id="modal-whatsapp"></span></p>
          <p><strong>Total a Cobrar:</strong> $<span id="modal-total-convert"></span></p>
        </div>

        <form action="{{ route('quotes.convert') }}" method="POST" enctype="multipart/form-data">
          @csrf
          <input type="hidden" name="quote_id" id="quote-id-convert">

          <div class="mb-3">
            <label class="form-label">🔄 Tipo de Pago</label>
            <select name="payment_type" id="payment-type-convert" class="form-select" required>
              <option value="">Selecciona una opción…</option>
              <option value="Anticipo">Anticipo</option>
              <option value="Pago Total">Pago Total</option>
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">💵 Cantidad Pagada</label>
            <input type="number" name="amount" step="0.01" id="amount-convert" class="form-control" required>
            <small id="amount-error" class="text-danger d-none">💡 El monto no puede ser mayor al total a cobrar.</small>
          </div>

          <div class="mb-3">
            <label class="form-label">🎨 Subir diseño aprobado</label>
            <input type="file" name="approved_design" accept="image/*,.pdf" class="form-control">
            <small class="text-muted">Puedes adjuntar el archivo final aprobado por el cliente.</small>
          </div>

          <div class="mb-3">
            <label class="form-label">💳 Método de Pago</label>
            <select name="payment_method" id="payment-method-convert" class="form-select" required>
              <option value="">Selecciona una opción…</option>
              <option value="Efectivo">Efectivo</option>
              <option value="Transferencia">Transferencia</option>
              <option value="Terminal de Pago">Terminal de Pago</option>
            </select>
          </div>

          <div id="transfer-options-convert" class="mb-3 d-none">
            <label class="form-label">🏦 Banco</label>
            <select name="bank_account_id" class="form-select">
              @foreach ($banks as $bankAccount)
                <option value="{{ $bankAccount->id }}">
                  {{ $bankAccount->bank->name }} - {{ $bankAccount->account_number }}
                </option>
              @endforeach
            </select>

            <label class="form-label mt-2">📄 Número de Referencia</label>
            <input type="text" name="reference" class="form-control">
          </div>

          <div class="d-flex justify-content-end mt-4">
            <button type="submit" id="btn-confirm-convert" class="btn btn-success me-2">Confirmar</button>
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- ================= MODAL CANCELAR ORDEN ================= --}}
<div class="modal fade" id="cancelOrderModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">¿Deseas cancelar esta orden?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        Esta acción marcará la orden como <strong>cancelada</strong>.  
        También puedes enviar un mensaje al cliente para intentar recuperarla.
        <br><br>¿Qué deseas hacer?
      </div>
      <div class="modal-footer">
        {{-- Acción de cancelar --}}
        <form action="{{ route('quotes.cancel', $quote) }}" method="POST">
          @csrf
          @method('PATCH')
          <button type="submit" class="btn btn-danger">Sí, cancelar la orden</button>
        </form>

        {{-- Recordatorio al cliente --}}
        @if($linkRecordatorio)
          <a href="{{ $linkRecordatorio }}" target="_blank" class="btn btn-primary">
            Recordar al cliente
          </a>
        @else
          <button class="btn btn-primary" disabled>WhatsApp no disponible</button>
        @endif
      </div>
    </div>
  </div>
</div>

{{-- ================= MODAL REABRIR ORDEN ================= --}}
<div class="modal fade" id="reopenOrderModal" tabindex="-1" aria-labelledby="reopenOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      
      <div class="modal-header">
        <h5 class="modal-title" id="reopenOrderModalLabel">¿Reabrir orden?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      
      <div class="modal-body">
        Esta acción cambiará el estado de la orden a <strong>Cotización</strong>.  
        ¿Estás seguro que deseas continuar?
      </div>
      
      <div class="modal-footer">
        <form action="{{ route('quotes.reopen', $quote) }}" method="POST">
          @csrf
          @method('PATCH')
          <button type="submit" class="btn btn-success">Sí, reabrir orden</button>
        </form>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
      </div>

    </div>
  </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('vuexy-assets/js/pages/quotes/show.js') }}"></script>
@endpush