@extends('layout.template')

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

@section('content')

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

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Your Addresses</h3>

        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addressModal">
            + Add Address
        </button>
    </div>

    {{-- SUCCESS / ERROR MESSAGE --}}
    <div id="msgBox"></div>

    <div class="row g-3">

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

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

            <div class="card shadow-sm h-100 border">

                <div class="card-header d-flex justify-content-between">
                    <strong>{{ $address['type_of_address'] ?? 'Address' }}</strong>

                    @if(($address['is_default'] ?? 0) == 1)
                        <span class="badge bg-success">Default</span>
                    @endif
                </div>

                <div class="card-body">
                    <p class="mb-1"><b>{{ $address['name'] }}</b></p>
                    <p class="mb-1">{{ $address['address_line1'] }}</p>
                    <p class="mb-1">{{ $address['address_line2'] }}</p>
                    <p class="mb-1">
                        {{ $address['city'] }}, {{ $address['state'] }} - {{ $address['pincode'] }}
                    </p>
                    <p class="mb-1">📞 {{ $address['phone'] }}</p>
                </div>

                <div class="card-footer d-flex gap-2">

                    <button class="btn btn-sm btn-outline-primary">Edit</button>
                    <button class="btn btn-sm btn-outline-danger">Remove</button>

                    @if(($address['is_default'] ?? 0) == 0)
                        <button class="btn btn-sm btn-outline-success">Set Default</button>
                    @endif

                </div>

            </div>

        </div>

        @endforeach


        {{-- ADD CARD (like Amazon dashed box) --}}
        <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>

    </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">

                    <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