@if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Sales Rep' || Auth::user()->role == 'Sales Moderator')
    @extends('layouts.master')
    @section('title')
        Fed Sales
    @endsection

    @section('content')
        <style>
            .mt-4 p {
                font-size: larger;
            }

            .selection {
                font-size: small;
            }

            .select2.select2-container.select2-container--default.select2-container--below {
                overflow-y: scroll;
                max-height: 80px;
            }

            .select2-container--default .select2-results__option[aria-selected=true] {
                display: none;
            }

            select {
                width: 100%;
            }

            body {
                margin: 0;
                display: flex;
                height: 100vh;
            }

            li {
                font-size: 70%;
            }

            main {
                margin: 0px;
                margin-top: 10%;
                padding: 0px;
                display: flex;
                height: 78vh;
                font-size: 75%;
            }

            main h5 {
                font-size: 1rem;
            }

            main h6 {
                font-size: 0.7rem;
            }

            #staticDiv {
                padding: 5px 20px;
                width: 27rem;
                box-sizing: border-box;
                max-height: 80vh;
                /* Set a maximum height relative to the viewport height */
                overflow-y: auto;
                /* Add vertical scrollbar when content exceeds the height */
                /* Other styles... */
                height: 78%;

            }

            #scrollableDiv {
                flex: 1;
                overflow-y: auto;
                padding: 20px;
                box-sizing: border-box;
                width: 100%;
                height: 87vh;
            }


            /* Additional styling for responsiveness */
            @media (max-width: 768px) {
                main {
                    flex-direction: column;
                    align-items: center;
                    /* Center the content in the column */
                }

                #staticDiv {
                    width: 100%;
                    max-height: none;
                    /* Reset max height for small screens */
                    overflow-y: auto;
                    /* Keep vertical scrollbar for smaller screens if needed */
                }

                #scrollableDiv {
                    width: 100%;
                    overflow-x: hidden;
                }
        </style>

        <div style="display: flex; overflow: hidden;">
            <div id="staticDiv">
                <!-- Toggle Filter Section -->
                <div style="display: flex; justify-content: space-evenly;" class="filter-toggle mb-2">
                    {{-- <button class="btn btn-info font-bold py-2 px-4 rounded" onclick="toggleFilterSection()">
                        Toggle Filters
                    </button> --}}
                    <button id="applyFilter" class="btn btn-primary font-bold py-2 px-4 rounded">
                        Apply Filter
                    </button>
                    @if (Auth::user()->name == 'Dev'||Auth::user()->name == 'Harry King')
                        <a href="{{ route('sam.export') }}" class="btn btn-success font-bold py-2 px-4">
                            <i class="fas fa-file-excel"></i> Export to Excel
                        </a>
                    @endif

                </div>

                <!-- Filter Section (Initially Hidden) -->
                <div id="filter-section" class="filter-section">
                    <!-- Search Bar and Button -->
                    <div class="mb-1">
                        <label for="search" class="block dark:text-gray-300 font-bold mb-1">
                            Search:
                        </label><br>
                        <input style="color: black; width:100%;" type="text" id="search" name="search"
                            class="border rounded w-full py-2 px-3 mb-1">
                        {{-- <button id="searchButton"
                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                            Search
                        </button> --}}
                    </div>
                    <!-- Filter by User -->
                    <div class="mb-1">
                        <label for="userFilter" class="block dark:text-gray-300 font-bold mb-1">
                            Filter by User:
                        </label><br>
                        <select id="userFilter" name="userFilter" class="border rounded w-full py-2 px-3">
                            <option value="">All Users</option>
                            @foreach ($users as $user)
                                @if ($user->role == 'Sales Rep' || $user->role == 'Admin' || $user->role == 'Sales Moderator')
                                    <option value="{{ $user->id }}"
                                        {{ request('userFilter') == $user->name ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <!-- Filter by Opportunity Type -->
                    <div class="mb-1 overflow-x-visible">
                        <label for="opportunityTypeFilter" class="block  dark:text-gray-300 font-bold mb-1">
                            Filter by Opportunity Type:
                        </label> <br>
                        <select style="display: none; width:100%;" id="opportunityTypeFilter" name="opportunityTypeFilter[]"
                            class="border rounded w-full py-2 px-3" multiple="multiple">
                            @foreach ($opportunityTypeOptions as $opportunityType)
                                <option value="{{ $opportunityType }}"
                                    {{ in_array($opportunityType, (array) request('opportunityTypeFilter', [])) ? 'selected' : '' }}>
                                    {{ $opportunityType }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Filter by Department -->
                    <div class="mb-1">
                        <label for="departmentFilter" class="block  dark:text-gray-300 font-bold mb-1">Filter by
                            Department:</label> <br>
                        <select style="width: 100%" id="departmentFilter" name="departmentFilter"
                            class="border rounded w-full py-2 px-3">
                            <option value="">All Departments</option>
                            @foreach ($departmentOptions as $department)
                                <option value="{{ $department }}"
                                    {{ request('departmentFilter', 'All Departments') == $department ? 'selected' : '' }}>
                                    {{ $department }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Published Date Filter -->
                    <div class="mb-1">
                        <label for="publishedDateFilter" class="block dark:text-gray-300 font-bold mb-1">
                            Filter by Published Date:
                        </label><br>
                        <select id="publishedDateFilter" name="publishedDateFilter" class="border rounded w-full py-2 px-3">
                            <option value="">All Published Dates</option>
                            @foreach ($dateOptions as $date)
                                <option value="{{ $date }}"
                                    {{ request('publishedDateFilter') == $date ? 'selected' : '' }}>
                                    {{ $date }} <!-- Already in "Apr 01, 2024" format -->
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Updated Date Filter -->
                    <div class="mb-1">
                        <label for="updatedDateFilter" class="block dark:text-gray-300 font-bold mb-1">
                            Filter by Updated Date:
                        </label><br>
                        <select id="updatedDateFilter" name="updatedDateFilter" class="border rounded w-full py-2 px-3">
                            <option value="">All Updated Dates</option>
                            @foreach ($updatedDateOptions as $date)
                                <option value="{{ $date }}"
                                    {{ request('updatedDateFilter') == $date ? 'selected' : '' }}>
                                    {{ $date }} <!-- Formatted as "Dec 31, 2023" -->
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Filter by Status -->
                    <div class="mb-1">
                        <label for="statusFilter" class="block  dark:text-gray-300 font-bold mb-1">
                            Filter by Status:
                        </label> <br>
                        <select id="statusFilter" name="statusFilter" class="border rounded w-full py-2 px-3">
                            <option value="">All Statuses</option>
                            <option value="Pending">Pending</option>
                            <option value="Quote Requested">Quote Requested</option>
                            <option value="Quote Received">Quote Received</option>
                            <option value="Waiting for Info">Waiting for Info</option>
                            <option value="Submitted">Submitted</option>
                            <option value="Won">Won</option>
                            <option value="Lost">Lost</option>
                        </select>
                    </div>
                </div>
                <!-- End Filter Section -->
            </div>
            <div id="scrollableDiv">
                @include('fed-sales-results', ['sam_govs' => $sam_govs])
            </div>
        </div>


        <script>
            // Global variable for Select2 instance
            let opportunityTypeSelect;

            document.addEventListener('DOMContentLoaded', function() {
                // Initialize Select2
                opportunityTypeSelect = $('#opportunityTypeFilter').select2({
                    placeholder: "Select Opportunity Types",
                    allowClear: true,
                    width: '100%',
                    closeOnSelect: false
                });

                // DOM Elements
                const scrollableDiv = document.getElementById('scrollableDiv');
                const searchInput = document.getElementById('search');
                const statusFilter = document.getElementById('statusFilter');
                const publishedDateFilter = document.getElementById('publishedDateFilter');
                const departmentFilter = document.getElementById('departmentFilter');
                const updatedDateFilter = document.getElementById('updatedDateFilter');
                const userFilter = document.getElementById('userFilter');
                const applyFilterBtn = document.getElementById('applyFilter');

                // Status change handler
                scrollableDiv.addEventListener('change', function(e) {
                    if (e.target.classList.contains('status-select')) {
                        const select = e.target;
                        const form = select.closest('form');
                        const formData = new FormData(form);

                        fetch(form.action, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json'
                                },
                                body: formData
                            })
                            .then(response => response.json())
                            .then(data => {
                                select.style.backgroundColor = data.status_color;
                            })
                            .catch(error => console.error('Error:', error));
                    }
                });

                // Debounce function
                const debounce = (func, delay) => {
                    let timeout;
                    return function() {
                        const context = this;
                        const args = arguments;
                        clearTimeout(timeout);
                        timeout = setTimeout(() => func.apply(context, args), delay);
                    };
                };

                // Build filter parameters
                const buildFilterParams = () => {
                    const params = new URLSearchParams();

                    if (searchInput.value) params.append('search', searchInput.value);
                    if (statusFilter.value) params.append('statusFilter', statusFilter.value);
                    if (publishedDateFilter.value) params.append('publishedDateFilter', publishedDateFilter.value);
                    if (departmentFilter.value) params.append('departmentFilter', departmentFilter.value);
                    if (updatedDateFilter.value) params.append('updatedDateFilter', updatedDateFilter.value);
                    if (userFilter.value) params.append('userFilter', userFilter.value);

                    const selectedTypes = $('#opportunityTypeFilter').val();
                    if (selectedTypes && selectedTypes.length > 0) {
                        params.append('opportunityTypeFilter', selectedTypes.map(encodeURIComponent).join(','));
                    }

                    params.append('ajax', 'true');
                    return params;
                };

                // Apply filters
                const applyFilter = async (page = 1) => {
                    scrollableDiv.innerHTML = `
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2">Loading results...</p>
                        </div>`;

                    try {
                        const params = buildFilterParams();
                        params.append('page', page);
                        const url = `{{ route('dashboard') }}?${params.toString()}`;

                        const response = await fetch(url, {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });

                        if (!response.ok) {
                            const error = await response.json();
                            throw new Error(error.error || 'Network response was not ok');
                        }

                        const html = await response.text();
                        scrollableDiv.innerHTML = html;
                        history.replaceState(null, '', url);
                    } catch (error) {
                        console.error('Filter error:', error);
                        scrollableDiv.innerHTML = `
                            <div class="alert alert-danger">
                                Error: ${error.message}
                            </div>`;
                    }
                };
                document.getElementById('scrollableDiv').addEventListener('click', function(e) {
                    if (e.target.closest('.pagination a')) {
                        e.preventDefault();
                        const url = new URL(e.target.href);
                        const page = url.searchParams.get('page');
                        applyFilter(page);
                    }
                });
                // Event listeners
                searchInput.addEventListener('input', debounce(applyFilter, 300));
                statusFilter.addEventListener('change', applyFilter);
                publishedDateFilter.addEventListener('change', applyFilter);
                departmentFilter.addEventListener('change', applyFilter);
                updatedDateFilter.addEventListener('change', applyFilter);
                userFilter.addEventListener('change', applyFilter);
                opportunityTypeSelect.on('change', applyFilter);

                if (applyFilterBtn) {
                    applyFilterBtn.addEventListener('click', applyFilter);
                }

                // Initial filter if URL has parameters
                if (window.location.search) {
                    applyFilter();
                }
            });
        </script>
        <style>
            .select2-dropdown-custom {
                z-index: 1051 !important;
                /* Above modals */
                max-height: 300px;
                overflow-y: auto;
            }

            .select2-container--default .select2-results__option[aria-selected=true] {
                display: none;
            }

            .status-select {
                transition: background-color 0.3s ease;
                cursor: pointer;
            }

            /* Add any additional custom styles here */
        </style>
    @endsection
@else
    @include('pages-404')
@endif