@extends('layouts.webLayoutMaster')

@section('meta')
    <meta name="description" content="">
    <meta name="keywords" content="">
@endsection

@section('canonical')
    <link rel="canonical" href="https://www.vino-tasting.com/registration" />
@endsection

@section('title')
    - Registration
@endsection

@section('css')
    <style>
        .card-container-login {
            width: 100%;
            /* max-width: 700px; */
            background: transparent;
            position: relative;
        }

        /* .circle1 {
                    height: 80px;
                    width: 80px;
                    border-radius: 50%;
                    background-color: #a53e4c;
                    position: absolute;
                    top: 0;
                    left: 0;
                } */

        .log-card {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            position: relative;
            width: 100%;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
            /* backdrop-filter: blur(5px); */
            padding: 20px;
        }

        .heading {
            font-size: 28px;
            font-weight: 800;
        }

        .para {
            font-size: 18px;
            font-weight: 500;
        }

        .text {
            margin-top: 15px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 600;
            color: lightslategray;
        }

        .input-group {
            margin-top: 10px;
            margin-bottom: 4px;
        }

        .input {
            box-sizing: border-box;
            margin-bottom: 5px;
            width: 100%;
            border: none !important;
            padding: 8px 16px;
            background-color: transparent;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
            border-radius: 8px !important;
            font-weight: 600;
        }

        .country-select {
            box-sizing: border-box !important;
            margin-bottom: 5px !important;
            /* width: 100% !important; */
            border: none !important;
            padding: 8px 16px !important;
            background-color: transparent !important;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
            border-radius: 8px !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            color: #333 !important;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none !important;
            background-repeat: no-repeat !important;
            background-position: right 16px center !important;
            position: relative !important;
            height: auto !important;
        }

        .country-select:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        }

        .input:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        }

        .password-group {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
        }


        .jcf-select-opener {
            display: none;
        }

        span.jcf-select-text {
            display: none !important;
        }
    </style>
@endsection

