@extends('front.layout.app')
@section('content')

    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>



    <section class="loginSec">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="formBox">
                        <form method="POST" action="{{ route('vendor.register') }}" id="vendor-register-form">
                            @csrf
                            <h1>Vendor Register</h1>
                            <div class="form-group">
                                <input class="form-control @error('name') is-invalid @enderror" type="text"
                                       placeholder="Name" name="name" value="">

                                @error('name')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input class="form-control @error('email') is-invalid @enderror" type="email"
                                       placeholder="Email address" name="email"
                                       value="">
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input class="form-control @error('shop_name') is-invalid @enderror" type="text"
                                       placeholder="Shop Name" name="shop_name" value="">

                                @error('shop_name')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input class="form-control @error('phone') is-invalid @enderror" type="tel"
                                       placeholder="Phone Number" name="phone" value="">

                                @error('phone')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">

                                <select name="country" id="country" class="form-control @error('country') is-invalid @enderror">
                                    <option value="">Select a country</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}" {{ old('country') == $country->id ? 'selected' : '' }}>
                                            {{ $country->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('country')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">

                                <select name="state_id" id="state" class="form-control @error('state_id') is-invalid @enderror">
                                    <option value="">Select a state</option>

                                </select>

                                @error('state_id')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input class="form-control @error('legal_bssiness_name') is-invalid @enderror"
                                       type="text"
                                       placeholder="Legal Business Name" name="legal_business_name" value="">

                                @error('legal_business_name')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input class="form-control @error('register_number') is-invalid @enderror" type="text"
                                       placeholder="EIN Number" name="register_number" value="">

                                @error('register_number')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input class="form-control @error('password') is-invalid @enderror" type="password"
                                       placeholder="Password" name="password"
                                       value="">
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input class="form-control" type="password" placeholder="Confirm password"
                                       name="password_confirmation" value="">
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <a class="forgetPassword" href="{{ route('login.form') }}">Already have an account?</a>
                            </div>
                            <div class="form-group">
                                 <input type="checkbox" name="terms_and_condition" id="terms-checkbox">
    <label for="terms-checkbox">
        Accept
        <a href="{{ route('front.llc-vendor-agreement') }}" target="_blank" id="terms-link">
            Terms and Conditions
        </a>
    </label>
                            </div>
                            <div class="text-center">
                                <button class=" themeBtn secondary" type="submit" id="submit-btn">Sign Up</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $('#country').on('change', function () {
            let countryId = $(this).val();
            let url = '{{ route("vendor.get.states", ":id") }}'.replace(':id', countryId);

            $.ajax({
                url: url,
                type: 'GET',
                success: function (states) {
                    let stateSelect = $('#state');
                    stateSelect.empty();
                    stateSelect.append('<option value="">Select a state</option>');
                    $.each(states, function (id, name) {
                        stateSelect.append(`<option value="${id}">${name}</option>`);
                    });
                }
            });
        });
    </script>
    <script>
        // Prevent form submission if the terms checkbox is not checked
        document.getElementById('vendor-register-form').addEventListener('submit', function(event) {
            if (!document.getElementById('terms-checkbox').checked) {
                event.preventDefault(); // Prevent form submission
                alert('You must accept the Terms and Conditions before proceeding.');
            }
        });

        // When the user clicks on the checkbox, open the Terms and Conditions page
        
    </script>
@endsection