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


    <div class="bg-ccc py-2">
        <div class="container">
            <div class="row py-2">
                <div class="col-12">
                    <ul class="breadcrumb wizard">
                      <li class="completed"><a href="{{ route('client.home') }}">@lang('trans.home')</a></li>
                      <li class="not-completed"><a href="javascript:void(0);">{{ __('trans.address')  }}</a></li>
                    </ul>
                </div>
            </div>
            <div class="row">

                    <div class="mt-5 mt-lg-0">
                        @if(auth('client')->user()?->addresses->count())
                        <div class="card border shadow-none" style="text-align: inherit">
                            @if(auth('client')->check())
                            
                                <form action="{{ route('client.confirm') }}" method="GET" id="form-submit">
                                    @csrf
                                    
                                    <input type="hidden" name="delivery_id" id="delivery_id" value="1">
                                    <div class="bg-transparent  py-3 px-4">
                                        @foreach(auth('client')->user()->addresses as $Address)
                                			<div class="col-sm-11 py-3 border rounded-2 mt-3 px-2">
                                				<div class="bg-white d-md-flex align-items-center justify-content-between">
                                					<div class="d-flex">
                                						<div>
                                							<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                                            	<path d="M7.49969 9.20448C6.25719 9.20448 5.24219 8.19531 5.24219 6.94698C5.24219 5.69865 6.25719 4.69531 7.49969 4.69531C8.74219 4.69531 9.75719 5.70448 9.75719 6.95281C9.75719 8.20115 8.74219 9.20448 7.49969 9.20448ZM7.49969 5.57031C6.74135 5.57031 6.11719 6.18865 6.11719 6.95281C6.11719 7.71698 6.73552 8.33531 7.49969 8.33531C8.26385 8.33531 8.88219 7.71698 8.88219 6.95281C8.88219 6.18865 8.25802 5.57031 7.49969 5.57031Z" fill="#9596A1"/>
                                                            	<path d="M7.50096 14.2155C6.63762 14.2155 5.76846 13.8888 5.09179 13.2413C3.37096 11.5846 1.46929 8.94213 2.18679 5.79797C2.83429 2.94547 5.32512 1.66797 7.50096 1.66797C7.50096 1.66797 7.50096 1.66797 7.50679 1.66797C9.68262 1.66797 12.1735 2.94547 12.821 5.8038C13.5326 8.94797 11.631 11.5846 9.91012 13.2413C9.23346 13.8888 8.36429 14.2155 7.50096 14.2155ZM7.50096 2.54297C5.80346 2.54297 3.62179 3.44714 3.04429 5.99047C2.41429 8.73797 4.14096 11.1063 5.70429 12.6055C6.71346 13.5796 8.29429 13.5796 9.30346 12.6055C10.861 11.1063 12.5876 8.73797 11.9693 5.99047C11.386 3.44714 9.19846 2.54297 7.50096 2.54297Z" fill="#9596A1"/>
                                                            </svg>
                                						    <input required class="form-check-input" type="radio" name="address_id" id="Address-{{ $Address->id }}" value="{{ $Address->id }}">
                                						</div>
                                						<label class="form-check-label mt-1 text-danger mx-2 fs-7" for="Address-{{ $Address->id }}">
                                						    {{ $Address->country?->title() }}, 
                                						    {{ $Address->region->title() }}
                                						    {{ $Address->block ? ' , ' . $Address->block : '' }}
                                						    {{ $Address->road ? ' , ' . $Address->road : '' }}
                                						    {{ $Address->building_no ? ' , ' . $Address->building_no : '' }}
                                						    {{ $Address->floor_no ? ' , ' . $Address->floor_no : '' }}
                                						    {{ $Address->apartment ? ' , ' . $Address->apartment : '' }}
                                						    {{ $Address->additional_directions ? ' , ' . $Address->additional_directions : '' }}
                                						</label>
                                					</div>
                                					
                                				</div>
                                			</div>
                                		@endforeach
                                    </div>
                                    
                                    <div class="my-3">
                                        <div class="card border shadow-none" style="text-align: inherit;max-width: 300px;margin: auto;">
                                            <button type="submit" class="btn main_bt  w-100 py-3"><i class="fa-regular fa-circle-check me-1"></i> @lang('trans.confirmOrder') </button>
                                        </div>
                                    </div>
                                </form>
                            @endif
                        </div>
                        <div class="line-between">@lang('trans.Or')</div>
                        @endif
                        
                        
                        <form action="{{ route('client.confirm') }}" method="GET" id="form-submit">
                            @csrf
                    
                            <input type="hidden" name="delivery_id" id="delivery_id" value="1">
                            <input type="hidden" name="type" id="type" value="apartment">
                            <div class="card border shadow-none mt-3" style="text-align: inherit">
                                <style>
                                    .nav-pills .nav-link, .nav-pills .show>.nav-link {
                                        padding: 10px 30px;
                                        border-radius: 50px;
                                        border: 1px solid var(--main--color);
                                        margin: 5px;
                                        color: #000;
                                        min-width: 150px;
                                    }
                                    .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
                                        color: #fff;
                                        background-color: var(--main--color);
                                    }
                                </style>
                                <div class="card-body p-4 pt-2">
                                    <div class="p-3 pb-5 my-1">
                                        
                                                 
                                                    <div  class="row">
                                                        @if(request('delivery_id') == 3)
                                                        <div class="col-12 col-md-6">
                                                            <label for="country_id">@lang('trans.country')</label>
                                                            <select class="form-control w-100" name="country_id">
                                                                <option selected disable hidden data-price="0" value="">-------</option>
                                                                @foreach ($Countries->where('id','!=',1) as $Country)
                                                                    <option value="{{ $Country->id }}">{{ $Country->title() }}</option>
                                                                @endforeach
                                                            </select>
                                                            <span class="text-danger">@error('region_id'){{ $message }}@enderror</span>
                                                        </div>
                                                        @endif
                                                        <div class="col-12 col-md-6">
                                                            <label for="region_id">@if(request('delivery_id') == 1) @lang('trans.region') @else @lang('trans.region') @endif</label>
                                                            <select class="form-control w-100" name="region_id">
                                                                <option selected disable hidden data-price="0" value="">-------</option>
                                                                @if(request('delivery_id') == 1)
                                                                    @foreach (Country()->Regions as $Region)
                                                                        <option data-price="{{ $Region->delivery_cost  *  Country()->currancy_value }}" value="{{ $Region->id }}">{{ $Region->title() }}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                            <span class="text-danger">@error('region_id'){{ $message }}@enderror</span>
                                                        </div>
                                                        <div class="col-12 col-md-6">
                                                            <label for="block">@lang('trans.district')</label>
                                                            <input required type="text" class="form-control" name="block"  value="">
                                                            <span class="text-danger">@error('block'){{ $message }}@enderror</span>
                                                        </div>
                                                        <div class="col-12 col-md-6">
                                                            <label for="road">@lang('trans.street')</label>
                                                            <input step="1" min="0" required type="text" class="form-control" name="road"  value="">
                                                            <span class="text-danger">@error('road'){{ $message }}@enderror</span>
                                                        </div>
                                                        <div class="col-12">
                                                            <label for="additional_directions">@lang('trans.additional_directions')</label>
                                                            <input type="text" class="form-control additional_directions" name="additional_directions"  value="">
                                                            <span class="text-danger">@error('additional_directions'){{ $message }}@enderror</span>
                                                        </div>
                                                    </div>
                                    </div>
                                    <div class="mt-lg-0">
                                        <div class="card border shadow-none" style="text-align: inherit;max-width: 300px;margin: auto;">
                                            <button type="submit" class="btn main_bt  w-100 py-3"><i class="fa-regular fa-circle-check me-1"></i> @lang('trans.confirmOrder') </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                        </form>
                    </div>

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

