@extends('admin.layouts.container')

@section('content')

<div class="custom-dropdown" dir="rtl">
    <select id="location" name="location">
        <option value="">اختر التصنيف</option> <!-- Arabic for "Select Location" -->

        @foreach ($countries as $country)
            <option class="country-option" value="country-{{ $country->id }}">
                {{ $country->name }}
            </option>

            @foreach ($country->states as $state)
                <option class="state-option" value="state-{{ $state->id }}">
                    &nbsp;&nbsp;{{ $state->name }}
                </option>

                @foreach ($state->cities as $city)
                    <option class="city-option" value="city-{{ $city->id }}">
                        &nbsp;&nbsp; &nbsp;&nbsp;{{ $city->name }}
                    </option>
                @endforeach
            @endforeach
        @endforeach
    </select>
</div>

<style>
    .custom-dropdown select {
        width: 25%;
        font-size: 16px;
    }

    .country-option {
        font-size: 18px;
        font-weight: bold;
    }

    .state-option {
        font-size: 16px;
        font-weight: bold;
    }

    .city-option {
        font-size: 14px;
        font-weight: bold;
    }
</style>
@endsection