@extends('layouts.student_layout')

@section('content')
<!-- [ Page Header ] start -->
<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<!-- [ Page Header ] end -->
<div class="row">
    <div class="col-12">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body position-relative">
                        <div class="text-center">
                            <div class="chat-avtar d-inline-flex mx-auto">
                                <img class="rounded-circle img-fluid" src="{{ auth()->user()->profile_image_full_path ?? 'https://cdn-icons-png.flaticon.com/512/10542/10542459.png' }}"
                                    alt="User image" style="width: 100px; height: 100px;" />
                            </div>
                            <h5 class="mt-3 mb-1">{{ auth()->user()->name }}</h5>
                            <p class="text-muted">
                                @foreach(auth()->user()->roles as $role)
                                {{ $role->name }}
                                @endforeach
                            </p>
                        </div>
                        <div class="nav flex-column nav-pills list-group list-group-flush user-sett-tabs" id="user-set-tab"
                            role="tablist" aria-orientation="vertical">
                            <a class="nav-link list-group-item list-group-item-action active" id="user-tab-1"
                                data-bs-toggle="pill" href="#user-cont-1" role="tab">
                                <span class="f-w-500"><i class="ti ti-user m-r-10"></i>Personal Information</span>
                            </a>
                            <a class="nav-link list-group-item list-group-item-action" id="user-tab-3" data-bs-toggle="pill"
                                href="#user-cont-3" role="tab">
                                <span class="f-w-500"><i class="ti ti-lock m-r-10"></i>Change Password</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="tab-content" id="user-set-tabContent">
                    <div class="tab-pane fade show active" id="user-cont-1" role="tabpanel">
                        <form id="profileForm" action="{{ route('profile.update.student-profile') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('POST')

                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <h5>Personal Information</h5>
                                            <hr class="mb-4">
                                        </div>
                                        <div class="col-12 col-md-12">
                                            <div class="form-group">
                                                <label class="form-label">Profile Photo</label>
                                                <input type="file" class="form-control form-control-file" name="profile_image" accept=".jpg, .png, .jpeg" />
                                                <span class="text-danger">Only accept .jpg, .png, .jpeg file types. Max file size 1MB.</span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-12">
                                            <div class="form-group">
                                                <label class="form-label">Name</label>
                                                <input type="text" class="form-control" name="name" value="{{ auth()->user()->name }}" disabled>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="form-group">
                                                <label class="form-label">Email Address</label>
                                                <input type="email" class="form-control" name="email" value="{{ auth()->user()->email }}" disabled>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="form-group">
                                                <label class="form-label">Mobile Number</label>
                                                <input type="text" class="form-control" name="mobile_number" value="{{ auth()->user()->mobile_number }}" disabled>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="form-group">
                                                <label class="form-label">Correspondence Address</label>
                                                <textarea class="form-control" name="correspondence_address">{{ $personalDetails->correspondence_address }}</textarea>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="correspondence_state" class="form-label">Correspondence State<span class="text-danger">*</span></label>
                                            <select id="correspondence_state" name="correspondence_state" class="form-control form-input" required>
                                                <option value="">Select State</option>
                                                @foreach ($states as $state)
                                                <option value="{{ $state->state_code }}" {{ $personalDetails && $personalDetails->correspondence_state == $state->state_code ? 'selected' : '' }}>{{ $state->state_name_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="correspondence_district" class="form-label">Correspondence District<span class="text-danger">*</span></label>
                                            <input type="hidden" id="hidden_correspondence_district" value="{{ $personalDetails->correspondence_district ?? '' }}">
                                            <select id="correspondence_district" name="correspondence_district" class="form-control form-input" required>
                                                <option value="">Select District</option>
                                            </select>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <div class="form-group">
                                                <label for="correspondence_city" class="form-label">Correspondence City<span class="text-danger">*</span></label>
                                                <input type="text" id="correspondence_city" name="correspondence_city" class="form-input" value="{{ $personalDetails->correspondence_city ?? '' }}">
                                            </div>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <div class="form-group">
                                                <label for="correspondence_pincode" class="form-label">Correspondence Pincode<span class="text-danger">*</span></label>
                                                <input type="text" id="correspondence_pincode" name="correspondence_pincode" class="form-input" value="{{ $personalDetails->correspondence_pincode ?? '' }}">
                                            </div>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <div class="form-group">
                                                <label for="emergency_name" class="form-label">Emergency Contact Name <span class="text-danger">*</span></label>
                                                <input type="text" id="emergency_name" name="emergency_name" class="form-input" value="{{ $personalDetails->emergency_name ?? '' }}">
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                             <div class="form-group">
                                                <label for="emergency_phone" class="form-label">Emergency Contact Phone <span class="text-danger">*</span></label>
                                                <input type="tel" id="emergency_phone" name="emergency_phone" class="form-input" value="{{ $personalDetails->emergency_phone ?? '' }}">
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="form-group">
                                                <label for="relationship" class="form-label">Relationship <span class="text-danger">*</span></label>
                                                <input type="text" id="relationship" name="relationship" class="form-input" value="{{ $personalDetails->relationship ?? '' }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer text-end btn-page">
                                    <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="user-cont-3" role="tabpanel">
                        <form id="changePasswordForm" action="{{ route('profile.change-password') }}" method="POST">
                            @csrf
                            @method('POST')

                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <h5>Change Password</h5>
                                            <hr class="mb-4">
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="form-label">Old Password</label>
                                                <input type="password" class="form-control" name="old_password">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">New Password</label>
                                                <input type="password" class="form-control" name="new_password">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">Confirm Password</label>
                                                <input type="password" class="form-control" name="new_password_confirmation">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <h5>New password must contain:</h5>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item">✔ At least 8 characters</li>
                                                <li class="list-group-item">✔ At least 1 lowercase letter (a-z)</li>
                                                <li class="list-group-item">✔ At least 1 uppercase letter (A-Z)</li>
                                                <li class="list-group-item">✔ At least 1 number (0-9)</li>
                                                <li class="list-group-item">✔ At least 1 special character (!@#$%^&*)</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer text-end btn-page">
                                    <button type="reset" class="btn btn-outline-secondary">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
    $('#profileForm').validate({
        rules: {
            name: {
                required: true 
            },
            email: {
                required: true 
            },
            mobile_number: {
                required: true 
            },
            correspondence_address: {
                required: true
            },
            correspondence_state: {
                required: true
            },
            correspondence_district: {
                required: true
            },
            correspondence_city: {
                required: true
            },
            emergency_name: {
                required: true
            },
            emergency_phone: {
                required: true
            },
            relationship: {
                required: true
            }
        },
        messages: {
            photo: {
                extension: "Only .jpg, .jpeg, .png files allowed.",
                filesize: "File size must be less than 1MB."
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: $(form).attr('action'),
                method: $(form).attr('method'),
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: response.message,
                        confirmButtonText: 'OK'
                    }).then(() => location.reload());
                },
                error: function(xhr) {
                    let msg = 'An error occurred.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: msg,
                    });
                }
            });
        }
    });

    // Custom validator for file size
    $.validator.addMethod('filesize', function(value, element, param) {
        return this.optional(element) || (element.files[0].size <= param);
    });

    // ======================================================
    // ======================================================
    var encryptionKey = "{{ session()->get('encryption_key') }}";

    $('#changePasswordForm').validate({
        rules: {
            old_password: {
                required: true
            },
            new_password: {
                required: true,
                minlength: 8,
                pwcheck: true
            },
            new_password_confirmation: {
                required: true,
                equalTo: '[name="new_password"]'
            }
        },
        messages: {
            new_password: {
                minlength: "Password must be at least 8 characters long.",
                pwcheck: "Password must contain uppercase, lowercase, number, and special character."
            },
            new_password_confirmation: {
                equalTo: "Passwords do not match."
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);

            const oldPassword = encryptPassword(formData.get('old_password'), encryptionKey);
            const newPassword = encryptPassword(formData.get('new_password'), encryptionKey);
            const newPasswordConfirmation = encryptPassword(formData.get('new_password_confirmation'), encryptionKey);

            formData.set('old_password', oldPassword);
            formData.set('new_password', newPassword);
            formData.set('new_password_confirmation', newPasswordConfirmation);

            $.ajax({
                url: $(form).attr('action'),
                method: $(form).attr('method'),
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    encryptionKey = response.key;
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        html: response.message,
                        confirmButtonText: 'OK'
                    }).then(() => {
                        window.location.href = response.redirect_url
                    });
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = Object.values(errors).flat().join("<br>");
                        Swal.fire({
                            title: "Validation Error",
                            html: errorMessages,
                            icon: "error"
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }

                    encryptionKey = xhr.responseJSON.key;
                }
            });
        }
    });

    // Custom validator for strong password
    $.validator.addMethod("pwcheck", function(value) {
        return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#]).{8,}$/.test(value);
    });

    $(document).on('change', '#correspondence_state', function() {
        getDistrictsByState($(this).val(), 'correspondence_district', '');
    });

    if ($('#correspondence_state').val()) {
        getDistrictsByState(
            $('#correspondence_state').val(),
            'correspondence_district',
            $('#hidden_correspondence_district').val()
        );
    }

</script>
@endsection