@extends(BaseHelper::getAdminMasterLayoutTemplate())




@section('content')
<div class="card">
    <div class="card-header">
        <h4 class="card-title">Create Commission</h4>
    </div>

    <div class="card-body">
        @if (session('error_msg'))
            <div class="alert alert-danger mb-3">{{ session('error_msg') }}</div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger mb-3">
                <ul class="mb-0">
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('commission.store') }}">
            @csrf

            <div class="row">
                {{-- Store --}}
                    <div class="col-md-6 mb-3">
                        <label for="store_id" class="form-label">Store</label>
                        <select id="store_id" name="store_id" class="form-control select-search-full" required>
                            <option value="" disabled {{ empty($selectedStore) ? 'selected' : '' }}>Select a store</option>
                            @foreach ($stores as $id => $name)
                                <option value="{{ $id }}" {{ (old('store_id', $selectedStore) == $id) ? 'selected' : '' }}>
                                    {{ $name }}
                                </option>
                            @endforeach
                        </select>


                        @if(isset($preStoreId) && $preStoreId)
                            <input type="hidden" name="store_id" value="{{ $preStoreId }}">
                        @endif
                    </div>


                {{-- Category --}}
                <div class="col-md-6 mb-3">
                    <label for="category_id" class="form-label">Category</label>
                    <select id="category_id" name="category_id"
                            class="form-control select-search-full"  {{-- 👈 add this class --}}
                            data-placeholder="Search category..."
                            required>
                        <option value="" disabled {{ old('category_id') ? '' : 'selected' }}>
                            Search category…
                        </option>
                        @foreach ($categories as $cat)
                            @if ($cat['divider'])
                                <option disabled>────────────</option>
                            @elseif ($cat['heading'])
                                <option disabled style="font-weight:bold;color:#333;">
                                    {{ $cat['label'] }}
                                </option>
                            @else
                                <option value="{{ $cat['id'] }}" {{ old('category_id') == $cat['id'] ? 'selected' : '' }}
                                        {{ $cat['leaf'] ? '' : 'disabled' }}>
                                    {{ $cat['label'] }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                    <small class="text-muted">Only leaf categories (without children) are selectable.</small>
                </div>

                {{-- Rate --}}
                <div class="col-md-4 mb-3">
                    <label for="rate" class="form-label">Rate (%)</label>
                    <input
                        id="rate"
                        name="rate"
                        type="number"
                        class="form-control"
                        step="0.01"
                        min="0"
                        max="100"
                        placeholder="e.g. 7.50"
                        value="{{ old('rate') }}"
                        required
                    >
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Save Commission</button>
            <a href="{{ route('commission.index') }}" class="btn btn-secondary ms-2">Cancel</a>
        </form>
    </div>
</div>
@endsection
@push('scripts')
<script>
    $(function () {
        // Botble admin already includes Select2; this class hooks the initializer.
        $('.select-search-full').select2({
            width: '100%',
            allowClear: true,
            placeholder: function(){
                return $(this).data('placeholder') || '';
            },
            // keep disabled options (headings/dividers) unselectable
            escapeMarkup: function (m) { return m; }
        });
    });
</script>
@endpush