@extends('layouts.app')
@section('content')
    <section class="relative about-banner">
        <div
            class="bannerInner bg-gradient-to-t from-[#AABF86] from-[-60%] to-80% to-[#F4FFE1] md:px-20 md:pt-[8rem] md:pb-[8rem] w-[90%] mx-auto rounded-3xl">
            <div class="container">
                <div class="md:flex md:items-center md:justify-center">
                    <h1 class="text-3xl md:text-6xl text-black font-extrabold relative max-[991px]:text-center">
                        Account Settings
                    </h1>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container mx-auto px-4 py-8">
            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-3">
                    @include('user.include.sidebar')
                </div>
                <div class="col-span-9">
                    <!-- Success/Error Messages -->
                    @if(session('success'))
                        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                            {{ session('error') }}
                        </div>
                    @endif

                    <!-- Account Information Section -->
                    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                        <h2 class="text-2xl font-bold mb-4">Account Information</h2>
                        <form action="{{ route('user.accountupdate') }}" method="POST" class="grid grid-cols-2 gap-5"
                            enctype="multipart/form-data">
                            @csrf
                            <div>
                                <label for="name" class="block font-medium text-md mb-1">Name</label>
                                <input type="text" id="name" name="name" placeholder="Name"
                                    value="{{ Auth::user()->name }}" readonly
                                    class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm mb-4"
                                    required />
                            </div>
                            <div>
                                <label for="email" class="block font-medium text-md mb-1">Email</label>
                                <input type="email" id="email" name="email" placeholder="Email"
                                    value="{{ Auth::user()->email }}" readonly
                                    class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm mb-4"
                                    required />
                            </div>
                            <div>
                                <label for="password" class="block font-medium text-md mb-1">Change Password</label>
                                <input type="password" id="password" name="password" placeholder="New Password"
                                    class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm mb-4" />
                            </div>
                            <div>
                                <label for="password_confirmation" class="block font-medium text-md mb-1">Confirm Password</label>
                                <input type="password" id="password_confirmation" name="password_confirmation"
                                    placeholder="Confirm New Password"
                                    class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm mb-4" />
                            </div>
                            <div class="col-span-2">
                                <label for="image" class="block font-medium text-md mb-1">Change Profile Picture</label>
                                <input type="file" class="dropify" name="image"
                                    {{ Auth::user()->image != null ? 'data-default-file = ' . asset(Auth::user()->image) : '' }}>
                            </div>
                            <div class="col-span-2">
                                <button type="submit"
                                    class="group px-4 py-2 border-solid border rounded-full border-secondary text-white bg-secondary inline-flex items-center justify-center gap-2 hover:bg-primary hover:text-black transition-all mt-5">
                                    Update Account
                                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="13.5256" cy="14.3455" r="13.5256" fill="#FFDD0F"></circle>
                                        <path d="M8.66016 13.8455C8.38401 13.8455 8.16016 14.0693 8.16016 14.3455C8.16016 14.6216 8.38401 14.8455 8.66016 14.8455V13.8455ZM18.7443 14.699C18.9396 14.5038 18.9396 14.1872 18.7443 13.9919L15.5623 10.8099C15.3671 10.6147 15.0505 10.6147 14.8552 10.8099C14.66 11.0052 14.66 11.3218 14.8552 11.517L17.6837 14.3455L14.8552 17.1739C14.66 17.3691 14.66 17.6857 14.8552 17.881C15.0505 18.0763 15.3671 18.0763 15.5623 17.881L18.7443 14.699ZM8.66016 14.8455H18.3908V13.8455H8.66016V14.8455Z" fill="black"></path>
                                    </svg>
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Address Management Section -->
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-2xl font-bold">Address Management </h2>
                            <a href="{{ route('user.addresses.create') }}" 
                               class="group px-4 py-2 border-solid border rounded-full border-secondary text-white bg-secondary inline-flex items-center justify-center gap-2 hover:bg-primary hover:text-black transition-all mt-5">
                                Add New Address
                            </a>
                        </div>

                        <!-- Default Addresses Display -->
                        @if($defaultBilling || $defaultShipping)
                            <div class="mb-6">
                                <h3 class="text-lg font-semibold mb-3">Default Addresses</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    @if($defaultBilling)
                                        <div class="border border-gray-200 rounded-lg p-4 bg-blue-50">
                                            <div class="flex justify-between items-start mb-2">
                                                <h4 class="font-semibold text-blue-800">Default Billing Address</h4>
                                                <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Default</span>
                                            </div>
                                            <p class="text-sm text-gray-700">{{ $defaultBilling->full_name }}</p>
                                            <p class="text-sm text-gray-700">{{ $defaultBilling->full_address }}</p>
                                            <p class="text-sm text-gray-700">{{ $defaultBilling->phone }}</p>
                                            <div class="mt-2">
                                                <a href="{{ route('user.addresses.edit', $defaultBilling->id) }}" 
                                                   class="text-blue-600 hover:text-blue-800 text-sm mr-3">Edit</a>
                                                <a href="{{ route('user.addresses.delete', $defaultBilling->id) }}" 
                                                   class="text-red-600 hover:text-red-800 text-sm"
                                                   onclick="return confirm('Are you sure you want to delete this address?')">Delete</a>
                                            </div>
                                        </div>
                                    @endif

                                    @if($defaultShipping)
                                        <div class="border border-gray-200 rounded-lg p-4 bg-green-50">
                                            <div class="flex justify-between items-start mb-2">
                                                <h4 class="font-semibold text-green-800">Default Shipping Address</h4>
                                                <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Default</span>
                                            </div>
                                            <p class="text-sm text-gray-700">{{ $defaultShipping->full_name }}</p>
                                            <p class="text-sm text-gray-700">{{ $defaultShipping->full_address }}</p>
                                            <p class="text-sm text-gray-700">{{ $defaultShipping->phone }}</p>
                                            <div class="mt-2">
                                                <a href="{{ route('user.addresses.edit', $defaultShipping->id) }}" 
                                                   class="text-blue-600 hover:text-blue-800 text-sm mr-3">Edit</a>
                                                <a href="{{ route('user.addresses.delete', $defaultShipping->id) }}" 
                                                   class="text-red-600 hover:text-red-800 text-sm"
                                                   onclick="return confirm('Are you sure you want to delete this address?')">Delete</a>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endif

                        <!-- All Addresses List -->
                        @if($addresses->count() > 0)
                            <div>
                                <h3 class="text-lg font-semibold mb-3">All Addresses</h3>
                                <div class="space-y-4">
                                    @foreach($addresses as $address)
                                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                            <div class="flex justify-between items-start">
                                                <div class="flex-1">
                                                    <div class="flex items-center gap-2 mb-2">
                                                        <h4 class="font-semibold">{{ $address->full_name }}</h4>
                                                        @if($address->is_default)
                                                            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Default {{ ucfirst($address->type) }}</span>
                                                        @endif
                                                        <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">{{ ucfirst($address->type) }}</span>
                                                    </div>
                                                    <p class="text-sm text-gray-700 mb-1">{{ $address->full_address }}</p>
                                                    @if($address->phone)
                                                        <p class="text-sm text-gray-700 mb-1">Phone: {{ $address->phone }}</p>
                                                    @endif
                                                    @if($address->email)
                                                        <p class="text-sm text-gray-700">Email: {{ $address->email }}</p>
                                                    @endif
                                                </div>
                                                <div class="flex flex-col gap-2 ml-4">
                                                    <a href="{{ route('user.addresses.edit', $address->id) }}" 
                                                       class="bg-blue-500 hover:bg-blue-700 text-white text-xs px-3 py-1 rounded">Edit</a>
                                                    @if(!$address->is_default)
                                                        <a href="{{ route('user.addresses.set-default', $address->id) }}" 
                                                           class="bg-green-500 hover:bg-green-700 text-white text-xs px-3 py-1 rounded">Set Default</a>
                                                    @endif
                                                    <a href="{{ route('user.addresses.delete', $address->id) }}" 
                                                       class="bg-red-500 hover:bg-red-700 text-white text-xs px-3 py-1 rounded"
                                                       onclick="return confirm('Are you sure you want to delete this address?')">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <div class="text-center py-8">
                                <p class="text-gray-500 mb-4">You haven't added any addresses yet.</p>
                                <a href="{{ route('user.addresses.create') }}" 
                                   class="group px-4 py-2 border-solid border rounded-full border-secondary text-white bg-secondary inline-flex items-center justify-center gap-2 hover:bg-primary hover:text-black transition-all">
                                    Add Your First Address
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css"
        integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"
        integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(document).ready(function() {
            $('.dropify').dropify();
        });
    </script>
@endpush