@section('metaTitle', 'Create your account - Punjabi Mandi')
@section('body_id', 'registration-page-body')
@section('body_class', 'layout-full-width page-registration')

@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), 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;
    }
    .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-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
        margin-bottom: 16px !important;
        clear: both !important;
    }
    .pm-form-col-6 {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 200px !important;
        box-sizing: border-box !important;
    }
    .pm-form-group {
        margin-bottom: 16px;
    }
    .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 {
        font-size: 20px;
        line-height: 1;
    }
    .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;
    }
    .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-terms-text {
        font-size: 13px;
        color: #64748b;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 22px;
        line-height: 1.5;
    }
    .pm-terms-text a {
        color: #1e293b;
        font-weight: 700;
        text-decoration: none;
    }
    .pm-terms-text a:hover {
        color: var(--primary-color, #0e311a);
        text-decoration: underline;
    }
    .pm-login-bottom-text {
        font-size: 14px;
        color: #64748b;
        text-align: center;
    }
    .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;
    }

    /* Responsive Breakpoints */
    @media (max-width: 768px) {
        .pm-registration-section {
            padding: 30px 15px 50px 15px !important;
        }
        .pm-register-card-box {
            padding: 32px 24px;
        }
    }
    @media (max-width: 576px) {
        .pm-registration-section {
            padding: 20px 10px 40px 10px !important;
        }
        .pm-register-card-box {
            padding: 24px 16px;
            border-width: 3.5px;
            border-radius: 12px;
        }
        .pm-register-card-title {
            font-size: 22px;
            margin-bottom: 20px;
        }
        .pm-form-row {
            gap: 14px !important;
            margin-bottom: 14px !important;
        }
        .pm-form-col-6 {
            flex: 1 1 100% !important;
            min-width: 100% !important;
        }
        .pm-btn-social-full {
            height: 44px;
            font-size: 14px;
        }
        .pm-input {
            height: 44px;
            font-size: 14px;
            padding: 8px 14px;
        }
        .pm-input-eye-group .pm-input {
            height: 42px;
        }
        .pm-btn-eye {
            width: 46px;
            height: 42px;
            min-width: 46px;
        }
        .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">Create 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 register with email</span>
            </div>

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

                <!-- Row 1: First Name & Last Name -->
                <div class="pm-form-row">
                    <div class="pm-form-col-6">
                        <label class="pm-label" for="reg-fname">First Name</label>
                        <input type="text" id="reg-fname" name="first_name" class="pm-input" placeholder="John" value="{{ old('first_name') }}" required>
                        <span class="text-danger error-text" id="error-first_name"></span>
                    </div>
                    <div class="pm-form-col-6">
                        <label class="pm-label" for="reg-lname">Last Name</label>
                        <input type="text" id="reg-lname" name="last_name" class="pm-input" placeholder="Doe" value="{{ old('last_name') }}" required>
                        <span class="text-danger error-text" id="error-last_name"></span>
                    </div>
                </div>

                <!-- Row 2: Email Address -->
                <div class="pm-form-group">
                    <label class="pm-label" for="reg-email">Email Address</label>
                    <input type="email" id="reg-email" name="email" class="pm-input" placeholder="john.doe@example.com" value="{{ old('email') }}" required>
                    <span class="text-danger error-text" id="error-email"></span>
                </div>

                <!-- Row 3: Password -->
                <div class="pm-form-group">
                    <label class="pm-label" for="reg-pass">Password</label>
                    <div class="pm-input-eye-group">
                        <input type="password" id="reg-pass" name="password" class="pm-input" placeholder="••••••••" required>
                        <button type="button" class="pm-btn-eye js-toggle-pass" data-target="reg-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"></span>
                </div>

                <!-- Row 4: Confirm Password -->
                <div class="pm-form-group">
                    <label class="pm-label" for="reg-confirm-pass">Confirm Password</label>
                    <div class="pm-input-eye-group">
                        <input type="password" id="reg-confirm-pass" name="conf_password" class="pm-input" placeholder="••••••••" required>
                        <button type="button" class="pm-btn-eye js-toggle-pass" data-target="reg-confirm-pass" title="Show/Hide Password" aria-label="Toggle confirm password visibility">
                            <i class="material-icons">&#xE8F5;</i>
                        </button>
                    </div>
                    <span class="text-danger error-text" id="error-conf_password"></span>
                </div>

                <!-- Create Account Submit Button -->
                <div class="pm-submit-group">
                    <button type="submit" id="pm-register-submit-btn" class="pm-btn-create-account">
                        Create Account
                    </button>
                </div>

                <!-- Terms Agreement text -->
                <div class="pm-terms-text">
                    By creating an account, you agree to our <a href="{{ route('page.view', 'terms-conditions') }}">Terms of Service</a> and <a href="{{ route('page.view', 'privacy-policy') }}">Privacy Policy</a>.
                </div>

                <!-- Log in link -->
                <div class="pm-login-bottom-text">
                    Already have an account? <a href="{{ route('customer.login') }}">Log in 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;'; // Eye open icon
            } else {
                input.type = 'password';
                if (icon) icon.innerHTML = '&#xE8F5;'; // Eye slashed icon
            }
        }
        window.togglePassVisibility = togglePassVisibility;
    </script>

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

            $('#pm-registration-form').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                $('.error-text').hide().text('');
                $('.pm-input').removeClass('is-invalid');
                $('.pm-input-eye-group').removeClass('is-invalid');

                var $form = $(this);
                var $submitBtn = $('#pm-register-submit-btn');
                var originalBtnText = $.trim($submitBtn.text()) || 'Create Account';

                $submitBtn.prop('disabled', true).text('Creating Account...');

                $.ajax({
                    url: $form.attr('action'),
                    type: 'POST',
                    data: $form.serialize(),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function(response) {
                        if (typeof toastr !== 'undefined') {
                            toastr.success(response.message || 'Account created successfully!');
                        }
                        setTimeout(function() {
                            window.location.href = response.redirect || "{{ route('customer.login') }}";
                        }, 800);
                    },
                    error: function(xhr) {
                        $submitBtn.prop('disabled', false).text(originalBtnText);

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

                            $.each(errors, function(field, messages) {
                                if (!firstErrorMessage && messages.length > 0) {
                                    firstErrorMessage = messages[0];
                                }
                                var $errorSpan = $('#error-' + field);
                                if ($errorSpan.length) {
                                    $errorSpan.text(messages[0]).show();
                                }

                                var $input = $('[name="' + field + '"]');
                                if ($input.length) {
                                    if ($input.closest('.pm-input-eye-group').length) {
                                        $input.closest('.pm-input-eye-group').addClass('is-invalid');
                                    } else {
                                        $input.addClass('is-invalid');
                                    }
                                }
                            });

                            if (firstErrorMessage && typeof toastr !== 'undefined') {
                                toastr.error(firstErrorMessage);
                            }
                        } else {
                            var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'An unexpected error occurred. Please try again.';
                            if (typeof toastr !== 'undefined') {
                                toastr.error(msg);
                            } else {
                                alert(msg);
                            }
                        }
                    }
                });
            });
        });
    </script>
    @endpush
</x-app-layout>