@extends("front.layout.master")
@php
    $sellerac = App\Store::where('user_id','=', $user->id)->first();
    $ifadd = count(Auth::user()->addresses);
@endphp
@section('title', __('staticwords.ManageAddress') . ' | ')

@section("body")

<style>
    /* Reserve room for the dropdown chevron so long values (e.g. "Andaman and
       Nicobar Islands") don't run under the arrow. The shared `px-3`
       (bootstrap/theme, !important) otherwise leaves too little right padding for
       the global select chevron, so long text overlaps it. */
    select[name="country_id"],
    select[name="state_id"],
    select[name="city_id"] {
        padding-right: 2.5rem !important;
        text-overflow: ellipsis;
    }
</style>

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('staticwords.ManageAddress') }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 grid lg:grid-cols-[300px_1fr] gap-5 pb-12">
    <aside class="lg:sticky lg:top-28 lg:self-start">
        @include('user.sidebar')
    </aside>

    <div class="space-y-5">
        <div class="bg-white rounded-2xl shadow-card p-6 lg:p-8">
            <div class="flex items-center justify-between flex-wrap gap-3 mb-5">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-brand-50 rounded-xl grid place-items-center text-brand-600">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 21s7-7.5 7-12a7 7 0 1 0-14 0c0 4.5 7 12 7 12Z"/><circle cx="12" cy="9" r="2.5"/></svg>
                    </div>
                    <div>
                        <h1 class="font-display font-extrabold text-2xl">{{ __('staticwords.ManageAddress') }}</h1>
                        <p class="text-[13px] text-slate-500">{{ count($user->addresses) }} {{ __('saved addresses') }}</p>
                    </div>
                </div>
                <button type="button" data-sh-modal-open="mngaddress" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2 rounded-lg flex items-center gap-2 text-[13px]">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
                    {{ __('staticwords.AddNew') }}
                </button>
            </div>

            @if(count($user->addresses) > 0)
                <div class="grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
                    @foreach($user->addresses as $address)
                        @php
                            $c  = optional(App\Allcountry::where('id',$address->country_id)->first())->nicename;
                            $s  = optional(App\Allstate::where('id',$address->state_id)->first())->name;
                            $ci = optional(App\Allcity::where('id',$address->city_id)->first())->name;
                        @endphp
                        <div class="border rounded-2xl p-5 relative {{ $address->defaddress == 1 ? 'border-brand-500 bg-brand-50/30' : 'border-slate-200 bg-white' }}">
                            @if($address->defaddress == 1)
                                <span class="absolute -top-2.5 left-4 bg-brand-500 text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded">{{ __('Default') }}</span>
                            @endif
                            <div class="font-semibold text-[15px] flex items-center gap-2">
                                {{ $address->name }}
                            </div>
                            <div class="text-[12px] text-slate-500 mt-0.5">{{ $address->phone }}</div>
                            @if(!empty($address->email))<div class="text-[12px] text-slate-500">{{ $address->email }}</div>@endif
                            <p class="text-[13px] text-slate-700 mt-3 leading-relaxed">{{ strip_tags($address->address) }}, {{ $ci }}, {{ $s }}, {{ $c }}@if(isset($address->pin_code)) — {{ $address->pin_code }}@endif</p>

                            <div class="flex items-center gap-2 mt-4">
                                <button type="button" data-sh-modal-open="editModal{{ $address->id }}" title="{{ __('Edit Address') }}" class="text-[12px] font-semibold text-brand-600 hover:underline flex items-center gap-1">
                                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>{{ __('Edit') }}
                                </button>
                                @if(env('DEMO_LOCK')==0)
                                <button type="button" data-sh-modal-open="deletemodal{{ $address->id }}" title="{{ __('Delete Address') }}" class="text-[12px] font-semibold text-rose-500 hover:underline flex items-center gap-1">
                                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1.5 14a2 2 0 0 1-2 1.8h-7a2 2 0 0 1-2-1.8L5 6"/></svg>{{ __('Delete') }}
                                </button>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-10">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><path d="M12 21s7-7.5 7-12a7 7 0 1 0-14 0c0 4.5 7 12 7 12Z"/><circle cx="12" cy="9" r="2.5"/></svg>
                    <h3 class="font-display font-bold text-lg mt-4">{{ __('staticwords.addressnot') }}</h3>
                    <button type="button" data-sh-modal-open="mngaddress" class="inline-block mt-4 bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2.5 rounded-full text-[13px]">{{ __('staticwords.AddNew') }}</button>
                </div>
            @endif
        </div>
    </div>
