@extends('Client.profile.logged-in-layout')

@section('pagetitle' , __('trans.My Addresses'))

@php($Countries = \App\Models\Country::with('Regions')->Active()->get())

@section('logged-in-content')

<div class="card p-4">
	<div class="card-body">
		<div class="d-flex justify-content-between align-items-center">
			<h5 class="card-title h2 fw-semibold text-dark">@lang('trans.addresses')</h5>
			<a class="text-primary fw-semibold text-decoration-none" data-bs-toggle="modal" data-bs-target="#AddNewAddress" type="button">
			    @lang('trans.Add New Address')
			</a>
		</div>
		<div class="row d-flex justify-content-center">
            @forelse($Addresses as $Address)
    			<div class="col-sm-11 py-3 border rounded-2 mt-3">
    				<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>
    						</div>
    						<label class="form-check-label mt-1 text-danger mx-2 fs-7" for="flexRadioDefault1">
    						    {{ $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>
			@empty
                <div class="d-flex align-items-center justify-content-center">
                    <div class="text-center">
            			<svg xmlns="http://www.w3.org/2000/svg" width="225" height="200" viewBox="0 0 225 200" fill="none">
                            <path d="M149.097 70.3061C134.74 70.3061 120.16 69.7236 106.506 65.9202C93.108 62.2024 80.8068 54.9897 69.8421 46.6462C62.6464 41.2152 56.1361 36.8807 46.7989 37.5317C37.6798 38.0373 28.9647 41.4609 21.9397 47.2972C10.0669 57.6795 11.8658 76.885 16.5943 90.3854C23.7386 110.722 45.4112 124.856 63.8628 134.056C85.1585 144.695 108.544 150.829 132.016 154.427C152.575 157.562 178.976 159.823 196.794 146.409C213.172 134.073 217.661 105.89 213.652 86.8732C212.673 81.2533 209.676 76.1843 205.223 72.619C193.727 64.2069 176.577 69.8264 163.659 70.1005C158.862 70.3061 153.997 70.3061 149.097 70.3061Z" fill="#DBE8EC"/>
                            <path d="M113.991 187.767C148.726 187.767 176.884 186.01 176.884 183.843C176.884 181.676 148.726 179.92 113.991 179.92C79.2559 179.92 51.0977 181.676 51.0977 183.843C51.0977 186.01 79.2559 187.767 113.991 187.767Z" fill="#DBE8EC"/>
                            <path d="M69.4798 156.465C70.407 156.465 71.1587 155.714 71.1587 154.786C71.1587 153.859 70.407 153.107 69.4798 153.107C68.5525 153.107 67.8008 153.859 67.8008 154.786C67.8008 155.714 68.5525 156.465 69.4798 156.465Z" fill="#B9D4DB"/>
                            <path d="M166.008 165.049V172.416" stroke="#B9D4DB" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M162.305 168.732H169.689" stroke="#B9D4DB" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M113.514 28.5527C99.3173 28.5527 85.7018 34.1925 75.6629 44.2313C65.6241 54.2702 59.9844 67.8858 59.9844 82.0828C59.9844 121.374 113.514 158.162 113.514 158.162C113.514 158.162 167.044 121.936 167.044 82.0828C167.044 67.8858 161.405 54.2702 151.366 44.2313C141.327 34.1925 127.711 28.5527 113.514 28.5527ZM113.514 102.157C109.345 102.157 105.27 100.921 101.803 98.6059C98.3353 96.2907 95.632 92.9999 94.0342 89.1492C92.4363 85.2985 92.0155 81.0605 92.825 76.9708C93.6344 72.881 95.6378 69.1229 98.5821 66.1712C101.526 63.2195 105.279 61.2065 109.367 60.3867C113.455 59.5669 117.694 59.9769 121.548 61.565C125.403 63.1531 128.701 65.8481 131.025 69.3094C133.349 72.7707 134.595 76.8432 134.605 81.0122C134.602 86.6048 132.378 91.9673 128.424 95.9218C124.469 99.8763 119.107 102.1 113.514 102.103V102.157Z" fill="#F9AE2B"/>
                            <path d="M38.7812 12.5527V19.9197" stroke="#B9D4DB" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M35.082 16.2363H42.4661" stroke="#B9D4DB" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M192.148 32.5977V39.9646" stroke="#B9D4DB" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M188.449 36.2812H195.833" stroke="#B9D4DB" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M119.174 76.5527L106.984 88.7542" stroke="#E06714" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M106.984 76.5527L119.174 88.7542" stroke="#E06714" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <p>
                            @lang('trans.no-items-yet',['name'=> __('trans.addresses')])
                        </p>
                    </div>
                </div>
			@endforelse
		</div>


		<!-- Add -->
		<div class="modal fade rounded-5 border-0" id="AddNewAddress" tabindex="-1" aria-labelledby="AddAddress" aria-hidden="true" style="display: none;">
			<div class="modal-dialog modal-lg">
				<div class="modal-content border-0">

					<div class="modal-header border-0">
					    <h5 class="modal-title">@lang('trans.Add New Address')</h5>
						<button type="button" class="btn-close p-2 bg-gray border-primary rounded-circle" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body py-3 row">
					    
						<form class="text-decoration-none delete-row" method="POST" action="{{ route('client.address.create') }}">
    						    @csrf
    						    
                            <div class="mt-5 mt-lg-0">
                                <div class="card border shadow-none" style="text-align: inherit">
                                    <style>
                                        .card .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;
                                        }
                                        .card .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
                                            color: #fff;
                                            background-color: var(--main--color) !important;
                                        }
                                    </style>
                                    <div class="card-body p-4 pt-2">
                                        <div class="p-3 pb-5 my-1">
                                            
                                            <div id="tab-content">
                                                <ul class="d-flex nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link active" id="pills-apartment-tab" data-bs-toggle="pill" data-bs-target="#pills-apartment" type="button" role="tab" aria-controls="pills-apartment" aria-selected="true">@lang('trans.apartment')</button>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link" id="pills-house-tab" data-bs-toggle="pill" data-bs-target="#pills-house" type="button" role="tab" aria-controls="pills-house" aria-selected="false">@lang('trans.house')</button>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link" id="pills-office-tab" data-bs-toggle="pill" data-bs-target="#pills-office" type="button" role="tab" aria-controls="pills-office" aria-selected="false">@lang('trans.office')</button>
                                                    </li>
                                                </ul>
                                                <div class="tab-content" id="pills-tabContent">
                                                    <div class="tab-pane fade show active" id="pills-apartment" role="tabpanel" aria-labelledby="pills-apartment-tab" tabindex="0">
                                                        
                                                        
                                                        <div  class="row">
                                                            <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 as $Country)
                                                                        <option value="{{ $Country->id }}">{{ $Country->title() }}</option>
                                                                    @endforeach
                                                                </select>
                                                                <span class="text-danger">@error('region_id'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="region_id">@lang('trans.region')</label>
                                                                <select class="form-control w-100" name="region_id">

                                                                </select>
                                                                <span class="text-danger">@error('region_id'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="building_no">@lang('trans.Building')</label>
                                                                <input step="1" min="0" required type="number" inputmode="numeric" class="form-control" name="building_no"  value="">
                                                                <span class="text-danger">@error('building_no'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="apartment">@lang('trans.apartmentNo')</label>
                                                                <input step="1" min="0" required type="number" inputmode="numeric" class="form-control" name="apartment"  value="">
                                                                <span class="text-danger">@error('apartment'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="floor_no">@lang('trans.floor_no')</label>
                                                                <input step="1" min="0" required type="number" inputmode="numeric" class="form-control" name="floor_no"  value="">
                                                                <span class="text-danger">@error('floor_no'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="road">@if(Country()->id == 1) @lang('trans.road') @else @lang('trans.street') @endif</label>
                                                                <input step="1" min="0" required type="number" inputmode="numeric" class="form-control" name="road"  value="">
                                                                <span class="text-danger">@error('road'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="block">@if(Country()->id == 1) @lang('trans.block') @else @lang('trans.district') @endif</label>
                                                                <input step="1" min="0" required type="number" inputmode="numeric" class="form-control" name="block"  value="">
                                                                <span class="text-danger">@error('block'){{ $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="tab-pane fade" id="pills-house" role="tabpanel" aria-labelledby="pills-house-tab" tabindex="0">
                                                        
                                                        <div  class="row">
                                                            <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 as $Country)
                                                                        <option value="{{ $Country->id }}">{{ $Country->title() }}</option>
                                                                    @endforeach
                                                                </select>
                                                                <span class="text-danger">@error('region_id'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="region_id">@if(Country()->id == 1) @lang('trans.region') @else @lang('trans.region') @endif</label>
                                                                <select disabled class="form-control w-100" name="region_id" >

                                                                </select>
                                                                <span class="text-danger">@error('region_id'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="building_no">@lang('trans.house')</label>
                                                                <input disabled type="text" inputmode="numeric" class="form-control" name="building_no"  value="">
                                                                <span class="text-danger">@error('building_no'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="road">@if(Country()->id == 1) @lang('trans.road') @else @lang('trans.street') @endif</label>
                                                                <input disabled step="1" min="0"  type="number" inputmode="numeric" class="form-control" name="road"  value="">
                                                                <span class="text-danger">@error('road'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="block">@if(Country()->id == 1) @lang('trans.block') @else @lang('trans.district') @endif</label>
                                                                <input disabled step="1" min="0"  type="number" inputmode="numeric" class="form-control" name="block"  value="">
                                                                <span class="text-danger">@error('block'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="additional_directions">@lang('trans.additional_directions')</label>
                                                                <input disabled 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="tab-pane fade" id="pills-office" role="tabpanel" aria-labelledby="pills-office-tab" tabindex="0">
                                                        
                                                        <div  class="row">
                                                            
                                                            <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 as $Country)
                                                                        <option value="{{ $Country->id }}">{{ $Country->title() }}</option>
                                                                    @endforeach
                                                                </select>
                                                                <span class="text-danger">@error('region_id'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="region_id">@if(Country()->id == 1) @lang('trans.region') @else @lang('trans.region') @endif</label>
                                                                <select disabled class="form-control w-100" name="region_id" >

                                                                </select>
                                                                <span class="text-danger">@error('region_id'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="building_no">@lang('trans.Building')</label>
                                                                <input disabled step="1" min="0"  type="number" inputmode="numeric" class="form-control" name="building_no"  value="">
                                                                <span class="text-danger">@error('building_no'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="apartment">@lang('trans.company')</label>
                                                                <input disabled  type="text" inputmode="numeric" class="form-control" name="apartment"  value="">
                                                                <span class="text-danger">@error('apartment'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="floor_no">@lang('trans.floor_no')</label>
                                                                <input disabled step="1" min="0"  type="number" inputmode="numeric" class="form-control" name="floor_no"  value="">
                                                                <span class="text-danger">@error('floor_no'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="road">@if(Country()->id == 1) @lang('trans.road') @else @lang('trans.street') @endif</label>
                                                                <input disabled step="1" min="0"  type="number" inputmode="numeric" class="form-control" name="road"  value="">
                                                                <span class="text-danger">@error('road'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12 col-md-6">
                                                                <label for="block">@if(Country()->id == 1) @lang('trans.block') @else @lang('trans.district') @endif</label>
                                                                <input disabled step="1" min="0"  type="number" inputmode="numeric" class="form-control" name="block"  value="">
                                                                <span class="text-danger">@error('block'){{ $message }}@enderror</span>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="additional_directions">@lang('trans.additional_directions')</label>
                                                                <input disabled 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>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
    						<div class="row">
    							<div class="d-flex justify-content-end align-items-center mt-3">
									<button type="submit" class="btn rounded-2  mx-2 btn main_bt">@lang('trans.save')</button>
    							</div>
    						</div>
    					</form>
					</div>
				</div>
			</div>
		</div>
		<!-- End Add -->

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