@extends('layouts.app')

@section('content')
<div class="container py-5 d-flex justify-content-center">
    <div class="card shadow-lg border-0 p-lg-4" style="max-width: 900px; width: 100%; border-radius: 12px;">
        <div class="card-body p-4">

            <h3 class="fw-bold mb-4 text-center" style="color: #047857;">
                <i class="bi bi-person-plus-fill me-2"></i> Register New User
            </h3>
            
            <hr class="mb-4">

            {{-- Success Message --}}
            @if(session('success'))
                <div class="alert alert-success d-flex align-items-center" role="alert" style="background-color: #d1fae5; color: #065f46; border-color: #a7f3d0;">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    <div>{{ session('success') }}</div>
                </div>
            @endif

            {{-- Validation Errors --}}
            @if($errors->any())
                <div class="alert alert-danger d-flex align-items-start" role="alert" style="background-color: #fee2e2; color: #991b1b; border-color: #fca5a5;">
                    <i class="bi bi-exclamation-triangle-fill me-2 mt-1"></i>
                    <div>
                        <strong>Whoops!</strong> There were some problems with your input:
                        <ul class="mb-0 mt-1 small">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <form method="POST" action="{{ route('admin.register.user.store') }}">
                @csrf

                <div class="row">
                    {{-- Full Name --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">Full Name</label>
                        <input type="text" name="name" class="form-control form-control-custom" value="{{ old('name') }}" required>
                    </div>

                    {{-- Phone --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">Phone</label>
                        <input type="text" name="phone" class="form-control form-control-custom" value="{{ old('phone') }}" required>
                    </div>

                    {{-- Email --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">Email(optional) </label>
                        <input type="email" name="email" class="form-control form-control-custom" value="{{ old('email') }}">
                    </div>

                    {{-- National ID --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">National ID Number</label>
                        <input type="text" name="id_number" class="form-control form-control-custom" value="{{ old('id_number') }}" required>
                    </div>

                    {{-- Role --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">Role</label>
                        <select name="role" id="role" class="form-select form-control-custom" required>
                            <option value="">-- Select Role --</option>
                            @foreach($roles['bds'] as $role)
                                <option value="{{ $role }}" {{ old('role') == $role ? 'selected' : '' }}>
                                    {{ ucfirst($role) }}
                                </option>
                            @endforeach
                            @foreach($roles['admin'] as $role)
                                <option value="{{ $role }}" {{ old('role') == $role ? 'selected' : '' }}>
                                    {{ ucwords(str_replace('_', ' ', $role)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- County --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">County</label>
                        <select name="county" id="county" class="form-select form-control-custom" required>
                            <option value="">-- Select County --</option>
                            @foreach($counties as $county)
                                <option value="{{ $county->id }}" {{ old('county') == $county->id ? 'selected' : '' }}>
                                    {{ $county->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Sub-County --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">Sub-County</label>
                        <select name="sub_county" id="sub_county" class="form-select form-control-custom" required>
                            <option value="">-- Select Sub-County --</option>
                        </select>
                    </div>

                    {{-- Center --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">Center</label>
                        <select name="center" id="center" class="form-select form-control-custom">
                            <option value="">-- Select Center (optional) --</option>
                        </select>
                    </div>

                    {{-- --- Conditional BDS Fields --- --}}
                    <div class="bds-fields row" style="display:none;">
                        {{-- Assigned Lead Trainer --}}
                        <div class="col-md-6 mb-4">
                            <label class="form-label form-label-custom">Assigned Lead Trainer</label>
                            <select name="assigned_lead_trainer" id="assigned_lead_trainer_bds" class="form-select form-control-custom">
                                <option value="">-- Select Lead Trainer --</option>
                                {{-- Options dynamically loaded --}}
                            </select>
                        </div>

                        {{-- Number of Mentees --}}
                        <div class="col-md-6 mb-4">
                            <label class="form-label form-label-custom">Number of Mentees</label>
                            <input type="number" name="mentees_count" class="form-control form-control-custom" value="{{ old('mentees_count', 20) }}" min="1" max="20">
                        </div>

                        {{-- Training Type --}}
                        <div class="col-md-6 mb-4">
                            <label class="form-label form-label-custom">Training Type</label>
                            <select name="training_type" class="form-select form-control-custom">
                                <option value="">-- Select Training Type --</option>
                                <option value="BDS" {{ old('training_type') == 'BDS' ? 'selected' : '' }}>BDS</option>
                                <option value="RPL" {{ old('training_type') == 'RPL' ? 'selected' : '' }}>RPL</option>
                                <option value="OJE" {{ old('training_type') == 'OJE' ? 'selected' : '' }}>OJE</option>
                            </select>
                        </div>
                    </div>

                    {{-- --- Conditional Assistant Trainer Fields --- --}}
                    <div class="assistant-fields row" style="display:none;">
                        <div class="col-md-6 mb-4">
                            <label class="form-label form-label-custom">Assigned Lead Trainer</label>
                            <select name="assigned_lead_trainer" id="assigned_lead_trainer_assistant" class="form-select form-control-custom">
                                <option value="">-- Select Lead Trainer --</option>
                                @foreach($lead_trainers as $lt)
                                    <option value="{{ $lt->id }}" {{ old('assigned_lead_trainer') == $lt->id ? 'selected' : '' }}>
                                        {{ $lt->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-12"><hr class="my-2"></div>
                    
                    {{-- Password --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">Password</label>
                        <input type="password" name="password" class="form-control form-control-custom" required>
                    </div>

                    {{-- Confirm Password --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label form-label-custom">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="form-control form-control-custom" required>
                    </div>
                </div>

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-success btn-lg mt-3 btn-submit-custom">
                        <i class="bi bi-person-plus-fill me-1"></i> Register User
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const countySelect = document.getElementById('county');
    const subCountySelect = document.getElementById('sub_county');
    const centerSelect = document.getElementById('center');
    const roleSelect = document.getElementById('role');

    const bdsFields = document.querySelector('.bds-fields');
    const assistantFields = document.querySelector('.assistant-fields');

    const leadTrainerSelectBDS = document.getElementById('assigned_lead_trainer_bds');
    const leadTrainerSelectAssistant = document.getElementById('assigned_lead_trainer_assistant');

    const oldSubCounty = "{{ old('sub_county') }}";
    const oldCenter = "{{ old('center') }}";
    const oldCounty = "{{ old('county') }}";
    const oldLeadTrainer = "{{ old('assigned_lead_trainer') }}";

    const bdsRoles = @json($roles['bds'] ?? []);

    function updateSelectOptions(selectElement, options, defaultText, oldValue = null) {
        selectElement.innerHTML = `<option value="">${defaultText}</option>`;
        options.forEach(item => {
            const option = document.createElement('option');
            option.value = item.id;
            option.textContent = item.name;
            if (item.id == oldValue) option.selected = true;
            selectElement.appendChild(option);
        });
    }

    function fetchSubCounties(countyId, subCountyToSelect = null) {
        subCountySelect.innerHTML = '<option value="">Loading...</option>';
        centerSelect.innerHTML = '<option value="">-- Select Center (optional) --</option>';
        if (countyId) {
            fetch(`/ajax/sub-counties/${countyId}`)
                .then(res => res.json())
                .then(data => {
                    updateSelectOptions(subCountySelect, data, '-- Select Sub-County --', subCountyToSelect);
                    if (subCountyToSelect) fetchCenters(subCountyToSelect, oldCenter);
                }).catch(() => subCountySelect.innerHTML = '<option value="">Failed to load</option>');
        } else {
            subCountySelect.innerHTML = '<option value="">-- Select Sub-County --</option>';
        }
    }

    function fetchCenters(subCountyId, centerToSelect = null) {
        centerSelect.innerHTML = '<option value="">Loading...</option>';
        if (subCountyId) {
            fetch(`/ajax/centers/${subCountyId}`)
                .then(res => res.json())
                .then(data => updateSelectOptions(centerSelect, data, '-- Select Center (optional) --', centerToSelect))
                .catch(() => centerSelect.innerHTML = '<option value="">Failed to load</option>');
        } else {
            centerSelect.innerHTML = '<option value="">-- Select Center (optional) --</option>';
        }
    }

    function fetchLeadTrainers(subCountyId, oldValue = null) {
        if (leadTrainerSelectBDS) leadTrainerSelectBDS.innerHTML = '<option value="">Loading...</option>';
        if (leadTrainerSelectAssistant) leadTrainerSelectAssistant.innerHTML = '<option value="">Loading...</option>';

        if (subCountyId) {
            fetch(`/ajax/lead-trainers/${subCountyId}`)
                .then(res => res.json())
                .then(data => {
                    if (leadTrainerSelectBDS) updateSelectOptions(leadTrainerSelectBDS, data, '-- Select Lead Trainer --', oldValue);
                    if (leadTrainerSelectAssistant) updateSelectOptions(leadTrainerSelectAssistant, data, '-- Select Lead Trainer --', oldValue);
                })
                .catch(() => {
                    if (leadTrainerSelectBDS) leadTrainerSelectBDS.innerHTML = '<option value="">Failed to load</option>';
                    if (leadTrainerSelectAssistant) leadTrainerSelectAssistant.innerHTML = '<option value="">Failed to load</option>';
                });
        } else {
            if (leadTrainerSelectBDS) leadTrainerSelectBDS.innerHTML = '<option value="">-- Select Lead Trainer --</option>';
            if (leadTrainerSelectAssistant) leadTrainerSelectAssistant.innerHTML = '<option value="">-- Select Lead Trainer --</option>';
        }
    }

    // Toggle BDS fields
    function toggleBDSFields() {
        bdsFields.style.display = bdsRoles.includes(roleSelect.value) ? 'flex' : 'none';
    }

    // Toggle Assistant Trainer fields
    function toggleAssistantFields() {
        assistantFields.style.display = roleSelect.value === 'assistant_trainer' ? 'flex' : 'none';
    }

    roleSelect.addEventListener('change', () => {
        toggleBDSFields();
        toggleAssistantFields();
    });

    // Initial toggle
    toggleBDSFields();
    toggleAssistantFields();

    // Sub-county / center / lead-trainer logic
    countySelect.addEventListener('change', () => fetchSubCounties(countySelect.value));
    subCountySelect.addEventListener('change', () => {
        fetchCenters(subCountySelect.value, oldCenter);
        if (bdsRoles.includes(roleSelect.value) || roleSelect.value === 'assistant_trainer') {
            fetchLeadTrainers(subCountySelect.value, oldLeadTrainer);
        }
    });

    // Initialize old values
    if (oldCounty) fetchSubCounties(oldCounty, oldSubCounty);
    else if (oldSubCounty) {
        fetchCenters(oldSubCounty, oldCenter);
        if (bdsRoles.includes(roleSelect.value) || roleSelect.value === 'assistant_trainer') {
            fetchLeadTrainers(oldSubCounty, oldLeadTrainer);
        }
    }
});
</script>
@endsection