@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>
    <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">
    <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() }}">
    <style>
        .table tbody tr td {
            border-width: 1px !important;
            border-style: solid;
            border-color: #efefef;
        }
    </style>

    <link rel="stylesheet" href="{{ asset('assets/css/allocations.css') }}">

    @include('section.allocation-delivery-modal')

    <div class="container px-3 py-3">
        <div class="row mb-0 align-items-center">
            <div class="col-12 col-md-4 d-flex justify-content-start">
                <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>

        <div class="tab-content">
            <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>Action</th>
                                            <th>Allocation Number</th>
                                            <th>Description</th>
                                            <th>Date Allocated</th>
                                            <th>LR Type</th>
                                            <th>Grade Level</th>
                                            <th>Quantity</th>
                                            <th>Filename</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </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-2">
                    <div class="container-fluid py-1">
                        <section class="tablecontent">
                            <div class="table-responsive">
                                <table id="dataTableNonPrint" class="table table-bordered" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Action</th>
                                            <th>Allocation Number</th>
                                            <th>Description</th>
                                            <th>Date Allocated</th>
                                            <th>LR Type</th>
                                            <th>Grade Level</th>
                                            <th>Quantity</th>
                                            <th>Filename</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('assets/js/allocation/allocations-school.js') }}"></script>
@endsection