@extends('layouts.adminLayout.dashboardLayout')

@section('content')
    <style>
        /* Style for small square tiles */
        .square-tile {
            width: 100%;
            position: relative;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* Base shadow */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 120px;
            background: linear-gradient(135deg, #ffffff, #f4f4f4);
            overflow: hidden;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            cursor: pointer;
        }

        .square-tile:hover {
            transform: scale(1.1);
            /* Slight scaling for hover */
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
            /* Glowing shadow effect */
            background: linear-gradient(135deg, #e0e0e0, #ffffff);
            /* Subtle gradient change */
        }

        .tile-content h4 {
            margin: 10;
            font-size: 16px;
            color: #333;
            font-weight: bold;
            transition: color 0.4s ease;
        }

        .tile-content p {
            margin: 0;
            font-size: 24px;
            color: #000;
            font-weight: bold;
            transition: color 0.4s ease;
        }

        .square-tile:hover .tile-content h4,
        .square-tile:hover .tile-content p {
            color: #555;
            /* Slight color change on hover */
        }

        /* Gradient backgrounds for each tile */
        .tcbg1 {
            background: linear-gradient(135deg, #81C784, #A5D6A7);
        }

        .tcbg2 {
            background: linear-gradient(135deg, #E57373, #EF9A9A);
        }

        .tcbg3 {
            background: linear-gradient(135deg, #FFB74D, #FFCC80);
        }

        .tcbg4 {
            background: linear-gradient(135deg, #4DD0E1, #80DEEA);
        }

        .tcbg5 {
            background: linear-gradient(135deg, #B39DDB, #D1C4E9);
        }

        .tcbg6 {
            background: linear-gradient(135deg, #D4E157, #E6EE9C);
        }


        .modal-dialog {
            max-width: 80%;
            /* Adjust the modal width */
            width: auto;
            /* Allow the width to auto-adjust */
            margin: 30px auto;
            /* Center the modal */
        }

        .modal-content {
            height: 80vh;
            /* Set the height as 80% of the viewport height */
            overflow: auto;
            /* Add scrolling if content overflows */
            border-radius: 8px;
            /* Optional: Add rounded corners for better aesthetics */
        }

        .table-wrapper {
            position: relative;
            overflow-x: auto;
            max-height: 500px;
            /* Adjust this based on your requirements */
        }

        #resultTable {
            width: 100%;
            border-collapse: collapse;
        }

        #resultTable th {
            position: sticky;
            top: 0;
            background-color: #f8f9fa;
            /* Set a background color for the header */
            z-index: 1;
            /* Ensure the header stays above the table body */
        }

        #resultTable th,
        #resultTable td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
    <main role="main" class="flex-shrink-0">
        <div class="container custom-container">

            <div class="login-5 mt-50 mb-50">
                <div class="container-fluid">
                    <div class="row no-gutters">
                        {{-- @include('layouts.partials.left_navbar') --}}
                        <div class="col-sm-12">
                            <div class="container-fluid">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="mb-0 p-2 fw-bold fs-3">Exam Filter </h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="container">
                                            <div class="row">
                                                <!-- Exam Mode -->
                                                <div class="col-md-12 d-flex align-items-center mb-3">
                                                    <label for="ExamModeSelect" class="form-label me-3"
                                                        style="white-space: nowrap;">Exam Mode</label>
                                                    <select class="form-select form-select-lg" id="ExamModeSelect"
                                                        name="ExamType">
                                                        <option value=''>Please Select Exam Mode</option>
                                                        @foreach ($examMode as $key => $val)
                                                            <option value="{{ $key }}">{{ $val }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <!-- Exam Name -->
                                                <div class="col-md-12 d-flex align-items-center mb-3">
                                                    <label for="ExamNameSelect" class="form-label me-3"
                                                        style="white-space: nowrap;">Exam Name</label>
                                                    <select class="form-select form-select-lg selectBox" id="ExamNameSelect"
                                                        name="ExamName">
                                                        <option value=''>Please Select Exam Name</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row mb-5">
                                                <!-- Search Functionality -->
                                                <div class="col-md-12 d-flex align-items-center">
                                                    <!-- Label -->
                                                    <label for="searchFunctionality" class="form-label me-3"
                                                        style="white-space: nowrap;">Search Functionality</label>
                                                    <!-- Input and Icon -->
                                                    <div class="d-flex align-items-center">
                                                        <a href="javascript:void(0);" data-bs-toggle="modal"
                                                            data-bs-target="#SearchFunctionalityModal"
                                                            class="d-flex align-items-center">
                                                            <input class="form-control me-2" type="text"
                                                                id="searchFunctionality" readonly style="width: auto;">
                                                            <i class="fa fa-filter fs-3 text-success"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col-md-12 d-flex align-items-center mt-5">
                                                    <div class="container" id="tilesContainer">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Search Functionality Modal -->
            <div class="modal fade" id="SearchFunctionalityModal" tabindex="-1"
                aria-labelledby="SearchFunctionalityModalLabel" aria-hidden="true" data-bs-backdrop="static"
                data-bs-keyboard="false">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="SearchFunctionalityModalLabel">Edit - Search Functionality</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <!-- Search Bar -->
                            <div class="mb-5">
                                <label for="searchInput" class="form-label">Search:</label>
                                <input type="text" id="searchInput" class="form-control" placeholder="Search here..."
                                    oninput="filterResults()" autocomplete="off">
                            </div>

                            <!-- Table -->
                            <div class="table-wrapper">
                                <table class="table table-striped table-bordered" id="resultTable">
                                    <thead class="">
                                        <tr>
                                            <th>Reference No.</th>
                                            <th>Functionary Name</th>
                                            <th>Exam Name</th>
                                            <th>Bill Status</th>
                                            <th>Functionary Role</th>
                                            <th>Emai ID</th>
                                            <th>Mobile No.</th>
                                        </tr>

                                    </thead>
                                    <tbody id="tableBody">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        {{-- <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div> --}}
                    </div>
                </div>
            </div>
            <!-- Search Functionality Modal -->
    </main>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#SearchFunctionalityModal').on('shown.bs.modal', function() {
            $('#searchInput').val('');
            const tableBody = document.getElementById('resultTable').getElementsByTagName('tbody')[0];
            tableBody.innerHTML = ''; // Clear previous results

        });

        $("#ExamModeSelect").on('change', function() {
            var examMode = $(this).val();
            var examName = $('#ExamNameSelect').val();
            $('.overlay').show();
            $.ajax({
                url: "{{ route('searchExam') }}",
                method: 'POST',
                data: {
                    examMode: examMode,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    console.log(response.success);
                    if (response.success == 1) {
                        $('.overlay').hide();
                        var examNameSelect = $('#ExamNameSelect');
                        examNameSelect.empty(); // Clear existing options
                        examNameSelect.append('<option value="">-Select Exam-</option>')
                        $.each(response.data, function(index, exam) {
                            examNameSelect.append($('<option>', {
                                value: exam.Exam_Type_Id,
                                text: exam.Exam_Name
                            }));
                        });
                        $('#tilesContainer').empty();
                    }
                },
                error: function(data) {
                    $('.overlay').hide();
                }
            });
        });

        jQuery('#ExamModeSelect').select2({
            placeholder: '--Select Exam Mode--',
            dropdownAutoWidth: true,
            allowClear: true
        });
        jQuery('#ExamNameSelect').select2({
            placeholder: '--Select Exam--',
            dropdownAutoWidth: true,
            allowClear: true
        });

        $('#ExamNameSelect').on('change', function() {
            let examID = $(this).val();
            if (examID == '') {
                $('#tilesContainer').empty();
                return false;
            }
            $('.overlay').show();
            $.ajax({
                url: "{{ route('countTotalBill') }}",
                method: 'POST',
                data: {
                    examID: examID,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    // console.log(response.data);
                    if (response.success == 1) {
                        $('.overlay').hide();
                        // Access the tiles container
                        let tilesContainer = $('#tilesContainer');

                        // Clear existing tiles
                        tilesContainer.empty();

                        // Append tiles dynamically
                        response.data.forEach(item => {
                            let tileHTML = `
                           
                            <div class="row mb-3">
                            <h5>${item.type.toUpperCase()}</h5>
                            <div class="col-md-2 mb-3">
                                <div class="square-tile tcbg1">
                                    <div class="tile-content">
                                        <h4>Open</h4>
                                        <p class="count-value">${item.status.open}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-2 mb-3">
                                <div class="square-tile tcbg3">
                                    <div class="tile-content">
                                        <h4>In Process Bill</h4>
                                        <p class="count-value">${item.status.processing}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-2 mb-3">
                                <div class="square-tile tcbg2">
                                    <div class="tile-content">
                                        <h4>Rejected</h4>
                                        <p class="count-value">${item.status.rejected}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-2 mb-3">
                                <div class="square-tile tcbg4">
                                    <div class="tile-content">
                                        <h4>Payment Completed</h4>
                                        <p class="count-value">${item.status.completed}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <div class="square-tile tcbg6">
                                    <div class="tile-content">
                                        <h4>Unsubmitted</h4>
                                        <p class="count-value">${item.status.unsubmitted}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <div class="square-tile tcbg5">
                                    <div class="tile-content">
                                        <h4>Total Bill</h4>
                                        <p class="count-value">${item.status.totalbill}</p>
                                    </div>
                                </div>
                            </div>`;
                            tilesContainer.append(tileHTML);
                        });
                    }

                },
                error: function(data) {
                    $('.overlay').hide();
                }
            });

        });


    });


    let sampleData = [];

    function fetchData() {
        // fetch('{{ route('allBill') }}') // Call the Laravel route
        //     .then(response => response.json()) // Parse the JSON response
        //     .then(data => {
        //         sampleData = data; // Store the data in the sampleData variable
        //         filterResults(); // Call filterResults to render the data in the table
        //     })
        //     .catch(error => console.error('Error fetching data:', error));

        $.ajax({
            url: "{{ route('allBill') }}",
            method: 'GET',
            data: {
                _token: '{{ csrf_token() }}'
            },
            dataType: 'json',
            success: function(response) {
                sampleData = response;
                filterResults();
            },
            error: function(data) {
                //$('.overlay').hide();
            }
        });
    }
    // Call fetchData when the page loads
    window.onload = fetchData;

    function filterResults() {
        const searchInput = document.getElementById('searchInput');
        const input = searchInput.value.toLowerCase();
        // Update the table with the filtered results
        const tableBody = document.getElementById('resultTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = ''; // Clear previous results

        // If the input is empty, display all data
        if (input === '') {
            sampleData.forEach(item => {
                tableBody.innerHTML = '';
            });
        } else {
            // Otherwise, filter the data based on the input value
            const filteredData = sampleData.filter(item =>
                item.ReferenceNo.toLowerCase().includes(input) ||
                item.ObserverName.toLowerCase().includes(input) ||
                item.ExamID.toLowerCase().includes(input) ||
                item.BillStatus.toLowerCase().includes(input) ||
                item.Role.toLowerCase().includes(input) ||
                item.Email.toLowerCase().includes(input) ||
                item.Mobile.toLowerCase().includes(input)
            );

            // Display filtered results
            filteredData.forEach(item => {
                const row = tableBody.insertRow();
                const cell1 = row.insertCell(0);
                const link = document.createElement('a');
                link.href = '#';
                link.textContent = item.ReferenceNo;
                link.style.color = 'green';
                link.style.textDecoration = 'underline';
                cell1.appendChild(link);
                //row.insertCell(0).textContent = '<a href="#">'+item.referenceno+'</a>';
                row.insertCell(1).textContent = item.ObserverName;
                row.insertCell(2).textContent = item.ExamID;
                row.insertCell(3).textContent = item.BillStatus;
                row.insertCell(4).textContent = item.Role;
                row.insertCell(5).textContent = item.Email;
                row.insertCell(6).textContent = item.Mobile;
            });
        }
    }
    // Initialize with all data
    filterResults();
</script>