@section('content')
    <!-- banner of the page -->
    <section class="p-0 py-5">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 text-center  py-5">
                    <h1>Registration</h1>
                    <ul class="list-unstyled breadcrumbs text-dark">
                        <li><a class="text-dark" href="{{ route('home') }}">Home</a></li>
                        <li>/</li>
                        <li>Registration</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="p-0">
        <div class="row justify-content-center p-5">
            <div class="card-container-login">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="log-card">
                    {{-- <h2 class="text-uppercase text-center">Registration </h2> --}}

                    <form action="{{ route('registration.register') }}" method="POST" class=" " id="registrationForm">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <label for="firstname" class="text">First Name</label>
                                <input type="text" id="firstname" name="firstname"
                                    class="input @error('firstname') is-invalid @enderror"
                                    placeholder="Enter Your First Name" required>
                                <div class="invalid-feedback">
                                    @error('firstname')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <label for="lastname" class="text @error('lastname') is-invalid @enderror">Last Name</label>
                                <input type="text" id="lastname" name="lastname" class="input"
                                    placeholder="Enter Your Last Name" required>
                                <div class="invalid-feedback">
                                    @error('lastname')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <label for="email" class="text">Email</label>
                                <input type="email" id="email" name="email" maxlength="150" required
                                    class="input @error('email') is-invalid @enderror" placeholder="Enter Your Email">
                                <div class="invalid-feedback">
                                    @error('email')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <label for="phone" class="text">Contact Number</label>
                                <input type="tel" id="contact_number" name="contact_number" required
                                    class="input @error('contact_number') is-invalid @enderror"
                                    placeholder="Enter Your Contact Number">
                                <div class="invalid-feedback">
                                    @error('contact_number')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <label for="country" class="text">Country</label>
                                <select class="country-select @error('country') is-invalid @enderror" id="country"
                                    name="country" required>
                                    <option value="">Select Country</option>
                                    @if (isset($countries) && $countries != '[]' && $countries != null)
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}"
                                                @if (session()->getOldInput('country') == $country->id) selected @endif>
                                                {{ ucwords($country->name) }}</option>
                                        @endforeach
                                    @else
                                        <option disabled>No Any Countries</option>
                                    @endif
                                </select>
                                <div class="invalid-feedback">
                                    @error('country')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <label for="city" class="text">City</label>
                                <input type="text" id="city" name="city" required
                                    class="input @error('city') is-invalid @enderror" placeholder="Enter Your City">
                                <div class="invalid-feedback">
                                    @error('city')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <label for="dob" class="text">Birthday</label>
                                <input type="date" id="dob" name="dob" required
                                    class="input @error('dob') is-invalid @enderror" placeholder="Select Your Birthday">
                                <div class="invalid-feedback">
                                    @error('dob')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <label for="password" class="text">Password</label>
                                <input class="input @error('password') is-invalid @enderror" id="password" name="password"
                                    type="password" placeholder="Enter Password" required>
                                <div class="invalid-feedback">
                                    @error('password')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row ">
                            <div class="col-md-6 col-sm-12">
                                <label for="password_confirm" class="text">Confirm Password</label>
                                <input class="input @error('password_confirm') is-invalid @enderror" id="password_confirm"
                                    name="password_confirm" type="password" placeholder="Confirm Password" required>
                                <div class="invalid-feedback">
                                    @error('password_confirm')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12 d-flex align-items-center">
                                <input class="mt-3 @error('is_company') is-invalid @enderror" style="margin-right: 5px;"
                                    id="is_company" name="is_company" type="checkbox" value="on">
                                <label for="is_company" class="text">We are the booking organization</label>
                                <div class="invalid-feedback">
                                    @error('is_company')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div id="company-fields" style="display: none;">
                            <div class="row">
                                <div class="col-md-6 col-sm-12">
                                    <label for="company_name" class="text">Company Name</label>
                                    <input type="text" id="company_name" name="company_name"
                                        class="input @error('company_name') is-invalid @enderror"
                                        placeholder="Enter Your Company Name">
                                    <div class="invalid-feedback">
                                        @error('company_name')
                                            {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <label for="company_address" class="text">Company Address</label>
                                    <input type="text" id="company_address" name="company_address"
                                        class="input @error('company_address') is-invalid @enderror"
                                        placeholder="Enter Your Company Address">
                                    <div class="invalid-feedback">
                                        @error('company_address')
                                            {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-12">
                                    <label for="company_contact_person_name" class="text">Company Contact Person
                                        Name</label>
                                    <input type="text" id="company_contact_person_name"
                                        name="company_contact_person_name"
                                        class="input @error('company_contact_person_name') is-invalid @enderror"
                                        placeholder="Enter Contact Person Name">
                                    <div class="invalid-feedback">
                                        @error('company_contact_person_name')
                                            {{ $message }}
                                            name
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <label for="company_contact_person_tel" class="text">Company Contact Person Contact
                                        Number</label>
                                    <input type="text" id="company_contact_person_tel"
                                        name="company_contact_person_tel"
                                        class="input @error('company_contact_person_tel') is-invalid @enderror"
                                        placeholder="Enter Contact Person Contact Number">
                                    <div class="invalid-feedback">
                                        @error('company_contact_person_tel')
                                            {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="register-submit-btn m-3" style="display: flex; justify-content: space-between;">
                            <div>
                                <p class="no-account">Already Have an Account? <a href="{{ route('login') }}"
                                        class="link">Login</a>
                            </div>
                            <div>
                                <button class="btn" id="submitBtn" disabled>Register</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
    </section>


@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('registrationForm');
            const submitBtn = document.getElementById('submitBtn');
            const companyFieldsContainer = document.getElementById('company-fields');
            const isCompanyCheckbox = document.getElementById('is_company');

            const requiredFields = Array.from(form.querySelectorAll('input[required], select[required]'));
            const companyFields = Array.from(companyFieldsContainer.querySelectorAll('input'));

            function validateForm() {
                let isValid = true;

                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        isValid = false;
                    }
                });

                if (isCompanyCheckbox.checked) {
                    companyFields.forEach(field => {
                        if (!field.value.trim()) {
                            isValid = false;
                        }
                    });
                }

                submitBtn.disabled = !isValid;
            }

            requiredFields.forEach(field => {
                field.addEventListener('input', validateForm);
            });

            companyFields.forEach(field => {
                field.addEventListener('input', validateForm);
            });

            isCompanyCheckbox.addEventListener('change', function() {
                if (this.checked) {
                    companyFieldsContainer.style.display = 'block';
                    companyFields.forEach(field => {
                        field.setAttribute('required', 'required');
                    });
                } else {
                    companyFieldsContainer.style.display = 'none';
                    companyFields.forEach(field => {
                        field.removeAttribute('required');
                    });
                }
                validateForm();
            });

            // Initial validation
            validateForm();
        });
    </script>
@endsection