@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="card-body">
        <div class="px-3 py-3" id="containerContent">
            <div class="card my-4 p-4 mt-0">
                <div class="card-header p-0 position-relative ">
                    <div class="shadow-dark rounded-2" style="background-color: #0071bd; padding: 5px 5px 3px 5px">
                        <h5 class="text-white text-capitalize ps-3">Allocations</h5>
                    </div>
                </div>
                <div class="card p-3 mt-2">
                    <div class="d-grid gap-2" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
                        <div class="border p-2 rounded bg-light"><strong>Title:</strong> {{ session('allocation_title') }}
                        </div>
                        <div class="border p-2 rounded bg-light"><strong>Batch
                                Number:</strong> {{ session('allocation_batchNumber') }}</div>
                        <div class="border p-2 rounded bg-light"><strong>Available
                                Qty:</strong> {{ session('allocation_quantity') }}</div>
                        <div id="available-quantity" style="display: none;">{{ session('allocation_quantity') }}</div>
                        <div id="total-allocations" class="border p-2 rounded bg-light"><strong>Total Allocations:</strong>
                            {{ session('allocation_total') }}
                        </div>
                    </div>
                </div>

                <div class="d-flex align-items-center border-bottom">
                    <div class="p-2 flex-grow-1 fw-bold">STATION</div>
                    <div class="p-2 text-center fw-bold mx-2" style="width: 120px;">POPULATION</div>
                    <div class="p-2 text-center fw-bold" style="width: 120px;">ALLOCATION</div>
                </div>

                <form id="edit_form" method="post" class="row g-3">
                    @csrf

                    <div class="tree-view mt-4">
                        <ul id="region-tree"></ul>
                    </div>
                    <div class="col-12 d-flex justify-content-center">
                        <button id="submit-button" type="submit" class="shadow-dark submitbtn mx-2">Submit</button>
                        <button id="cancel-button" type="button" class="shadow-dark loginbtn">Cancel</button>
                        <script>
                            document.getElementById("cancel-button").addEventListener("click", function(event) {
                                location.reload();
                            });
                        </script>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="{{ asset('assets/css/edit-allocations.css') }}">
    <script src="{{ asset('assets/js/allocation/edit-allocations.js') }}"></script>
@endsection