@section('metaTitle', 'Reset Your Password - Punjabi Mandi')
@section('body_id', 'reset-password-page-body')
@section('body_class', 'lang-en country-us currency-usd layout-full-width page-authentication')

@section('theme_css')
    <link rel="stylesheet" href="{{ asset('newui/assets/css/theme-0f35d543.css') }}" type="text/css" media="all">
@endsection

@section('theme_bottom_js')
    <script type="text/javascript" src="{{ asset('newui/assets/js/bottom-282dcc42.js') }}"></script>
@endsection

@section('wrapper_class', 'pm-registration-section')

@push('styles')
    <style>
        .pm-registration-section {
            padding: 45px 0 75px 0 !important;
            background-color: #f8fafc;
            min-height: calc(100vh - 400px);
        }

        .pm-register-card-box {
            max-width: 520px;
            width: 100%;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 16px;
            border: 5px solid #d4af6a;
            padding: 40px 36px;
            box-shadow: 0 4px 25px rgba(14, 49, 26, 0.05);
            box-sizing: border-box;
        }

        .pm-register-card-title {
            font-family: var(--title-font-family, Quicksand), 'Quicksand', sans-serif;
            font-size: 26px;
            font-weight: 700;
            color: #1e293b;
            text-align: center;
            margin-top: 0;
            margin-bottom: 24px;
        }

        .pm-register-card-desc {
            font-size: 14px;
            color: #64748b;
            text-align: center;
            margin-top: -12px;
            margin-bottom: 26px;
            line-height: 1.5;
        }

        .pm-form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .pm-label {
            font-size: 14px;
            font-weight: 600;
            color: #334155;
            margin-bottom: 8px;
            display: block;
        }

        .pm-input {
            width: 100%;
            height: 46px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 10px 16px;
            font-size: 14px;
            color: #1e293b;
            background: #ffffff;
            transition: all 0.2s ease;
            box-sizing: border-box;
        }

        .pm-input:focus {
            outline: none;
            border-color: var(--primary-color, #0e311a);
            box-shadow: 0 0 0 3px rgba(14, 49, 26, 0.12);
        }

        .pm-input.is-invalid {
            border-color: #ef4444 !important;
            background-color: #fffafb;
        }

        /* Eye Input Group */
        .pm-input-eye-group {
            display: flex;
            align-items: stretch;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #cbd5e1;
            background: #ffffff;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .pm-input-eye-group:focus-within {
            border-color: var(--primary-color, #0e311a);
            box-shadow: 0 0 0 3px rgba(14, 49, 26, 0.12);
        }

        .pm-input-eye-group.is-invalid {
            border-color: #ef4444 !important;
            background-color: #fffafb;
        }

        .pm-input-eye-group .pm-input {
            flex: 1;
            border: none;
            outline: none;
            border-radius: 0;
            padding: 10px 16px;
            height: 46px;
            font-size: 14px;
            color: #1e293b;
            background: transparent;
            box-sizing: border-box;
        }

        .pm-btn-eye {
            background: var(--primary-color, #0e311a);
            color: #ffffff;
            border: none;
            width: 52px;
            height: 46px;
            transition: background 0.2s ease;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }

        .pm-btn-eye:hover {
            background: #18522d;
        }

        .pm-btn-eye i.material-icons {
            font-size: 20px;
            line-height: 1;
            color: #ffffff;
            display: inline-block;
        }

        .pm-submit-group {
            margin-top: 24px;
        }

        .pm-btn-create-account {
            width: 100%;
            height: 48px;
            background: var(--primary-color, #0e311a);
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(14, 49, 26, 0.25);
            transition: all 0.25s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        .pm-btn-create-account:hover:not(:disabled) {
            background: #18522d;
            box-shadow: 0 8px 22px rgba(14, 49, 26, 0.35);
            transform: translateY(-2px);
        }

        .pm-btn-create-account:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .pm-login-bottom-text {
            font-size: 14px;
            color: #64748b;
            text-align: center;
            margin-top: 24px;
        }

        .pm-login-bottom-text a {
            color: #1e293b;
            font-weight: 700;
            text-decoration: none;
        }

        .pm-login-bottom-text a:hover {
            color: var(--primary-color, #0e311a);
            text-decoration: underline;
        }

        .error-text {
            font-size: 13px;
            margin-top: 4px;
            display: none;
            color: #ef4444;
        }

        .pm-alert-banner {
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .pm-alert-banner-danger {
            background-color: #fef2f2;
            border: 1px solid #fecaca;
            color: #b91c1c;
        }

        .pm-alert-banner-success {
            background-color: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #15803d;
        }

        .pm-alert-banner svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        @media (max-width: 576px) {
            .pm-register-card-box {
                padding: 28px 20px;
                border-width: 4px;
            }

            .pm-register-card-title {
                font-size: 22px;
            }
        }
    </style>
@endpush

<x-app-layout>
    <div class="pm-registration-section">
        <div class="container">
            <div class="pm-register-card-box">
                <!-- Title -->
                <h1 class="pm-register-card-title">Reset your password</h1>

                <!-- Description Subtext -->
                <p class="pm-register-card-desc">
                    Enter your new password below to update your account credentials.
                </p>

                <!-- Dynamic Alert Container -->
                <div id="reset-dynamic-alert" style="display: none;"></div>

                @if (session('message'))
                    <div class="pm-alert-banner pm-alert-banner-success">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                            <polyline points="22 4 12 14.01 9 11.01" />
                        </svg>
                        <div>{{ session('message') }}</div>
                    </div>
                @endif

                @if (session('error'))
                    <div class="pm-alert-banner pm-alert-banner-danger">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10" />
                            <line x1="15" y1="9" x2="9" y2="15" />
                            <line x1="9" y1="9" x2="15" y2="15" />
                        </svg>
                        <div>{{ session('error') }}</div>
                    </div>
                @endif

                <!-- Reset Password Form -->
                <form id="pm-reset-form" action="{{ route('customer.password.reset') }}" method="POST">
                    @csrf
                    <input type="hidden" name="reset_token" value="{{ $token }}">

                    @if (empty(request()->query('email')))
                        <div class="pm-form-group">
                            <label class="pm-label" for="reset-email">Email Address</label>
                            <input type="email" id="reset-email" name="email"
                                class="pm-input @error('email') is-invalid @enderror" placeholder="john.doe@example.com"
                                value="{{ old('email') }}" required>
                            <span class="text-danger error-text" id="error-email"
                                style="{{ $errors->has('email') ? 'display:block;' : '' }}">
                                @error('email') {{ $message }} @enderror
                            </span>
                        </div>
                    @else
                        <input type="hidden" name="email" value="{{ old('email', request()->query('email')) }}">
                    @endif

                    <!-- New Password -->
                    <div class="pm-form-group">
                        <label class="pm-label" for="reset-pass">New Password</label>
                        <div class="pm-input-eye-group @error('password') is-invalid @enderror" id="group-reset-pass">
                            <input type="password" id="reset-pass" name="password" class="pm-input"
                                placeholder="••••••••" minlength="6">
                            <button type="button" class="pm-btn-eye js-toggle-pass" data-target="reset-pass"
                                title="Show/Hide Password" aria-label="Toggle password visibility">
                                <i class="material-icons">&#xE8F5;</i>
                            </button>
                        </div>
                        <span class="text-danger error-text" id="error-password"
                            style="{{ $errors->has('password') ? 'display:block;' : '' }}">
                            @error('password') {{ $message }} @enderror
                        </span>
                    </div>

                    <!-- Confirm New Password -->
                    <div class="pm-form-group">
                        <label class="pm-label" for="reset-pass-confirm">Confirm New Password</label>
                        <div class="pm-input-eye-group @error('password_conf') is-invalid @enderror"
                            id="group-reset-pass-confirm">
                            <input type="password" id="reset-pass-confirm" name="password_conf" class="pm-input"
                                placeholder="••••••••" minlength="6">
                            <button type="button" class="pm-btn-eye js-toggle-pass" data-target="reset-pass-confirm"
                                title="Show/Hide Password" aria-label="Toggle password visibility">
                                <i class="material-icons">&#xE8F5;</i>
                            </button>
                        </div>
                        <span class="text-danger error-text" id="error-password_conf"
                            style="{{ $errors->has('password_conf') ? 'display:block;' : '' }}">
                            @error('password_conf') {{ $message }} @enderror
                        </span>
                    </div>

                    <!-- Submit Button -->
                    <div class="pm-submit-group">
                        <button type="submit" id="btn-reset-submit" class="pm-btn-create-account">
                            <span class="btn-text">Reset Password</span>
                        </button>
                    </div>

                    <!-- Bottom Link to Login -->
                    <div class="pm-login-bottom-text" style="margin-top: 24px;">
                        Remember your password? <a href="{{ route('customer.login') }}">Log in here</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function togglePassVisibility(inputId, btnElem) {
            var input = document.getElementById(inputId);
            var icon = btnElem ? btnElem.querySelector('.material-icons') : null;
            if (!input) return;

            if (input.type === 'password') {
                input.type = 'text';
                if (icon) icon.innerHTML = '&#xE8F4;';
            } else {
                input.type = 'password';
                if (icon) icon.innerHTML = '&#xE8F5;';
            }
        }
        window.togglePassVisibility = togglePassVisibility;
    </script>

    @push('scripts')
        <script>
            $(document).ready(function () {
                // Delegated click handler for password visibility toggle
                $(document).on('click', '.js-toggle-pass', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    var targetId = $(this).data('target');
                    togglePassVisibility(targetId, this);
                });

                var $form = $('#pm-reset-form');
                var $btn = $('#btn-reset-submit');
                var $btnText = $btn.find('.btn-text');
                var $dynamicAlert = $('#reset-dynamic-alert');

                function clearErrors() {
                    $('.error-text').hide().text('');
                    $('.pm-input').removeClass('is-invalid');
                    $('.pm-input-eye-group').removeClass('is-invalid');
                    $dynamicAlert.hide().empty();
                }

                function showAlert(type, message) {
                    var alertClass = (type === 'success') ? 'pm-alert-banner-success' : 'pm-alert-banner-danger';
                    var iconSvg = (type === 'success')
                        ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>'
                        : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';

                    var html = '<div class="pm-alert-banner ' + alertClass + '">' +
                        iconSvg +
                        '<div>' + message + '</div>' +
                        '</div>';

                    $dynamicAlert.html(html).slideDown(200);
                }

                $form.on('submit', function (e) {
                    e.preventDefault();

                    if ($btn.prop('disabled')) {
                        return;
                    }

                    clearErrors();
                    $btn.prop('disabled', true);
                    $btnText.text('Resetting Password...');

                    $.ajax({
                        url: $form.attr('action'),
                        type: 'POST',
                        data: $form.serialize(),
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },
                        success: function (response) {
                            var successMsg = response.message || 'Password reset successfully. Redirecting to login...';
                            showAlert('success', successMsg);

                            if (typeof toastr !== 'undefined') {
                                toastr.success(successMsg);
                            }

                            setTimeout(function () {
                                window.location.href = response.redirect || "{{ route('customer.login') }}";
                            }, 1000);
                        },
                        error: function (xhr) {
                            $btn.prop('disabled', false);
                            $btnText.text('Reset Password');

                            if (xhr.status === 422) {
                                var errors = xhr.responseJSON.errors;
                                var firstError = null;

                                if (errors) {
                                    $.each(errors, function (field, messages) {
                                        if (!firstError && messages.length > 0) {
                                            firstError = messages[0];
                                        }
                                        $('#error-' + field).text(messages[0]).show();
                                        $('#reset-' + field).addClass('is-invalid');
                                        $('#group-reset-' + field).addClass('is-invalid');

                                        if (field === 'password_conf') {
                                            $('#group-reset-pass-confirm').addClass('is-invalid');
                                        }
                                        if (field === 'password') {
                                            $('#group-reset-pass').addClass('is-invalid');
                                        }
                                    });
                                }

                                if (!firstError && xhr.responseJSON && xhr.responseJSON.message) {
                                    firstError = xhr.responseJSON.message;
                                }

                                if (firstError) {
                                    showAlert('danger', firstError);
                                    if (typeof toastr !== 'undefined') {
                                        toastr.error(firstError);
                                    }
                                }
                            } else {
                                var generalMsg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Unable to reset password. Please try again.';
                                showAlert('danger', generalMsg);
                                if (typeof toastr !== 'undefined') {
                                    toastr.error(generalMsg);
                                }
                            }
                        }
                    });
                });
            });
        </script>
    @endpush
</x-app-layout>