@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.min.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Employee Access</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                    <li class="breadcrumb-item"><a href="/employees">Employees</a></li>
                    <li class="breadcrumb-item active">Access</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="employee-access">
        <div class="card mb-2">
            <div class="card-body d-flex flex-column flex-md-row align-items-start justify-content-between gap-2">
                <div>
                    <h4 class="mb-0">{{ $employee->name }}</h4>
                    <div class="text-muted small">Employee Code: {{ $employee->employee_code ?? '-' }}</div>
                </div>
                <div class="text-md-end">
                    <span class="badge rounded-pill {{ $employee->status === 'active' ? 'badge-light-success' : 'badge-light-warning' }}">
                        {{ ucfirst($employee->status ?? 'unknown') }}
                    </span>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ route('employees.access.update', $employee->id) }}">
                    @csrf

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Roles</label>
                            <select class="form-control select2" name="roles[]" id="roles" multiple data-placeholder="Select roles">
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}"
                                        @if (in_array($role->id, old('roles', $roleIds))) selected @endif>
                                        {{ $role->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('roles.*') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Organizations</label>
                            <select class="form-control select2" name="organizations[]" id="organizations" multiple data-placeholder="Select organizations">
                                @foreach ($organizations as $organization)
                                    <option value="{{ $organization->id }}"
                                        @if (in_array($organization->id, old('organizations', $organizationIds))) selected @endif>
                                        {{ $organization->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('organizations.*') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Locations</label>
                            <select class="form-control select2" name="locations[]" id="locations" multiple data-placeholder="Select locations">
                                @foreach ($locations as $location)
                                    <option value="{{ $location->id }}"
                                        @if (in_array($location->id, old('locations', $locationIds))) selected @endif>
                                        {{ $location->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('locations.*') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Sub Locations</label>
                            <select class="form-control select2" name="sublocations[]" id="sublocations" multiple data-placeholder="Select sub locations">
                                @foreach ($sublocations as $sublocation)
                                    <option value="{{ $sublocation->id }}"
                                        @if (in_array($sublocation->id, old('sublocations', $sublocationIds))) selected @endif>
                                        {{ $sublocation->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('sublocations') <div class="text-danger small">{{ $message }}</div> @enderror
                            @error('sublocations.*') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mt-3">
                        <a href="/employees" class="btn btn-outline-secondary">Back</a>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script>
        const sublocationsUrl = "{{ route('ajax.sublocations') }}";

        function initSelect2() {
            $('.select2').select2({
                width: '100%',
                allowClear: true
            });
        }

        function loadSublocations(locationIds, selectedIds = []) {
            $('#sublocations').empty();
            if (!locationIds.length) {
                $('#sublocations').trigger('change');
                return;
            }

            $.get(sublocationsUrl, { location_ids: locationIds }, function (data) {
                const options = data.map(function (item) {
                    const selected = selectedIds.includes(String(item.id)) || selectedIds.includes(item.id);
                    return new Option(item.name, item.id, selected, selected);
                });
                $('#sublocations').append(options).trigger('change');
            });
        }

        $(function () {
            initSelect2();

            $('#locations').on('change', function () {
                const selectedLocations = $(this).val() || [];
                const currentSelected = $('#sublocations').val() || [];
                loadSublocations(selectedLocations, currentSelected);
            });
        });
    </script>
@endpush