@extends('layouts.app')

@section('title') Email Verification @endsection

@section('content')

<style>
    /* Modal Styles */
    .modal-dialog {
        max-width: 35%;
    }

    .modal-body.text-center.p-4 {
    border-radius: 20px;
}

    .modal-header {
        background-color: #f7f7f7;
        border-bottom: 1px solid #e0e0e0;
    }

    .modal-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }

    /* OTP input fields */
    .otp-input {
        width: 50px;
        height: 50px;
        text-align: center;
        font-size: 20px;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin: 0 10px;
        box-sizing: border-box;
    }

    .otp-input:focus {
        border-color: #3c8dbc;
        outline: none;
    }

    /* OTP Input container */
    .otp-input-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    /* OTP Verification Button */
    #verifyOtpBtn {
        background-color: #3c8dbc;
        color: white;
        font-size: 16px;
        border: none;
        padding: 10px 20px;
        width: 30%;
        border-radius: 5px;
        cursor: pointer;
        margin: 21px 0px 15px 182px;
    }

    #verifyOtpBtn:hover {
        background-color: #3c8dbc;
    }

    /* Resend OTP Link */
    #resendOtpBtn {
        color: #007bff;
        text-decoration: none;
    }

    #resendOtpBtn:hover {
        text-decoration: underline;
    }

    /* Error messages */
    .error-message {
        color: red;
        font-size: 12px;
        text-align: center;
        margin-top: 10px;
    }

    @media (max-width: 576px) {
        .modal-dialog {
            max-width: 95% !important;
        }
    }

    .modal-content {
        border-radius: 1rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    .modal-header {
        border-bottom: 1px solid #dee2e6;
        background-color: #f8f9fa;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .btn i {
        vertical-align: middle;
        margin-right: 5px;
    }

    .alert i {
        margin-right: 8px;
    }

    modal-header .close {
        margin-top: -27px;
    }

    button#changeEmailBtn {
        margin-left: 59px !important;
    }


    .custom-modal-content {
        border: none;
        border-radius: 1rem;
        backdrop-filter: blur(6px);
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease-in-out;
    }

    .custom-modal-header {
        background: linear-gradient(to right, #4a90e2, #007bff);
        padding: 1rem 1.5rem;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        border-bottom: none;
    }

    .custom-input {
        padding: 0.75rem;
        font-size: 14px;
        border-radius: 0.5rem;
        border: 1px solid #dee2e6;
        transition: 0.2s ease-in-out;
    }

    .custom-input:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.2);
    }

    .btn-gradient-primary {
        background: linear-gradient(to right, #3c8dbc,rgb(101, 166, 203));
        border: none;
        color: #fff;
        font-weight: 600;
        border-radius: 0.5rem;
        transition: 0.3s ease-in-out;
    }

    .btn-gradient-primary:hover {
        background: linear-gradient(to right, #3c8dbc, #1e7e34);
    }



    .otp-modal {
        background: #fff;
        border-radius: 1rem;
    }

    .bg-gradient-primary {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
    }

    .otp-input {
        width: 52px;
        height: 58px;
        font-size: 1.6rem;
        font-weight: 600;
        border: 1px solid #ccc;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .otp-input:focus {
        border-color: #4e54c8;
        box-shadow: 0 0 0 3px rgba(78, 84, 200, 0.2);
        outline: none;
    }

    .btn-gradient-verify {
        background: linear-gradient(to right, #28a745, #218838);
        border: none;
        color: #fff;
        font-weight: 600;
        border-radius: 0.5rem;
        transition: all 0.3s ease-in-out;
    }

    .btn-gradient-verify:hover {
        background: linear-gradient(to right, #218838, #1e7e34);
    }



    .alert.alert-success.d-flex.align-items-center.justify-content-center {
        width: 24% !important;
        text-align: center;
        margin-left: 404px !important;
    }

    .alert.alert-warning.d-flex.align-items-center.justify-content-center {
        width: 30% !important;
        margin-left: 358px !important;
    }
</style>



<style>

.modal-content {
  background: #fff;
  border-radius: 12px;
}

.modal-body {
  background: #f9fbfd;
}

.btn-primary {
  background-color: #007bff;
  border: none;
  font-weight: 500;
}


button#changeEmailBtn {
    margin-left: 0px !important;
}

button.close.text-dark.position-absolute {
    right: 25px !important;
    position: relative;
    z-index: 1030;
    top: 18px !important;
}

input#otp1,
input#otp2,
input#otp3,
input#otp4,
input#otp5,
input#otp6 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    font-size: 1.25rem;
    text-align: center; /* Center the input text */
    border-radius: 0.375rem; /* Optional: rounded corners */
    border: 1px solid #ccc; /* Optional: border style */
}
.verifyProfileImg {
    width: 96px;
    height: 96px;
    object-fit: cover;
    display: block;
    margin: 0 auto 16px;
    border: 1px solid #ddd;
}

</style>


<!-- Email Verification Modal -->
<div class="modal fade" id="changeEmailModal" tabindex="-1" aria-labelledby="changeEmailModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content p-3 rounded shadow-sm" style="max-width: 360px; margin: auto; position: relative;">

      <!-- Close Button -->
      <!-- <button type="button" class="close text-dark position-absolute" data-dismiss="modal" aria-label="Close" 
              style="right: 10px; top: 10px;">
        <span aria-hidden="true" style="font-size: 1.5rem;">&times;</span>
      </button> -->

      <div class="modal-body text-center p-4">

        <!-- Heading -->
        <h2 class="fw-bold mb-4" style="font-size: 18px;">Email Verification Required</h2>

        <!-- Profile Image -->
        <img src="{{ asset('dist/img/other.png') }}" alt="User" class="verifyProfileImg">

        <!-- User Name -->
        <h5 class="fw-bold mb-1">Hi {{ $user->name }} {{ $user->last_name }}</h5>

        <!-- Current Email -->
        <p class="mb-1 text-dark">
          Current email: <span class="text-danger">{{ $user->email }}</span>
        </p>

        <!-- Verification Status -->
        @if($user->email_verified_at)
          <p class="text-success mb-3">Email Verified</p>
        @else
          <p class="text-danger fw-bold mb-3">Email Not Verified</p>

          <!-- Verify Now Button -->
          <form id="emailVerificationForm" action="{{ route('send-otp') }}" method="POST">
            @csrf
            <input type="hidden" name="email" value="{{ $user->email }}">
            <input type="hidden" name="id" value="{{ $user->id }}">

            <div class="d-flex justify-content-center">
              <button type="submit" class="btn btn-primary btn-sm" id="verifyEmailBtn">
                <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                <span class="btn-text">Verify Now</span>
              </button>
            </div>
          </form>
        @endif

        <!-- Change Email Button -->
        @if (strpos(Auth::user()->email, 'spiritre.com') === false)
        <div class="text-center mt-3">
          <button class="btn btn-link text-dark" id="changeEmailBtn">
            <i class="fa fa-cog me-1"></i> Change Email Address
          </button>
        </div>
        @endif
      </div>
    </div>
  </div>
</div>





<!-- Change Email Modal Form -->
<div class="modal fade" id="changeEmailModalForm" tabindex="-1" role="dialog" aria-labelledby="changeEmailModalFormLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 360px;">
    <div class="modal-content custom-modal-content shadow-lg">

      <div class="modal-header bg-gradient-primary text-white py-2 px-3">
        <h5 class="modal-title fw-bold mb-0" id="changeEmailModalFormLabel" style="font-size: 1.1rem;">
          <i class="bi bi-envelope-at-fill me-2"></i> Change Email Address
           <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" style="font-size: 1.5rem;">
          <span aria-hidden="true">&times;</span>
        </button>
        </h5>
       
      </div>

      <div class="modal-body px-3 py-3">
        <form id="changeEmailForm" autocomplete="off">

          @csrf
          <input type="hidden" name="old_email" value="{{ $user->email }}">
          <input type="hidden" name="id" value="{{ $user->id }}">

          <!-- Current Email -->
          <div class="mb-2">
            <label for="email" class="form-label text-muted fw-semibold small">
              <i class="bi bi-envelope me-1"></i> Current Email Address
            </label>
            <input class="form-control form-control-sm custom-input"
                   value="{{ $user->email }}"
                   disabled
                   style="transition: transform 0.3s; cursor: pointer;"
                   onmouseover="this.style.transform='scale(1.05)'"
                   onmouseout="this.style.transform='scale(1)'">
          </div>

          <!-- New Email Input -->
          <div class="mb-3">
            <label for="new-email" class="form-label text-muted fw-semibold small">
              <i class="bi bi-pencil me-1"></i> Enter Your New Email Address
            </label>
            <input type="email" class="form-control form-control-sm custom-input" id="new-email" name="new_email" placeholder="you@example.com" required>
          </div>

          <!-- Submit Button -->
          <div class="d-flex justify-content-end mt-3">
            <button type="submit" class="btn btn-gradient-primary btn-sm shadow">
              <i class="bi bi-arrow-right-circle-fill me-1"></i> Submit Request
            </button>
          </div>
          
        </form>
      </div>

    </div>
  </div>
</div>




<!-- OTP Modal -->
<div class="modal fade" id="otpModal" tabindex="-1" aria-labelledby="otpModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width: 360px;">
    <div class="modal-content border-0 shadow-lg rounded-4 otp-modal">
      <div class="modal-header border-0 bg-gradient-primary text-white rounded-top py-2 px-3">
        <h5 class="modal-title fw-bold d-flex align-items-center justify-content-between w-100" id="otpModalLabel" style="font-size: 1.1rem;">
          <span><i class="bi bi-fingerprint me-2 fs-5"></i> Email Verification</span>
          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" style="font-size: 1.5rem; line-height: 1;">
            <span aria-hidden="true">&times;</span>
          </button>
        </h5>
      </div>

      <div class="modal-body text-center px-3 pt-3 pb-2">
        <div class="text-center mb-3">
          <i class="fa fa-paper-plane" style="font-size: 2.5rem; color: #0d6efd; transition: transform 0.3s; cursor: pointer;"
             onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"></i>
        </div>

        <p class="mb-3 text-muted" style="font-size: 0.9rem;">
          We’ve sent a verification code. To verify your email address, please check your inbox and enter the code below.
        </p>

        <label for="otp1" class="form-label text-muted fw-semibold small">Enter 6-Digit Code *</label>
        <div class="d-flex justify-content-center gap-2 mb-3">
          @for ($i = 1; $i <= 6; $i++)
            <input type="text" maxlength="1" class="form-control text-center otp-input rounded" id="otp{{ $i }}" style="width: 2.5rem; height: 2.5rem; font-size: 1.25rem;" oninput="moveFocus(this, 'otp{{ $i + 1 }}')">
          @endfor
        </div>

        <button type="button" class="btn btn-gradient-verify w-100 btn-sm" id="verifyOtpBtn" style="font-size: 0.9rem;">
          <i class="bi bi-shield-check-fill me-1"></i> Verify Code
        </button>

        <p class="mt-2 text-muted mb-1 small">
          Didn’t receive the code? <a href="#" id="resendOtpBtn" class="fw-semibold text-primary">Resend</a>
        </p>
      </div>
    </div>
  </div>
</div>

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

        let emailVerified = {{$user->email_verified_at ? 'true' : 'false'}};
       // handleModal(emailVerified);
        console.log("Email verified:", emailVerified);


        // function handleModal(emailVerified) {
        //     if (!emailVerified) {
        //         $('#changeEmailModal').modal({
        //             backdrop: 'static',
        //             keyboard: false
        //         });
        //         $('#changeEmailModal').modal('show');

        //     }

        // }

        // function handleModal(emailVerified) {
        //     if (emailVerified === "false") {
        //         $('#changeEmailModal').modal({
        //             backdrop: 'static',
        //             keyboard: false
        //         }).modal('show');
        //     }
        // }

        // Automatically show the email verification modal
        $('#changeEmailModal').modal('show');

        // If user clicks "Change Email", switch to the change modal
        // $('#changeEmailBtn').on('click', function() {
        //     $('#changeEmailModal').modal('hide');
        //     $('#changeEmailModalForm').modal('show');
        // });


        $('#changeEmailBtn').on('click', function () {

            if (emailVerified === false) {
                $('#changeEmailModal').modal('hide');
                $('#changeEmailModalForm').modal('show');
            }
            if (emailVerified === true) {
                $('#changeEmailModalForm').modal('show');
                //$('#changeEmailModal').modal('hide');
            }
        });


      

      


        $('#emailVerificationForm').on('submit', function(e) {
            e.preventDefault();
            $('#verifyEmailBtn .spinner-border').removeClass('d-none');
            $('#verifyEmailBtn .btn-text').text(' Sending OTP Verification To Your Email...');
            $('#verifyEmailBtn').prop('disabled', true);

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: $(this).serialize(),
                success: function(response) {
                    $('#changeEmailModal').modal('hide');
                    $('#otpModal').modal('show');

                    // Swal.fire({
                    //     icon: 'info',
                    //     title: 'OTP Sent!',
                    //     text: 'Please check your email and enter the OTP for verification.',
                    //     confirmButtonColor: '#3085d6'
                    // });

                    // // Reset button
                    // $('#verifyEmailBtn .spinner-border').addClass('d-none');
                    // $('#verifyEmailBtn .btn-text').html('<i class="fas fa-check-double mr-1"></i> Verify Now');
                    // $('#verifyEmailBtn').prop('disabled', false);
                },
                error: function(response) {
                    swal({
                        title: "Failed!",
                        text: "There was an issue sending the OTP. Please try again.",
                        type: "error",
                        confirmButtonColor: "#dc3545"
                    });

                    // Reset button
                    $('#verifyEmailBtn .spinner-border').addClass('d-none');
                    $('#verifyEmailBtn .btn-text').html('<i class="fa fa-check-double mr-1"></i> Verify Now');
                    $('#verifyEmailBtn').prop('disabled', false);
                }
            });
        });


        // Resend OTP Button Logic
        $('#resendOtpBtn').on('click', function() {
            $(this).prop('disabled', true).text('Resending OTP...');

            $.ajax({
                url: '{{ route('send-otp')}}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    email: '{{ $user->email }}',
                    id: '{{ $user->id }}',
                },
                success: function(response) {
                    alert('OTP has been resent!');
                    $('#resendOtpBtn').prop('disabled', false).text('Resend OTP');
                },
                error: function(response) {
                    alert('Error resending OTP.');
                    $('#resendOtpBtn').prop('disabled', false).text('Resend OTP');
                }
            });
        });

        // OTP Verification Logic
        // $('#verifyOtpBtn').on('click', function() {
        //     var otp = $('#otp1').val() + $('#otp2').val() + $('#otp3').val() +
        //         $('#otp4').val() + $('#otp5').val() + $('#otp6').val();

        //     if (otp.length !== 6 || !/^\d{6}$/.test(otp)) {
        //         Swal.fire({
        //             icon: 'error',
        //             title: 'Invalid OTP',
        //             text: 'Please enter a valid 6-digit OTP.'
        //         });
        //         return;
        //     }

        //     $.ajax({
        //         url: '{{ route('verify-otp')}}',
        //         type: 'POST',
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         },
        //         data: {
        //             otp: otp,
        //             email: '{{ $user->email }}',
        //             id: '{{ $user->id }}',
        //         },
        //         success: function(response) {

        //              $('#otpModal').modal('hide');



        //             Swal.fire({
        //                 icon: 'success',
        //                 title: 'Success!',
        //                 text: response.message || 'OTP verified successfully!',
        //                 confirmButtonColor: '#28a745'
        //             }).then(() => {
        //                 $('#otpModal').modal('hide');
        //                 window.location.href = '{{ route("home") }}';
        //             });
        //         },
        //         error: function(xhr) {
        //             Swal.fire({
        //                 icon: 'error',
        //                 title: 'Verification Failed',
        //                 text: xhr.responseJSON?.message || 'Invalid or expired OTP.'
        //             });
        //         }
        //     });
        // });





        $('#verifyOtpBtn').on('click', function () {
            // Combine all 6 OTP input values
            var otp = $('#otp1').val() + $('#otp2').val() + $('#otp3').val() +
                    $('#otp4').val() + $('#otp5').val() + $('#otp6').val();

            // Basic OTP validation
            if (otp.length !== 6 || !/^\d{6}$/.test(otp)) {
                // Swal.fire({
                //     icon: 'error',
                //     title: 'Invalid OTP',
                //     text: 'Please enter a valid 6-digit OTP.'
                // });
                swal({
                    title: "Invalid OTP",
                    text: "Please enter a valid 6-digit OTP.",
                    icon: "error",
                });
                return;
            }

            // Send AJAX request to verify OTP
            $.ajax({
                url: '{{ route('verify-otp') }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    otp: otp,
                    email: '{{ $user->email }}',
                    id: '{{ $user->id }}',
                },
                success: function (response) {
                    // First, hide the OTP modal
                    $('#otpModal').modal('hide');

                    // When modal is fully hidden, show the success alert
                    $('#otpModal').on('hidden.bs.modal', function () {
                        // Swal.fire({
                        //     icon: 'success',
                        //     title: 'Success!',
                        //     text: response.message || 'OTP verified successfully!',
                        //     confirmButtonColor: '#28a745'
                        // }).then(() => {
                        //     window.location.href = '{{ route("home") }}';
                        // });
                        swal({
                            title: "Success!",
                            text: response.message || "OTP verified successfully!",
                            type: "success",
                            confirmButtonColor: "#28a745"
                        }, function(isConfirm) {
                            if (isConfirm) {
                                window.location.href = '{{ route("home") }}';
                            }
                        });

                        // Unbind event to prevent duplicate triggers
                        $('#otpModal').off('hidden.bs.modal');
                    });
                },
                error: function (xhr) {
                    // Show error message and keep the modal open
                    // Swal.fire({
                    //     icon: 'error',
                    //     title: 'Verification Failed',
                    //     text: xhr.responseJSON?.message || 'Invalid or expired OTP.',
                    //     confirmButtonColor: '#dc3545'
                    // });
                    swal({
                        title: "Verification Failed!",
                        text:  xhr.responseJSON?.message || 'Invalid or expired OTP.',
                        icon: "error",
                        confirmButtonColor: "#dc3545"
                    });
                }
            });
        });


    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const inputs = document.querySelectorAll('.otp-input');

        inputs.forEach((input, index) => {
            // Auto move forward on digit input
            input.addEventListener('input', function() {
                this.value = this.value.replace(/\D/g, ''); // Allow only digits
                if (this.value && index < inputs.length - 1) {
                    inputs[index + 1].focus();
                }
            });

            // Auto move back on backspace
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Backspace' && this.value === '' && index > 0) {
                    inputs[index - 1].focus();
                }
            });

            // Handle paste
            input.addEventListener('paste', function(e) {
                const pasteData = (e.clipboardData || window.clipboardData).getData('text');
                if (/^\d{6}$/.test(pasteData)) {
                    e.preventDefault();
                    pasteData.split('').forEach((digit, i) => {
                        if (inputs[i]) {
                            inputs[i].value = digit;
                        }
                    });
                    inputs[5].focus(); // Move to last input
                }
            });
        });
    });
