@extends('ecommerce::frontend.layout.main2')

@section('title') {{ $ecommerce_setting->site_title ?? 'My Addresses' }} @endsection

@section('description') {{ $ecommerce_setting->site_description ?? '' }} @endsection

@section('content')
<style>
    /* Professional Form Styles */
    .form-group-custom {
        margin-bottom: 24px;
    }
    
    .form-label-custom {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #444;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    
    .form-label-custom span.required {
        color: #c8102e;
        margin-left: 2px;
    }

    .form-input-professional {
        width: 100%;
        height: 50px; /* Fixed height for uniformity */
        padding: 0 18px;
        background-color: #fcfcfc;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        font-size: 15px;
        color: #333;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
        font-family: inherit;
    }

    .form-input-professional::placeholder {
        color: #aaa;
        font-weight: 400;
    }

    .form-input-professional:focus {
        background-color: #ffffff;
        border-color: #c8102e;
        box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.1), inset 0 1px 2px rgba(0,0,0,0.05);
        outline: none;
    }
    
    /* Button Styling */
    .btn-submit-professional {
        display: inline-block;
        background-color: #c8102e;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 14px 32px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(200, 16, 46, 0.2);
    }
    .btn-submit-professional:hover {
        background-color: #a00b24;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(200, 16, 46, 0.3);
        color: #fff;
    }

    /* Address Card Styling (Refined) */
    .address-card {
        background: #ffffff;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 30px;
        height: 100%;
        transition: all 0.3s ease;
        position: relative;
    }
    .address-card:hover {
        box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        border-color: #ddd;
    }
    .address-card.default-address {
        border: 2px solid #c8102e;
        background-color: #fffbfb;
    }
    .address-card.default-address::after {
        content: 'DEFAULT';
        position: absolute;
        top: 0;
        right: 0;
        background: #c8102e;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 4px 12px;
        border-bottom-left-radius: 8px;
        letter-spacing: 1px;
    }

    .address-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
    }
    .address-title {
        font-size: 16px;
        font-weight: 700;
        color: #222;
        margin: 0;
    }
    .address-body p {
        margin-bottom: 6px;
        color: #666;
        font-size: 14px;
        line-height: 1.6;
    }

    /* Action Icons */
    .address-actions .btn-icon {
        background: none;
        border: none;
        color: #bbb;
        cursor: pointer;
        transition: color 0.3s;
        margin-left: 10px;
        font-size: 18px;
        padding: 5px;
    }
    .address-actions .btn-icon:hover {
        color: #c8102e;
        background-color: #fff0f1;
        border-radius: 50%;
    }
    .address-actions .btn-icon.active {
        color: #c8102e; /* Heart filled */
    }
     .sidebar-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sidebar-menu-list li {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .sidebar-menu-list li:last-child {
        border-bottom: none;
    }
    .sidebar-menu-list a {
        color: #555;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        transition: color 0.3s;
    }
    .sidebar-menu-list a:hover, .sidebar-menu-list a.active {
        color: #c8102e;
        padding-left: 5px;
    }
</style>

<!-- Breadcrumb Area -->
<div style="padding-top:50px;" class="tf-page-title flat-spacing pb-0">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="text-start">
                    <h1 class="text-display fw-medium">{{trans('file.My Addresses')}}</h1>
                    <ul class="breadcrumb-list d-flex align-items-center">
                        <li><a href="{{url('/')}}" class="link">{{trans('file.Home')}}</a></li>
                        <li class="separator mx-2">/</li>
                        <li><a href="{{url('customer/profile')}}" class="link">{{trans('file.dashboard')}}</a></li>
                        <li class="separator mx-2">/</li>
                        <li class="active text-main fw-medium">{{trans('file.My Addresses')}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<section style="padding-top:50px;" class="flat-spacing">
    <div class="container">
        <div class="row">
            
            <!-- Sidebar -->
            <div class="col-lg-3 col-md-4 mb-md-0 mb-4">
                <div class="sidebar-wrapper">
                    <div class="widget-account-nav">
                        <h3 class="widget-title h5 fw-bold text-uppercase mb-4 pb-2 border-bottom">{{trans('Menu')}}</h3>
                        @include('ecommerce::frontend.customer-menu')
                    </div>
                </div>
            </div>

            <!-- Addresses Content -->
            <div class="col-lg-9 col-md-8">
                
                <!-- Add New Address Form (Professional Design) -->
                <div class="card-dashboard mb-5" style="background: #fff; border-radius: 12px; border: 1px solid #eee; padding: 40px;">
                    <div style="margin-bottom: 30px;">
                        <h3 style="font-size: 20px; font-weight: 700; margin: 0; color: #222;">Add New Address</h3>
                        <p style="margin: 8px 0 0 0; color: #777; font-size: 14px;">Please fill in the details below.</p>
                    </div>
                    
                    <form action="{{ url('customer/address/create') }}" method="post">
                        @csrf
                        <input class="form-input-professional" type="hidden" name="customer_id" value="{{$customer->id}}" required>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group-custom">
                                    <label class="form-label-custom">{{trans('Name')}}</label>
                                    <input class="form-input-professional" type="text" name="name" placeholder="e.g. John Doe">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group-custom">
                                    <label class="form-label-custom">{{trans('file.Phone')}}</label>
                                    <input class="form-input-professional" type="text" name="phone" placeholder="e.g. +1 234 567 890">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group-custom">
                                    <label class="form-label-custom">{{trans('file.Address')}} <span class="required">*</span></label>
                                    <input class="form-input-professional" type="text" name="address" placeholder="Street address, apartment, suite, etc." required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group-custom">
                                    <label class="form-label-custom">{{trans('file.City')}} <span class="required">*</span></label>
                                    <input class="form-input-professional" type="text" name="city" placeholder="e.g. New York" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group-custom">
                                    <label class="form-label-custom">{{trans('file.State')}}</label>
                                    <input class="form-input-professional" type="text" name="state" placeholder="e.g. NY">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group-custom">
                                    <label class="form-label-custom">{{trans('file.Zip Code')}} <span class="required">*</span></label>
                                    <input class="form-input-professional" type="text" name="zip" placeholder="e.g. 10001" required>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group-custom">
                                    <label class="form-label-custom">{{trans('file.Country')}} <span class="required">*</span></label>
                                    <input class="form-input-professional" type="text" name="country" placeholder="e.g. USA" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button type="submit" class="btn-submit-professional">Save Address</button>
                        </div>
                    </form>
                </div>

                <!-- Saved Addresses Grid -->
                <div style="margin-bottom: 20px;">
                    <h3 style="font-size: 20px; font-weight: 700; color: #222; padding-bottom: 10px; border-bottom: 1px solid #eee;">Saved Addresses</h3>
                </div>
                
                <div class="row">
                    @foreach($addresses as $index=>$address)
                    <div class="col-lg-6 col-md-6 mb-4">
                        <div class="address-card {{ $address->default == 1 ? 'default-address' : '' }}">
                            
                            <div class="address-header">
                                <h5 class="address-title">Address {{$index+1}}</h5>
                                <div class="address-actions">
                                    <!-- Default Action -->
                                    <button data-id="{{$address->id}}" class="btn-icon favorite {{ $address->default == 1 ? 'active' : '' }}" title="Set as Default">
                                        <i class="icon icon-heart"></i>
                                    </button>
                                    <!-- Edit Action -->
                                    <button data-id="{{$address->id}}" data-toggle="modal" data-target="#edit_address" class="btn-icon edit" title="Edit">
                                        <i class="icon icon-edit"></i>
                                    </button>
                                    <!-- Delete Action -->
                                    <button data-id="{{$address->id}}" class="btn-icon delete" title="Delete">
                                        <i class="icon icon-trash"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="address-body">
                                @if($address->name)
                                    <p style="font-weight: 700; color: #333; font-size: 15px; margin-bottom: 10px;">{{ $address->name }}</p>
                                @endif
                                <p style="font-weight: 500; color: #222;">{{ $address->address }}</p>
                                <p>
                                    {{ $address->city }}
                                    @if(isset($address->state))
                                        , {{ $address->state }}
                                    @endif
                                </p>
                                <p>{{ $address->country }}, {{ $address->zip }}</p>
                                @if($address->phone)
                                    <p style="margin-top: 8px; color: #777;"><i class="icon icon-phone" style="margin-right: 5px; font-size: 12px;"></i> {{ $address->phone }}</p>
                                @endif
                            </div>

                        </div>
                    </div>
                    @endforeach
                </div>

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

<!-- Edit Address Modal -->
<div class="modal fade" id="edit_address" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="border-radius: 12px; border: none;">
            <div class="modal-header" style="border-bottom: 1px solid #eee; padding: 20px 30px;">
                <h5 class="h5 fw-bold m-0">{{trans('file.Edit Address')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="font-size: 24px; color: #999;">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding: 30px;">
                <form action="{{ url('customer/address/update') }}" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group-custom">
                                <label class="form-label-custom">{{trans('file.Name')}}</label>
                                <input class="form-input-professional" type="text" name="name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group-custom">
                                <label class="form-label-custom">{{trans('file.Phone')}}</label>
                                <input class="form-input-professional" type="text" name="phone">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group-custom">
                                <label class="form-label-custom">{{trans('file.Address')}} <span class="required">*</span></label>
                                <input class="form-input-professional" type="text" name="address" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group-custom">
                                <label class="form-label-custom">{{trans('file.City')}} <span class="required">*</span></label>
                                <input class="form-input-professional" type="text" name="city" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group-custom">
                                <label class="form-label-custom">{{trans('file.State')}}</label>
                                <input class="form-input-professional" type="text" name="state">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group-custom">
                                <label class="form-label-custom">{{trans('file.Country')}} <span class="required">*</span></label>
                                <input class="form-input-professional" type="text" name="country" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group-custom">
                                <label class="form-label-custom">{{trans('file.Zip / Postal code')}} <span class="required">*</span></label>
                                <input class="form-input-professional" type="text" name="zip" required>
                            </div>
                        </div>
                    </div>
                    
                    <input class="form-input-professional" type="hidden" name="id" value="" required>
                    
                    <div class="text-right mt-5">
                        <button type="button" class="btn" data-dismiss="modal" style="background: #f5f5f5; padding: 12px 24px; border-radius: 6px; margin-right: 10px;">Cancel</button>
                        <button type="submit" class="btn-submit-professional">Update Address</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    "use strict";

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).on('click', '.favorite', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        var url = "{{url('customer/address/default/')}}"+"/"+id;
        
        $('.address-card').removeClass('default-address');
        $('.favorite').removeClass('active');
        
        var fav = $(this);
        $.ajax({
            type: "get",
            url: url,
            success: function(result) {    
                fav.closest('.address-card').addClass('default-address');            
                fav.addClass('active');
                
                $('.alert').addClass('alert-custom show');
                $('.alert-custom .message').html('{{trans("file.Address is saved as default")}}');
                setTimeout(function() {
                    $('.alert').removeClass('show');
                }, 4000);
            }
        })
    })

    $(document).on('click', '.edit', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        var url = "{{url('customer/address/edit/')}}"+"/"+id;
        $.ajax({
            type: "get",
            url: url,
            success: function(result) { 
                $('#edit_address input[name="name"]').val(result.name);
                $('#edit_address input[name="phone"]').val(result.phone);
                $('#edit_address input[name="address"]').val(result.address);
                $('#edit_address input[name="city"]').val(result.city);
                $('#edit_address input[name="state"]').val(result.state);
                $('#edit_address input[name="country"]').val(result.country);
                $('#edit_address input[name="zip"]').val(result.zip);
                $('#edit_address input[name="id"]').val(result.id);
            }
        })
    })

    $(document).on('click', '.delete', function(e) {
        e.preventDefault();
        if(!confirm('Are you sure you want to delete this address?')) return;

        var id = $(this).data('id');
        var url = "{{url('customer/address/delete/')}}"+"/"+id;
        var del = $(this);
        
        del.closest('.col-md-6').fadeOut(300, function() {
            $(this).remove();
        });

        $.ajax({
            type: "get",
            url: url,
            success: function(result) {    
                $('.alert').addClass('alert-custom show');
                $('.alert-custom .message').html('{{trans("file.Address deleted")}}');
                setTimeout(function() {
                    $('.alert').removeClass('show');
                }, 4000);
            }
        })
    })
</script>
@endsection