@extends('layouts.app')

@section('content')
    <!-- Hero container with relative positioning for overlay -->
    <div class="hero-container position-relative">
        <!-- Hero Image with animation -->
        <img src="{{ asset('storage/images/banner.png') }}" alt="Landscape" class="hero-image w-100">

        <!-- Search Form Overlay -->
        <div class="search-overlay container">
            <div class="row">
                <div class="col-12">
                    <div class="card search-form">
                        <div class="card-body">
                            <h5 class="fw-bold mb-3">XYZ Management</h5>
                            <form method="GET" action="/" id="searchForm">
                                <div class="row">
                                    <div class="col-md mb-3">
                                        <label class="form-label fw-medium">आर्थिक बर्ष<span
                                                class="text-danger">*</span></label>
                                        <select class="form-select" name="fiscal_year" id="fiscalYearSelect">
                                            <option value="">आर्थिक वर्ष चयन गार्नुहोस</option>
                                            @foreach ($fiscalYears as $year)
                                                <option value="{{ $year }}"
                                                    {{ request('fiscal_year') == $year ? 'selected' : '' }}>
                                                    आर्थिक वर्ष {{ $year }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md mb-3">
                                        <label class="form-label fw-medium">प्रदेश<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" placeholder="कोशी प्रदेश" disabled>
                                    </div>

                                    <div class="col-md mb-3">
                                        <label class="form-label fw-medium">जिल्ला <span
                                                class="text-danger">*</span></label>
                                        <select class="form-select" id="districtSelect" name="district">
                                            <option value="">जिल्ला चयन गर्नुहोस्</option>
                                            @foreach ($location as $district)
                                                <option value="{{ $district['id'] }}"
                                                    {{ request('district') == $district['id'] ? 'selected' : '' }}>
                                                    {{ $district['textNP'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md mb-3">
                                        <label class="form-label fw-medium">पालिका <span
                                                class="text-danger">*</span></label>
                                        <select class="form-select" id="municipalitySelect" name="municipality">
                                            <option value="">पालिका चयन गर्नुहोस्</option>
                                        </select>
                                    </div>

                                    <div class="col-md mb-3 mt-4">
                                        <div class="d-flex gap-2">
                                            <button type="submit" class="btn btn-primary search-btn">
                                                <i class="fas fa-search me-2"></i>पेश गर्नुहोस्
                                            </button>
                                            <button type="button" class="btn btn-secondary reset-btn" id="resetBtn">
                                                <i class="fas fa-undo me-2"></i>रिसेट
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between align-items-center w-100">
                                        <div class="d-flex gap-2">
                                            <button type="button"
                                                class="btn d-flex align-items-center justify-content-between flex-grow-1 custom-pill-btn bg-primary text-primary border-0 bg-opacity-10"
                                                style="width: 300px;">
                                                <span class="d-flex align-items-center">
                                                    <i class="bi bi-file-earmark-text fs-5 me-2"></i>
                                                    राजपत्र
                                                </span>
                                                <span
                                                    class="badge text-primary rounded-pill ms-2 bg-white">{{ $documentsCount }}</span>
                                            </button>
                                            <button type="button"
                                                class="btn d-flex align-items-center justify-content-between flex-grow-1 custom-pill-btn bg-danger text-danger border-0 bg-opacity-10"
                                                style="width: 300px;">
                                                <span class="d-flex align-items-center">
                                                    <i class="bi bi-megaphone fs-5 me-2"></i>
                                                    सूचनाहरु
                                                </span>
                                                <span
                                                    class="badge text-danger rounded-pill ms-2 bg-white">{{ $newsCount }}</span>
                                            </button>

                                            <button type="button"
                                                class="btn d-flex align-items-center justify-content-between flex-grow-1 custom-pill-btn bg-warning text-warning border-0 bg-opacity-10"
                                                style="width: 300px;">
                                                <span class="d-flex align-items-center">
                                                    <i class="bi bi-stack fs-5 me-2"></i>
                                                    बजेट
                                                </span>
                                                <span
                                                    class="badge text-warning rounded-pill ms-2 bg-white">{{ $moneyCount }}</span>
                                            </button>

                                            <button type="button"
                                                class="btn d-flex align-items-center justify-content-between flex-grow-1 custom-pill-btn bg-success text-success border-0 bg-opacity-10"
                                                style="width: 300px;">
                                                <span class="d-flex align-items-center">
                                                    <i class="bi bi-currency-rupee fs-5 me-2"></i>
                                                    खरिद
                                                </span>
                                                <span
                                                    class="badge text-success rounded-pill ms-2 bg-white">{{ $purchasesCount }}</span>
                                            </button>
                                        </div>

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

    <!-- Main Content -->
    <div class="container mt-5">
        <div class="row g-4">
            <!-- First Row of Cards -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="section-title">नया राजपत्र शिर्षक</h5>
                        <table class="table-hover table">
                            <thead>
                                <tr>
                                    <th>शीर्षक</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($documents as $document)
                                    <tr style="cursor:pointer;"
                                        onclick="window.location='{{ $document->documents ? asset('storage/' . $document->documents) : '#' }}'">
                                        <td>{{ $document->title }}</td>
                                        <td>
                                            @if ($document->documents)
                                                <a href="{{ asset('storage/' . $document->documents) }}"
                                                    class="btn btn-sm btn-primary" download
                                                    onclick="event.stopPropagation();">
                                                    डाउनलोड
                                                </a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @if ($documents instanceof \Illuminate\Pagination\LengthAwarePaginator)
                            {{ $documents->links('pagination::bootstrap-4') }}
                        @else
                            <a href="{{ route('content.show', 1) }}" class="text-info">See More....</a>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="section-title">नया सूचना शिर्षक</h5>
                        <table class="table-hover table">
                            <thead>
                                <tr>
                                    <th>शीर्षक</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($news as $newsItem)
                                    <tr style="cursor:pointer;"
                                        onclick="window.location='{{ $newsItem->supporting_documents
                                            ? asset('storage/' . $newsItem->supporting_documents)
                                            : ($newsItem->image
                                                ? asset('storage/' . $newsItem->image)
                                                : '#') }}'">
                                        <td>{{ $newsItem->title }}</td>
                                        <td>
                                            @if ($newsItem->supporting_documents)
                                                <a href="{{ asset('storage/' . $newsItem->supporting_documents) }}"
                                                    class="btn btn-sm btn-primary" download
                                                    onclick="event.stopPropagation();">
                                                    डाउनलोड
                                                </a>
                                            @elseif ($newsItem->image)
                                                <a href="{{ asset('storage/' . $newsItem->image) }}"
                                                    class="btn btn-sm btn-primary" download
                                                    onclick="event.stopPropagation();">
                                                    डाउनलोड
                                                </a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @if ($documents instanceof \Illuminate\Pagination\LengthAwarePaginator)
                            {{ $documents->links('pagination::bootstrap-4') }}
                        @else
                            <a href="{{ route('content.show', 2) }}" class="text-info">See More....</a>
                        @endif
                    </div>
                </div>
            </div>
            <!-- Second Row of Cards -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="section-title">नया खरीद शिर्षक</h5>
                        <table class="table-hover table">
                            <thead>
                                <tr>
                                    <th>शीर्षक</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($purchases as $purchase)
                                    <tr style="cursor:pointer;"
                                        onclick="window.location='{{ $purchase->supporting_documents
                                            ? asset('storage/' . $purchase->supporting_documents)
                                            : ($purchase->image
                                                ? asset('storage/' . $purchase->image)
                                                : '#') }}'">
                                        <td>{{ $purchase->title }}</td>
                                        <td>
                                            @if ($purchase->supporting_documents)
                                                <a href="{{ asset('storage/' . $purchase->supporting_documents) }}"
                                                    class="btn btn-sm btn-primary" download
                                                    onclick="event.stopPropagation();">
                                                    डाउनलोड
                                                </a>
                                            @elseif ($purchase->image)
                                                <a href="{{ asset('storage/' . $purchase->image) }}"
                                                    class="btn btn-sm btn-primary" download
                                                    onclick="event.stopPropagation();">
                                                    डाउनलोड
                                                </a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @if ($documents instanceof \Illuminate\Pagination\LengthAwarePaginator)
                            {{ $purchase->links('pagination::bootstrap-4') }}
                        @else
                            <a href="{{ route('content.show', 3) }}" class="text-info">See More....</a>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="section-title">नया बजेट शिर्षक</h5>
                        <table class="table-hover table">
                            <thead>
                                <tr>
                                    <th>शीर्षक</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($money as $purchase)
                                    <tr style="cursor:pointer;"
                                        onclick="window.location='{{ $purchase->supporting_documents
                                            ? asset('storage/' . $purchase->supporting_documents)
                                            : ($purchase->image
                                                ? asset('storage/' . $purchase->image)
                                                : '#') }}'">
                                        <td>{{ $purchase->title }}</td>
                                        <td>
                                            @if ($purchase->supporting_documents)
                                                <a href="{{ asset('storage/' . $purchase->supporting_documents) }}"
                                                    class="btn btn-sm btn-primary" download
                                                    onclick="event.stopPropagation();">
                                                    डाउनलोड
                                                </a>
                                            @elseif ($purchase->image)
                                                <a href="{{ asset('storage/' . $purchase->image) }}"
                                                    class="btn btn-sm btn-primary" download
                                                    onclick="event.stopPropagation();">
                                                    डाउनलोड
                                                </a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @if ($documents instanceof \Illuminate\Pagination\LengthAwarePaginator)
                            {{ $purchase->links('pagination::bootstrap-4') }}
                        @else
                            <a href="{{ route('content.show', 4) }}" class="text-info">See More....</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const districtSelect = document.getElementById('districtSelect');
            const municipalitySelect = document.getElementById('municipalitySelect');
            const resetBtn = document.getElementById('resetBtn');

            function populateMunicipalities() {
                const locations = @json($location);
                const selectedDistrictId = parseInt(districtSelect.value);
                const district = locations.find(loc => loc.id === selectedDistrictId);
                const selectedMunicipality = "{{ request('municipality') ?? '' }}";

                municipalitySelect.innerHTML = '<option value="">पालिका चयन गर्नुहोस्</option>';

                if (district && district.localLevel) {
                    district.localLevel.forEach(muni => {
                        const option = document.createElement('option');
                        option.value = muni.id;
                        option.textContent = muni.textNP;
                        if (selectedMunicipality && muni.id == selectedMunicipality) {
                            option.selected = true;
                        }
                        municipalitySelect.appendChild(option);
                    });
                }
            }

            districtSelect.addEventListener('change', function() {
                municipalitySelect.innerHTML = '<option value="">पालिका चयन गर्नुहोस्</option>';
                populateMunicipalities();
            });

            resetBtn.addEventListener('click', function() {
                window.location.href = window.location.pathname;
            });
            if (districtSelect.value) {
                populateMunicipalities();
            }
        });


        document.getElementById('municipalitySelect').addEventListener('change', function() {
            const selectedMunicipality = this.value;

            // Send AJAX to store in session
            fetch("/", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        municipality: selectedMunicipality,
                        district: document.getElementById('districtSelect').value,
                        fiscal_year: document.querySelector(
                            'select.form-select').value
                    })
                })
                .then(res => res.json())
                .then(data => {
                    console.log("Session updated:", data);
                })
                .catch(err => {
                    console.error("Error storing municipality:", err);
                });
        });
    </script>
@endsection