@extends('layouts.app')

@section('content')
<div class="row g-6">
  {{-- Filtro de Fechas --}}
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div>
          <h5 class="mb-1">Reporte de Ventas</h5>
          <small class="text-muted">
            Lo vendido, pendiente y cancelado en el periodo seleccionado.
          </small>
        </div>
      </div>

      <div class="card-body">
        <form method="GET" action="{{ route('reports.sales') }}" class="row g-3 align-items-end">
          <div class="col-md-4">
            <label for="date_from" class="form-label">
              Fecha inicio
            </label>
            <input
              type="date"
              id="date_from"
              name="date_from"
              class="form-control"
              value="{{ $dateFrom }}"
              required
            >
          </div>
          <div class="col-md-4">
            <label for="date_to" class="form-label">
              Fecha fin
            </label>
            <input
              type="date"
              id="date_to"
              name="date_to"
              class="form-control"
              value="{{ $dateTo }}"
              required
            >
          </div>
          <div class="col-md-4 d-flex gap-2">
            <button type="submit" class="btn btn-primary mt-auto w-100">
              <i class="ti tabler-search me-1"></i> Aplicar filtro
            </button>
          </div>
        </form>

        <div class="mt-3">
          <span class="badge bg-label-info">
            Periodo: {{ \Carbon\Carbon::parse($dateFrom)->format('d/m/Y') }}
            &nbsp;–&nbsp;
            {{ \Carbon\Carbon::parse($dateTo)->format('d/m/Y') }}
          </span>
        </div>
      </div>
    </div>
  </div>

  {{-- Tarjetas resumen --}}
  <div class="col-12">
    <div class="row g-4">

      {{-- Vendido (Pagadas) --}}
      <div class="col-md-4 col-sm-6">
        <div class="card h-100 border-success">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <div>
                <h6 class="mb-1">Vendido (Pagadas)</h6>
                <small class="text-muted">Cotizaciones cobradas en el periodo</small>
              </div>
              <span class="avatar avatar-sm rounded-circle bg-success text-white">
                <i class="ti ti-cash"></i>
              </span>
            </div>
            <h3 class="mb-1">
              ${{ number_format($totalVendido, 2) }}
            </h3>
            <small class="text-muted">
              {{ $pagadas['count'] }} cotización{{ $pagadas['count'] === 1 ? '' : 'es' }}

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

      {{-- Pendiente --}}
      <div class="col-md-4 col-sm-6">
        <div class="card h-100 border-warning">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <div>
                <h6 class="mb-1">Pendiente</h6>
                <small class="text-muted">Cotizaciones aún sin pago completo</small>
              </div>
              <span class="avatar avatar-sm rounded-circle bg-warning text-dark">
                <i class="ti ti-hourglass-low"></i>
              </span>
            </div>
            <h3 class="mb-1">
              ${{ number_format($pendientes['amount'], 2) }}
            </h3>
            <small class="text-muted">
              {{ $pendientes['count'] }} cotización{{ $pendientes['count'] === 1 ? '' : 'es' }}
            </small>
          </div>
        </div>
      </div>

      {{-- Cancelado --}}
      <div class="col-md-4 col-sm-6">
        <div class="card h-100 border-danger">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <div>
                <h6 class="mb-1">Cancelado</h6>
                <small class="text-muted">Cotizaciones canceladas en el periodo</small>
              </div>
              <span class="avatar avatar-sm rounded-circle bg-danger text-white">
                <i class="ti ti-circle-x"></i>
              </span>
            </div>
            <h3 class="mb-1">
              ${{ number_format($canceladas['amount'], 2) }}
            </h3>
            <small class="text-muted">
              {{ $canceladas['count'] }} cotización{{ $canceladas['count'] === 1 ? '' : 'es' }}
            </small>
          </div>
        </div>
      </div>

    </div>
  </div>

  {{-- Tabla detalle de cotizaciones --}}
  <div class="col-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Detalle de cotizaciones del periodo</h5>
        <small class="text-muted">
          Lo que compone el resumen de arriba
        </small>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-sm align-middle">
            <thead>
              <tr>
                <th>#</th>
                <th>Cliente</th>
                <th>Fecha</th>
                <th>Estado</th>
                <th class="text-end">Total</th>
              </tr>
            </thead>
            <tbody>
              @forelse ($quotes as $quote)
                <tr>
                  <td>#{{ $quote->id }}</td>
                  <td>{{ $quote->customer->name ?? '—' }}</td>
                  <td>{{ $quote->created_at->format('d/m/Y H:i') }}</td>
                  <td>
                    @php
                      $status = $quote->status;
                      $badgeClass = match ($status) {
                        'Pagada'    => 'bg-success',
                        'Pendiente' => 'bg-warning',
                        'Cancelada' => 'bg-danger',
                        default     => 'bg-secondary',
                      };
                    @endphp
                    <span class="badge {{ $badgeClass }}">{{ $status }}</span>
                  </td>
                  <td class="text-end">
                    ${{ number_format($quote->total, 2) }}
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="5" class="text-center text-muted">
                    No hay cotizaciones en el periodo seleccionado.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

</div>
@endsection