{{-- Author By : zulfazdliabuas@gmail.com | Date : 2026 --}}
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        $('.site-select').select2({ placeholder: '-- Select Location --', width: '100%' });
    });
</script>
@endpush

<x-app-layout>
    <div class="py-4">
        <div class="container">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div>
                            <h2 class="h5 mb-1">Add Request</h2>
                            <p class="text-muted mb-0">Fill in customer details before submitting to LHDN.</p>
                        </div>
                        <a href="{{ route('admin.requests.index') }}" class="btn btn-outline-secondary btn-sm">← Back</a>
                    </div>
                    <form method="post" action="{{ route('admin.requests.store') }}" class="row g-3" enctype="multipart/form-data">
                        @csrf
                        @include('admin.requests.partials.form', ['requestItem' => null, 'sites' => $sites])
                        <div class="d-flex gap-2">
                            <button class="btn btn-primary">
                                Save
                            </button>
                            <a href="{{ route('admin.requests.index') }}" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>