@extends('layouts.frontend.master_auth')
@section('title', 'Register')

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/css/intlTelInput.css">
    <style>
        input::placeholder, select::placeholder { color: transparent; }
        label { line-height: 1; transition: all 0.2s ease-out; }
        .form-label { position: absolute; left: 0.2rem; top: 50%; font-size: 1rem; transform: translateY(-50%); background-color: transparent; padding: 0 0.25rem; color: #6B7280; pointer-events: none; transition: all 0.2s ease-out; }
        input:focus ~ .form-label, input:not(:placeholder-shown) ~ .form-label, select:focus ~ .form-label, select:not([value=""]):not(:focus) ~ .form-label { top: 0; transform: translateY(-50%) scale(0.75); background-color: white; color: black; }
        select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; padding: 0.5rem 1rem; color: #4B5563; cursor: pointer; }
        .select-arrow { position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; pointer-events: none; border-right: 1.5px solid #6B7280; border-bottom: 1.5px solid #6B7280; transform: translateY(-70%) rotate(45deg); }
        .custom-hover:hover { background-color: black !important; }
        .select2-container--default .select2-selection--single {
            border: 1px solid #D1D5DB; border-radius: 0.5rem; padding: 0.5rem 1rem; height: 2.5rem; background-color: white;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #4B5563; line-height: 1.5rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 2.5rem;
        }
        .select2-container--default .select2-selection--single:focus {
            outline: none; border-color: #10B981;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            display: none;
        }
        .iti { width: 100%; display: block; }
        .iti__input {
            width: 100% !important;
            display: block !important;
            padding: 0.5rem 1rem !important;
            font-size: 1rem !important;
            line-height: 1.5rem !important;
            background-color: white !important;
            border: 1px solid #D1D5DB !important;
            border-radius: 0.5rem !important;
            appearance: none !important;
        }
        .iti__input:focus {
            outline: none !important;
            ring: 0 !important;
            border-color: #10B981 !important;
        }
        .iti__selected-dial-code {
            font-size: 1rem !important;
        }
    </style>
@endpush

@section('content')
    <div class="flex flex-col items-center justify-center min-h-screen bg-[#FDFEFD]">
        <div class="mb-4">
            <img src="{{ asset('frontend/logo/bau-logo.png') }}" alt="Logo" class="w-12 h-12">
        </div>
        <div class="text-center">
                            <h2 class="text-2xl font-semibold text-gray-900 mb-6">BAU 2001–2002 Alumni Association Registration Form</h2>
                <p class="text-sm text-gray-600">Join our foundation network and stay connected with your alma mater</p>
                <p class="text-sm text-gray-600 mt-2">Already registered? <a href="{{route('login')}}" class="text-blue-600">Login to your foundation account</a></p>
        </div>

        <div class="w-full max-w-2xl p-8 bg-white rounded-2xl shadow-md border border-gray-200">
            <form class="space-y-4" method="POST" action="{{ route('register') }}">
                @csrf
                <h3 class="text-lg font-medium text-gray-900">Personal Information</h3>

                <div class="relative">
                    <select name="member_category" id="member_category" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" required>
                        <option value="" selected>Select Member Category</option>
                        @foreach($memberCategories as $memberCategory)
                            <option value="{{ $memberCategory->id }}">{{ $memberCategory->name }}</option>
                        @endforeach
                    </select>
                    <span class="select-arrow"></span>
                    <label for="member_category" class="form-label">Member Category *</label>
                </div>

                <div class="grid grid-cols-1 gap-4">
                    <div class="relative">
                        <input type="text" name="name" id="name" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" placeholder=" " required>
                        <label for="name" class="form-label">Full Name *</label>
                    </div>

                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <div class="relative">
                            <input type="email" name="email" id="email" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" placeholder=" " required>
                            <label for="email" class="form-label">Personal Email *</label>
                        </div>
                    </div>
                    <div>
                        <div class="relative">
                            <input type="text" name="phone" id="phone" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" placeholder=" " required>
                            <label for="phone" class="form-label" style="margin-left: 30%">Cell Number *</label>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <div class="relative">
                            <input type="date" name="dob" id="dob" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" placeholder=" " required>
                            <label for="dob" class="form-label">Date of Birth *</label>
                        </div>
                    </div>
                    <div>
                        <div class="relative">
                            <select name="blood_group" id="blood_group" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" required>
                                <option value="" selected>Select Blood Group</option>
                                @foreach(\App\Models\PersonalInformation::BLOOD_GROUP as $key => $bloodGroup)
                                    <option value="{{ $key }}">{{ $bloodGroup }}</option>
                                @endforeach


                            </select>
                            <span class="select-arrow"></span>
                            <label for="blood_group" class="form-label">Blood Group *</label>
                        </div>
                    </div>
                </div>


                <h3 class="text-lg font-medium text-gray-900 mt-4">University Information</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <div class="relative">
                            <select name="reg_number_id" id="reg_number_id" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" required>
                                <option value="" selected>Select Registration Number </option>
                                @foreach($registrationNumbers as $regNumber)
                                    <option value="{{ $regNumber->id }}">{{ $regNumber->reg_number }}</option>
                                @endforeach
                            </select>
                            <span class="select-arrow"></span>
                            <label for="reg_number_id" class="form-label">University Registration Number </label>
                        </div>
                    </div>
                    <div>
                        <div class="relative">
                            <select name="faculty" id="faculty" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400">
                                <option value="" selected>Select Faculty</option>
                                @foreach($faculties as $faculty)
                                    <option value="{{ $faculty->id }}">{{ $faculty->name }}</option>
                                @endforeach
                            </select>
                            <span class="select-arrow"></span>
                            <label for="faculty" class="form-label">Faculty</label>
                        </div>
                    </div>
                </div>
                <div class="relative">
                    <select name="student_id" id="student_id" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" required>
                        <option value="" selected>Select Student ID</option>
                        @foreach($students as $student)
                            <option value="{{ $student->id }}">{{ $student->name }}-{{ $student->student_id }}</option>
                        @endforeach
                    </select>
                    <span class="select-arrow"></span>
                    <label for="student_id" class="form-label">Student ID </label>
                </div>

                <h3 class="text-lg font-medium text-gray-900 mt-4">Current Job Information</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <div class="relative">
                            <input type="text" name="job_title" id="job_title" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" placeholder=" " required>
                            <label for="job_title" class="form-label">Current Job Title *</label>
                        </div>
                    </div>
                    <div>
                        <div class="relative">
                            <input type="text" name="company" id="company" class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400" placeholder=" " required>
                            <label for="company" class="form-label">Current Company *</label>
                        </div>
                    </div>
                </div>

                <div class="relative mt-4">
                    <label class="flex items-center space-x-2">
                        <input type="checkbox" name="terms" class="w-5 h-5 accent-green-600 border-gray-300 rounded focus:ring-green-500" required>
                        <span class="text-sm text-gray-900">I agree to the Terms and Conditions and Privacy Policy *</span>
                    </label>
                    <p class="text-xs text-gray-600 mt-1">By registering, you agree to receive communications from the university foundation network.</p>
                </div>

                <div class="flex justify-end space-x-4 mt-6">
                    <button type="reset" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300">Reset Form</button>
                    <button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded-lg custom-hover">Submit Registration</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@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 () {
            // Setup AJAX to include CSRF token
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // 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"
            });

            // Handle floating label for phone input
            const phoneLabel = $('label[for="phone"]');
            $('#phone').on('focus blur input', function() {
                if ($(this).val() || $(this).is(':focus')) {
                    phoneLabel.css({
                        'margin-left': '0',
                        'top': '0',
                        'transform': 'translateY(-50%) scale(0.75)',
                        'background-color': 'white',
                        'color': 'black'
                    });
                } else {
                    phoneLabel.css({
                        'margin-left': '30%',
                        'top': '50%',
                        'transform': 'translateY(-50%) scale(1)',
                        'background-color': 'transparent',
                        'color': '#6B7280'
                    });
                }
            });

            // Update hidden input or the phone field value with full international number on form submit
            $('form').on('submit', function() {
                const fullNumber = iti.getNumber();
                $('#phone').val(fullNumber);
            });

            // Initialize Select2 for each dropdown
            $('#member_category').select2({
                placeholder: "Select Member Category",
                allowClear: true
            });
            $('#blood_group').select2({
                placeholder: "Select Blood Group",
                allowClear: true
            });
            $('#faculty').select2({
                placeholder: "Select Faculty",
                allowClear: true
            });
            $('#student_id').select2({
                placeholder: "Select Student ID",
                allowClear: true,
                // tags: true,
                // createTag: function (params) {
                //     let term = $.trim(params.term);
                //
                //     if (term === '') {
                //         return null;
                //     }
                //
                //     let regex = /^[A-Za-z]{2,}-\d+$/;
                //
                //     if (!regex.test(term)) {
                //         return null;
                //     }
                //
                //     return {
                //         id: term,
                //         text: term,
                //         newOption: true
                //     }
                // },
                // templateResult: function (data) {
                //     if (data.newOption) {
                //         return $('<span class="text-success">' + data.text + '</span>');
                //     }
                //     return data.text;
                // }
            });

            $('#reg_number_id').select2({
                placeholder: "Select Registration Number",
                allowClear: true,
                // tags: true,
                // createTag: function (params) {
                //     let term = $.trim(params.term);
                //
                //     if (term === '') {
                //         return null;
                //     }
                //
                //     let regex = /^BAU-\d+$/;
                //
                //     if (!regex.test(term)) {
                //         return null;
                //     }
                //
                //     return {
                //         id: term,
                //         text: term,
                //         newOption: true
                //     };
                // },
                // templateResult: function (data) {
                //     if (data.newOption) {
                //         return $('<span class="text-success">' + data.text + '</span>');
                //     }
                //     return data.text;
                // }
            });


            // Update student_id dropdown when faculty changes
            $('#faculty').on('change', function () {
                let facultyId = $(this).val();
                let $studentSelect = $('#student_id');

                // Clear existing options in student_id dropdown
                $studentSelect.val(null).trigger('change');
                $studentSelect.find('option:not(:first)').remove();

                if (facultyId) {
                    $.ajax({
                        url: '{{ route("get-students-by-faculty") }}',
                        type: 'POST',
                        data: {
                            faculty_id: facultyId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            if (response.success) {
                                $.each(response.data, function (index, student) {
                                    let option = new Option(
                                        `${student.name}-${student.student_id}`,
                                        student.id,
                                        false,
                                        false
                                    );
                                    $studentSelect.append(option);
                                });
                                $studentSelect.trigger('change');
                                toastr.success('Students loaded successfully.');
                            } else {
                                toastr.error(response.message || 'No students found for this faculty.');
                            }
                        },
                        error: function (xhr) {
                            console.log('Error fetching students:', xhr.responseJSON);
                            toastr.error('Error fetching students. Please try again.');
                        }
                    });
                } else {
                    toastr.info('Please select a faculty to load students.');
                }
            });

            // Check for duplicate reg_number_id on change
            $('#reg_number_id').on('change', function () {
                let regNumberId = $(this).val();
                let submitBtn = $("button[type='submit']");
                submitBtn.prop('disabled', false); // Reset submit button

                if (regNumberId) {
                    $.ajax({
                        url: '{{ route("check-reg-number") }}',
                        type: 'POST',
                        data: {
                            reg_number_id: regNumberId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            if (response.isTaken) {
                                toastr.error(response.message);
                                submitBtn.prop('disabled', true);
                            } else {
                                toastr.success(response.message);
                                submitBtn.prop('disabled', false);
                            }
                        },
                        error: function (xhr) {
                            console.log('Check reg_number_id error:', xhr.responseJSON);
                            toastr.error('Error checking registration number. Please try again.');
                            submitBtn.prop('disabled', false);
                        }
                    });
                }
            });

            // Adjust floating label on Select2 change
            $('.select2-container').each(function () {
                $(this).on('select2:select select2:unselect', function () {
                    let $select = $(this).prev('select');
                    let $label = $select.siblings('.form-label');
                    if ($select.val()) {
                        $label.css({
                            'top': '0',
                            'transform': 'translateY(-50%) scale(0.75)',
                            'background-color': 'white',
                            'color': 'black'
                        });
                    } else {
                        $label.css({
                            'top': '50%',
                            'transform': 'translateY(-50%) scale(1)',
                            'background-color': 'transparent',
                            'color': '#6B7280'
                        });
                    }
                });
            });

            // Ensure reset button clears Select2 and validation
            $("button[type='reset']").on("click", function () {
                $('#member_category, #blood_group, #faculty, #student_id, #reg_number_id').val(null).trigger('change');
                $('#student_id').find('option:not(:first)').remove(); // Clear student options
                $('#phone').val(''); // Clear phone input
                iti.setNumber(''); // Reset intl-tel-input
                $("form").validate().resetForm();
                $("form")[0].reset();
                $("button[type='submit']").prop('disabled', false).html('Submit Registration');
            });

            // Add custom validator for phone number
            $.validator.addMethod("bdPhone", function(value, element) {
                // Since intl-tel-input handles validation, we just check if value exists
                return this.optional(element) || value.length > 0;
            }, "Please enter a valid phone number");

            // Initialize jQuery Validation
            $("form").validate({
                rules: {
                    name: { required: true, minlength: 1, maxlength: 32 },
                    email: { required: true, email: true },
                    phone: { required: true, bdPhone: true },
                    dob: { required: true },
                    blood_group: { required: true },
                    member_category: { required: false },
                    reg_number_id: { required: false },
                    faculty: { required: false },
                    student_id: { required: false },
                    terms: { required: true },
                    job_title: { required: true },
                    company: { required: true },
                },
                messages: {
                    name: { required: "Full name is required", minlength: "Name must be at least 1 character", maxlength: "Name cannot exceed 32 characters" },
                    email: { required: "Email is required", email: "Email should be valid" },
                    phone: { required: "Phone number is required" },
                    dob: { required: "Date of birth is required" },
                    blood_group: { required: "Blood group is required" },
                    member_category: { required: "Member category is required" },
                    reg_number_id: { required: "University registration number is required" },
                    faculty: { required: "Faculty is required" },
                    student_id: { required: "Student ID is required" },
                    terms: { required: "You must agree to the terms and conditions" },
                    job_title: { required: "Current job title is required" },
                    company: { required: "Current company is required" }
                },
                errorElement: 'p',
                errorClass: 'mt-1 text-sm text-red-500',
                errorPlacement: function (error, element) {
                    error.insertAfter(element.parent());
                },
                highlight: function (element) {
                    $(element).addClass("border-red-500").removeClass("border-gray-300").siblings('label').addClass("text-red-500").removeClass("text-gray-500");
                },
                unhighlight: function (element) {
                    $(element).removeClass("border-red-500").addClass("border-gray-300").siblings('label').removeClass("text-red-500").addClass("text-gray-500");
                },
                submitHandler: function (form, event) {
                    event.preventDefault(); // Prevent default form submission

                    let submitBtn = $("button[type='submit']");
                    submitBtn.prop("disabled", true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');

                    $.ajax({
                        url: form.action,
                        type: "POST",
                        data: $(form).serialize(),
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },
                        success: function (response) {
                            if (response.success) {
                                toastr.success(response.message);
                                setTimeout(function() {
                                    window.location.href = response.redirectTo;
                                }, 1000);
                            } else {
                                console.log('Error response:', response);
                                toastr.error(response.message || 'Something went wrong');
                                submitBtn.prop("disabled", false).html('Submit Registration');
                            }
                        },
                        error: function (xhr) {
                            console.log('AJAX error:', xhr);
                            console.log('AJAX error response:', xhr.responseJSON);

                            let response = xhr.responseJSON;
                            if (response && response.errors) {
                                Object.keys(response.errors).forEach(function (key) {
                                    toastr.error(response.errors[key][0]);
                                });
                            } else if (response && response.message) {
                                toastr.error(response.message);
                            } else {
                                toastr.error('Something went wrong. Please try again.');
                            }
                            submitBtn.prop("disabled", false).html('Submit Registration');
                        }
                    });

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

            // Ensure jQuery Validation works with Select2
            $.validator.addMethod("select2Required", function(value, element) {
                return value !== "";
            }, "This field is required.");

            $("form").validate({
                rules: {
                    member_category: { select2Required: true },
                    blood_group: { select2Required: true },
                    faculty: { select2Required: false },
                    student_id: { select2Required: false },
                    reg_number_id: { select2Required: false }
                }
            });
        });
    </script>
@endpush