@extends('frontend.maintemplate.maintemplate')

@section('title', 'Student Profile ' . ' :: AgeLess Institute')

@section('content')
    <style>
        .error-message {
            color: red;
            /* Make text red */
            font-size: 0.875em;
            /* Slightly smaller font */
            margin-top: 5px;
            /* Add some space above the error message */
        }
    </style>

    <div class="profile-top-link-wrapper">
        <div class="container-fluid">
            <div class="profile-top-link-inner">
                <ul>
                    <li><a href="{{ route('student.profile.index') }}"><img src="{{ asset('frontend/assets/images/others/profile.png') }}" alt=""> Profile</a></li>
                    <li><a href="{{ route('student.course.create') }}"><img src="{{ asset('frontend/assets/images/others/course-icon.png') }}" alt=""> My Course</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <div class="profile-details-section">
        <div class="container-fluid">
            <div class="profile-details-inner">
                <form action="{{ route('student.profile.update', $student->id) }}" method="POST" id="profile_form" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row upload-suluation-row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Salutation</label>
                                <select class="form-select form-control" name="salutation" aria-label="Default select example">
                                    <option value="Mr." {{ old('salutation', isset($student) && $student->salutation == 'Mr.' ? 'Mr.' : '') == 'Mr' ? 'selected' : '' }}>Mr.</option>
                                    <option value="Mrs." {{ old('salutation', isset($student) && $student->salutation == 'Mrs.' ? 'Mrs.' : '') == 'Mrs.' ? 'selected' : '' }}>Mrs.</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="profile-upload-wrapper">
                                    <div class="circle">
                                        @if ($student->profile_picture)
                                            {{-- <img class="profile-pic" src="{{ asset('frontend/assets/images/others/profile-upload-image.png') }}"> --}}
                                            <img class="profile-pic" src="{{ asset('storage/' . $student->profile_picture) }}">
                                        @endif
                                    </div>
                                    <div class="p-image">
                                        <div class="upload-button">
                                            <img src="{{ asset('frontend/assets/images/others/upload-icon.png') }}" alt="">
                                            <p>Upload Profile Picture</p>
                                        </div>
                                        <!-- <i class="fa fa-camera upload-button"></i> -->
                                        <input type="file" class="file-upload" id="profile_picture" name="profile_picture" accept="image/*" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="personal-details-wrapper">
                        <h5>Personal Details</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">First Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="first_name" name="first_name" value="{{ old('first_name', $student->first_name) }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Last Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="last_name" name="last_name" value="{{ old('last_name', $student->last_name) }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control" id="email" name="email" value="{{ old('email', $student->email) }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Phone No. <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="mobile_number" name="mobile_number" value="{{ old('mobile_number', $student->mobile_number) }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Gender <span class="text-danger">*</span></label>
                                    <select class="form-select form-control" name="gender" id="gender" aria-label="Default select example">
                                        <option value="male" {{ old('gender', isset($student) && $student->gender == 'male' ? 'male' : '') == 'male' ? 'selected' : '' }}>Male</option>
                                        <option value="female" {{ old('gender', isset($student) && $student->gender == 'female' ? 'female' : '') == 'female' ? 'selected' : '' }}>Female</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group date-group">
                                    <label for="">Date of Birth <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" placeholder="Date"  id="birth_date" name="birth_date" value="{{ old('birth_date', $student->birth_date ? \Carbon\Carbon::parse($student->birth_date)->format('Y-m-d') : '') }}">
                                    <span></span>
                                </div>
                            </div>
                        </div>
                        <h5 class="margin_top">Address</h5>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="">Full Address: <span class="text-danger">*</span></label>
                                    <textarea id="address_1" name="address_1" class="form-control">{{ old('address_1', $student->address_1) }}</textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Landmark <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="landmark" id="landmark" value="{{ old('landmark', $student->landmark) }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Country <span class="text-danger">*</span></label>
                                    <select class="form-select" aria-label="Default select example">
                                        <option selected>India</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">State/Province: <span class="text-danger">*</span></label>
                                    <select class="form-select" aria-label="Default select example" id="state" name="state">
                                        <option value="">Select a state</option>
                                        @foreach ($states as $state)
                                            <option value="{{ $state->id }}" {{ old('state', $selectedState) == $state->id ? 'selected' : '' }}> {{ $state->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">City <span class="text-danger">*</span></label>
                                    <select class="form-select form-control-sm datatable-input" id="city" name="city">
                                        <option value="">Select a city</option>
                                        <!-- Cities will be populated via AJAX -->
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Zip Code <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="pincode" name="pincode" value="{{ old('pincode', $student->pincode) }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="checkout-button-wrapper">
                                    <button class="checkout_btn">Update Profile</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {

            $("#email").on("input", function() {
                var email = $("input[name='email']").val();
                if (email !== "" && validateEmail(email)) {
                    $(".error-message").remove();
                }
            });

            $("#profile_form").submit(function(event) {
                event.preventDefault(); // Prevent form submission

                var firstName = $("input[name='first_name']").val();
                var lastName = $("input[name='last_name']").val();
                var email = $("input[name='email']").val();

                var mobileNumber = $("input[name='mobile_number']").val();
                var address = $("textarea[name='address_1']").val();

                var gender = $("select[name='gender']").val();
                var birthDate = $("input[name='birth_date']").val();
                var state = $("select[name='state']").val();
                var city = $("select[name='city']").val();
                var pincode = $("input[name='pincode']").val();
                var landmark = $("input[name='landmark']").val();

                var isValid = true;
                $(".error-message").remove();

                // Validate first name
                if (firstName === "") {
                    isValid = false;
                    $("input[name='first_name']").after(
                        '<div class="error-message">First Name is required.</div>');
                }

                // Validate last name
                if (lastName === "") {
                    isValid = false;
                    $("input[name='last_name']").after(
                        '<div class="error-message">Last Name is required.</div>');
                }

                if (email === "") {
                    isValid = false;
                    $("input[name='email']").after('<div class="error-message">Email is required.</div>');
                } else if (!validateEmail(email)) {
                    isValid = false;
                    $("input[name='email']").after('<div class="error-message">Please enter a valid email address.</div>');
                }

                // Validate mobile number
                if (mobileNumber === "") {
                    isValid = false;
                    $("input[name='mobile_number']").after(
                        '<div class="error-message">Mobile Number is required.</div>');
                }

                // Validate address
                if (address === "") {
                    isValid = false;
                    $("textarea[name='address_1']").after(
                        '<div class="error-message">Address is required.</div>');
                }

                // Validate gender
                if (gender === "") {
                    isValid = false;
                    $("select[name='gender']").after(
                    '<div class="error-message">Gender is required.</div>');
                }

                // Validate date of birth
                if (birthDate === "") {
                    isValid = false;
                    $("input[name='birth_date']").after(
                        '<div class="error-message">Date of Birth is required.</div>');
                }

                // Validate state and city
                if (state === "") {
                    isValid = false;
                    $("select[name='state']").after('<div class="error-message">State is required.</div>');
                }

                if (city === "") {
                    isValid = false;
                    $("select[name='city']").after('<div class="error-message">City is required.</div>');
                }

                // Validate pincode
                if (pincode === "") {
                    isValid = false;
                    $("input[name='pincode']").after(
                        '<div class="error-message">Pincode is required.</div>');
                }

                if (landmark === "") {
                    isValid = false;
                    $("input[name='landmark']").after(
                        '<div class="error-message">Landmark is required.</div>');
                }

                if (isValid) {
                    this.submit(); // Submit the form if everything is valid
                }

                function validateEmail(email) {
                    var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                    return emailRegex.test(email);
                }
            });

            // Helper function to validate email format


            if ($(".alert-success").length) {
                setTimeout(function () {
                    $(".alert-success").fadeOut(500, function () {
                        $(this).remove();
                    });
                }, 3000);
            }

            // Manual close for all alerts
            $(document).on("click", ".alert .btn-close", function () {
                $(this).closest(".alert").fadeOut(500, function () {
                    $(this).remove();
                });
            });
        });
        $(document).ready(function() {
            // Base URL for AJAX requests
            var baseUrl = "{{ url('/student') }}";

            // Function to fetch cities based on the selected state
            function fetchCities(stateId, selectedCityId = null) {
                if (stateId) {
                    $.ajax({
                        url: baseUrl + '/cities/' + stateId, // Fetch cities for the selected state
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#city').empty(); // Clear city dropdown
                            $('#city').append(
                            '<option value="">Select a city</option>'); // Add default option

                            // Populate cities
                            $.each(data, function(index, city) {
                                $('#city').append(
                                    '<option value="' + city.id + '"' +
                                    (selectedCityId == city.id ? ' selected' : '') +
                                    '>' + city.city + '</option>'
                                );
                            });
                        },
                        error: function() {
                            alert('Failed to load cities');
                        }
                    });
                } else {
                    // If no state is selected, reset the city dropdown
                    $('#city').empty();
                    $('#city').append('<option value="">Select a city</option>');
                }
            }

            // Event listener for state change
            $("#state").change(function() {
                var stateId = $(this).val(); // Get selected state ID
                fetchCities(stateId); // Fetch cities for the selected state
            });

            // On page load, check if state and city are pre-selected
            var selectedStateId = "{{ old('state', $selectedState) }}"; // Pre-selected state
            var selectedCityId = "{{ old('city', $selectedCity) }}"; // Pre-selected city

            if (selectedStateId) {
                fetchCities(selectedStateId, selectedCityId); // Fetch cities for the pre-selected state and city
            }
        });
    </script>

    </html>
@endsection