@extends('layout.template')

@section('title','My Addresses')

@section('content')

<style>
    .address-card {
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 16px;
        height: 100%;
        position: relative;
        background: #fff;
        transition: 0.2s;
    }

    .address-card:hover {
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    }

    .address-title {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 6px;
    }

    .address-text {
        font-size: 14px;
        color: #444;
        line-height: 1.5;
    }

    .address-actions {
        margin-top: 12px;
        display: flex;
        gap: 12px;
        font-size: 13px;
    }

    .address-actions a,
    .address-actions button {
        border: none;
        background: none;
        padding: 0;
        color: #007185;
        cursor: pointer;
        text-decoration: none;
    }

    .address-actions a:hover,
    .address-actions button:hover {
        text-decoration: underline;
    }

    .default-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #e7f7ed;
        color: #1a7f37;
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 6px;
        font-weight: 600;
    }

    /* Add box */
    .add-address {
        border: 2px dashed #c7c7c7;
        border-radius: 10px;
        height: 100%;
        min-height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.2s;
        background: #fafafa;
    }

    .add-address:hover {
        background: #f3f3f3;
    }

    .add-address span {
        font-size: 18px;
        font-weight: 500;
        color: #555;
    }

    .border-dashed {
        border: 2px dashed #ccc;
        border-radius: 8px;
        min-height: 180px;
        flex-direction: column;
    }

    .border-dashed:hover {
        border-color: #0d6efd;
    }
</style>

<div class="container mt-4 mb-60">



    <div class="row g-3">

        {{-- ADD ADDRESS --}}
        <div class="col-md-4">
            <div class="card h-100 d-flex align-items-center justify-content-center border-dashed"
                style="cursor:pointer;"
                data-bs-toggle="modal" data-bs-target="#addressModal">
                <h1 class="text-muted">+</h1>
                <p>Add Address</p>
            </div>
        </div>

        {{-- ADDRESS LIST --}}
        @foreach($addresses as $address)

        <div class="col-md-4">
            <div class="address-card">

                @if($address['is_default'])
                <div class="default-badge">Default</div>
                @endif

                <div class="address-title">
                    {{ $address['name'] }}
                </div>

                <div class="address-text">
                    {{ $address['address_line1'] }}<br>
                    {{ $address['address_line2'] }}<br>
                    {{ $address['city'] }}, {{ $address['state'] }} - {{ $address['pincode'] }}<br>
                    {{ $address['country'] }}<br>
                    📞 {{ $address['phone'] }}
                </div>

                <div class="address-actions">
                    <a href="javascript:void(0)"
                        onclick='editAddress(@json($address))'>
                        Edit
                    </a>

                    <button onclick="deleteAddress({{ $address['id'] }})">
                        Remove
                    </button>

                    @if(!$address['is_default'])
                    <button onclick="setDefault({{ $address['id'] }})">
                        Set as Default
                    </button>
                    @endif
                </div>

            </div>
        </div>

        @endforeach

    </div>
</div>
{{-- ================= MODAL ================= --}}
<div class="modal fade" id="addressModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5>Add New Address</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <form id="addressForm">
                    @csrf
                    <div class="row">

                        <div class="col-md-6">
                            <label>Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>

                        <div class="col-md-6">
                            <label>Phone</label>
                            <input type="text" name="phone" class="form-control" required>
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>Address Line 1</label>
                            <input type="text" name="address_line1" class="form-control">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>Address Line 2</label>
                            <input type="text" name="address_line2" class="form-control">
                        </div>

                        <div class="col-md-4 mt-2">
                            <label>City</label>
                            <input type="text" name="city" class="form-control">
                        </div>

                        <div class="col-md-4 mt-2">
                            <label>State</label>
                            <input type="text" name="state" class="form-control">
                        </div>

                        <div class="col-md-4 mt-2">
                            <label>Pincode</label>
                            <input type="text" name="pincode" class="form-control">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>Type</label>
                            <select name="type_of_address" class="form-control">
                                <option>Home</option>
                                <option>Office</option>
                            </select>
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>Default</label><br>
                            <input type="checkbox" name="is_default" value="1"> Set as default
                        </div>

                    </div>

                </form>

                <div id="formMsg" class="mt-2"></div>

            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-primary" id="saveAddress">Save</button>
            </div>

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

@endsection