@extends('layouts.owner-dashboard')

@section('section-main')
    <div class="row">
        <div class="col-12">
            <div class="card card-custom">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" id="reportTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="sales-by-ticket-tab" data-toggle="tab" href="#sales-by-ticket" role="tab" aria-controls="sales-by-ticket" aria-selected="true">
                                <i class="fa fa-ticket mr-1"></i> Ventas por Boletas
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="generated-tickets-tab" data-toggle="tab" href="#generated-tickets" role="tab" aria-controls="generated-tickets" aria-selected="false">
                                <i class="fa fa-qrcode mr-1"></i> Tickets Generados
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="ticket-info-tab" data-toggle="tab" href="#ticket-info" role="tab" aria-controls="ticket-info" aria-selected="false">
                                <i class="fa fa-info-circle mr-1"></i> Info. de Tickets
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="reportTabsContent">
                        <!-- Reporte 1: Ventas por Boletas -->
                        <div class="tab-pane fade show active" id="sales-by-ticket" role="tabpanel" aria-labelledby="sales-by-ticket-tab">
                            <form action="{{ route('owner.reports.sales_by_ticket', $event->id) }}" method="POST">
                                @csrf
                                <div class="row align-items-end">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Fecha Inicio</label>
                                            <input type="text" name="date_start" class="form-control datepicker" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Fecha Fin</label>
                                            <input type="text" name="date_end" class="form-control datepicker" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Tipo de Boleta</label>
                                            <select name="ticket_type_id" class="form-control">
                                                <option value="">TODOS</option>
                                                @foreach($event->tickets as $ticket)
                                                    <option value="{{ $ticket->id }}">{{ $ticket->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-block">
                                                <i class="fa fa-file-pdf-o mr-1"></i> Descargar PDF
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Reporte 2: Tickets Generados -->
                        <div class="tab-pane fade" id="generated-tickets" role="tabpanel" aria-labelledby="generated-tickets-tab">
                            <form action="{{ route('owner.reports.generated_tickets', $event->id) }}" method="POST">
                                @csrf
                                <div class="row align-items-end">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Fecha Inicio</label>
                                            <input type="text" name="date_start" class="form-control datepicker" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Fecha Fin</label>
                                            <input type="text" name="date_end" class="form-control datepicker" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Tipo de Boleta</label>
                                            <select name="ticket_type_id" class="form-control">
                                                <option value="">TODOS</option>
                                                @foreach($event->tickets as $ticket)
                                                    <option value="{{ $ticket->id }}">{{ $ticket->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-block">
                                                <i class="fa fa-file-pdf-o mr-1"></i> Descargar PDF
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Reporte 3: Info. de Tickets -->
                        <div class="tab-pane fade" id="ticket-info" role="tabpanel" aria-labelledby="ticket-info-tab">
                            <form action="{{ route('owner.reports.ticket_info', $event->id) }}" method="POST">
                                @csrf
                                <div class="row align-items-end">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Fecha Inicio</label>
                                            <input type="text" name="date_start" class="form-control datepicker" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Fecha Fin</label>
                                            <input type="text" name="date_end" class="form-control datepicker" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Tipo de Boleta</label>
                                            <select name="ticket_type_id" class="form-control">
                                                <option value="">TODOS</option>
                                                @foreach($event->tickets as $ticket)
                                                    <option value="{{ $ticket->id }}">{{ $ticket->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-success btn-block">
                                                <i class="fa fa-file-excel-o mr-1"></i> Exportar a Excel
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-12">
                                        <small class="text-muted">
                                            <i class="fa fa-info-circle mr-1"></i>
                                            Exporta código, tipo de boleta, estado e información del comprador (nombre, email y campos de registro del evento).
                                        </small>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .card-custom {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }
        .card-header {
            background-color: white;
            border-bottom: 1px solid #f0f0f0;
            padding: 0 1.25rem;
        }
        .nav-tabs {
            border-bottom: none;
        }
        .nav-tabs .nav-link {
            border: none;
            padding: 1.25rem 1rem;
            font-weight: 600;
            color: #6b7280;
            transition: all 0.3s ease;
        }
        .nav-tabs .nav-link.active {
            color: #3b82f6;
            border-bottom: 3px solid #3b82f6;
            background: transparent;
        }
        .nav-tabs .nav-link:hover:not(.active) {
            color: #3b82f6;
            border-bottom: 3px solid #e0e7ff;
        }
    </style>
@endsection