<div class="content-body">
    <div class="page-titles">
        <h5 class="dashboard_bar">Create Department</h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('index') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('department') }}">Department</a></li>
            <li class="breadcrumb-item active">Create</li>
        </ul>
    </div>

    <div class="container">


        <div class="row">
            <form wire:submit.prevent="save">
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">Department Details</h6>
                    </div>
                    <div class="card-body">
                        {{-- Organization --}}
                        <div class="row mb-3">
                            <label class="col-md-2 col-form-label">Organization</label>

                            <div class="col-md-5">
                                <div wire:ignore x-data x-init="const org = $refs.org;
                                
                                $(org).select2({ width: '100%', placeholder: 'Select Organization' });
                                
                                $(org).on('change', function() {
                                    $wire.set('organizationId', $(this).val());
                                });
                                
                                $nextTick(() => {
                                    $(org).val(@js($organizationId)).trigger('change.select2');
                                });">
                                    <select x-ref="org" class="form-select">
                                        <option value="">Select Organization</option>
                                        @foreach ($organizations as $o)
                                            <option value="{{ $o->id }}">{{ $o->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('organizationId')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>

                        {{-- Department Name --}}
                        <div class="row mb-3">
                            <label class="col-md-2 col-form-label">Department Name</label>
                            <div class="col-md-5">
                                <input type="text" class="form-control form-control-sm" placeholder="e.g. IT"
                                    wire:model="name">
                                @error('name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>

                        {{-- Site --}}
                        <div class="row mb-3">
                            <label class="col-md-2 col-form-label">Site</label>
                            <div class="col-md-5">
                                <div wire:ignore x-data x-init="const site = $refs.site;
                                
                                // mula2 kosongkan dropdown
                                $(site).select2({ width: '100%' });
                                
                                // bila user pilih site -> update livewire
                                $(site).on('change', function() {
                                    $wire.set('siteId', $(this).val());
                                });
                                
                                // bila Livewire hantar site list baru
                                Livewire.on('update-sites', data => {
                                    $(site).empty(); // buang semua lama
                                
                                    // tambah semula option baru
                                    $(site).append(new Option('Select Sites', ''));
                                
                                    data.sites.forEach(s => {
                                        $(site).append(new Option(s.site_name, s.id));
                                    });
                                
                                    $(site).trigger('change');
                                });">

                                    <select x-ref="site" class="form-select"></select>
                                </div>

                                @error('siteId')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>

                        {{-- Buildings (multiple) --}}
                        <div class="row mb-3">
                            <label class="col-md-2 col-form-label">Buildings</label>
                            <div class="col-md-5">
                                <div wire:ignore x-data x-init="const el = $refs.buildings;
                                
                                function rebuild(buildings = []) {
                                    // kalau select2 pernah init, destroy dulu
                                    if ($(el).data('select2')) {
                                        $(el).off('change');
                                        $(el).select2('destroy');
                                    }
                                
                                    // kosongkan options
                                    $(el).empty();
                                
                                    // add options
                                    buildings.forEach(b => {
                                        const opt = new Option(b.building_name, b.id, false, false);
                                        el.add(opt);
                                    });
                                
                                    // init select2 multiple
                                    $(el).select2({
                                        width: '100%',
                                        placeholder: 'Select Buildings',
                                        multiple: true,
                                        closeOnSelect: false
                                    });
                                
                                    // event -> Livewire
                                    $(el).on('change', function() {
                                        $wire.set('buildingIds', $(this).val() || []);
                                    });
                                
                                    // sync selected from Livewire
                                    const selected = ($wire.get('buildingIds') || []).map(String);
                                    $(el).val(selected).trigger('change.select2');
                                }
                                
                                // init kosong
                                rebuild([]);
                                
                                // bila Livewire hantar list building
                                Livewire.on('update-buildings', (data) => {
                                    console.log('update-buildings', data);
                                    rebuild(data.buildings || []);
                                });
                                
                                // bila reset dropdown (optional)
                                Livewire.on('clear-buildings', () => {
                                    $(el).val([]).trigger('change.select2');
                                    $wire.set('buildingIds', []);
                                });">
                                    <select x-ref="buildings" class="form-select form-select-sm" multiple></select>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </form>
        </div>


    </div>
</div>
