@extends('layout.layout')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="card-header border-bottom py-3 px-5">
                        <div class="mb-0 fw-bold">{{ $managerRole }} Members</div>
                    </div>
                    <div class="card-body p-3">
                        <form action="{{ route('team-leaders.assign.admin') }}" method="POST">
                            @csrf
                            <div class="row g-4">
                                <!-- Select -->
                                <div class="col-6">
                                    <label for="team_leader" class="form-label fw-semibold">{{ $managerRole }}</label>
                                    <select class="form-select" id="team_leader" name="team_leader_id" required>
                                        <option value="">Choose {{ $managerRole }}...</option>
                                        @foreach ($teamLeaders as $leader)
                                            <option value="{{ $leader->id }}">{{ $leader->full_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @if(request()->has('id'))
                                    <input type="hidden" name="team_leader_id" value="{{ request('id') }}">
                                @endif


                                <!-- Divider Line -->
                                <div class="col-6">
                                    <hr class="my-3" style="border-top: 1px solid #ddd;">
                                </div>

                                <!-- Admins Select -->
                                <div class="col-6">
                                    <label class="form-label fw-semibold">{{ $staffRole }}(s)</label>
                                    <div id="admin-selects" class="d-flex flex-column gap-2">
                                        <div class="d-flex gap-2 align-items-start admin-select-row">
                                            <select class="form-select admin-select" name="admin_ids[]" required disabled>
                                                <option value="">Choose {{ $staffRole }}...</option>
                                                @foreach ($admins as $admin)
                                                    <option value="{{ $admin->id }}"
                                                        data-current-leader="{{ $admin->manager_id }}">
                                                        {{ $admin->full_name }}
                                                        @if ($admin->manager)
                                                            (Currently under: {{ $admin->manager->full_name }})
                                                        @endif
                                                    </option>
                                                @endforeach
                                            </select>
                                            <button type="button"
                                                class="btn btn-outline-danger btn-sm ms-1 remove-admin-btn">-</button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <div class="col-12">
                                    <button type="submit"
                                        class="btn btn-outline-success rounded-3 px-3 py-2 shadow-sm d-flex align-items-center gap-1">
                                        <iconify-icon icon="ic:baseline-check-circle"></iconify-icon>
                                        <span>Submit</span>
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                
                const urlParams = new URLSearchParams(window.location.search);
                const selectedLeaderId = urlParams.get('id');
                const teamLeaderSelect = document.getElementById('team_leader');
                const adminSelectsContainer = document.getElementById('admin-selects');
                const originalOptionsHTML = adminSelectsContainer.querySelector('.admin-select').innerHTML;

                if (selectedLeaderId) {
                    teamLeaderSelect.value = selectedLeaderId;
                    teamLeaderSelect.setAttribute('disabled', true);
                    document.querySelectorAll('.admin-select').forEach(s => s.disabled = false);
                }

                function enableOptionInAll(value) {
                    document.querySelectorAll('.admin-select').forEach(select => {
                        const opt = select.querySelector(`option[value="${value}"]`);
                        if (opt) opt.disabled = false;
                    });
                }

                function updateDisabledOptions() {
                    const selectedValues = Array.from(document.querySelectorAll('.admin-select'))
                        .map(s => s.value)
                        .filter(Boolean);

                    document.querySelectorAll('.admin-select').forEach(select => {
                        Array.from(select.options).forEach(opt => {
                            if (!opt.value) return;
                            opt.disabled = selectedValues.includes(opt.value) && opt.value !== select
                                .value;
                        });
                    });
                }

                function createAdminRow() {
                    const newRow = document.createElement('div');
                    newRow.className = 'd-flex gap-2 align-items-start admin-select-row';

                    const sel = document.createElement('select');
                    sel.className = 'form-select admin-select';
                    sel.name = 'admin_ids[]';
                    sel.required = false;
                    sel.innerHTML = originalOptionsHTML;

                    const removeBtn = document.createElement('button');
                    removeBtn.type = 'button';
                    removeBtn.className = 'btn btn-outline-danger btn-sm ms-1 remove-admin-btn';
                    removeBtn.textContent = '-';

                    removeBtn.addEventListener('click', function() {
                        const rows = adminSelectsContainer.querySelectorAll('.admin-select-row');
                        if (rows.length <= 1) {
                            sel.selectedIndex = 0;
                        } else {
                            const val = sel.value;
                            if (val) enableOptionInAll(val);
                            newRow.remove();
                            updateDisabledOptions();
                        }
                    });

                    sel.addEventListener('change', function() {
                        const val = this.value;
                        updateDisabledOptions();

                        const rows = Array.from(adminSelectsContainer.querySelectorAll('.admin-select'));
                        const last = rows[rows.length - 1];
                        if (this === last && val) {
                            createAdminRow();
                        }
                    });

                    newRow.appendChild(sel);
                    newRow.appendChild(removeBtn);
                    adminSelectsContainer.appendChild(newRow);
                    updateDisabledOptions();

                    // Disable select if no team leader selected
                    const selectedLeaderId = teamLeaderSelect.value;
                    if (!selectedLeaderId) {
                        sel.disabled = true;
                    }
                }

                const firstSelect = adminSelectsContainer.querySelector('.admin-select');
                firstSelect.addEventListener('change', function() {
                    const val = this.value;
                    updateDisabledOptions();

                    const rows = Array.from(adminSelectsContainer.querySelectorAll('.admin-select'));
                    const last = rows[rows.length - 1];
                    if (this === last && val) {
                        createAdminRow();
                    }
                });

                teamLeaderSelect.addEventListener('change', function() {
                    const selectedLeaderId = this.value;
                    adminSelectsContainer.innerHTML = '';
                    createAdminRow();

                    document.querySelectorAll('.admin-select').forEach(adminSelect => {
                        // If no team leader is selected, disable admin select
                        if (!selectedLeaderId) {
                            adminSelect.disabled = true;
                            return;
                        }

                        adminSelect.disabled = false;
                    });
                });

                // Disable all selects initially if no leader is selected
                if (!teamLeaderSelect.value) {
                    document.querySelectorAll('.admin-select').forEach(s => s.disabled = true);
                }
            });
        </script>
    @endpush
@endsection