<div hidden>
    <div>
    <div class="hr_content mb20">
        <span class="d-flex justify-content-center w-100">continue with</span>
    </div>
    @php
        session(['url.intended' => url()->previous()]);
    @endphp
    <div class="d-flex justify-content-center w-100">
        <button 
            class="btn btn-google d-flex align-items-center justify-content-center w-100" 
            type="button" 
            data-bs-toggle="modal" 
            data-bs-target="#userRoleModal">
            <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" alt="Google Icon" class="me-2" style="width: 20px;">
            <span>Google</span>
        </button>
    </div>
    <br>
    <br>
</div>

<!-- Role Selection Modal -->
<div class="modal fade" id="userRoleModal" tabindex="-1" aria-labelledby="userRoleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-white">
            <div class="modal-header">
                <h5 class="modal-title" id="userRoleModalLabel">Select your user type</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
           
            <div class="modal-body">
                <p>Would you like to continue as a customer or provider?</p>
                 <div wire:ignore.self class="mb25">
                <div class="form-style1">
                    <label class="heading-color ff-heading fw500 mb10">Country</label>
                    <div class="bootselect-multiselect">
                        <select wire:model="nationality_id" class="selectpicker">
                            <option selected hidden>Select</option>
                            @foreach ($countries as $country)
                            <option value="{{ $country['id'] }}" data-content="<img src='{{ $country['flag_url'] }}' alt='{{ $country['name'] }} flag' width='20' height='15' /> {{ $country['name'] }}">
                                {{ $country['name'] }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @error('category_id') <span class="text-danger">{{ $message }}</span>@enderror
                </div>
            </div> 
                <div class="d-flex justify-content-between">
                    <a 
                        href="{{ route('google.redirect', ['role' => 'buyer']) }}" 
                        class="btn btn-primary text-white w-45">
                        Customer
                    </a>
                    <a 
                        href="{{ route('google.redirect', ['role' => 'seller']) }}" 
                        class="btn btn-secondary text-white w-45">
                        Provider
                    </a>
                </div>
            </div>
        </div>
    </div>
</div> 
</div>