@extends('LandingPage.Layouts.master')



@section('content')
<div class="breadcrumb-block style-shared">
    <div class="breadcrumb-main bg-linear overflow-hidden">
        <div class="container lg:pt-[134px] pt-24 pb-10 relative">
            <div class="main-content w-full h-full flex flex-col items-center justify-center relative z-[1]">
                <div class="text-content">
                    <div class="heading2 text-center">{{translate('My Account')}}</div>
                    <div class="link flex items-center justify-center gap-1 caption1 mt-3">
                        <a href='{{route('Landing.index')}}'>{{translate('Homepage')}}</a>
                        <i class="ph ph-caret-right text-sm text-secondary2"></i>
                        <div class='text-secondary2 capitalize'>{{translate('My Account')}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .flip-card {
        background-color: transparent;
        width: 300px;
        height: 300px;
        perspective: 1000px;
        margin-bottom: 16px;
    }

    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }

    .flip-card-front,
    .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .flip-card-front {
        background-color: #e7e9e2;
        color: #000000;
    }

    .flip-card-back {
        background-color: #dff5a7;
        color: white;
        transform: rotateY(180deg);
    }

</style>
@if (session('success'))
<script>
    Swal.fire({
        icon: 'success'
        , title: 'Success'
        , text: "{{ session('success') }}"
    , });

</script>
@endif

@if (session('error'))
<script>
    Swal.fire({
        icon: 'error'
        , title: 'error'
        , text: "{{ session('error') }}"
    , });

