@extends('layout.layout')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <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>

    <div class="container">
        <div class="container-content" id="containerContent">
            @if ($lrType === 'Print')
                @include('section.edit-resource-print', ['id' => $lrId])
            @else
                @include('section.edit-resource-nonprint', ['id' => $lrId])
            @endif
        </div>
    </div>

    @include('section.add-acquisition-modal')
    @include('section.edit-acquisition-existing-modal')
    @include('section.edit-acquisition-new-modal')

    <script>
        $(document).ready(function() {
            const lrId = "{{ $lrId }}"; // The resource ID passed from the controller
            const typeCategory = "{{ $lrType }}"; // 'Print' or another type passed from the controller
            initializeForm(lrId, typeCategory);
        });
    </script>

    <!-- Include External CSS File -->
    <link rel="stylesheet" href="{{ asset('assets/css/edit-resources.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/edit-resources-modal.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/acquisition-modal.css') }}">

    <!-- Include External JavaScript File -->
    <script src="{{ asset('assets/js/edit-resources.js') }}"></script>
    <script src="{{ asset('assets/js/acquisitions-addmore.js') }}"></script>
    <script src="{{ asset('assets/js/acquisitions-editnew.js') }}"></script>
    <script src="{{ asset('assets/js/acquisitions-editexisting.js') }}"></script>

    <style>
        @media only screen and (max-width: 600px) {
            .scroll-bar {
                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;
        }

        .title-suggestion-item,
        .author-suggestion-item,
        .publisher-suggestion-item,
        .brand-suggestion-item {
            padding: 8px;
            cursor: pointer;
        }

        .title-suggestion-item:hover,
        .author-suggestion-item:hover,
        .publisher-suggestion-item:hover,
        .brand-suggestion-item:hover {
            background-color: #f0f0f0;
        }

        #title_message,
        #author_message,
        #publisher_message,
        #brand-message {
            margin-top: 10px;
        }

        #brand-suggestions {
            max-height: 200px;
            overflow-y: auto;
            background-color: #f9f9f9;
        }

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

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

        .table-subjects thead {
            display: table;
            width: 100%;
            background-color: #fff;
        }

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

        .table-subjects tbody {
            display: block;
            width: 100%;
            height: 300px;
            /* Set a fixed height for tbody */
            overflow-y: auto;
            table-layout: fixed;
        }

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

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

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

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

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

        .table-subjects tbody::-webkit-scrollbar-track {
            background-color: #f9f9f9;
        }
    </style>


<script>
    const assetBasePath = "{{ asset('image/lr_cover') }}";
</script>
@endsection