</section>

{{-- Add address modal --}}
<div id="mngaddress" class="sh-modal" role="dialog" aria-modal="true">
    <div class="sh-modal__backdrop" data-sh-close></div>
    <div class="sh-modal__panel max-w-2xl">
        <div class="flex items-center justify-between p-5 border-b border-slate-100">
            <span class="font-display font-extrabold text-lg">{{ __('staticwords.AddNew') }}</span>
            <button type="button" data-sh-close class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
        </div>
        <div class="p-5">
            <form action="{{ route('address.store') }}" method="POST" class="space-y-3">
                @csrf
                <div class="grid sm:grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Name') }} *</label>
                        <input required type="text" name="name" value="{{ $ifadd<1 ? Auth::user()->name : '' }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.PhoneNo') }} *</label>
                        <input required pattern="[0-9]+" type="text" name="phone" value="{{ $ifadd<1 ? Auth::user()->mobile : '' }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Email') }} *</label>
                    <input required type="email" name="email" value="{{ Auth::user()->email }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Address') }} *</label>
                    <textarea required name="address" rows="3" class="w-full px-3 py-2 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">{{ old('address') }}</textarea>
                </div>
                @if($pincodesystem == 1)
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('Zipcode') }}/{{ __('staticwords.Pincode') }} *</label>
                    <input pattern="[0-9]+" required value="{{ old('pin_code') }}" type="text" id="pincode" name="pin_code" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] tabular">
                </div>
                @endif
                <div class="grid sm:grid-cols-3 gap-3">
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Country') }} *</label>
                        <select required name="country_id" id="country_id" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white">
                            <option value="">{{ __('staticwords.PleaseChooseCountry') }}</option>
                            @foreach($country as $c)
                                @php $country_name = DB::table('allcountry')->where('iso3', $c->country)->first(); @endphp
                                @if($country_name)<option value="{{ $country_name->id }}">{{ $country_name->nicename }}</option>@endif
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.State') }} *</label>
                        <select required name="state_id" id="upload_id" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white">
                            <option value="">{{ __('staticwords.PleaseChooseState') }}</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.City') }} *</label>
                        <select required name="city_id" id="city_id" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white">
                            <option value="">{{ __('staticwords.PleaseChooseCity') }}</option>
                        </select>
                    </div>
                </div>
                <label class="flex items-center gap-2 text-[13px]"><input type="checkbox" name="setdef" class="w-4 h-4 rounded">{{ __('staticwords.SetDefaultAddress') }}</label>
                <button type="submit" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-2.5 rounded-lg flex items-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>{{ __('staticwords.ADD') }}
                </button>
            </form>
        </div>
    </div>
</div>