@endsection

@push('css')
    <style>
    
        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0; 
        }


        .bg-ccc {
            background-color: #f1f3f7;
        }

        .avatar-lg {
            height: auto;
            /*width: 5rem;*/
            max-height: 5rem
        }

        .font-size-18 {
            font-size: 18px !important;
        }

        .text-truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        a {
            text-decoration: none !important;
        }

        .w-xl {
            min-width: 160px;
        }

        .card {
            margin-bottom: 24px;
            -webkit-box-shadow: 0 2px 3px #e4e8f0;
            box-shadow: 0 2px 3px #e4e8f0;
        }

        .card {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: 1px solid #eff0f2;
            border-radius: 1rem;
        }

        .minus,
        .plus {
            width: 20px;
            background: #f2f2f2;
            border-radius: 4px;
            border: 1px solid #ddd;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
        }

        .number input {
            height: 34px;
            width: 100px;
            text-align: center;
            font-size: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
            max-width: 51px;
        }
        
        
        .line-between {
            position: relative;
            font-size: 30px;
            z-index: 1;
            overflow: hidden;
            text-align: center;
        }
        .line-between:before, .line-between:after {
            position: absolute;
            top: 51%;
            overflow: hidden;
            width: 48%;
            height: 1px;
            content: '\a0';
            background-color: black; /* change color if needed*/
            margin-left: 2%;
        }
        .line-between:before {
            margin-left: -50%;
            text-align: right;
        }

    </style>
@endpush


@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>');
                    })
                }
            })
        });

        
        
        const triggerTabList = document.querySelectorAll('#tab-content button')
        triggerTabList.forEach(triggerTab => {
          const tabTrigger = new bootstrap.Tab(triggerTab)
            triggerTab.addEventListener('shown.bs.tab', event => {
                $('#pills-tabContent input').prop("disabled", true);
                $('#pills-tabContent input').removeAttr('required');
                
                $('#pills-tabContent select').prop("disabled", true);
                $('#pills-tabContent select option:selected').removeAttr("selected");
                $('#pills-tabContent select option:selected').prop("selected", false);;
                $('#pills-tabContent select').removeAttr('required');
                
                $($(event.target).attr('data-bs-target') + ' input').prop('required',true);
                $($(event.target).attr('data-bs-target') + ' input').prop("disabled", false);
                
                $($(event.target).attr('data-bs-target') + ' select').prop('required',true);
                $($(event.target).attr('data-bs-target') + ' select').prop("disabled", false);
                
                $('#type').val($(event.target).attr('data-bs-target').replace("#pills-", ""));
                
                $('.additional_directions').prop("disabled", false);
                $('.additional_directions').removeAttr('required');
            })
        })
       
      
        document.querySelectorAll('input[name="address_id"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    document.querySelectorAll('input[name="address_id"]').forEach(cb => {
                        if (cb !== this) cb.checked = false;
                    });
                }
            });
        });
    </script>
@endpush