</script>


<script>
    $('#changeEmailForm').submit(function(e) {
        e.preventDefault();
        let user_email = "{{ $user->email }}";
        let new_email = $('#changeEmailForm input[name="new_email"]').val();

        if(user_email == new_email) {
            // Swal.fire({
            //     icon: 'warning',
            //     title: 'Warning',
            //     text: 'New email cannot be the same as the current email.',
            //     confirmButtonColor: '#3085d6',
            //     confirmButtonText: 'OK'
            // });
            swal({
                icon: 'warning',
                title: 'Warning',
                text: 'New email cannot be the same as the current email.',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK'
            });
            return;
        }
        // Show loader and change button text when submitting the request
        let submitButton = $('#changeEmailForm button[type="submit"]');
        submitButton.prop('disabled', true); // Disable the button to prevent multiple clicks
        submitButton.html('<i class="bi bi-arrow-right-circle-fill me-1"></i> Submitting request... <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'); // Add spinner and update text

        let formData = $(this).serialize();
        $('#ajaxLoader').fadeIn();

        $.ajax({
            url: "{{ route('email.change')}}",
            method: "POST",
            data: formData,
            success: function(response) {
                // Hide the form modal
                $('#changeEmailModal').modal('hide');
                $('#changeEmailModalForm').modal('hide');

                // Display success message
            //    Swal.fire({
            //     icon: 'info',
            //     title: 'Request Sent!',
            //     text: 'Admin needs to verify your email change request. Please check your mail for updates.',
            //     confirmButtonColor: '#3085d6',
            //     confirmButtonText: 'OK'
            // }).then(() => {
            //     window.location.href = '{{ route("home") }}';
            // });
            swal({
                icon: "info",
                title: "Request Sent!",
                text: "Admin needs to verify your email change request. Please check your mail for updates.",
                type: "success",
                confirmButtonColor: "#3085d6",
                confirmButtonText: "OK"
            }, function(isConfirm) {
                if (isConfirm) {
                    window.location.href = '{{ route("home") }}';
                }
            });

                // Reset button to its original state after success
                submitButton.prop('disabled', false);
                submitButton.html('<i class="bi bi-arrow-right-circle-fill me-1"></i> Submit Request');

                
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                let errorMsg = errors?.new_email ? errors.new_email[0] : 'Something went wrong.';

                // Show error message
                // Swal.fire({
                //     icon: 'error',
                //     title: 'Error',
                //     text: errorMsg
                // });
                swal({
                    icon: "error",
                    title: "Error",
                    text: errorMsg
                });

                // Reset button after error
                submitButton.prop('disabled', false);
                submitButton.html('<i class="bi bi-arrow-right-circle-fill me-1"></i> Submit Request');
            },
            complete: function() {
                $('#ajaxLoader').fadeOut(); // ✅ Always hide loader after request
            }
        });
    });

    $('#changeEmailModalForm').on('hidden.bs.modal', function () {
        @if(!$user->email_verified_at)
            $('#changeEmailModal').modal('show');
        @endif
    });
</script>



@endsection