@extends('layouts.master')
@section('body_id', 'register_page')
@section('content')

    <section class="breadcrumb_main_area margin-bottom-80 custom-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="breadcrumb_main text-center">
                    <h2 class="breadcrumb-title">Partner With Us</h2>
                    <p class="breadcrumb-subtitle">Grow your hotel business by joining our platform</p>
                </div>
            </div>
        </div>
    </section>

    <section class="hotel_booking_area margin-bottom-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-xs-12">
                    <div class="hotel_booking merchant-register-card">
                        
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 text-center">
                                <div class="room_book card-header-section">
                                    <h3 class="form-main-heading">Business Registration</h3>
                                    <p class="form-sub-heading">Fill in the details below to request your merchant partner account</p>
                                </div>
                            </div>
                        </div>
                        
                        @if(session('success'))
                            <div class="alert alert-success custom-alert-success">
                                <strong style="margin-right: 5px;">Registration Successful:</strong> {{ session('success') }}
                            </div>
                        @endif

                        <form action="{{ route('vendor.register.submit') }}" method="POST" id="vendorRegisterForm">
                            @csrf
                            
                            <div class="row">
                                <div class="col-md-6 col-sm-6 col-xs-12 form-group custom-form-group">
                                    <label for="full_name" class="custom-form-label">Full Name</label>
                                    <input type="text" class="form-control custom-form-input @error('full_name') is-invalid @enderror" id="full_name" name="full_name" value="{{ old('full_name') }}" required placeholder="John Doe">
                                    @error('full_name')
                                        <span class="field-error-message">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-md-6 col-sm-6 col-xs-12 form-group custom-form-group">
                                    <label for="email" class="custom-form-label">Email Address</label>
                                    <input type="email" class="form-control custom-form-input @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required placeholder="owner@example.com">
                                    @error('email')
                                        <span class="field-error-message">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12 form-group custom-form-group-spaced">
                                    <label for="phone_number" class="custom-form-label">Mobile Number</label>
                                    <input type="text" class="form-control custom-form-input @error('phone_number') is-invalid @enderror" id="phone_number" name="phone_number" value="{{ old('phone_number') }}" required placeholder="e.g. 9876543210">
                                    @error('phone_number')
                                        <span class="field-error-message">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-6 col-xs-12 form-group custom-form-group-spaced">
                                    <label filter="password" class="custom-form-label">Password</label>
                                    <input type="password" class="form-control custom-form-input @error('password') is-invalid @enderror" id="password" name="password" required placeholder="Minimum 8 characters">
                                    @error('password')
                                        <span class="field-error-message">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-md-6 col-sm-6 col-xs-12 form-group custom-form-group-spaced">
                                    <label for="password_confirmation" class="custom-form-label">Confirm Password</label>
                                    <input type="password" class="form-control custom-form-input" id="password_confirmation" name="password_confirmation" required placeholder="Re-enter password">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12 form-group custom-form-group-final">
                                    <label for="comment" class="custom-form-label">Additional Remarks / Business Details <span class="optional-text">(Optional)</span></label>
                                    <textarea class="form-control custom-form-textarea" id="comment" name="comment" rows="3" placeholder="Provide any additional details (e.g., Hotel Name, City) for the administrator...">{{ old('comment') }}</textarea>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div class="booking_next_btn custom-action-footer">
                                        <p class="login-redirect-text">Already have an account? <a href="{{ route('login') }}" class="login-redirect-link">Login Here</a></p>
                                        <button type="submit" class="btn btn-warning custom-submit-btn">Register Account</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        /* Breadcrumb Section Styles */
        .custom-breadcrumb {
            /*background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../assets/img/slider/slide-1.jpg') no-repeat center center;*/
            background-size: cover; 
            padding: 90px 0;
            border-bottom: 3px solid #C6A87C;
        }
        .breadcrumb-title {
            color: #ffffff; 
            font-size: 40px; 
            font-weight: 700; 
            text-transform: uppercase; 
            letter-spacing: 1.5px; 
            margin: 0;
        }
        .breadcrumb-subtitle {
            color: #d1c2ad; 
            margin-top: 12px; 
            font-size: 16px; 
            letter-spacing: 1px;
            font-weight: 500;
        }

        /* Registration Main Card Wrapper */
        .merchant-register-card {
            background: #ffffff; 
            border-radius: 18px; 
            box-shadow: 0 20px 45px rgba(198, 168, 124, 0.06), 0 5px 15px rgba(0, 0, 0, 0.02); 
            padding: 55px 60px; 
            border: 1px solid #eaeaea;
        }
        .card-header-section {
            padding-bottom: 25px; 
            border-bottom: 1px solid #f1f1f1;
            margin-bottom: 40px;
        }
        .form-main-heading {
            font-weight: 700; 
            color: #1a1a1a; 
            text-transform: uppercase; 
            letter-spacing: 0.8px; 
            font-size: 26px; 
            margin-bottom: 10px;
        }
        .form-sub-heading {
            color: #666666; 
            font-size: 14px; 
            margin: 0;
        }

        /* Form Inputs & Labels */
        .custom-form-group {
            margin-bottom: 24px;
        }
        .custom-form-group-spaced {
            margin-bottom: 24px;
            margin-top: 5px;
        }
        .custom-form-group-final {
            margin-bottom: 40px;
            margin-top: 5px;
        }
        .custom-form-label {
            font-size: 13px; 
            text-transform: uppercase; 
            letter-spacing: 0.8px; 
            color: #333333; 
            font-weight: 700; 
            margin-bottom: 10px; 
            display: block;
        }
        .optional-text {
            color: #999;
            font-weight: 400;
            text-transform: none;
            font-size: 12px;
        }
        .custom-form-input {
            height: 52px; 
            border-radius: 10px; 
            border: 1px solid #e0dcd8; 
            padding: 10px 18px; 
            font-size: 14px; 
            box-shadow: none !important; 
            background-color: #faf9f7;
            transition: all 0.25s ease-in-out;
            width: 100%;
        }
        .custom-form-textarea {
            border-radius: 10px; 
            border: 1px solid #e0dcd8; 
            padding: 15px 18px; 
            font-size: 14px; 
            box-shadow: none !important; 
            background-color: #faf9f7;
            resize: vertical; 
            transition: all 0.25s ease-in-out;
            width: 100%;
        }

        /* Input Focus Transitions */
        .custom-form-input:focus, 
        .custom-form-textarea:focus {
            border-color: #C6A87C !important;
            box-shadow: 0 0 0 4px rgba(198, 168, 124, 0.12) !important;
            background-color: #ffffff;
            outline: none;
        }

        /* Dynamic Input Error States */
        .is-invalid {
            border-color: #e53e3e !important;
            background-color: #fffafb !important;
        }
        .is-invalid:focus {
            box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.12) !important;
        }
        .field-error-message {
            color: #e53e3e;
            font-size: 12px;
            font-weight: 600;
            margin-top: 8px;
            display: block;
            letter-spacing: 0.2px;
        }

        /* Custom Success Alert Card */
        .custom-alert-success {
            margin-bottom: 35px; 
            background-color: #f0fdf4; 
            color: #166534; 
            border: 1px solid #bbf7d0; 
            padding: 16px; 
            border-radius: 12px; 
            font-size: 14px; 
        }

        /* Form Footer Action Section */
        .custom-action-footer {
            border-top: 1px solid #f1f1f1; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-wrap: wrap; 
            gap: 15px;
            padding-top: 30px;
        }
        .login-redirect-text {
            margin: 0; 
            color: #666666; 
            font-size: 14px;
        }
        .login-redirect-link {
            color: #C6A87C; 
            font-weight: 700; 
            text-decoration: none; 
            border-bottom: 1px solid transparent; 
            transition: all 0.2s ease-in-out;
        }
        .login-redirect-link:hover {
            color: #8c7149;
            border-bottom-color: #8c7149;
        }
        .custom-submit-btn {
            background-color: #C6A87C !important; 
            border: 1px solid #C6A87C !important; 
            color: #ffffff !important; 
            padding: 15px 40px; 
            font-size: 14px; 
            font-weight: 700; 
            border-radius: 10px; 
            text-transform: uppercase; 
            letter-spacing: 0.8px; 
            transition: all 0.25s ease-in-out; 
            box-shadow: 0 6px 20px rgba(198, 168, 124, 0.2); 
        }
        .custom-submit-btn:hover {
            background-color: #b29468 !important;
            border-color: #b29468 !important;
            box-shadow: 0 10px 25px rgba(198, 168, 124, 0.3);
            transform: translateY(-1.5px);
        }
        .custom-submit-btn:active {
            transform: translateY(1px);
        }

        /* ==========================================================================
           COMPREHENSIVE MEDIA QUERIES FOR PERFECT RESPONSIVENESS
           ========================================================================== */
        @media (max-width: 991px) {
            .merchant-register-card {
                padding: 40px;
            }
        }

        @media (max-width: 767px) {
            .custom-breadcrumb {
                padding: 60px 0;
            }
            .breadcrumb-title {
                font-size: 30px;
            }
            .breadcrumb-subtitle {
                font-size: 14px;
            }
            .merchant-register-card {
                padding: 30px 20px; 
                border-radius: 12px;
                box-shadow: 0 8px 25px rgba(0,0,0,0.04);
            }
            .form-main-heading {
                font-size: 22px;
            }
            .card-header-section {
                margin-bottom: 30px;
                padding-bottom: 15px;
            }
            .custom-action-footer {
                flex-direction: column-reverse; 
                text-align: center;
                gap: 25px;
                width: 100%;
            }
            .custom-submit-btn {
                width: 100%; 
                text-align: center;
                padding: 14px 20px;
            }
            .login-redirect-text {
                width: 100%;
                text-align: center;
            }
            .custom-form-group, .custom-form-group-spaced {
                margin-bottom: 20px;
            }
        }
    </style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    
    // 1. Har input field ke change hone par ya type karne par validate karein
    $('#full_name, #email, #phone_number, #password, #password_confirmation').on('blur keyup', function() {
        validateField($(this));
    });

    // 2. Main Validation Function
    function validateField(input) {
        let id = input.attr('id');
        let val = input.val().trim();
        let errorSpan = input.closest('.form-group').find('.field-error-message');
        let isValid = true;
        let message = "";

        // Agar span nahi h to dynamic banao
        if (errorSpan.length === 0) {
            input.after('<span class="field-error-message"></span>');
            errorSpan = input.closest('.form-group').find('.field-error-message');
        }

        // --- Full Name Validation ---
        if (id === 'full_name') {
            if (val === '') {
                message = "Please enter your full official name.";
                isValid = false;
            } else if (val.length < 3) {
                message = "The full name must be at least 3 characters.";
                isValid = false;
            }
        }

        // --- Email Validation ---
        if (id === 'email') {
            let emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if (val === '') {
                message = "An email address is required for registration.";
                isValid = false;
            } else if (!emailReg.test(val)) {
                message = "Please provide a valid corporate or personal email address.";
                isValid = false;
            }
        }

        // --- Phone Number Validation ---
        if (id === 'phone_number') {
            if (val === '') {
                message = "Mobile number is mandatory for contact verification.";
                isValid = false;
            } else if (val.length < 10 || val.length > 15 || isNaN(val)) {
                message = "Please enter a valid mobile number between 10 to 15 digits.";
                isValid = false;
            }
        }

        // --- Password Validation ---
        if (id === 'password') {
            if (val === '') {
                message = "Please set a secure password for your account.";
                isValid = false;
            } else if (val.length < 8) {
                message = "For security purposes, the password must be at least 8 characters long.";
                isValid = false;
            }
        }

        // --- Confirm Password Validation ---
        if (id === 'password_confirmation') {
            let passwordVal = $('#password').val();
            if (val === '') {
                message = "Please re-enter your password.";
                isValid = false;
            } else if (val !== passwordVal) {
                message = "The password confirmation field does not match.";
                isValid = false;
            }
        }

        // UI Changes based on validation
        if (!isValid) {
            input.addClass('is-invalid');
            errorSpan.text(message).show();
        } else {
            input.removeClass('is-invalid');
            errorSpan.text('').hide();
        }

        return isValid;
    }

    // 3. Final Submit Button Click hone par poore form ko ek sath check karein
    $('.custom-submit-btn').on('click', function(e) {
        e.preventDefault();
        let isFormValid = true;

        // Saare inputs ko loop me check karein
        $('#full_name, #email, #phone_number, #password, #password_confirmation').each(function() {
            if (!validateField($(this))) {
                isFormValid = false;
            }
        });

        // Agar sab sahi h tabhi submit hoga
        if (isFormValid) {
            $('#vendorRegisterForm').submit();
        } else {
            // First error wale input par scroll karein
            $('html, body').animate({
                scrollTop: $('.is-invalid').first().offset().top - 100
            }, 500);
        }
    });
});
</script>

<style>
    /* Real-time Validation Errors Colors */
    .is-invalid {
        border-color: #e53e3e !important;
        background-color: #fffafb !important;
    }
    .field-error-message {
        color: #e53e3e;
        font-size: 12px;
        font-weight: 600;
        margin-top: 8px;
        display: block;
        letter-spacing: 0.2px;
    }
</style>
@endsection