@extends('layout.layout')
@section('content')

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">

<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="{{ asset('assets/css/add-resources-alert.css') }}">

<div class="row mx-2">
    <div class="container-fluid py-0">
        <!-- Nav Tabs with Custom Styling -->
        <div class="col-md-12 mb-0">
            <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="#printReport" type="button" role="tab" aria-controls="print-tab" 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="#nonPrintReport" type="button" role="tab" aria-controls="non_print-tab" aria-selected="false" tabindex="-1">Non-Print</button>
                </li>
            </ul>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card mt-0">
                    <div class="tab-content">
                        <!-- Print Tab -->
                        <div class="tab-pane fade show active" id="printReport" role="tabpanel" aria-labelledby="print-tab">
                            <div class="pe-2">
                                <div class="printReport">
                                    @include('pages.generate-reports.learning-resource-reports.lr-res-print.lr-res-print', ['userStation' => $userStation])
                                </div>
                            </div>
                        </div>
                        <!-- Non-Print Tab -->
                        <div class="tab-pane fade" role="tabpanel" id="nonPrintReport" aria-labelledby="non_print-tab">
                            <div class="pe-2">
                                <div class="nonPrintReport">
                                    @include('pages.generate-reports.learning-resource-reports.lr-res-nonprint.lr-res-non-print')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    @media only screen and (max-width: 600px) {
        .scroll-container {
            border-radius: 20px;
            width: 280px;
            height: 100%;
            overflow-x: scroll;
        }
    }

    /* Compact Table Styles */
    .compact-table th,
    .compact-table td {
        padding: 4px !important;
        text-align: left;
        font-size: 16px;
    }

    .compact-table th {
        white-space: nowrap;
        background-color: #f8f9fa;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .compact-table td input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0 auto;
    }

    .compact-table {
        border-collapse: collapse;
    }

    #title_suggestions {
        border: 1px solid #ddd;
        max-height: 200px;
        overflow-y: auto;
    }

    #gradelevel_subjects {
        width: 100%;
        overflow-x: auto;
        position: relative;
    }

    .subject-gradelevel-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .subject-gradelevel-table thead {
        display: table;
        width: 100%;
        background-color: #fff;
        font-size: larger;
    }

    .subject-gradelevel-table thead th {
        background-color: #fff;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 2px;
        border: 1px solid #ccc;
        text-align: center;
    }

    .subject-gradelevel-table tbody {
        display: block;
        width: 100%;
        height: 300px;
        overflow-y: auto;
        table-layout: fixed;
    }

    .subject-gradelevel-table tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .subject-gradelevel-table td {
        padding: 2px;
        border: 1px solid #ccc;
        text-align: center;
    }

    .subject-gradelevel-table th.subject-title-header,
    .subject-gradelevel-table td.subject-title {
        position: sticky;
        left: 0;
        background-color: #fff;
        z-index: 1;
        text-align: left;
    }

    .subject-gradelevel-table tbody::-webkit-scrollbar {
        width: 8px;
    }

    .subject-gradelevel-table tbody::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .subject-gradelevel-table tbody::-webkit-scrollbar-track {
        background-color: #f9f9f9;
    }

    /* Custom styles for subject grade level tables */
    .subject-grade-table-container {
        max-height: 500px;
        overflow-y: auto;
        position: relative;
    }

    .subject-grade-table {
        width: 100%;
        border-collapse: collapse;
    }

    .subject-grade-table thead th {
        position: sticky;
        top: 0;
        background-color: #f8f9fa;
        z-index: 10;
    }

    .subject-grade-table th,
    .subject-grade-table td {
        padding: 8px;
        border: 1px solid #dee2e6;
        white-space: nowrap;
    }

    .subject-grade-checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .select-all-checkbox,
    .select-all-column-checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-right: 5px;
        vertical-align: middle;
    }

    /* Mobile responsive tabs */
    @media (max-width: 767.98px) {
        .subject-grade-tabs {
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: -ms-autohiding-scrollbar;
        }

        .subject-grade-tabs .nav-item {
            flex: 0 0 auto;
        }

        .subject-grade-tabs .nav-link {
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
        }
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Listen for tab changes
        document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
            tab.addEventListener('show.bs.tab', function(event) {
                let targetTabId = event.target.id;
                let targetPane = document.querySelector(event.target.getAttribute('data-bs-target'));

                // Reset the form inside the activated tab
                if (targetPane) {
                    let form = targetPane.querySelector('form');
                    if (form) {
                        form.reset();
                    }
                }
            });
        });
    });
</script>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables JS -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

@endsection