@php
    $edit = !empty($user->id);
@endphp
@extends('layouts.admin.master')

@section('title')
    {{ $edit ? 'Edit' : 'Create' }} User
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4>{{ $edit ? 'Edit' : 'Create' }} User</h4>
                            <a href="{{ route('admin.users.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>
                        <form
                            action="{{ $edit ? route('admin.users.update', $user->id) : route('admin.users.store') }}"
                            method="POST" class="user-edit-add-form" id="user-edit-add-form">
                            @csrf
                            @if ($edit)
                                @method('PUT')
                            @endif
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="name">Name <span style="color: red"> * </span></label>
                                    <input type="text" class="form-control" name="name" id="name"
                                           value="{{ old('name', $edit ? $user->name : '') }}"
                                           placeholder="Name">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="email">E-mail<span style="color: red"> * </span></label>
                                    <input type="email" class="form-control" name="email" id="email"
                                           value="{{ old('email', $edit ? $user->email : '') }}"
                                           placeholder="Email">
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="phone">Mobile <span style="color: red"> * </span></label>
                                    <input type="tel" class="form-control" name="phone" id="phone"
                                           value="{{ old('phone', $edit ? $user->phone : '') }}"
                                           placeholder="Enter mobile number">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="user_type">User Type <span style="color: red"> * </span></label>
                                    <select name="user_type" id="user_type" class="form-control custom-form-control select2">
                                        <option value="">Select User Type</option>
                                        <option value="1" {{ old('user_type', $edit ? $user->user_type : '') == '1' ? 'selected' : '' }}>
                                            Admin
                                        </option>
                                        <option value="2" {{ old('user_type', $edit ? $user->user_type : '') == '2' ? 'selected' : '' }}>
                                            Member
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="role_ids">Role <span style="color: red"> * </span></label>
                                    <select name="role_ids[]" id="role_ids" class="form-control custom-form-control select2" multiple>
                                        <option value="">Select One</option>
                                        @foreach ($roles as $role)
                                            <option value="{{ $role->id }}"
                                                {{ $edit && in_array($role->id, old('role_ids', $user->roles->pluck('id')->toArray())) ? 'selected' : '' }}>
                                                {{ $role->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-md-6" id="csl_id_container" style="display: none;">
                                    <label for="csl_id">CSL Id </label>
                                    <input type="text" class="form-control" name="csl_id" id="csl_id"
                                           value="{{ old('csl_id', $edit ? $user->csl_id : '') }}"
                                           placeholder="CSL Id">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> {{ $edit ? 'Update' : 'Create' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div class="overlay" style="display: none;">
        <div class="spinner">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/css/intlTelInput.css">
    <style>
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            text-align: center;
        }

        .spinner-border {
            width: 3rem;
            height: 3rem;
        }

        .iti {
            width: 100%;
            display: block;
        }

        .iti__input {
            width: 100% !important;
            display: block !important;
        }

        .iti__selected-dial-code {
            font-size: 0.875rem !important;
        }

        /* Mobile responsive adjustments */
        @media (max-width: 768px) {
            .iti__flag-container {
                right: auto;
                left: 0;
            }
            
            .iti__selected-dial-code {
                display: block !important;
                font-size: 0.8rem !important;
            }
            
            .iti__input {
                padding-left: 65px !important;
                font-size: 16px; /* Prevents zoom on iOS */
            }

            .form-row {
                margin-left: 0;
                margin-right: 0;
            }

            .form-group {
                padding-left: 0;
                padding-right: 0;
                margin-bottom: 1rem;
            }

            .form-control {
                font-size: 16px; /* Prevents zoom on iOS */
                border-radius: 8px;
                padding: 12px 15px;
            }

            .col-md-6 {
                width: 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }

            .custom-card-header h4 {
                font-size: 1.2rem;
            }

            .btn {
                width: 100%;
                padding: 12px;
                font-size: 16px;
                border-radius: 8px;
            }

            /* Country dropdown styling for mobile */
            .iti__country-list {
                max-height: 200px;
                font-size: 14px;
            }
            
            .iti__country {
                padding: 10px 15px;
            }
        }

        /* Tablet responsive adjustments */
        @media (max-width: 992px) and (min-width: 769px) {
            .iti__input {
                padding-left: 60px !important;
            }
        }
    </style>
@endpush

@push('js')
    <x-generic-validation-error-toastr/>
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/intlTelInput.min.js"></script>
    <script>
        $(document).ready(function() {
            const EDIT = {{ $edit ? 'true' : 'false' }};

            // Initialize intl-tel-input
            const phoneInput = document.querySelector("#phone");
            const iti = window.intlTelInput(phoneInput, {
                initialCountry: "bd",
                preferredCountries: ["bd", "us", "gb"],
                separateDialCode: true,
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/utils.js"
            });

            function toggleCslIdField() {
                const userType = $('#user_type').val();
                const $cslIdContainer = $('#csl_id_container');
                const $cslIdInput = $('#csl_id');

                if (userType === '2') {
                    $cslIdContainer.show();
                    $cslIdInput.rules('add', {
                        required: false,
                        messages: {
                            required: "Please enter a CSL ID"
                        }
                    });
                } else {
                    $cslIdContainer.hide();
                    $cslIdInput.rules('remove', 'required');
                    $cslIdInput.removeClass('is-invalid');
                    $cslIdInput.next('.invalid-feedback').remove();
                }
            }

            $('#user-edit-add-form').validate({
                rules: {
                    name: { required: true },
                    email: { required: true, email: true },
                    phone: { required: true },
                    user_type: { required: true },
                    'role_ids[]': { required: true }
                },
                messages: {
                    name: { required: "Please enter the user's name" },
                    email: {
                        required: "Please enter an email address",
                        email: "Please enter a valid email address"
                    },
                    phone: { required: "Please enter a mobile number" },
                    user_type: { required: "Please select a user type" },
                    'role_ids[]': { required: "Please select at least one role" }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    // Show the loading spinner
                    $('.overlay').fadeIn(200);

                    // Get full international number from intl-tel-input
                    const fullNumber = iti.getNumber();
                    $('#phone').val(fullNumber);

                    const formData = new FormData(form);

                    $.ajax({
                        url: form.action,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            // Hide spinner with slight delay for better UX
                            setTimeout(() => {
                                $('.overlay').fadeOut(200);
                            }, 500);

                            if (response.alertType && response.message) {
                                toastr[response.alertType](response.message);
                            }
                            if (response.redirectTo) {
                                setTimeout(() => {
                                    window.location.href = response.redirectTo;
                                }, 1000);
                            }
                        },
                        error: function(xhr) {
                            // Hide spinner even on error
                            setTimeout(() => {
                                $('.overlay').fadeOut(200);
                            }, 500);

                            if (xhr.status === 422) {
                                const errors = xhr.responseJSON.errors;
                                $.each(errors, function(key, messages) {
                                    messages.forEach(message => toastr.error(message));
                                });
                            } else {
                                toastr.error('An unexpected error occurred.');
                            }
                        },
                        complete: function() {
                            // Ensure spinner hides even if handlers fail
                            $('.overlay').fadeOut(200);
                        }
                    });

                    return false; // Prevent default form submission
                }
            });

            toggleCslIdField();
            $('#user_type').on('change', function() {
                toggleCslIdField();
            });

            @if ($edit && $user->user_type == 2)
            toggleCslIdField();
            @endif
        });
    </script>
@endpush