@extends('dashboard.layouts.app')

@section('content')
    <div class="mt-5">
        <div id="create-staff-item">


            <div id="content">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>Assign Item to Staff</div>
                    <a href="{{ route('staff-items.index') }}" class="btn btn-secondary">Back</a>
                </div>

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

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

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Staff</label>
                            <select name="staff_id" class="form-select" 
                                    required 
                                    @if(isset($staffId)) disabled @endif>
                                <option value="">Choose...</option>
                                @foreach($staff as $s)
                                    <option value="{{ $s->id }}" 
                                        {{ (old('staff_id') == $s->id || $staffId == $s->id) ? 'selected' : '' }}>
                                        {{ $s->first_name }} {{ $s->last_name }}
                                    </option>
                                @endforeach
                            </select>

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


                        <div class="col-md-4 mb-3">
                            <label class="form-label">Items</label>
                            <select name="item_id[]" class="form-select" multiple required>
                                @foreach($items as $it)
                                    <option value="{{ $it->id }}" {{ collect(old('item_id'))->contains($it->id) ? 'selected' : '' }}>
                                        {{ $it->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">You can select multiple items</small>
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="2">{{ old('notes') }}</textarea>
                        </div>

                        <div class="col-12">
                            <button class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection



@push('scripts')
<script>
    $(document).ready(function () {
        $('select[name="staff_id"]').select2({
            placeholder: "Choose a staff member",
            allowClear: true,
            width: '100%'
        });

        $('select[name="item_id[]"]').select2({
            placeholder: "Choose one or more items",
            allowClear: true,
            width: '100%'
        });
    });
</script>
@endpush