@extends('layouts.app')

@section('content')
<div class="container py-3" style="max-width: 1100px;">

  {{-- Header --}}
  <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2 mb-3">
    <div>
      <h3 class="mb-0">Eventos</h3>
      <div class="text-muted small">Gestiona tus eventos, pagos y estados</div>
    </div>

    <div class="d-flex gap-2 w-100 w-sm-auto">
      <a class="btn btn-outline-secondary w-100 d-sm-none" href="{{ route('comercio.calendario.index') }}">
        Ver calendario
      </a>
      <a class="btn btn-primary w-100 w-sm-auto" href="{{ route('comercio.eventos.create') }}">
        + Crear evento
      </a>
    </div>
  </div>

  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  {{-- Filtros (acordeón para móvil) --}}
  <div class="accordion mb-3" id="filtersAcc">
    <div class="accordion-item border-0 shadow-sm rounded-4 overflow-hidden">
      <h2 class="accordion-header" id="headingFilters">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFilters">
          Filtros
          @if(request('desde') || request('hasta') || request('estado'))
            <span class="badge text-bg-primary ms-2">Activos</span>
          @endif
        </button>
      </h2>
      <div id="collapseFilters" class="accordion-collapse collapse" data-bs-parent="#filtersAcc">
        <div class="accordion-body">
          <form class="row g-2">
            <div class="col-12 col-md-3">
              <label class="form-label small text-muted mb-1">Desde</label>
              <input type="date" name="desde" value="{{ request('desde') }}" class="form-control">
            </div>

            <div class="col-12 col-md-3">
              <label class="form-label small text-muted mb-1">Hasta</label>
              <input type="date" name="hasta" value="{{ request('hasta') }}" class="form-control">
            </div>

            <div class="col-12 col-md-3">
              <label class="form-label small text-muted mb-1">Estado</label>
              <select name="estado" class="form-select">
                <option value="">Todos</option>
                @foreach(['pendiente','confirmado','cancelado'] as $e)
                  <option value="{{ $e }}" @selected(request('estado')===$e)>{{ ucfirst($e) }}</option>
                @endforeach
              </select>
            </div>

            <div class="col-12 col-md-3 d-grid">
              <label class="form-label small text-muted mb-1">&nbsp;</label>
              <button class="btn btn-outline-secondary">Aplicar filtros</button>
            </div>

            @if(request()->query())
              <div class="col-12">
                <a class="small text-decoration-none" href="{{ route('comercio.eventos.index') }}">
                  Limpiar filtros
                </a>
              </div>
            @endif
          </form>
        </div>
      </div>
    </div>
  </div>

  {{-- MOBILE: cards --}}
  <div class="d-block d-lg-none">
    <div class="d-grid gap-2">
      @forelse($eventos as $ev)
        @php
          $estado = $ev->estado ?? 'pendiente';
          $badge = match($estado) {
            'confirmado' => 'text-bg-success',
            'cancelado' => 'text-bg-danger',
            default => 'text-bg-warning',
          };
          $deuda = $ev->deuda ?? max(0, (int)$ev->total - (int)$ev->pagado);
        @endphp

        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-start gap-2">
              <div>
                <div class="fw-semibold">{{ $ev->titulo }}</div>
                <div class="text-muted small">
                  {{ $ev->fecha_evento?->format('d-m-Y') ?? '—' }}
                  @if(!empty($ev->hora_inicio))
                    · {{ substr($ev->hora_inicio,0,5) }}
                  @endif
                </div>
                <div class="small mt-1">
                  <span class="text-muted">Cliente:</span>
                  <span class="fw-semibold">{{ $ev->cliente_nombre ?? '—' }}</span>
                </div>
              </div>

              <span class="badge {{ $badge }}">{{ ucfirst($estado) }}</span>
            </div>

            <hr class="my-3">

            <div class="row g-2 small">
              <div class="col-4">
                <div class="text-muted">Total</div>
                <div class="fw-semibold">${{ number_format($ev->total ?? 0, 0, ',', '.') }}</div>
              </div>
              <div class="col-4">
                <div class="text-muted">Pagado</div>
                <div class="fw-semibold">${{ number_format($ev->pagado ?? 0, 0, ',', '.') }}</div>
              </div>
              <div class="col-4">
                <div class="text-muted">Deuda</div>
                <div class="fw-semibold">${{ number_format($deuda, 0, ',', '.') }}</div>
              </div>
            </div>

            <div class="d-grid gap-2 mt-3">
              <a class="btn btn-outline-primary" href="{{ route('comercio.eventos.edit', $ev) }}">
                Editar
              </a>

              <form method="POST" action="{{ route('comercio.eventos.destroy', $ev) }}"
                    onsubmit="return confirm('¿Eliminar evento?');">
                @csrf @method('DELETE')
                <button class="btn btn-outline-danger w-100">Eliminar</button>
              </form>
            </div>
          </div>
        </div>
      @empty
        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body p-4 text-center text-muted">
            No hay eventos.
          </div>
        </div>
      @endforelse
    </div>
  </div>

  {{-- DESKTOP: tabla --}}
  <div class="d-none d-lg-block">
    <div class="card border-0 shadow-sm rounded-4">
      <div class="table-responsive">
        <table class="table mb-0 align-middle">
          <thead>
            <tr>
              <th>Fecha</th>
              <th>Título</th>
              <th>Cliente</th>
              <th>Estado</th>
              <th>Total</th>
              <th>Pagado</th>
              <th>Deuda</th>
              <th class="text-end">Acciones</th>
            </tr>
          </thead>
          <tbody>
            @forelse($eventos as $ev)
              @php $deuda = $ev->deuda ?? max(0, (int)$ev->total - (int)$ev->pagado); @endphp
              <tr>
                <td>{{ $ev->fecha_evento?->format('d-m-Y') ?? '—' }}</td>
                <td class="fw-semibold">{{ $ev->titulo }}</td>
                <td>{{ $ev->cliente_nombre ?? '—' }}</td>
                <td>{{ ucfirst($ev->estado ?? 'pendiente') }}</td>
                <td>${{ number_format($ev->total ?? 0, 0, ',', '.') }}</td>
                <td>${{ number_format($ev->pagado ?? 0, 0, ',', '.') }}</td>
                <td>${{ number_format($deuda, 0, ',', '.') }}</td>
                <td class="text-end">
                  <a class="btn btn-sm btn-outline-primary" href="{{ route('comercio.eventos.edit', $ev) }}">Editar</a>
                  <form class="d-inline" method="POST" action="{{ route('comercio.eventos.destroy', $ev) }}"
                        onsubmit="return confirm('¿Eliminar evento?');">
                    @csrf @method('DELETE')
                    <button class="btn btn-sm btn-outline-danger">Eliminar</button>
                  </form>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="8" class="text-center py-4 text-muted">No hay eventos.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="mt-3">
    {{ $eventos->links() }}
  </div>

</div>
@endsection