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

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">
    <script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script>

    <meta name="csrf-token" content="{{ csrf_token() }}">

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

    <div class="container px-3 py-3">
        @php $shortcode = session('shortcode'); @endphp

        @if (in_array($shortcode, ['CO-BLR', 'CO-SO']))
            <div class="col-12 d-flex justify-content-end pb-2">
                <button type="button" class="btn btn-primary btn-small ms-auto m-0" id="new-allocation"
                    data-bs-toggle="modal" data-bs-target="#allocationModal">
                    New Allocation Item
                </button>
            </div>
        @endif

        <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="dataTableAllocations" class="table table-bordered" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Action</th>
                                            <th>Batch ID</th>
                                            <th>Allocation Number</th>
                                            <th>Allocation Name</th>
                                            <th>Status</th>
                                            <th>Date Allocated</th>
                                            <th>% of Delivery</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('section.allocation-modal')
    @include('section.allocation-generation-modal')
    @include('section.allocation-history-modal')
    <script src="{{ asset('assets/js/allocation/allocation-history.js') }}"></script>
    <script src="{{ asset('assets/js/allocation/allocation-generation.js') }}"></script>
    <script src="{{ asset('assets/js/allocation/allocations.js') }}"></script>
    <script src="{{ asset('assets/js/allocation/allocation-import.js') }}"></script>
    <script src="{{ asset('assets/js/allocation/allocation-delete.js') }}"></script>

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

    <style>
        .table tbody tr td {
            border-width: 1px !important;
            border-style: solid;
            border-color: #efefef;
        }
    </style>
@endsection