@extends('layouts.vertical-individual', ['page_title' => $title ?? 'Monsoon Yatra Activity List'])

@section('css')
    <style>
        body .account-pages > .container {
            max-width: 100%;
            padding-left: 0;
            padding-right: 0;
        }

        .monsoon-yatra-report-page .row {
            --bs-gutter-x: 0;
            margin-left: 0;
            margin-right: 0;
        }

        .monsoon-yatra-report-page .card {
            border-left: 0;
            border-right: 0;
            border-radius: 0;
            margin-bottom: 0;
        }

        .monsoon-yatra-report-page .card-body {
            padding-left: 0;
            padding-right: 0;
        }

        .monsoon-yatra-report-page .page-header {
            padding-left: 12px;
            padding-right: 12px;
        }

        .monsoon-yatra-report-table th,
        .monsoon-yatra-report-table td {
            white-space: nowrap;
            vertical-align: middle;
            border: 1px solid #dee2e6;
            font-size: 12px;
        }

        .monsoon-yatra-report-table thead th {
            text-align: center;
            background: #f8f9fa;
        }

        .monsoon-yatra-report-scroll {
            overflow-x: auto;
            container-type: inline-size;
        }

        .monsoon-yatra-report-table .frozen-col {
            position: sticky;
            left: 0;
            z-index: 2;
            background: #fff;
            min-width: 120px;
            max-width: min(50cqw, 50vw);
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .monsoon-yatra-report-table thead .frozen-col {
            z-index: 3;
            background: #f8f9fa;
        }

        .monsoon-yatra-filter-panel {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 16px;
            margin-bottom: 16px;
        }

        .date-range-fields {
            display: none;
        }

        .date-range-fields.is-visible {
            display: block;
        }

        @media (max-width: 767.98px) {
            .monsoon-yatra-filter-panel {
                padding: 8px 10px;
                margin-bottom: 10px;
            }

            .monsoon-yatra-filter-panel .form-label {
                font-size: 11px;
                margin-bottom: 2px;
            }

            .monsoon-yatra-filter-panel .row {
                --bs-gutter-x: 0.35rem;
                --bs-gutter-y: 0.35rem;
            }

            .monsoon-yatra-filter-panel .form-select-sm,
            .monsoon-yatra-filter-panel .form-control-sm {
                font-size: 11px;
                padding: 0.2rem 0.35rem;
            }

            .monsoon-yatra-filter-actions .btn {
                font-size: 11px;
                padding: 0.25rem 0.5rem;
            }
        }

        .monsoon-yatra-report-pagination {
            padding: 12px 16px;
            border-top: 1px solid #dee2e6;
            background: #fff;
        }

        .monsoon-yatra-report-pagination .pagination {
            margin-bottom: 0;
            flex-wrap: wrap;
            justify-content: center;
        }

        .monsoon-yatra-report-pagination .page-link {
            padding: 0.25rem 0.55rem;
            font-size: 12px;
            line-height: 1.25;
        }

        @media (max-width: 767.98px) {
            .monsoon-yatra-report-pagination {
                padding: 10px 8px;
            }

            .monsoon-yatra-report-pagination .page-link {
                padding: 0.2rem 0.45rem;
                font-size: 11px;
            }
        }
    </style>
@endsection

@section('content')
    @php
        $filters = $filters ?? [];
        $filterOptions = $filterOptions ?? ['zones' => [], 'states' => [], 'educator_hqs' => [], 'educator_names' => []];
        $exportQuery = http_build_query(array_filter(array_merge($filters, !empty($token ?? '') ? ['token' => $token] : []), fn ($v) => $v !== '' && $v !== null));
        $reportQuery = !empty($token ?? '') ? ('?token=' . urlencode($token)) : '';
    @endphp
    <div class="monsoon-yatra-report-page">
        <div class="row mb-3 page-header align-items-end">
            <div class="col-md-6">
                <h4 class="page-title">{{ $title }}</h4>
                <p class="text-muted mb-0">Sorted by Zone, then State. Use filters to narrow by date or attributes.</p>
            </div>
            <div class="col-md-6 text-end">
                @foreach ($buttons ?? [] as $button)
                    <a href="{{ $button['link'] }}" class="btn btn-dark btn-sm me-2">{{ $button['title'] }}</a>
                @endforeach
                <a href="{{ $base_url }}/export?{{ $exportQuery }}" class="btn btn-success btn-sm">Export</a>
            </div>
        </div>

        @if (session()->has('message'))
            <div class="alert alert-success">{{ session()->get('message') }}</div>
        @endif
        @if (session()->has('error'))
            <div class="alert alert-danger">{{ session()->get('error') }}</div>
        @endif

        <div class="card">
            <div class="card-body">
                <form method="get" action="{{ $base_url }}/report" class="monsoon-yatra-filter-panel" id="monsoon-yatra-filter-form">
                    @if (!empty($token ?? ''))
                        <input type="hidden" name="token" value="{{ $token }}">
                    @endif
                    <div class="row g-2 g-md-3 align-items-end">
                        <div class="col-4 col-md-3">
                            <label class="form-label">Date filter</label>
                            <select name="date_mode" id="date_mode" class="form-select form-select-sm">
                                <option value="single"@if(($filters['date_mode'] ?? 'single') === 'single') selected @endif>Single date</option>
                                <option value="range"@if(($filters['date_mode'] ?? '') === 'range') selected @endif>Date range</option>
                            </select>
                        </div>
                        <div class="col-4 col-md-3" id="single-date-field">
                            <label class="form-label">Activity date</label>
                            <input type="date" name="activity_date" class="form-control form-control-sm" value="{{ $filters['activity_date'] ?? '' }}">
                        </div>
                        <div class="col-4 col-md-3 date-range-fields @if(($filters['date_mode'] ?? 'single') === 'range') is-visible @endif" id="date-range-fields">
                            <label class="form-label">From</label>
                            <input type="date" name="date_from" class="form-control form-control-sm" value="{{ $filters['date_from'] ?? '' }}">
                        </div>
                        <div class="col-4 col-md-3 date-range-fields @if(($filters['date_mode'] ?? 'single') === 'range') is-visible @endif">
                            <label class="form-label">To</label>
                            <input type="date" name="date_to" class="form-control form-control-sm" value="{{ $filters['date_to'] ?? '' }}">
                        </div>
                        <div class="col-4 col-md-3">
                            <label class="form-label">Zone</label>
                            <select name="zone" class="form-select form-select-sm">
                                <option value="">All zones</option>
                                @foreach ($filterOptions['zones'] as $zone)
                                    <option value="{{ $zone }}"@if(($filters['zone'] ?? '') === $zone) selected @endif>{{ $zone }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4 col-md-3">
                            <label class="form-label">State</label>
                            <select name="state" class="form-select form-select-sm">
                                <option value="">All states</option>
                                @foreach ($filterOptions['states'] as $state)
                                    <option value="{{ $state }}"@if(($filters['state'] ?? '') === $state) selected @endif>{{ $state }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4 col-md-3">
                            <label class="form-label">Educator HQ</label>
                            <select name="educator_hq" class="form-select form-select-sm">
                                <option value="">All HQs</option>
                                @foreach ($filterOptions['educator_hqs'] as $hq)
                                    <option value="{{ $hq }}"@if(($filters['educator_hq'] ?? '') === $hq) selected @endif>{{ $hq }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4 col-md-3">
                            <label class="form-label">Educator Name</label>
                            <select name="educator_name" class="form-select form-select-sm">
                                <option value="">All educators</option>
                                @foreach ($filterOptions['educator_names'] as $educator)
                                    <option value="{{ $educator }}"@if(($filters['educator_name'] ?? '') === $educator) selected @endif>{{ $educator }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4 col-md-3">
                            <label class="form-label">Per page</label>
                            <select name="per_page" class="form-select form-select-sm">
                                @foreach ([25, 50, 100, 200] as $size)
                                    <option value="{{ $size }}"@if((int)($filters['per_page'] ?? 50) === $size) selected @endif>{{ $size }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-3 monsoon-yatra-filter-actions text-md-start text-end">
                            <button type="submit" class="btn btn-primary btn-sm me-1">Apply</button>
                            <a href="{{ $base_url }}/report{{ $reportQuery }}" class="btn btn-link btn-sm">Clear</a>
                        </div>
                    </div>
                </form>

                <div class="monsoon-yatra-report-scroll">
                    <table class="table table-sm table-bordered monsoon-yatra-report-table mb-0">
                        <thead>
                            <tr>
                                <th class="frozen-col">Date</th>
                                <th>State</th>
                                <th>Zone</th>
                                <th>Educator HQ</th>
                                <th>Educator Name</th>
                                <th>Educator Manager</th>
                                <th>Camp Area</th>
                                <th>Time</th>
                                <th>MSL Code</th>
                                <th>Doctor Name</th>
                                <th>Doctor Speciality</th>
                                <th>Chemist Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $row)
                                <tr>
                                    <td class="frozen-col">{{ $row->activity_date ? \Carbon\Carbon::parse($row->activity_date)->format('d/m/Y') : '' }}</td>
                                    <td>{{ $row->state }}</td>
                                    <td>{{ $row->zone }}</td>
                                    <td>{{ $row->educator_hq }}</td>
                                    <td>{{ $row->educator_name }}</td>
                                    <td>{{ $row->educator_manager }}</td>
                                    <td>{{ $row->camp_area }}</td>
                                    <td>{{ $row->activity_time }}</td>
                                    <td>{{ $row->msl_code }}</td>
                                    <td>{{ $row->doctor_name }}</td>
                                    <td>{{ $row->doctor_speciality }}</td>
                                    <td>{{ $row->chemist_name }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="12" class="text-center text-muted">No activity records found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if ($rows->hasPages())
                    <div class="monsoon-yatra-report-pagination d-flex flex-column flex-md-row justify-content-md-between align-items-center gap-2 mt-3">
                        <div class="text-muted small text-center text-md-start mb-0">
                            Showing {{ $rows->firstItem() }}–{{ $rows->lastItem() }} of {{ $rows->total() }} records
                            (page {{ $rows->currentPage() }} of {{ $rows->lastPage() }})
                        </div>
                        {{ $rows->links('pagination::bootstrap-4') }}
                    </div>
                @elseif ($rows->total() > 0)
                    <div class="text-muted small mt-3">{{ $rows->total() }} record(s)</div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        (function () {
            var dateMode = document.getElementById('date_mode');
            var singleField = document.getElementById('single-date-field');
            var rangeFields = document.querySelectorAll('.date-range-fields');

            function syncDateFields() {
                var isRange = dateMode && dateMode.value === 'range';
                if (singleField) {
                    singleField.style.display = isRange ? 'none' : '';
                }
                rangeFields.forEach(function (el) {
                    el.classList.toggle('is-visible', isRange);
                });
            }

            if (dateMode) {
                dateMode.addEventListener('change', syncDateFields);
                syncDateFields();
            }
        })();
    </script>
@endsection