@extends('setting.nav')

@section('styles')
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-results__option::before {
            content: "☐ ";
            display: inline-block;
            width: 1.2em;
        }

        .select2-results__option[aria-selected=true]::before {
            content: "☑ ";
        }

        .select2-results__option.select2-results__message::before {
            content: "";
        }
    </style>
@endsection
@section('content')
    <div class="container mt-5">
        <h4 class="mb-4">Assign Department</h4>

        {{-- Success alert --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        {{-- Form Start --}}
        <form action="{{ route('assign.department.save') }}" method="POST">
            @csrf

            {{-- Row: Department + Head + Employees --}}
            <div class="row mb-4">
                {{-- Department --}}
                <div class="col-md-3">
                    <label for="department_id" class="form-label">Department List</label>
                    <select name="department_id" class="form-select @error('department_id') is-invalid @enderror" required>
                        <option value="">-- Select Department --</option>
                        @foreach ($departments as $dept)
                            <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>
                                {{ $dept->department_name }}
                            </option>
                        @endforeach
                    </select>
                    @error('department_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Head --}}
                <div class="col-md-3">
                    <label for="head_id" class="form-label">Department Head</label>
                    <select name="head_id" id="head_id" class="form-select select2 @error('head_id') is-invalid @enderror"
                        required>
                        <option value="">-- Select Head --</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}" {{ old('head_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->email }}
                            </option>
                        @endforeach
                    </select>
                    @error('head_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Employees --}}
                <div class="col-md-4">
                    <label for="employee_ids" class="form-label">Select Employees</label>
                    <select name="employee_ids[]" id="employee_ids"
                        class="form-select @error('employee_ids') is-invalid @enderror" multiple required
                        style="width: 100%">
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}"
                                {{ collect(old('employee_ids'))->contains($user->id) ? 'selected' : '' }}>
                                {{ $user->email }}
                            </option>
                        @endforeach
                    </select>
                    @error('employee_ids')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-1">
                    <label for="employee_ids" class="form-label"></label>
                    {{-- Submit Button --}}
                    <div class="mb-4">
                        <button type="submit" class="btn btn-primary">Assign</button>
                    </div>
                </div>
            </div>

        </form>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    {{-- head select  --}}
    <script>
        $(document).ready(function() {
            $('#head_id').select2({
                placeholder: "-- Select Head --",
                width: '100%'
            });
        });
    </script>

    {{-- employee select --}}

    <script>
        $(document).ready(function() {
            const allUsers = @json($users);

            function populateEmployeeOptions(headId) {
                $('#employee_ids').empty();

                allUsers.forEach(user => {
                    const isDisabled = (user.id == headId);
                    const newOption = new Option(user.email, user.id, false, false);
                    if (isDisabled) {
                        $(newOption).prop('disabled', true);
                    }
                    $('#employee_ids').append(newOption);
                });

                $('#employee_ids').trigger('change.select2');
            }

            // Initialize Select2
            $('#employee_ids').select2({
                placeholder: "Select employees",
                closeOnSelect: false,
                width: '100%'
            });

            // On change of Head
            $('#head_id').on('change', function() {
                const headId = $(this).val();
                populateEmployeeOptions(headId);

                setTimeout(() => {
                    $('#employee_ids').select2('open');
                }, 0);
            });

            // Initial load if head is preselected
            const initialHeadId = $('#head_id').val();
            if (initialHeadId) {
                populateEmployeeOptions(initialHeadId);
            }

            // Optional: Close select2 on outside click
            $(document).on('click', function(e) {
                const target = $(e.target);
                if (!target.closest('.select2-container').length && !target.is('#employee_ids')) {
                    $('#employee_ids').select2('close');
                }
            });
        });
    </script>

    {{-- <script>
        $(document).ready(function() {
            // Initialize Select2
            $('#employee_ids').select2({
                placeholder: "Select employees",
                closeOnSelect: false,
                width: '100%',
                templateResult: formatResult,
                templateSelection: formatSelection
            });

            // Add "Select All" option at top
            // let selectAllOption = new Option("☐ Select All", "select_all", false, false);
            // $('#employee_ids').prepend(selectAllOption).trigger("change");

            // Toggle Select All
            $('#employee_ids').on('select2:select', function(e) {
                if (e.params.data.id === "select_all") {
                    let allVals = [];
                    $('#employee_ids option').each(function() {
                        if ($(this).val() !== "select_all") {
                            allVals.push($(this).val());
                        }
                    });
                    $('#employee_ids').val(allVals).trigger('change');
                }
            });

            $('#employee_ids').on('select2:unselect', function(e) {
                if (e.params.data.id === "select_all") {
                    $('#employee_ids').val(null).trigger('change');
                }
            });

            // Custom template for showing text without icon in selected area
            function formatSelection(option) {
                if (option.id === "select_all") {
                    return "Select Employees";
                }
                return option.text;
            }

            // For showing checkbox-style in dropdown
            function formatResult(option) {
                return option.text;
            }
        });
    </script> --}}
@endsection


@section('content')
@endsection