@extends('admin.layouts.layouts')

@section('title', 'Letter Book Allocation')

@section('content')
    <div class="page-header">
        <h3 class="page-title">Letter Book Allocation</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item">Master</a></li>
                <li class="breadcrumb-item">Office Master</a></li>
                <li class="breadcrumb-item active" aria-current="page">Letter Book Allocation</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-body">
            <form method="POST" id="allocationForm" action="{{ route('letter-book-allocation.store') }}">
                @csrf
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="location_id" class="form-label">Location <span class="text-danger">*</span></label>
                            <select name="location_id" id="location_id" class="form-control select2" style="width: 100%;" required>
                                <option value="">Select Location</option>
                                @foreach($locations as $id => $location)
                                    <option value="{{ $id }}">{{ $location }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="start_letter_book_id" class="form-label">Start Letter Book <span class="text-danger">*</span></label>
                            <input type="text" name="start_letter_book_id" id="start_letter_book_id" class="form-control" readonly required>
                            <input type="hidden" name="start_letter_book_id" id="start_letter_book_id_hidden">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="end_letter_book_id" class="form-label">End Letter Book <span class="text-danger">*</span></label>
                            <select name="end_letter_book_id" id="end_letter_book_id" class="form-control select2" style="width: 100%;" required>
                                <option value="">Select End Letter Book</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary">Allocate</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card shadow-sm rounded border-0 mt-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">Allocated Letter Books</h5>
        </div>
        <div class="card-body">
            <table class="table w-100" id="allocation-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Location</th>
                        <th>Total Letter Books</th>
                        <th>Created At</th>
                        <th>Created By</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        const letterBookAllocationAjaxList = "{{ route('letter-book-allocation.ajax-list') }}";
        const availableLetterBookList = "{{ route('letter-book-allocation.get-available') }}";
        const letterBookAllocationStore = "{{ route('letter-book-allocation.store') }}";
    </script>
    <script src="{{ asset('assets/js/admin/letter-book-allocation.js') }}"></script>
@endsection