@extends('layouts.user_type.guest')

@section('content')
    <section class="max-vh-100 mb-8">
        <div class="page-header align-items-start min-vh-50 pt-5 pb-11 mx-3 border-radius-lg"
            style="background-image: url('{{ asset('assets/img/curved-images/curved14.jpg') }}');">
            <span class="mask bg-gradient-dark opacity-6"></span>
        </div>
        <div class="container">
            <div class="row mt-lg-n10 mt-md-n11 mt-n10">
                <div class="col-xl-12 col-lg-12 col-md-12 mx-auto">
                    <div class="card z-index-0">
                        <div class="card-header text-center pt-4">
                            <h5>Registration</h5>
                        </div>
                        <div class="card-body">
                            <form role="form text-left" method="POST" action="/register">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <select class="form-control" name="role" id="role" required>
                                            @foreach($roles as $role)
                                                <option value="{{ $role->id }}">{{ $role->title }}</option>
                                            @endforeach
                                        </select>
                                        @error('role')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <input type="text" class="form-control" placeholder="Name" name="name"
                                            id="name" aria-label="Name" aria-describedby="name"
                                            value="{{ old('name') }}" required>
                                        @error('name')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <input type="email" class="form-control" placeholder="Email" name="email"
                                            id="email" aria-label="Email" aria-describedby="email-addon"
                                            value="{{ old('email') }}" required>
                                        @error('email')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <input type="password" class="form-control" placeholder="Password" name="password"
                                            id="password" aria-label="Password" aria-describedby="password-addon" required>
                                        @error('password')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <input type="text" name="address" id="address" placeholder="Address"
                                            class="form-control" aria-label="Address" aria-describedby="address-addon" required>
                                        @error('address')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <select class="form-control" name="location" id="location" required>
                                            <option value="">Select Country</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('location')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <select class="form-control" name="state" id="state">
                                            <option value="">Select a State/Province</option>
                                        </select>
                                        @error('state')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <input type="text" name="city" id="city" placeholder="City"
                                            class="form-control" aria-label="City" aria-describedby="City" required>
                                        @error('city')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <input type="text" name="street" id="street" placeholder="Suits/Street"
                                            class="form-control" aria-label="Street" aria-describedby="Street" required>
                                        @error('street')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <input type="text" name="postalcode" id="postalcode" placeholder="ZIP/Postal Code"
                                            class="form-control" aria-label="Postal Code" aria-describedby="Postal Code" required>
                                        @error('postalcode')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <input type="tel" name="phone" id="phone" placeholder="Phone EX:9800097000"
                                            class="form-control" aria-label="Phone" aria-describedby="Phone" required>
                                        @error('phone')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn bg-gradient-dark w-100 my-4 mb-2">Sign up</button>
                                </div>
                                <p class="text-sm mt-3 mb-0">Already have an account? <a href="login"
                                        class="text-dark font-weight-bolder">Sign in</a></p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Store states data in a JavaScript variable
            const states = @json($states);

            document.getElementById('location').addEventListener('change', function() {
                const countryId = this.value;
                const stateSelect = document.getElementById('state');

                stateSelect.innerHTML = '<option value="">Select a State/Province</option>';

                const filteredStates = states.filter(state => state.country_id == countryId);

                filteredStates.forEach(state => {
                    const option = document.createElement('option');
                    option.value = state.name;
                    option.textContent = state.name;
                    stateSelect.appendChild(option);
                });
            });
        });
    </script>
@endsection