{{-- Edit & delete modals --}}
@foreach($user->addresses as $address)
    @php $findcon = App\Allcountry::find($address->country_id); @endphp
    <div id="editModal{{ $address->id }}" class="sh-modal" role="dialog" aria-modal="true">
        <div class="sh-modal__backdrop" data-sh-close></div>
        <div class="sh-modal__panel max-w-2xl">
            <div class="flex items-center justify-between p-5 border-b border-slate-100">
                <span class="font-display font-extrabold text-lg">{{ __('Edit Address') }}</span>
                <button type="button" data-sh-close class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
            </div>
            <div class="p-5">
                <form action="{{ route('address.update', $address->id) }}" method="POST" class="space-y-3">
                    @csrf
                    <div class="grid sm:grid-cols-2 gap-3">
                        <div>
                            <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Name') }} *</label>
                            <input required name="name" type="text" value="{{ $address->name }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                        </div>
                        <div>
                            <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Email') }} *</label>
                            <input type="email" name="email" value="{{ $address->email }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                        </div>
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.PhoneNo') }} *</label>
                        <input pattern="[0-9]+" type="text" name="phone" value="{{ $address->phone }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Address') }} *</label>
                        <textarea required name="address" rows="3" class="w-full px-3 py-2 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">{{ strip_tags($address->address) }}</textarea>
                    </div>
                    @if($pincodesystem == 1)
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Pincode') }} *</label>
                        <input pattern="[0-9]+" required value="{{ $address->pin_code }}" onkeyup="pincodetry('{{ $address->id }}')" type="text" id="pincode{{ $address->id }}" name="pin_code" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] tabular">
                    </div>
                    @endif
                    <div class="grid sm:grid-cols-3 gap-3">
                        <div>
                            <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Country') }} *</label>
                            <select required onchange="getstate('{{ $address->id }}')" name="country_id" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white" id="edit_country_id{{ $address->id }}">
                                <option value="">{{ __('staticwords.PleaseChooseCountry') }}</option>
                                @foreach($country as $c)
                                    @php $cn = DB::table('allcountry')->where('iso3', $c->country)->first(); @endphp
                                    @if($cn)<option value="{{ $cn->id }}" {{ $cn->id == $address->country_id ? 'selected' : '' }}>{{ $cn->nicename }}</option>@endif
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.State') }} *</label>
                            <select required onchange="getcity('{{ $address->id }}')" name="state_id" id="upload_id{{ $address->id }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white">
                                <option value="">{{ __('staticwords.PleaseChooseState') }}</option>
                                @if($findcon)
                                    @foreach($findcon->states as $state)
                                        <option value="{{ $state->id }}" {{ $state->id == $address->state_id ? 'selected' : '' }}>{{ $state->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div>
                            <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.City') }} *</label>
                            <select required name="city_id" id="city_id{{ $address->id }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white">
                                <option value="">{{ __('staticwords.PleaseChooseCity') }}</option>
                                @foreach(App\Allcity::where('state_id', $address->state_id)->get() as $cit)
                                    <option value="{{ $cit->id }}" {{ $cit->id == $address->city_id ? 'selected' : '' }}>{{ $cit->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <label class="flex items-center gap-2 text-[13px]"><input type="checkbox" name="setdef" class="w-4 h-4 rounded" {{ $address->defaddress == 1 ? 'checked' : '' }}>{{ __('staticwords.SetDefaultAddress') }}</label>
                    <button type="submit" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-2.5 rounded-lg flex items-center gap-2">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>{{ __('staticwords.Update') }}
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div id="deletemodal{{ $address->id }}" class="sh-modal" role="dialog" aria-modal="true">
        <div class="sh-modal__backdrop" data-sh-close></div>
        <div class="sh-modal__panel max-w-md">
            <div class="p-6 text-center">
                <div class="w-16 h-16 rounded-full mx-auto bg-rose-50 grid place-items-center text-rose-500 mb-3">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1.5 14a2 2 0 0 1-2 1.8h-7a2 2 0 0 1-2-1.8L5 6"/></svg>
                </div>
                <h3 class="font-display font-extrabold text-xl">{{ __('Are You Sure ?') }}</h3>
                <p class="text-[13px] text-slate-500 mt-1.5">{{ __('Do you really want to delete this address? This process cannot be undone') }}.</p>
                <form method="POST" action="{{ route('address.del', $address->id) }}" class="flex items-center gap-2 justify-center mt-5">
                    @csrf
                    @method("DELETE")
                    <button type="button" data-sh-close class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-5 py-2 rounded-lg">{{ __('No') }}</button>
                    <button type="submit" class="bg-rose-500 hover:bg-rose-600 text-white font-bold px-5 py-2 rounded-lg">{{ __('Yes') }}, {{ __('Delete') }}</button>
                </form>
            </div>
        </div>
    </div>
@endforeach

@include('front.partials.change-password-modal')
@endsection

@section('script')
<script>
    var baseUrl = "