@extends('layouts.admin')

@section('title', 'Reports')
@section('page-title', 'Reports')
@section('page-subtitle', 'Mission, Fleet, Zone, Questionnaire, Officer, Sea Trial and GPS reports')

@section('content')
<div class="row g-3 mb-3">
    <div class="col-12">
        <form method="GET" id="reportFilterForm" class="d-flex gap-2 flex-wrap panel p-3">
            <div>
                <label class="form-label small text-navy-300 mb-1">From</label>
                <input type="date" name="from" class="form-control form-control-sm">
            </div>
            <div>
                <label class="form-label small text-navy-300 mb-1">To</label>
                <input type="date" name="to" class="form-control form-control-sm">
            </div>
            <div>
                <label class="form-label small text-navy-300 mb-1">Fleet (GPS report)</label>
                <select name="fleet_id" class="form-select form-select-sm">
                    <option value="">All Fleets</option>
                    @foreach ($fleets as $fleet)
                        <option value="{{ $fleet->id }}">{{ $fleet->name }}</option>
                    @endforeach
                </select>
            </div>
        </form>
    </div>
</div>

<div class="row g-3">
    @foreach ($types as $key => $label)
        <div class="col-md-6 col-xl-4">
            <div class="panel p-3 h-100 d-flex flex-column">
                <div class="fw-semibold text-heading mb-2"><i class="bi bi-bar-chart"></i> {{ $label }}</div>
                <div class="mt-auto d-flex gap-2 flex-wrap">
                    <a href="#" class="btn btn-sm btn-outline-secondary preview-link" data-type="{{ $key }}"><i class="bi bi-eye"></i> Preview</a>
                    <a href="#" class="btn btn-sm btn-outline-success excel-link" data-type="{{ $key }}"><i class="bi bi-file-earmark-excel"></i> Excel</a>
                    <a href="#" class="btn btn-sm btn-outline-danger pdf-link" data-type="{{ $key }}"><i class="bi bi-file-earmark-pdf"></i> PDF</a>
                </div>
            </div>
        </div>
    @endforeach
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('reportFilterForm');
    const buildUrl = (base, type) => {
        const params = new URLSearchParams(new FormData(form)).toString();
        return `${base.replace('__TYPE__', type)}?${params}`;
    };
    document.querySelectorAll('.preview-link').forEach(el => el.addEventListener('click', (e) => {
        e.preventDefault();
        window.location.href = buildUrl("{{ route('admin.reports.preview', '__TYPE__') }}", el.dataset.type);
    }));
    document.querySelectorAll('.excel-link').forEach(el => el.addEventListener('click', (e) => {
        e.preventDefault();
        window.location.href = buildUrl("{{ route('admin.reports.export.excel', '__TYPE__') }}", el.dataset.type);
    }));
    document.querySelectorAll('.pdf-link').forEach(el => el.addEventListener('click', (e) => {
        e.preventDefault();
        window.location.href = buildUrl("{{ route('admin.reports.export.pdf', '__TYPE__') }}", el.dataset.type);
    }));
});
</script>
@endpush
@endsection