</script>
@endif
@php
$currentUser = auth()->guard('web')->user();
@endphp
<div class="my-account-block md:py-20 py-10">
    <div class="container">
        <div class="content-main lg:px-[60px] md:px-4 flex gap-y-8 max-md:flex-col w-full">
            <!--  Side menu -->
            <div class="left xl:w-1/3 md:w-5/12 w-full xl:pr-[40px] lg:pr-[28px] md:pr-[16px]">
                <div class="user-infor bg-surface md:px-8 px-5 md:py-10 py-6 md:rounded-[20px] rounded-xl">
                    <div class="heading flex flex-col items-center justify-center">
                        <div class="relative w-[140px] h-[140px]">
                            <div class="avatar">
                                @if ($currentUser && $currentUser->avatar_original)
                                <img src="{{ asset($currentUser->avatar_original) }}" alt="avatar" class="md:w-[140px] w-[120px] md:h-[140px] h-[120px] rounded-full" />
                                @endif
                            </div>

                            <div class="absolute bottom-0 right-0 mb-2 mr-2 bg-white p-2 rounded-full shadow-md cursor-pointer" onclick="document.getElementById('avatarInput').click();">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="25" width="25" version="1.1" id="Capa_1" viewBox="0 0 498.217 498.217" xml:space="preserve">
                                    <g>
                                        <g>
                                            <g>
                                                <polygon style="fill:#010002;" points="343.481,292.295 249.108,197.931 154.744,292.295 173.895,311.454 235.558,249.783      235.558,433.57 262.659,433.57 262.659,249.791 324.314,311.438    " />
                                            </g>
                                            <g>
                                                <path style="fill:#010002;" d="M393.732,156.044c-4.487,0-9.015,0.293-13.526,0.878c-22.923-33.555-64.663-51.608-105.436-44.106     c-19.2-29.873-52.372-48.17-88.13-48.17c-54.063,0-98.526,40.651-104.208,93.812C34.246,168.79,0,210.782,0,260.895     c0,57.819,47.04,104.85,104.85,104.85h104.712v-26.873H104.85c-43,0-77.986-34.985-77.986-77.986     c0-40.049,30.003-73.385,69.776-77.538l12.022-2.723v-11.144c0-43,34.977-77.977,77.977-77.977     c29.466,0,56.087,16.379,69.491,42.748l5.032,9.917l10.681-3.097c35.319-10.234,72.686,5.958,89.943,37.123l4.861,8.763     l9.795-2.154c5.731-1.268,11.526-1.91,17.257-1.91c42.821,0,77.644,34.985,77.644,77.977c0,43-34.985,77.986-77.986,77.986     H287.93v26.873h105.436c57.81,0,104.85-47.032,104.85-104.85C498.217,203.084,451.347,156.044,393.732,156.044z" />
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </div>

                            <input type="file" id="avatarInput" hidden accept="image/*" onchange="updateAvatar(event)">
                        </div>

                        <br>

                        <div class="name heading6 mt-4 text-center">{{ Auth::user()->name }}</div>
                        <div class="mail heading6 font-normal normal-case text-center mt-1">{{ Auth::user()->email }}</div>
                    </div>
                    <div class="menu-tab lg:mt-10 mt-6">
                        <div class="item tab-item px-5 py-4 flex items-center gap-3 cursor-pointer active" data-tab="dashboard">
                            <i class="ph-bold ph-gauge text-xl"></i>

                            <div class="heading6">{{translate('Dashboard')}}</div>
                        </div>

                        <div class="item tab-item px-5 py-4 flex items-center gap-3 cursor-pointer " data-tab="account">
                            <i class="ph-bold ph-user text-xl"></i>
                            <div class="heading6">{{translate('Account Details')}}</div>
                        </div>
                        <div class="item tab-item px-5 py-4 flex items-center gap-3 cursor-pointer mt-2" data-tab="orders">
                            <i class="ph-bold ph-bag text-xl"></i>
                            <div class="heading6">{{translate('Your Orders')}}</div>
                        </div>
                        <div class="item tab-item px-5 py-4 flex items-center gap-3 cursor-pointer mt-2" data-tab="address">
                            <i class="ph-bold ph-map-pin text-xl"></i>
                            <div class="heading6">{{translate('My Address')}}</div>
                        </div>
                        <form id="logout-form" action="{{ route('landing.logout') }}" method="POST" class="w-full">
                            @csrf
                            <div class="item px-5 py-4 flex items-center gap-3 cursor-pointer mt-2" onclick="document.getElementById('logout-form').submit();">
                                <i class="ph-bold ph-sign-out text-xl"></i>
                                <div class="heading6">{{ translate('Logout') }}</div>
                            </div>
                        </form>

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

            <!--  Tabs content -->
            <div class="right xl:w-2/3 md:w-7/12 w-full xl:pl-[40px] lg:pl-[28px] md:pl-[16px] flex items-center">
                <div class="text-content w-full">

                    <!-- Dashbaord  -->
                    <div class="tab-content active " id="dashboard">
                        <h2 class="heading5 pb-4">Recent Orders</h2>
                        <div class="">
                            <div class="tab text-content w-full block">
                                <div class="overview grid sm:grid-cols-3 gap-5">
                                    <div class="item flex items-center justify-between p-5 border border-line rounded-lg box-shadow-xs">
                                        <div class="counter"><span class="text-secondary">Awaiting Pickup</span>
                                            <h5 class="heading5 mt-1">4</h5>
                                        </div><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="text-4xl">
                                            <path d="M200,75.64V40a16,16,0,0,0-16-16H72A16,16,0,0,0,56,40V76a16.07,16.07,0,0,0,6.4,12.8L114.67,128,62.4,167.2A16.07,16.07,0,0,0,56,180v36a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V180.36a16.09,16.09,0,0,0-6.35-12.77L141.27,128l52.38-39.6A16.05,16.05,0,0,0,200,75.64ZM72,40H184V75.64L178.23,80H77.33L72,76Zm56,78L98.67,96h58.4Zm56,98H72V180l48-36v24a8,8,0,0,0,16,0V144.08l48,36.28Z"></path>
                                        </svg>
                                    </div>
                                    <div class="item flex items-center justify-between p-5 border border-line rounded-lg box-shadow-xs">
                                        <div class="counter"><span class="text-secondary">Cancelled Orders</span>
                                            <h5 class="heading5 mt-1">12</h5>
                                        </div><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="text-4xl">
                                            <path d="M216,40H40A16,16,0,0,0,24,56V208a8,8,0,0,0,11.58,7.15L64,200.94l28.42,14.21a8,8,0,0,0,7.16,0L128,200.94l28.42,14.21a8,8,0,0,0,7.16,0L192,200.94l28.42,14.21A8,8,0,0,0,232,208V56A16,16,0,0,0,216,40Zm0,155.06-20.42-10.22a8,8,0,0,0-7.16,0L160,199.06l-28.42-14.22a8,8,0,0,0-7.16,0L96,199.06,67.58,184.84a8,8,0,0,0-7.16,0L40,195.06V56H216ZM98.34,138.34,116.69,120,98.34,101.66a8,8,0,0,1,11.32-11.32L128,108.69l18.34-18.35a8,8,0,0,1,11.32,11.32L139.31,120l18.35,18.34a8,8,0,0,1-11.32,11.32L128,131.31l-18.34,18.35a8,8,0,0,1-11.32-11.32Z"></path>
                                        </svg>
                                    </div>
                                    <div class="item flex items-center justify-between p-5 border border-line rounded-lg box-shadow-xs">
                                        <div class="counter"><span class="text-secondary">Total Number of Orders</span>
                                            <h5 class="heading5 mt-1">200</h5>
                                        </div><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="text-4xl">
                                            <path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44-29.77,16.3-80.35-44ZM128,120,47.66,76l33.9-18.56,80.34,44ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l32-17.51V152a8,8,0,0,0,16,0V107.55L216,90v85.77Z"></path>
                                        </svg>
                                    </div>
                                </div>
                                <div class="recent_order pt-5 px-5 pb-2 mt-7 border border-line rounded-xl">
                                    <h6 class="heading6">Recent Orders</h6>
                                    <div class="list overflow-x-auto w-full mt-5">
                                        <table class="w-full max-[1400px]:w-[700px] max-md:w-[700px]">
                                            <thead class="border-b border-line">
                                                <tr>
                                                    <th scope="col" class="pb-3 text-left text-sm font-bold uppercase text-secondary whitespace-nowrap">Order</th>
                                                    <th scope="col" class="pb-3 text-left text-sm font-bold uppercase text-secondary whitespace-nowrap">Products</th>
                                                    <th scope="col" class="pb-3 text-left text-sm font-bold uppercase text-secondary whitespace-nowrap">Pricing</th>
                                                    <th scope="col" class="pb-3 text-right text-sm font-bold uppercase text-secondary whitespace-nowrap">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="item duration-300 border-b border-line">
                                                    <th scope="row" class="py-3 text-left"><strong class="text-title">54312452</strong></th>
                                                    <td class="py-3"><a class="product flex items-center gap-3" href="/product/default">
                                                            <img alt="Contrasting sweatshirt" loading="lazy" width="400" height="400" decoding="async" data-nimg="1" class="flex-shrink-0 w-12 h-12 rounded" src="{{asset('landing/assets/images/avatar/2.png')}}" style="color: transparent;">
                                                            <div class="info flex flex-col"><strong class="product_name text-button">Contrasting sweatshirt</strong><span class="product_tag caption1 text-secondary">Women, Clothing</span></div>
                                                        </a></td>
                                                    <td class="py-3 price">$45.00</td>
                                                    <td class="py-3 text-right"><span class="tag px-4 py-1.5 rounded-full bg-opacity-10 bg-yellow text-white caption1 font-semibold">Pending</span></td>
                                                </tr>
                                                <tr class="item duration-300 border-b border-line">
                                                    <th scope="row" class="py-3 text-left"><strong class="text-title">54312452</strong></th>
                                                    <td class="py-3"><a class="product flex items-center gap-3" href="/product/default">
                                                            <img alt="Faux-leather trousers" loading="lazy" width="400" height="400" decoding="async" data-nimg="1" class="flex-shrink-0 w-12 h-12 rounded" src="{{asset('landing/assets/images/avatar/2.png')}}">
                                                            <div class="info flex flex-col"><strong class="product_name text-button">Faux-leather trousers</strong><span class="product_tag caption1 text-secondary">Women, Clothing</span></div>
                                                        </a></td>
                                                    <td class="py-3 price">$45.00</td>
                                                    <td class="py-3 text-right"><span class="tag px-4 py-1.5 rounded-full bg-opacity-10 bg-purple text-white caption1 font-semibold">Delivery</span></td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>



                        </div>

                    </div>



                    <!-- Information  -->
                    <div class="tab-content hidden" id="account">
                        <form method="POST" action="{{ route('landing.account.update') }}">
                            @csrf
                            <div class="heading5 pb-4">{{ translate('Information') }}</div>
                            <div class='grid sm:grid-cols-2 gap-4 gap-y-5'>
                                <div class="name">
                                    <input class="border-line px-4 pt-3 pb-3 w-full rounded-lg" id="firstName" name="name" type="text" placeholder="Full Name" value="{{ $user->name }}" />
                                </div>

                                <div class="email">
                                    <input class="border-line px-4 pt-3 pb-3 w-full rounded-lg" id="email" name="email" type="email" placeholder="Email address" value="{{ $user->email }}" />
                                    @error('email')
                                    <div class="text-red-600">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="phone-number">
                                    <input class="border-line px-4 pt-3 pb-3 w-full rounded-lg" id="phoneNumber" name="phone" type="text" placeholder="Phone number" value="{{ $user->phone}}" />
                                </div>

                                <div class="birthday">
                                    <input name="birthday" class="border-line px-4 pt-3 pb-3 w-full rounded-lg" id="birthday" type="date" placeholder="Birthday" value="{{ $user->birthday }}" />
                                </div>
                            </div>

                            <div class="block-button lg:mt-10 mt-6">
                                <button class="button-main">{{translate('Update Account')}}</button>
                            </div>


                        </form>






                        <div class="heading5 pb-4 lg:mt-10 mt-6">{{translate('Change Password')}}</div>

                        <form action="{{ route('landing.update-password') }}" method="POST">
                            @csrf
                            <div class="pass">
                                <input class="border-line px-4 pt-3 pb-3 w-full rounded-lg" id="password" type="password" name="current_password" placeholder="Current Password *" required />
                                @error('current_password')
                                <div class="text-red-600">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="new-pass mt-5">
                                <input class="border-line px-4 pt-3 pb-3 w-full rounded-lg" id="newPassword" type="password" name="new_password" placeholder="New Password *" required />
                                @error('new_password')
                                <div class="text-red-600">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="confirm-pass mt-5">
                                <input class="border-line px-4 pt-3 pb-3 w-full rounded-lg" id="confirmPassword" type="password" name="new_password_confirmation" placeholder="Confirm New Password *" required />
                                @error('new_password_confirmation')
                                <div class="text-red-600">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="block-button lg:mt-10 mt-6">
                                <button class="button-main">{{translate('Update Password')}}</button>
                            </div>
                        </form>

                    </div>



                    <!-- Order -->
                    <div class="tab-content hidden" id="orders">
                        <h2 class="heading5 pb-4">Your Orders</h2>
                        <div class="">

                            <div class="tab text-content overflow-hidden w-full p-7 border border-line rounded-xl block">


                                <div class="list_order">

                                    <div class="order_item mt-5 border border-line rounded-lg box-shadow-xs">
                                        <div class="flex flex-wrap items-center justify-between gap-4 p-5 border-b border-line">
                                            <div class="flex items-center gap-2"><strong class="text-title">Order Number:</strong><strong class="order_number text-button uppercase">s184989824</strong></div>
                                            <div class="flex items-center gap-2"><strong class="text-title">Order status:</strong><span class="tag px-4 py-1.5 rounded-full bg-opacity-10 bg-red text-white caption1 font-semibold">Canceled</span></div>
                                        </div>
                                        <div class="list_prd px-5">
                                            <div class="prd_item flex flex-wrap items-center justify-between gap-3 py-5 border-b border-line"><a class="flex items-center gap-5" href="/product/default">
                                                    <div class="bg-img flex-shrink-0 md:w-[100px] w-20 aspect-square rounded-lg overflow-hidden"><img alt="Contrasting sheepskin sweatshirt" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full h-full object-cover" src="{{asset('landing/assets/images/banner/12.png')}}"></div>
                                                    <div>
                                                        <div class="prd_name text-title">Contrasting sheepskin sweatshirt</div>
                                                        <div class="caption1 text-secondary mt-2">
                                                            <span class="prd_size uppercase">M</span><span>/</span>
                                                            <span class="prd_color capitalize">Black</span></div>
                                                    </div>
                                                </a>
                                                <div class="text-title"><span class="prd_quantity">1</span><span> X </span>
                                                    <span class="prd_price">$49.00</span></div>
                                            </div>
                                        </div>
                                        <div class="flex flex-wrap gap-4 p-5">
                                            <button class="button-main order-details-btn">Order Details</button>

                                            <button class="button-main bg-surface border border-line hover:bg-black
                                             text-black hover:text-white">Cancel Order</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>


                    @php
                    use App\Models\Country;
                    $countries = Country::where('status', 1)->get();
                    @endphp

                    <!-- Address -->
                    <div class="tab-content hidden" id="address">
                        <h2 class="heading5 pb-4">{{translate('My Address')}}</h2>

                        <div class="filter-item tab_address text-content w-full p-7 border border-line rounded-xl active">
                            <form action="{{ route('landing.addresses.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ auth()->id() }}">

                                <strong class="heading6">Billing address</strong>

                                <div class="form_address active" data-item="billing">
                                    <div class="grid sm:grid-cols-2 gap-4 gap-y-5 mt-5">

                                        <div class="first-name">
                                            <label for="address_name" class="caption1 capitalize">Address Name<span class="text-red">*</span></label>
                                            <input name="address_name" class="border-line mt-2 px-4 py-3 w-full rounded-lg" id="address_name" type="text">
                                        </div>


                                        <div class="first-name">
                                            <label for="address" class="caption1 capitalize">Address <span class="text-red">*</span></label>
                                            <input name="address" class="border-line mt-2 px-4 py-3 w-full rounded-lg" id="address" type="text">
                                        </div>


                                        <select name="country_id" id="country" class="border border-gray-300 mt-2 px-4 py-3 w-full rounded-lg bg-white text-gray-700 focus:ring focus:ring-blue-300 focus:outline-none">
                                            <option value="">Select Country</option>
                                            @foreach($countries as $country)
                                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                                            @endforeach
                                        </select>



                                        <select name="state_id" id="state" class="border border-gray-300 mt-2 px-4 py-3 w-full rounded-lg bg-white text-gray-700 focus:ring focus:ring-blue-300 focus:outline-none">
                                            <option value="">Select State</option>
                                        </select>

                                        <select name="city_id" id="city" class="border border-gray-300 mt-2 px-4 py-3 w-full rounded-lg bg-white text-gray-700 focus:ring focus:ring-blue-300 focus:outline-none">
                                            <option value="">Select City</option>
                                        </select>







                                        <div class="zip">
                                            <label for="billingZip" class="caption1 capitalize">Postal Code <span class="text-red">*</span></label>
                                            <input name="postal_code" class="border-line mt-2 px-4 py-3 w-full rounded-lg" id="billingZip" type="text" required="">
                                        </div>
                                        <div class="phone">
                                            <label for="billingPhone" class="caption1 capitalize">Phone <span class="text-red">*</span></label>
                                            <input name="phone" class="border-line mt-2 px-4 py-3 w-full rounded-lg" id="billingPhone" type="text" required="">
                                        </div>

                                    </div>
                                </div>


                                <div class="block-button lg:mt-10 mt-6">
                                    <button type="submit" class="button-main bg-black">Add Address</button>
                                </div>
                            </form>

                            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 ">
                                @foreach($addresses as $address)
                                <div class="flip-card bg-white p-4 rounded-lg shadow-lg mx-2 my-2 relative">
                                    <div class="flip-card-inner">
                                        <div class="flip-card-front bg-gray-100 p-4 rounded-lg">
                                            <h2 class="text-xl font-semibold text-gray-800">
                                                <strong class="text-gray-600">{{ translate('Name') }}:</strong> {{ $address->address_name ?? 'Not available' }}
                                            </h2>
                                            <h3 class="text-lg text-gray-600">
                                                <strong class="text-gray-600">{{ translate('Address') }}:</strong> {{ $address->address ?? 'Not available' }}
                                            </h3>
                                            <p class="text-md text-gray-700">
                                                <strong class="text-gray-600">{{ translate('City') }}:</strong> {{ $address->city->name ?? 'Not available' }}
                                            </p>
                                            <p class="text-md text-gray-700">
                                                <strong class="text-gray-600">{{ translate('State') }}:</strong> {{ $address->state->name ?? 'Not available' }}
                                            </p>
                                            <p class="text-md text-gray-700">
                                                <strong class="text-gray-600">{{ translate('Country') }}:</strong> {{ $address->country->name ?? 'Not available' }}
                                            </p>
                                            <p class="text-md text-gray-700">
                                                <strong class="text-gray-600">{{ translate('Postal Code') }}:</strong> {{ $address->postal_code ?? 'Not available' }}
                                            </p>
                                            <p class="text-md text-gray-700">
                                                <strong class="text-gray-600">{{ translate('Phone') }}:</strong> {{ $address->phone ?? 'Not available' }}
                                            </p>

                                            {{-- @if(!$hasDefault) --}}
                                            <form method="POST" action="{{ route('landing.address.set-default', $address->id) }}">
                                                @csrf
                                                <button type="submit" class="button-main mt-4 {{ $address->set_default ? 'bg-black' : 'bg-black' }}" {{ $address->set_default ? 'disabled' : '' }}>
                                                    {{ $address->set_default ? 'Default' : translate('Mark Default') }}
                                                </button>
                                            </form>


                                            {{-- @endif --}}

                                            @if($addresses->count() > 1)
                                            <form method="POST" action="{{ route('landing.address.delete', $address->id) }}">
                                                @csrf
                                                @method('DELETE')
                                                <button style="background-color: red;color: white" type="submit" class="button-main bg-red-600 mt-4">{{ translate('Delete') }}</button>
                                            </form>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach

                            </div>


                        </div>







                    </div>



                </div>



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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<script>
    function updateAvatar(event) {
        const file = event.target.files[0];
        if (file) {
            const formData = new FormData();
            formData.append('avatar', file);

            fetch("{{ route('landing.update.avatar') }}", {
                    method: 'POST'
                    , headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    , }
                    , body: formData
                , })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.querySelector('.avatar img').src = data.avatar_url;

                        Swal.fire({
                            icon: 'success'
                            , title: 'Update Phont Successfully!'
                            , showConfirmButton: false
                            , timer: 1500
                        });
                    } else {
                        Swal.fire({
                            icon: 'error'
                            , title: 'error'
                            , text: data.message
                        , });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    }


    $(document).ready(function() {
        $('#country').change(function() {
            var country_id = $(this).val();
            $('#state').html('<option value="">Loading...</option>');
            $('#city').html('<option value="">Select City</option>');
            if (country_id) {
                $.ajax({
                    url: '/get-states/' + country_id
                    , type: 'GET'
                    , success: function(data) {
                        $('#state').html('<option value="">Select State</option>');
                        $.each(data, function(key, value) {
                            $('#state').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    }
                });
            } else {
                $('#state').html('<option value="">Select State</option>');
            }
        });

        $('#state').change(function() {
            var state_id = $(this).val();
            $('#city').html('<option value="">Loading...</option>');
            if (state_id) {
                $.ajax({
                    url: '/get-cities/' + state_id
                    , type: 'GET'
                    , success: function(data) {
                        $('#city').html('<option value="">Select City</option>');
                        $.each(data, function(key, value) {
                            $('#city').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    }
                });
            } else {
                $('#city').html('<option value="">Select City</option>');
            }
        });
    });



    document.addEventListener("DOMContentLoaded", function() {
        const tabs = document.querySelectorAll(".tab-item");
        const contents = document.querySelectorAll(".tab-content");

        tabs.forEach(tab => {
            tab.addEventListener("click", function() {
                const target = this.getAttribute("data-tab");

                tabs.forEach(t => t.classList.remove("active"));
                contents.forEach(c => c.classList.add("hidden"));

                this.classList.add("active");
                document.getElementById(target).classList.remove("hidden");
            });
        });
    });

</script>

<style>
    .tab-item.active {
        background-color: #f3f3f3;
        border-radius: 10px;
    }

    .tab-content.hidden {
        display: none;
    }

</style>



@endsection