@extends('User.layout')

@section('content')
    <style>
        .reset-password-page {
            padding-bottom: 30px;
        }

        .reset-page-header {
            margin-bottom: 28px;
        }

        .reset-page-header h4 {
            font-size: 23px;
            font-weight: 800;
            color: #d2e4d3;
            margin-bottom: 4px;
        }

        .password-card {
            width: 100%;
            max-width: 1050px;
            margin: 0 auto;
            background: #111913;
            border: 1px solid rgba(87, 191, 91, 0.20);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
        }

        /* LEFT SECURITY PANEL */

        .security-panel {
            height: 100%;
            min-height: 560px;
            padding: 42px 32px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;

            background:
                linear-gradient(145deg,
                    #102517,
                    #0b1710);

            border-right: 1px solid rgba(87, 191, 91, 0.15);
            position: relative;
            overflow: hidden;
        }

        .security-panel::before {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            top: -110px;
            left: -100px;

            background:
                radial-gradient(circle,
                    rgba(87, 191, 91, 0.15),
                    transparent 70%);
        }

        .security-panel::after {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            bottom: -90px;
            right: -80px;

            background:
                radial-gradient(circle,
                    rgba(30, 114, 50, 0.16),
                    transparent 70%);
        }

        .security-illustration {
            width: 230px;
            height: 230px;
            border-radius: 18px;

            background:
                linear-gradient(145deg,
                    #162d1b,
                    #0e1d13);

            border: 1px solid rgba(87, 191, 91, 0.12);

            display: flex;
            align-items: center;
            justify-content: center;

            position: relative;
            margin-bottom: 30px;
            z-index: 1;

            box-shadow:
                0 15px 35px rgba(0, 0, 0, 0.25);
        }

        /* LOCK */

        .lock-wrapper {
            position: relative;
            width: 125px;
            height: 145px;
        }

        .lock-body {
            position: absolute;
            left: 12px;
            bottom: 0;

            width: 101px;
            height: 88px;

            border-radius: 14px;

            background:
                linear-gradient(145deg,
                    #57bf5b,
                    #1e7232,
                    #0f3c1c);

            box-shadow:
                0 15px 28px rgba(30, 114, 50, 0.30);
        }

        .lock-body::after {
            content: "";
            position: absolute;

            left: 43px;
            top: 34px;

            width: 16px;
            height: 25px;

            border-radius: 10px;

            background: #071008;
        }

        .lock-body::before {
            content: "";
            position: absolute;

            left: 47px;
            top: 49px;

            width: 8px;
            height: 19px;

            background: #071008;

            border-radius: 0 0 5px 5px;
        }

        .lock-shackle {
            position: absolute;

            left: 34px;
            top: 5px;

            width: 58px;
            height: 65px;

            border: 13px solid #57bf5b;
            border-bottom: 0;

            border-radius: 35px 35px 0 0;
        }

        /* SHIELD */

        .shield {
            position: absolute;

            right: -4px;
            bottom: -7px;

            width: 58px;
            height: 68px;

            background:
                linear-gradient(145deg,
                    #d2f0d3,
                    #b9dfbc);

            clip-path:
                polygon(50% 0%,
                    91% 14%,
                    86% 62%,
                    50% 100%,
                    14% 62%,
                    9% 14%);

            filter:
                drop-shadow(0 7px 8px rgba(0, 0, 0, 0.25));

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .shield-inner {
            width: 45px;
            height: 53px;

            background:
                linear-gradient(145deg,
                    #57bf5b,
                    #1e7232,
                    #0f3c1c);

            clip-path:
                polygon(50% 0%,
                    91% 14%,
                    86% 62%,
                    50% 100%,
                    14% 62%,
                    9% 14%);

            display: flex;
            align-items: center;
            justify-content: center;

            color: #ffffff;
            font-size: 21px;
        }

        .security-title {
            position: relative;
            z-index: 2;

            color: #d2e4d3;
            font-size: 19px;
            font-weight: 800;

            margin-bottom: 10px;
        }

        .security-text {
            position: relative;
            z-index: 2;

            max-width: 250px;

            color: #91a895;
            font-size: 13px;
            line-height: 1.7;

            margin: 0;
        }

        /* RIGHT FORM */

        .password-form-panel {
            min-height: 560px;
            padding: 42px 42px 38px;
            background: #111913;
        }

        .password-form-header {
            display: flex;
            align-items: center;
            gap: 15px;

            padding-bottom: 22px;
            margin-bottom: 26px;

            border-bottom: 1px solid #294a30;
        }

        .password-key-icon {
            width: 43px;
            height: 43px;
            min-width: 43px;

            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            background: rgba(87, 191, 91, 0.12);
            color: #57bf5b;

            font-size: 20px;
        }

        .password-form-header h5 {
            margin: 0 0 4px;

            font-size: 17px;
            font-weight: 800;

            color: #d2e4d3;
        }

        .password-form-header p {
            margin: 0;

            font-size: 12px;
            color: #91a895;
        }

        /* FORM */

        .password-group {
            margin-bottom: 21px;
        }

        .password-label {
            display: block;

            margin-bottom: 8px;

            font-size: 13px;
            font-weight: 700;

            color: #d2e4d3;
        }

        .password-input-wrapper {
            position: relative;
        }

        .password-input {
            width: 100%;
            height: 48px;

            border-radius: 10px;

            border: 1px solid #294a30;

            background: #0b120d;

            padding: 0 45px 0 14px;

            font-size: 13px;

            color: #ffffff;

            outline: none;

            transition: all 0.2s ease;
        }

        .password-input::placeholder {
            color: #718a75;
        }

        .password-input:focus {
            border-color: #57bf5b;

            box-shadow:
                0 0 0 3px rgba(87, 191, 91, 0.12);
        }

        .password-input.is-invalid {
            border-color: #ff6262;
        }

        .password-toggle {
            position: absolute;

            right: 13px;
            top: 50%;

            transform: translateY(-50%);

            border: none;
            background: transparent;

            padding: 4px;

            color: #718a75;

            cursor: pointer;
            font-size: 15px;

            z-index: 2;
        }

        .password-toggle:hover {
            color: #57bf5b;
        }

        .invalid-feedback {
            font-size: 11px;
            margin-top: 5px;
            color: #ff6262;
        }

        /* PASSWORD INFO */

        .password-info {
            display: flex;
            align-items: flex-start;
            gap: 9px;

            padding: 12px 13px;

            margin-top: 3px;
            margin-bottom: 25px;

            border: 1px solid rgba(87, 191, 91, 0.30);

            border-radius: 8px;

            background: rgba(30, 114, 50, 0.08);

            color: #b9dfbc;

            font-size: 11px;
            line-height: 1.5;
        }

        .password-info i {
            font-size: 14px;
            margin-top: 1px;
            color: #57bf5b;
        }

        /* BUTTONS */

        .password-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            gap: 12px;
            margin-top: 5px;
        }

        .cancel-btn {
            min-width: 105px;
            height: 44px;

            border: 1px solid #294a30;
            border-radius: 8px;

            background: #17241a;
            color: #d2e4d3;

            font-size: 13px;
            font-weight: 700;

            text-decoration: none;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            transition: all 0.2s ease;
        }

        .cancel-btn:hover {
            background: #203323;
            color: #ffffff;
        }

        .reset-btn {
            min-width: 155px;
            height: 44px;

            border: none;
            border-radius: 8px;

            background:
                linear-gradient(135deg,
                    #57bf5b,
                    #1e7232);

            color: #070807;

            font-size: 13px;
            font-weight: 800;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            box-shadow:
                0 7px 18px rgba(30, 114, 50, 0.25);

            transition: all 0.2s ease;
        }

        .reset-btn:hover {
            color: #070807;

            transform: translateY(-1px);

            background:
                linear-gradient(135deg,
                    #8dd493,
                    #57bf5b);

            box-shadow:
                0 10px 22px rgba(30, 114, 50, 0.35);
        }

        .reset-btn:disabled {
            opacity: 0.7;
            transform: none;
            cursor: not-allowed;
        }

        /* TOAST */

        .reset-toast-container {
            position: fixed;

            top: 20px;
            right: 20px;

            z-index: 99999;

            width: auto;
            max-width: calc(100% - 40px);

            pointer-events: none;
        }

        .reset-toast {
            display: flex;
            align-items: center;
            gap: 13px;

            min-width: 300px;
            max-width: 390px;

            padding: 14px 16px;

            border-radius: 14px;

            background: #111913;

            border: 1px solid rgba(87, 191, 91, 0.20);

            box-shadow:
                0 18px 45px rgba(0, 0, 0, 0.40);

            color: #d2e4d3;

            opacity: 0;
            transform: translateX(120%);

            transition:
                opacity 0.35s ease,
                transform 0.35s ease;

            pointer-events: auto;

            position: relative;
            overflow: hidden;
        }

        .reset-toast.show {
            opacity: 1;
            transform: translateX(0);
        }

        .reset-toast::before {
            content: "";

            position: absolute;

            left: 0;
            top: 0;
            bottom: 0;

            width: 4px;

            background: #57bf5b;
        }

        .reset-toast.toast-error::before {
            background: #ff6262;
        }

        .reset-toast-icon {
            width: 38px;
            height: 38px;
            min-width: 38px;

            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            background: rgba(87, 191, 91, 0.12);

            color: #57bf5b;

            font-size: 18px;
        }

        .reset-toast.toast-error .reset-toast-icon {
            background: rgba(255, 98, 98, 0.10);
            color: #ff6262;
        }

        .reset-toast-content {
            flex: 1;
            min-width: 0;
        }

        .reset-toast-title {
            margin: 0 0 2px;

            font-size: 13px;
            font-weight: 800;

            color: #d2e4d3;
        }

        .reset-toast-message {
            margin: 0;

            font-size: 12px;
            line-height: 1.5;

            color: #91a895;

            word-break: break-word;
        }

        .reset-toast-close {
            width: 28px;
            height: 28px;
            min-width: 28px;

            border: none;

            background: transparent;

            color: #718a75;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            cursor: pointer;
        }

        .reset-toast-close:hover {
            background: rgba(87, 191, 91, 0.08);
            color: #57bf5b;
        }

        .reset-toast-progress {
            position: absolute;

            bottom: 0;
            left: 0;

            height: 3px;
            width: 100%;

            background: #57bf5b;

            transform-origin: left;
        }

        .reset-toast.toast-error .reset-toast-progress {
            background: #ff6262;
        }

        .reset-toast.show .reset-toast-progress {
            animation: resetToastProgress 4s linear forwards;
        }

        @keyframes resetToastProgress {
            from {
                transform: scaleX(1);
            }

            to {
                transform: scaleX(0);
            }
        }

        /* RESPONSIVE */

        @media (max-width: 991.98px) {

            .password-card {
                max-width: 760px;
            }

            .security-panel {
                min-height: 420px;
                padding: 35px 25px;
            }

            .security-illustration {
                width: 190px;
                height: 190px;
                margin-bottom: 20px;
            }

            .password-form-panel {
                padding: 35px 30px;
            }
        }

        @media (max-width: 767.98px) {

            .reset-page-header {
                margin-bottom: 20px;
            }

            .reset-page-header h4 {
                font-size: 20px;
            }

            .security-panel {
                min-height: auto;

                padding: 30px 20px;

                border-right: none;

                border-bottom:
                    1px solid rgba(87, 191, 91, 0.15);
            }

            .security-illustration {
                width: 180px;
                height: 180px;
            }

            .security-title {
                font-size: 17px;
            }

            .security-text {
                font-size: 12px;
            }

            .password-form-panel {
                min-height: auto;
                padding: 30px 22px;
            }

            .password-form-header {
                padding-bottom: 18px;
                margin-bottom: 22px;
            }

            .password-actions {
                flex-direction: column-reverse;
                align-items: stretch;
            }

            .cancel-btn,
            .reset-btn {
                width: 100%;
            }

            .reset-toast-container {
                top: 12px;
                left: 12px;
                right: 12px;
                max-width: none;
            }

            .reset-toast {
                width: 100%;
                min-width: 0;
                max-width: none;
            }
        }

        @media (max-width: 400px) {

            .password-form-panel {
                padding: 25px 16px;
            }

            .security-panel {
                padding: 25px 16px;
            }

            .password-form-header h5 {
                font-size: 15px;
            }

            .password-form-header p {
                font-size: 11px;
            }
        }
    </style>


    <div class="container-fluid reset-password-page">

        <div class="reset-page-header">

            <h4>
                Reset Password
            </h4>

        </div>


        <div class="password-card">

            <div class="row g-0">

                <!-- LEFT SECURITY PANEL -->

                <div class="col-lg-5">

                    <div class="security-panel">

                        <div class="security-illustration">

                            <div class="lock-wrapper">

                                <div class="lock-shackle"></div>

                                <div class="lock-body"></div>

                                <div class="shield">

                                    <div class="shield-inner">

                                        <i class="bi bi-check-lg"></i>

                                    </div>

                                </div>

                            </div>

                        </div>


                        <h3 class="security-title">
                            Keep Your Account Secure
                        </h3>

                        <p class="security-text">
                            Use a strong password that you
                            don't use on other websites.
                        </p>

                    </div>

                </div>


                <!-- RIGHT FORM PANEL -->

                <div class="col-lg-7">

                    <div class="password-form-panel">

                        <div class="password-form-header">

                            <div class="password-key-icon">

                                <i class="ti ti-key"></i>
                            </div>

                            <div>

                                <h5>
                                    Change Password
                                </h5>

                                <p>
                                    Please enter your current password
                                    and choose a new one.
                                </p>

                            </div>

                        </div>


                        <form action="{{ route('user.reset_password_form') }}" method="POST" id="SubmitForm">
                            @csrf


                            <!-- OLD PASSWORD -->
                            <div class="password-group">
                                <label for="oldpass" class="password-label">
                                    Old Password
                                </label>

                                <div class="password-input-wrapper">
                                    <input type="password" name="oldpass" id="oldpass"
                                        class="password-input @error('oldpass') is-invalid @enderror"
                                        placeholder="Enter your old password" autocomplete="current-password">

                                    <button type="button" class="password-toggle" onclick="togglePassword('oldpass', this)"
                                        aria-label="Show password">

                                        <i class="ti ti-eye-off"></i>
                                    </button>
                                </div>

                                @error('oldpass')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>


                            <!-- NEW PASSWORD -->
                            <div class="password-group">
                                <label for="newpass" class="password-label">
                                    New Password
                                </label>

                                <div class="password-input-wrapper">
                                    <input type="password" name="newpass" id="newpass"
                                        class="password-input @error('newpass') is-invalid @enderror"
                                        placeholder="Enter your new password" autocomplete="new-password">

                                    <button type="button" class="password-toggle" onclick="togglePassword('newpass', this)"
                                        aria-label="Show password">

                                        <i class="ti ti-eye-off"></i>
                                    </button>
                                </div>

                                @error('newpass')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>


                            <!-- CONFIRM PASSWORD -->
                            <div class="password-group">
                                <label for="conpass" class="password-label">
                                    Confirm New Password
                                </label>

                                <div class="password-input-wrapper">
                                    <input type="password" name="conpass" id="conpass"
                                        class="password-input @error('conpass') is-invalid @enderror"
                                        placeholder="Confirm your new password" autocomplete="new-password">

                                    <button type="button" class="password-toggle" onclick="togglePassword('conpass', this)"
                                        aria-label="Show password">

                                        <i class="ti ti-eye-off"></i>
                                    </button>
                                </div>

                                @error('conpass')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>


                            <!-- PASSWORD INFO -->
                            <div class="password-info">
                                <i class="ti ti-info-circle"></i>

                                <span>
                                    Password should be at least 8 characters long
                                    and include a combination of letters,
                                    numbers and symbols.
                                </span>
                            </div>


                            <!-- ACTIONS -->
                            <div class="password-actions">

                                <a href="{{ route('user.dashboard') }}" class="cancel-btn">
                                    Cancel
                                </a>

                                <button type="submit" id="submit_btn" class="reset-btn">
                                    <i class="ti ti-check-circle me-2"></i>
                                    Reset Password
                                </button>

                            </div>


                        </form>


                    </div>

                </div>

            </div>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>

    <script>
        function togglePassword(inputId, button) {

            const input = document.getElementById(inputId);
            const icon = button.querySelector('i');

            if (!input || !icon) {
                return;
            }

            if (input.type === 'password') {

                input.type = 'text';

                icon.classList.remove('ti-eye-off');
                icon.classList.add('ti-eye');

                button.setAttribute('aria-label', 'Hide password');

            } else {

                input.type = 'password';

                icon.classList.remove('ti-eye');
                icon.classList.add('ti-eye-off');

                button.setAttribute('aria-label', 'Show password');
            }
        }


        $(document).ready(function() {

            // IMPORTANT: Handle button click
            $('#submit_btn').on('click', function(e) {

                e.preventDefault();

                $('#SubmitForm').trigger('submit');

            });


            $('#SubmitForm').on('submit', function(e) {

                e.preventDefault();

                const form = $(this);
                const submitButton = $('#submit_btn');

                $('.password-input').removeClass('is-invalid');
                $('.ajax-error').remove();

                const oldPassword = $('#oldpass').val().trim();
                const newPassword = $('#newpass').val().trim();
                const confirmPassword = $('#conpass').val().trim();


                // Validation

                if (!oldPassword) {

                    showFieldError(
                        '#oldpass',
                        'Please enter your old password.'
                    );

                    return;
                }


                if (!newPassword) {

                    showFieldError(
                        '#newpass',
                        'Please enter your new password.'
                    );

                    return;
                }


                if (newPassword.length < 8) {

                    showFieldError(
                        '#newpass',
                        'New password must be at least 8 characters.'
                    );

                    return;
                }


                if (!confirmPassword) {

                    showFieldError(
                        '#conpass',
                        'Please confirm your new password.'
                    );

                    return;
                }


                if (newPassword !== confirmPassword) {

                    showFieldError(
                        '#conpass',
                        'New password and confirm password do not match.'
                    );

                    return;
                }


                // Disable button

                submitButton.prop('disabled', true);

                submitButton.html(
                    '<span class="spinner-border spinner-border-sm me-2"></span>' +
                    'Processing...'
                );


                $.ajax({

                    url: form.attr('action'),

                    type: 'POST',

                    data: form.serialize(),

                    dataType: 'json',

                    success: function(response) {

                        console.log('Reset password response:', response);


                        if (response.status) {

                            $('#oldpass').val('');
                            $('#newpass').val('');
                            $('#conpass').val('');


                            // SHOW YOUR EXISTING TOAST
                            showCustomToast(
                                response.message,
                                'success'
                            );


                            setTimeout(function() {

                                window.location.href =
                                    "{{ route('user.login') }}";

                            }, 1500);


                        } else {

                            if (response.field) {

                                showFieldError(
                                    '#' + response.field,
                                    response.message
                                );

                            } else {

                                showCustomToast(
                                    response.message ||
                                    'Unable to reset password.',
                                    'error'
                                );
                            }
                        }
                    },


                    error: function(xhr) {

                        console.log('Reset password error:', xhr);

                        const response = xhr.responseJSON || {};


                        if (xhr.status === 422) {

                            // Laravel validation errors
                            if (response.errors) {

                                $.each(
                                    response.errors,
                                    function(field, messages) {

                                        showFieldError(
                                            '#' + field,
                                            messages[0]
                                        );

                                    }
                                );

                            }

                            // Single field error
                            else if (response.field) {

                                showFieldError(
                                    '#' + response.field,
                                    response.message
                                );

                            } else {

                                showCustomToast(
                                    response.message ||
                                    'Please check the entered details.',
                                    'error'
                                );
                            }

                        } else if (xhr.status === 401) {

                            showCustomToast(
                                response.message ||
                                'Your session has expired. Please login again.',
                                'error'
                            );

                        } else {

                            showCustomToast(
                                response.message ||
                                'Something went wrong. Please try again.',
                                'error'
                            );
                        }
                    },


                    complete: function() {

                        submitButton.prop('disabled', false);

                        submitButton.html(
                            '<i class="ti ti-check-circle me-2"></i>' +
                            'Reset Password'
                        );
                    }

                });

            });


            // Remove validation error when typing

            $('.password-input').on('input', function() {

                $(this).removeClass('is-invalid');

                $(this)
                    .closest('.password-input-wrapper')
                    .next('.ajax-error')
                    .remove();

            });

        });


        function showFieldError(selector, message) {

            const input = $(selector);

            input.addClass('is-invalid');

            input
                .closest('.password-input-wrapper')
                .next('.ajax-error')
                .remove();

            input
                .closest('.password-input-wrapper')
                .after(
                    '<div class="invalid-feedback d-block ajax-error">' +
                    message +
                    '</div>'
                );

            input.focus();
        }
    </script>
@endsection