@section('metaTitle', 'Log in to your account - Punjabi Mandi')
@section('body_id', 'login-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-social-stack {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 22px;
    }
    .pm-btn-social-full {
        width: 100%;
        height: 48px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        user-select: none;
        text-decoration: none !important;
    }
    .pm-btn-google-full {
        background: #4285F4;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(66, 133, 244, 0.25);
    }
    .pm-btn-google-full:hover {
        background: #3367d6;
        box-shadow: 0 4px 14px rgba(66, 133, 244, 0.35);
        transform: translateY(-1px);
        color: #ffffff !important;
    }
    .pm-btn-google-full svg {
        flex-shrink: 0 !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        display: inline-block !important;
    }
    .pm-divider-line {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 22px 0 24px 0;
        color: #64748b;
        font-size: 13px;
        font-weight: 500;
    }
    .pm-divider-line::before,
    .pm-divider-line::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e2e8f0;
    }
    .pm-divider-line span {
        padding: 0 14px;
    }
    .pm-form-group {
        margin-bottom: 18px;
    }
    .pm-label {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 8px;
        display: block;
    }
    .pm-input {
        width: 100%;
        height: 48px;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        padding: 10px 16px;
        font-size: 14px;
        color: #1e293b;
        outline: none;
        background-color: #ffffff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        box-sizing: border-box;
    }
    .pm-input:focus {
        border-color: var(--primary-color, #0e311a);
        box-shadow: 0 0 0 3px rgba(14, 49, 26, 0.1);
    }
    .pm-input.is-invalid {
        border-color: #dc3545 !important;
    }
    .pm-input-eye-group {
        display: flex;
        align-items: center;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        overflow: hidden;
        background: #ffffff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        box-sizing: border-box;
    }
    .pm-input-eye-group:focus-within {
        border-color: var(--primary-color, #0e311a);
        box-shadow: 0 0 0 3px rgba(14, 49, 26, 0.1);
    }
    .pm-input-eye-group.is-invalid {
        border-color: #dc3545 !important;
    }
    .pm-input-eye-group .pm-input {
        border: none !important;
        box-shadow: none !important;
        flex: 1;
        height: 46px;
        border-radius: 0;
        padding: 10px 16px;
    }
    .pm-btn-eye {
        background: var(--primary-color, #0e311a);
        color: #ffffff;
        border: none;
        width: 52px;
        height: 46px;
        min-width: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease;
        padding: 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-forgot-wrapper {
        text-align: right;
        margin-top: 6px;
        margin-bottom: 22px;
    }
    .pm-link-forgot {
        font-size: 13.5px;
        color: #64748b;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .pm-link-forgot:hover {
        color: var(--primary-color, #0e311a);
        text-decoration: underline;
    }
    .pm-submit-group {
        margin-top: 24px;
    }
    .pm-btn-create-account {
        width: 100%;
        height: 50px;
        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;
        font-family: var(--title-font-family, Quicksand), 'Quicksand', sans-serif;
    }
    .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;
        transform: none;
        box-shadow: none;
    }
    .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;
        transition: color 0.2s ease;
    }
    .pm-login-bottom-text a:hover {
        color: var(--primary-color, #0e311a);
        text-decoration: underline;
    }
    .error-text {
        font-size: 13px;
        display: block;
        margin-top: 5px;
        color: #dc3545;
    }
    .pm-alert-banner {
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 13.5px;
        line-height: 1.5;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .pm-alert-banner-danger {
        background-color: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
    }
    .pm-alert-banner-success {
        background-color: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #065f46;
    }
    .pm-alert-banner-info {
        background-color: #eff6ff;
        border: 1px solid #bfdbfe;
        color: #1e40af;
    }
    .pm-alert-banner svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        flex-shrink: 0 !important;
    }
    @media (max-width: 576px) {
        .pm-registration-section {
            padding: 25px 0 50px 0 !important;
        }
        .pm-register-card-box {
            padding: 26px 20px;
            border-width: 4px;
        }
        .pm-register-card-title {
            font-size: 22px;
            margin-bottom: 20px;
        }
        .pm-btn-create-account {
            height: 46px;
            font-size: 15px;
        }
    }
</style>
@endpush

<x-app-layout>
    <div class="container">
        <div class="pm-register-card-box">
            <!-- Title -->
            <h1 class="pm-register-card-title">Log in to your account</h1>

            <!-- Social Buttons (Google Only) -->
            <div class="pm-social-stack">
                <a href="{{ route('google.redirect') }}" class="pm-btn-social-full pm-btn-google-full" style="text-decoration: none;">
                    <svg width="20" height="20" viewBox="0 0 24 24">
                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z"/>
                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/>
                    </svg>
                    <span>Continue With Google</span>
                </a>
            </div>

            <!-- Divider -->
            <div class="pm-divider-line">
                <span>or log in with email</span>
            </div>

            <!-- Flash Session Alerts -->
            @if (session('danger') || 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('danger') ?? session('error') }}</div>
                </div>
            @endif

            @if (session('verify') || session('success'))
                <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('verify') ?? session('success') }}</div>
                </div>
            @endif

            @if (session('message'))
                <div class="pm-alert-banner pm-alert-banner-info">
                    <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="12" y1="16" x2="12" y2="12"/>
                        <line x1="12" y1="8" x2="12.01" y2="8"/>
                    </svg>
                    <div>{{ session('message') }}</div>
                </div>
            @endif

            <!-- Dynamic Alert (AJAX) -->
            <div id="login-dynamic-alert" style="display: none;"></div>

            <!-- Login Form -->
            <form id="pm-login-form" action="{{ route('customer.login') }}" method="POST" novalidate>
                @csrf

                <!-- Email Address -->
                <div class="pm-form-group">
                    <label class="pm-label" for="login-email">Email Address</label>
                    <input type="email" id="login-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">
                        @error('email') {{ $message }} @enderror
                    </span>
                </div>

                <!-- Password -->
                <div class="pm-form-group" style="margin-bottom: 8px;">
                    <label class="pm-label" for="login-pass">Password</label>
                    <div class="pm-input-eye-group @error('password') is-invalid @enderror" id="group-login-pass">
                        <input type="password" id="login-pass" name="password" class="pm-input" placeholder="••••••••" required>
                        <button type="button" class="pm-btn-eye js-toggle-pass" data-target="login-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">
                        @error('password') {{ $message }} @enderror
                    </span>
                </div>

                <!-- Forgot Password Link -->
                <div class="pm-forgot-wrapper">
                    <a href="{{ route('customer.forget.password') }}" class="pm-link-forgot">Forgot your password?</a>
                </div>

                <!-- Sign In Button -->
                <div class="pm-submit-group">
                    <button type="submit" id="btn-login-submit" class="pm-btn-create-account">
                        <span class="spinner-border spinner-border-sm d-none me-2" role="status" aria-hidden="true" style="margin-right: 8px;"></span>
                        <span class="btn-text">Sign In</span>
                    </button>
                </div>

                <!-- Bottom Link to Registration -->
                <div class="pm-login-bottom-text">
                    No account? <a href="{{ route('customer.register') }}">Create one here</a>
                </div>
            </form>

        </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() {
            // Password Eye Toggle
            $(document).on('click', '.js-toggle-pass', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var targetId = $(this).data('target');
                togglePassVisibility(targetId, this);
            });

            // AJAX Login Form Submission
            var $form = $('#pm-login-form');
            var $btn = $('#btn-login-submit');
            var $spinner = $btn.find('.spinner-border');
            var $btnText = $btn.find('.btn-text');
            var $dynamicAlert = $('#login-dynamic-alert');

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

            function showBanner(type, message) {
                var alertClass = 'pm-alert-banner-danger';
                var iconSvg = '<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>';
                
                if (type === 'success') {
                    alertClass = 'pm-alert-banner-success';
                    iconSvg = '<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>';
                }

                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);
                $spinner.removeClass('d-none');
                $btnText.text('Signing in...');

                $.ajax({
                    url: $form.attr('action'),
                    method: 'POST',
                    data: $form.serialize(),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.status === 'success') {
                            if (typeof toastr !== 'undefined') {
                                toastr.success(response.message || 'Login successful!');
                            }
                            window.location.href = response.redirect || "{{ route('customer.profile') }}";
                        } else {
                            $btn.prop('disabled', false);
                            $spinner.addClass('d-none');
                            $btnText.text('Sign In');

                            if (response.redirect) {
                                window.location.href = response.redirect;
                            }
                        }
                    },
                    error: function(xhr) {
                        $btn.prop('disabled', false);
                        $spinner.addClass('d-none');
                        $btnText.text('Sign In');

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

                            if (errors) {
                                $.each(errors, function(field, messages) {
                                    var msg = messages[0];
                                    if (!firstErrorMessage) {
                                        firstErrorMessage = msg;
                                    }

                                    $('#error-' + field).text(msg);
                                    $('#login-' + field).addClass('is-invalid');
                                    if (field === 'password') {
                                        $('#group-login-pass').addClass('is-invalid');
                                    }
                                });
                            }

                            if (!firstErrorMessage && xhr.responseJSON.message) {
                                firstErrorMessage = xhr.responseJSON.message;
                                showBanner('danger', firstErrorMessage);
                            }

                            if (firstErrorMessage && typeof toastr !== 'undefined') {
                                toastr.error(firstErrorMessage);
                            }
                        } else {
                            var generalMsg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Invalid credentials. Please try again.';
                            showBanner('danger', generalMsg);
                            if (typeof toastr !== 'undefined') {
                                toastr.error(generalMsg);
                            }
                        }
                    }
                });
            });
        });
    </script>
    @endpush
</x-app-layout>