@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') }}">

    <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;
        }
        #COPrint_paginate, #COPrint_info {
            display: none !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 and remove highlight from others
    document.addEventListener('DOMContentLoaded', function () {
        ['COPrint', 'CONonPrint'].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-4">
        <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 -->
            @include('section.qrcode')

        </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">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="region">Region<span class="text-danger">*</span></label>
                                    <div class="input-group input-group-outline mb-1">
                                        <select id="region" name="region" class="form-select">
                                            <option selected disabled>Select Region</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label for="division">Schools Division Office<span class="text-danger">*</span></label>
                                    <div class="input-group input-group-outline mb-1">
                                        <select id="division" name="division" class="form-select">
                                            <option selected disabled>Select Division</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label for="district">District<span class="text-danger">*</span></label>
                                    <div class="input-group input-group-outline mb-1">
                                        <select id="district" name="district" class="form-select">
                                            <option selected disabled>Select District</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label for="school">School<span class="text-danger">*</span></label>
                                    <div class="input-group input-group-outline mb-1">
                                        <select id="school" name="school" class="form-select">
                                            <option selected disabled>Select School</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <section class="tablecontent mt-4">
                            <div class="table-responsive">
                                <table id="COPrint" 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 Name</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">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="region">Region<span class="text-danger">*</span></label>
                                <div class="input-group input-group-outline mb-1">
                                    <select id="regionNP" name="region" class="form-select">
                                        <option selected disabled>Select Region</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <label for="division">Schools Division Office<span class="text-danger">*</span></label>
                                <div class="input-group input-group-outline mb-1">
                                    <select id="divisionNP" name="division" class="form-select">
                                        <option selected disabled>Select Division</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <label for="district">District<span class="text-danger">*</span></label>
                                <div class="input-group input-group-outline mb-1">
                                    <select id="districtNP" name="district" class="form-select">
                                        <option selected disabled>Select District</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <label for="school">School<span class="text-danger">*</span></label>
                                <div class="input-group input-group-outline mb-1">
                                    <select id="schoolNP" name="school" class="form-select">
                                        <option selected disabled>Select School</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <section class="tablecontent">
                            <div class="table-responsive">
                                <table id="CONonPrint" class="table table-bordered" style="width:100%">
                                </table>
                            </div>
                        </section>
                    </div>
                </div>
            </div> --}}
            <div class="tab-pane fade" id="non-print" role="tabpanel" aria-labelledby="non-print-tab">
                <div class="card px-2 py-5 text-center">
                    <h4 class="text-muted">Future Feature</h4>
                    <p>This section is under development and will be available in a future update.</p>
                </div>
            </div>

        </div>
    </div>

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

<script>
    const authorityLevel = "{{ session('authority_level') }}";
    const assetBasePath = "{{ asset('image/lr_cover') }}";
</script>
<script src="{{ asset('assets/js/co-datatable-print.js') }}"></script>
{{-- <script src="{{ asset('assets/js/co-datatable-non-print.js') }}"></script> --}}

<!-- Bootstrap JS Bundle (includes Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

@endsection