@extends('layouts.user_type.auth')

@section('content')
<div class="row justify-content-center">
    <div class="col-12">
        <div class="card shadow-lg border-0">
            <div class="card-header bg-gradient-dark text-white py-4 d-flex justify-content-between align-items-center">
                <h3 class="mb-0 text-white">Add Phone Number</h3>
                <a href="{{ route('phone-number.show-user', $user->id) }}" class="btn btn-white btn-sm mb-0">Phone Number List</a>
            </div>

            <div class="card-body">
                <!-- Tabs Navigation -->
                <ul class="nav nav-tabs mb-4" id="phoneTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="get-tab" data-bs-toggle="tab" data-bs-target="#get" type="button" role="tab">Get Phone Number</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="own-tab" data-bs-toggle="tab" data-bs-target="#own" type="button" role="tab">Own Phone Number</button>
                    </li>
                </ul>

                <div class="tab-content" id="phoneTabContent">
                    <!-- Get Phone Number Tab -->
                    <div class="tab-pane fade show active" id="get" role="tabpanel">
                        <form action="{{ route('phone-number.store') }}" method="POST" id="phoneNumberForm">
                            @csrf
                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                            {{-- <input type="hidden" name="type" value="get"> --}}
                            <!-- Region Code Input with Spinner -->
                            <div class="mb-3 position-relative">
                                <label for="region_code" class="form-label">Which local area code you are looking for?</label>
                                <div class="position-relative">
                                    <input
                                        type="text"
                                        id="region_code"
                                        name="region_code"
                                        class="form-control pe-5 @error('region_code') is-invalid @enderror"
                                        placeholder="e.g. 561, 585"
                                        value="{{ old('region_code') }}"
                                        required>
                                        <div id="region_loader" class="spinner-border text-secondary position-absolute top-50 end-0 me-3 translate-middle-y" role="status" style="width: 2rem; height: 2rem; display: none;">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                </div>
                                @error('region_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>


                            <!-- Select Phone Number -->
                            <div class="mb-3">
                                <label for="get_phone_number" class="form-label">Phone Number (Generated)</label>
                                <select
                                    id="get_phone_number"
                                    name="phone_number"
                                    class="form-select @error('phone_number') is-invalid @enderror"
                                    required>
                                    <option value="">Select phone number</option>
                                </select>
                                @error('phone_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="text-end">
                                <button type="reset" class="btn bg-gradient-info my-2">Reset</button>
                                <button type="submit" class="btn bg-gradient-dark my-2">Save</button>
                            </div>
                        </form>
                    </div>

                    <!-- Own Phone Number Tab -->
                    <div class="tab-pane fade" id="own" role="tabpanel">
                        <form action="{{ route('phone-number.manual.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                            <input type="hidden" name="type" value="own">

                            <div class="mb-3">
                                <label for="own_phone_number" class="form-label">Your Own Phone Number</label>
                                <input
                                    type="text"
                                    id="own_phone_number"
                                    name="phone_number"
                                    class="form-control @error('phone_number') is-invalid @enderror"
                                    placeholder="+1 555 123 4567"
                                    value="{{ old('phone_number') }}"
                                    required>
                                @error('phone_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="text-end">
                                <button type="reset" class="btn bg-gradient-info my-2">Reset</button>
                                <button type="submit" class="btn bg-gradient-dark my-2">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const regionInput = document.getElementById('region_code');
        const phoneSelect = document.getElementById('get_phone_number');
        const loader = document.getElementById('region_loader');
        let timeout = null;

        regionInput.addEventListener('keyup', function () {
            const areaCode = this.value.trim();

            // Clear previous timeout to debounce input
            clearTimeout(timeout);

            // Always reset the phone number dropdown to empty before processing
            phoneSelect.innerHTML = '<option value="">Select phone number</option>';

            if (areaCode.length >= 3) {
                timeout = setTimeout(() => {
                    loader.style.display = 'inline-block'; // Show loading spinner

                    fetch(`/get-phone-numbers?Npa=${areaCode}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success' && data.data.length > 0) {
                                // Populate dropdown with phone numbers if the area code is valid
                                data.data.forEach(item => {
                                    const option = document.createElement('option');
                                    option.value = item.TN;
                                    option.textContent = item.TN;
                                    phoneSelect.appendChild(option);
                                });
                            } else {
                                // Show API message if it's not success or no phone numbers found
                                alert(data.message || 'No phone numbers found for this area code.');
                            }
                        })
                        .catch(err => {
                            console.error(err);
                            alert('Something went wrong!'); // For network errors or other fetch issues
                        })
                        .finally(() => {
                            loader.style.display = 'none'; // Hide spinner
                        });
                }, 500);
            }
        });
    });

</script>
<script>
    document.querySelector('form').addEventListener('submit', function (e) {
        e.preventDefault();
    
        const form = e.target;
        const formData = new FormData(form);
        const submitButton = form.querySelector('button[type="submit"]');
        submitButton.disabled = true;
    
        fetch(form.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
            },
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                form.reset();
                document.getElementById('get_phone_number').innerHTML = '<option value="">Select phone number</option>';
            } else {
                alert(data.message);
            }
        })
        .catch(err => {
            console.error(err);
            alert('Something went wrong while saving the phone number.');
        })
        .finally(() => {
            submitButton.disabled = false;
        });
    });
</script>
    
@endpush