@extends('layouts.app')

@section('content')
    <section class="content-header d-print-none">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $page_title ?? 'Reports' }} - {{ strtoupper($form) }}</h1>
                </div>

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

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <!-- Filters -->
                            <form method="POST" action="{{ $htmlRoute }}" class="mb-3 d-print-none report-form">
                                <div class="row">
                                    <div class="form-group col-md-2">
                                        <label><i class="fas fa-building mr-1"></i>Client Name</label>
                                        <select name="client_id" id="client_id" class="form-control"
                                            data-url="{{ route('get-client-location', ['id' => '__ID__']) }}">
                                            <option value="">Select Client</option>
                                            @foreach ($client as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-2">
                                        <label><i class="fas fa-map-marker-alt mr-1"></i>Location</label>
                                        <select name="location_id" id="client_location" class="form-control">
                                            <option value="">Select Location</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-2">
                                        <label for="year"><i class="fas fa-calendar-alt mr-1"></i>Year</label>
                                        <select name="year" id="year" class="form-control">
                                            <option value="">Select Year</option>
                                            @foreach ($years as $y)
                                                <option value="{{ $y }}">{{ $y }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-2">
                                        <label for="month"><i class="fas fa-calendar mr-1"></i>Month</label>
                                        <select name="month" id="month" class="form-control">
                                            <option value="">Select Month</option>
                                            @foreach ($months as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-2 align-self-end">
                                        @csrf
                                        <button type="submit" class="btn btn-primary w-100">
                                            <i class="fas fa-chart-bar mr-1"></i>Generate Report
                                        </button>
                                    </div>

                                    <div class="form-group col-md-2 align-self-end">
                                        <button type="button" class="btn btn-outline-danger w-100 download-pdf-btn" 
                                                data-pdf-url="{{ $pdfRoute }}">
                                            <i class="fas fa-file-pdf mr-1"></i>Export PDF
                                        </button>
                                    </div>
                                </div>
                            </form>

                            <div id="report-container" class="mt-4">
                                <div class="text-center text-muted py-5">
                                    <i class="fas fa-file-alt fa-3x mb-3"></i>
                                    <h5>Select filters and click "Generate Report" to view the {{ strtoupper($form) }} form</h5>
                                    <p class="mb-0">Choose client, location, year, and month to generate your report</p>
                                </div>
                            </div>

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

@push('styles')
    <style>
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            height: 80px;
            white-space: nowrap;
        }
        
        .table-responsive {
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }
        
        .table-responsive::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        .table-responsive::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        .table-responsive::-webkit-scrollbar-thumb {
            background: #007bff;
            border-radius: 4px;
        }
        
        @media print { 
            .d-print-none { display: none !important; }
            @page { size: A4 landscape; margin: 10mm; }
            .table-responsive { 
                max-height: none !important; 
                overflow: visible !important; 
                border: none;
            }
            .vertical-text {
                writing-mode: horizontal-tb !important;
                text-orientation: initial !important;
                height: auto !important;
            }
        }
    </style>
@endpush

@push('scripts')
    <!-- Include reports JavaScript -->
    <script src="{{ asset('public/assets/dist/js/reports.js') }}"></script>
@endpush