@extends('layout.layout')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="{{ asset('assets/css/qr/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/qr/view.lr.modal.css') }}">
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <!-- DataTables Buttons CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.4/css/buttons.dataTables.min.css">
    <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">
    <meta name="authority-level" content="{{ session('authority_level') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <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="row px-3 py-3">
        <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>
        <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>Library Hub Name</th>
                                            <th>Station</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="table-responsive">
                                <!-- HIDDEN CONTENT TEMPORARILY  -->
                                <div class="row mt-4 mx-4 px-0 text-muted" style="text-align: center;  ">
                                    <h4 class="text-muted"> Future Feature </h4>
                                    <p> This section is under development and will be available in a future update. </h6>
                                  </div>
                                <!-- <table id="dataTableNonPrint" 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>Hub Name</th>
                                            <th>Station Name</th>
                                    </thead>
                                </table> -->
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('section.resource-view-modal')

    <style>
        #dataTablePrint td,
        #dataTableNonPrint td {
            text-align: left !important;
        }
    </style>

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

    <!-- <script src="{{ asset('assets/js/lrhub.js') }}"></script> -->

     <!-- javascript inclusion for qr -->

    <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

    <script src="{{ asset('assets/js/qr/main.js') }}"></script>
    <script src="{{ asset('assets/js/qr/view.modal.js') }}"></script>

    <!-- DataTables Buttons JS -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.3.4/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.html5.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.print.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.colVis.min.js"></script>
    <!-- Include Axios CDN just before the closing body tag -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

@endsection