@extends('layout.layout')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/datatable.custom.css') }}">
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <!-- Boxicons CSS for styling icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/css/boxicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/css/animations.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/css/transformations.min.css">

    <!-- Boxicons JS for icon functionalities -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/dist/boxicons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.all.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Merriweather:wght@400&display=swap"
        rel="stylesheet">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="authority-level" content="{{ session('authority_level') }}">
    <meta name="shortcode" content="{{ session('shortcode') }}">

    <style>
        .table tbody tr td {
            border-width: 1px !important;
            border-style: solid;
            border-color: #efefef;
        }
        .dataTable tbody tr{
            font-size: 16px !important;

        }
        .dataTable tbody tr:hover {
            background-color: #D4F3FF !important; /* Example hover color */
            color: #000000;
            font-size: 16px !important;
        }
        .th-highlight {
            background-color: #b4e2f3 !important; /* Example highlight color */
            color: #333 !important;
        }
        .row-highlight {
            background-color: #FFE7AB !important; /* Row highlight color */
            color: #000000 !important;
        }
        .card {
            /* Use a percentage of viewport height for responsiveness */
            height: 70vh;
            min-height: 525px;
            max-height: 100vh;
            overflow-y: auto;
            overflow-x: visible;
            transition: height 0.2s;
        }

        /* On small screens, reduce min/max height for better fit */
        @media (max-width: 768px) {
            .card {
                height: 70vh;
                min-height: 200px;
                max-height: 100vh;
            }
        }

        /* Table responsive remains auto */
        .table-responsive {
            height: auto !important;
            overflow: visible !important;
        }
    </style>
    <script>
        // Highlight table header on click
        document.addEventListener('DOMContentLoaded', function () {
            // For both tables (print and non-print)
            ['dataTablePrint', 'dataTableNonPrint'].forEach(function(tableId) {
                const table = document.getElementById(tableId);
                if (table) {
                    const ths = table.querySelectorAll('thead th');
                    ths.forEach(function(th) {
                        th.addEventListener('click', function() {
                            ths.forEach(function(otherTh) {
                                otherTh.classList.remove('th-highlight');
                            });
                            th.classList.add('th-highlight');
                        });
                    });


                }
            });
        });
    </script>
    <link rel="stylesheet" href="{{ asset('assets/css/school-resource.css') }}">
    <div class="m-3 ">
        <div class="row mb-0 align-items-center">
            <!-- First Div (Left aligned) for the nav-tabs -->
            <div class="col-md-8 ">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="tab-button active" id="print-tab" data-bs-toggle="tab" data-bs-target="#print"
                            type="button" role="tab" aria-controls="print" aria-selected="true">Print</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="tab-button" id="non-print-tab" data-bs-toggle="tab" data-bs-target="#non-print"
                            type="button" role="tab" aria-controls="non-print" aria-selected="false">Non-Print</button>
                    </li>
                </ul>
            </div>

            <!-- Second Div (Right aligned) for the "Choose File" button -->
            <div class="col-12 col-md-8 d-flex justify-content-end">
                @include('section.qrcode')
            </div>

        </div>

        <div class="tab-content">
            <!-- PRINT TAB -->
            <div class="tab-pane fade show active" id="print" role="tabpanel" aria-labelledby="print-tab">
                <div class="card px-2 py-2">
                    <div class="container-fluid py-1">
                        <section class="tablecontent">
                            <div class="table-responsive">
                                <table id="dataTablePrint" class="table table-bordered" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Actions</th>
                                            <th>ID</th>  <!-- ID is not displayed in the table due to incorrect sorting -->
                                            <th>Title</th>
                                            <th>Author</th>
                                            <th>LR Type</th>
                                            <!-- <th>Language</th> -->
                                            <th>Subject Area</th>
                                            <th>Grade Level</th>
                                            <!-- <th>Volume</th>
                                            <th>Edition</th>
                                            <th>Copyright Year</th>
                                            <th>Pages</th>
                                            <th>Publisher</th> -->
                                            <th>Quantity per Status</th>
                                            <th>Total Quantity</th>
                                            <th>School Name</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </section>
                    </div>
                </div>
            </div>

            <!-- NON-PRINT TAB -->
            <div class="tab-pane fade" id="non-print" role="tabpanel" aria-labelledby="non-print-tab">
                <div class="card px-2 py-2" >
                    <div class="container-fluid py-1">
                        <section class="tablecontent">
                             <div class="row mt-4 mx-4 px-0 text-muted" style="text-align: center;  ">
                                <!-- <h4 class="fw-bold" style="color: #949494;">Generate Non-Print Report</h4> -->
                                <h4 class="text-muted"> Future Feature </h4>
                                <p> This section is under development and will be available in a future update. </h6>
                                <!-- <hr class="mt-2"> -->
                            </div>

                            <!-- HIDDEN CONTENT TEMPORARILY  -->
                            <div class="table-responsive" style="display: none;">
                                <table id="" class="table table-bordered" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Actions</th>
                                            <th>ID</th>
                                            <th>Title</th>
                                            <th>Type</th>
                                            <th>Subject Area</th>
                                            <th>Level</th>
                                            <th>Size/Dimension</th>
                                            <th>Version</th>
                                            <th>Link</th>
                                            <th>Source</th>
                                            <th>Quantity per status</th>
                                            <th>Total LR</th>
                                            <th>School Name</th>
                                        </tr>

                                    </thead>
                                </table>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('section.resource-view-modal')
    @include('modals.edit-lr-modal')

    <script>
        const authorityLevel = "{{ session('authority_level') }}";
        const assetBasePath = "{{ asset('image/lr_cover') }}";
    </script>

    <script src="{{ asset('assets/js/school-resource-print.js') }}"></script>
    <script src="{{ asset('assets/js/school-resource-non-print.js') }}"></script>


@endsection