@extends('Client.layouts.layout')
@section('content')

<div class="container  section-top">
    <div class="row align-items-center">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb my-5">
                <li class="breadcrumb-item">
                    <a href="{{ route('client.home') }}">
                        @lang('trans.home')
                    </a>
                </li>
                <li class="" aria-current="page">
                    @lang('trans.address')
                </li>
            </ol>
        </nav>
    </div>
</div>


<div class="container my-5">
    <div class="row  justify-content-center">


        <form class="" action="{{ route('client.address.store') }}" method="POST">
            @csrf
            
            <input type="hidden" name="lat" id="lat" value="{{ $lat }}">
            <input type="hidden" name="long" id="long" value="{{ $long }}">
            
            <div class="row">
                <div class="my-2 col-md-6">
                    <span class="main_bold p-2">@lang('trans.country')</span>
                    <select required name="country_id" id="country_id" class="border rounded p-2 w-100">
                        <option value="" disabled hidden selected>@lang('trans.Select')</option>
                        @foreach(Countries() as $Country)
                            <option  value="{{ $Country['id'] }}">{{ $Country['title_' . lang()] }}</option>
                        @endforeach
                    </select>
                </div>
    
                <div class="my-2 col-md-6">
                    <span class="main_bold p-2">@lang('trans.region')</span>
                    <select required name="region_id" id="region_id" class="border rounded p-2 w-100">
                        <option value="" disabled hidden selected>@lang('trans.Select')</option>
                    </select>
                </div>
            
                
                <div class="my-2 col-md-6">
                    <span class="main_bold p-2">@lang('trans.block')</span>
                    <input required type="text" name="block" class="border rounded p-2 w-100" value="{{ old('block') }}">
                </div>
                <div class="my-2 col-md-6">
                    <span class="main_bold p-2">@lang('trans.road')</span>
                    <input required type="text" name="road" class="border rounded p-2 w-100" value="{{ old('road') }}">
                </div>
                <div class="my-2 col-md-6">
                    <span class="main_bold p-2">@lang('trans.building')</span>
                    <input required type="text" name="building" class="border rounded p-2 w-100" value="{{ old('building') }}">
                </div>
                <div class="my-2 col-md-6">
                    <span class="main_bold p-2">@lang('trans.apartment')</span>
                    <input required type="text" name="apartment" class="border rounded p-2 w-100" value="{{ old('apartment') }}">
                </div>
                                
                <div class="my-2 col-md-12">
                    <label for="additional_directions" class="form-label">@lang('trans.additional_directions')</label>
                    <textarea class="form-control rounded-3" id="additional_directions" name="additional_directions" rows="5" style="resize: none;"></textarea>
                </div>
            </div>
            <div class="mb-3 w-100 d-flex justify-content-center">
                <button type="submit" class="btn btn-dark rounded-0 px-4 btn m-auto border border-1 border-dark rounded-3 gap-2 my-2 w-50 py-2">
                    @lang('trans.Submit')
                </button>
            </div>
        </form>
    </div>
</div>



@endsection


@push('js')
<script>

        $(document).on("change", 'select[name="country_id"]', function () {
            ClosestRegion = $(this).parent().parent().parent().find('select[name="region_id"]');
            country_id = $(this).val();
            $(ClosestRegion).empty();
            $.each(@json($Countries), function (key, Country) {
                if(country_id == Country['id']){
                    $(ClosestRegion).append('<option selected disable hidden data-price="0" value="">-------</option>');
                    $.each(Country['regions'], function (index, Region) {
                        delivery_cost = parseFloat(Region['delivery_cost']) * {{ Country()->currancy_value }};
                        id = Region['id'];
                        title = Region['title_{{ lang() }}'];
                        $(ClosestRegion).append('<option data-price="'+ delivery_cost +'" value="' + id + '">'+ title +'</option>');
                    })
                }
            })
        });
   
</script>
@endpush
