@extends('layouts.client')
@section('title')
    {{ Auth::user()->ho_ten }} - {{$title}}
@endsection

@section('content-clients')
<div class="main-posts">
    <div class="container mt-1" style="padding: 70px 0px 0px; min-height: 100vh">
        <div class="row">
            <div class="col-md-3">
                @include('clients.blocks.categoriesUser')
            </div>
            <div class="col-md-9 mx-auto">
                <div class="col-md-7 user-details mt-5" style="margin: 0 auto;">
                    <h5 class="mb-4 text-uppercase fw-bold running-text text-center">Địa chỉ</h5>
                </div>
                {{-- Nếu chưa có địa chỉ --}}
                @if(empty($listAddress) || count($listAddress) == 0)
                    <div class="nullAddresss text-center mt-5">
                        <img src="https://fptshop.com.vn/img/empty_address_book.png?w=360&q=100" alt="null">
                        <p>Bạn chưa lưu địa chỉ nào</p>
                        <p style="color: #aaa">Cập nhật địa chỉ ngay để có trải nghiệm mua hàng nhanh nhất.</p>
                        <button id="addAddressBtn" class="btn btn-danger">Thêm địa chỉ mới</button>
                    </div>
                @else
                    {{-- Hiển thị danh sách địa chỉ --}}
                    <div class="headerAddress">
                        <div class="row">
                            <div class="col-6">
                                <h5 class="fw-bold">Danh sách địa chỉ</h5>
                            </div>
                            <div class="col-6 text-end">
                                <button id="addAddressBtn" class="btn btn-danger">Thêm địa chỉ mới</button>
                            </div>  
                        </div>
                    </div>
                    <div class="bodyAddress">
                        <div class="listAddress">
                            @foreach($listAddress as $key => $address)
                                <div class="AddressItem mt-3  bg-white p-3" style="border-radius: 15px">
                                    <div class="row d-flex justify-content-between">
                                        <div class="col-8">
                                            <div class="addressItem">
                                                <span class="fw-bold me-3 pe-3" style="border-right: 1px solid #ccc">{{$address->ho_ten}}</span>
                                                <span class="me-3 pe-3">{{$address->so_dien_thoai}}</span> 
                                                <span style="color: red">{{($address->mac_dinh == 1) ? '(Mặc định)' : false}}</span>
                                                <p class="m-0">{{$address->dia_chi}}, {{$address->Ward->name}}, {{$address->District->name}}, {{$address->Province->name}}</p>
                                            </div>
                                        </div>
                                        <div class="col-4 text-end px-2 d-flex justify-content-end align-items-center gap-2">
                                            <a href="{{-- route('client.address.edit', ['id' => $address->id]) --}}" class="btn btn-warning">Sửa</a>
                                            <form action="{{ route('home.account.address.delete', $address->id) }}" method="POST" style="display:inline; "id="delete-form-{{$key}}">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger" data-form="delete-form-{{$key}}">Xóa</button>
                                            </form>
                                            @if($address->mac_dinh == 1)

                                            @else
                                                <form action="{{ route('home.account.address.setDefault', $address->id) }}" method="POST">
                                                    @csrf
                                                    <button type="submit" class="btn btn-primary">Chọn làm mặc định</button>
                                                </form>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
                <!-- Form nhập thông tin địa chỉ, ban đầu sẽ ẩn -->
                <div id="addressPopup" class="popup">
                    <div class="popup-content-address">
                        <span id="closePopup" class="close">&times;</span>
                        <h4 class="text-center">Thêm mới địa chỉ</h4>
                        <form id="addressFormInput" action="{{ route('home.account.address.postAddAddress') }}" method="POST" class="address-form">
                            @csrf
                            <h6 class="text-secondary">Thông tin người nhận</h6>
                            <div class="form-group">
                                <label for="ho_ten">Họ và tên:</label>
                                <input type="text" class="form-control" id="ho_ten" name="ho_ten" placeholder="Nhập họ và tên">
                                <small class="text-danger error-ho_ten"></small>
                            </div>
                            <div class="form-group border-bottom pb-3">
                                <label for="so_dien_thoai">Số điện thoại:</label>
                                <input type="text" class="form-control" id="so_dien_thoai" name="so_dien_thoai" placeholder="Nhập số điện thoại">
                                <small class="text-danger error-so_dien_thoai"></small>
                            </div>
                            <h6 class="text-secondary mt-3">Địa chỉ nhận hàng</h6>
                            <div class="row">
                                <div class="col-4">
                                    <label for="province" class="fw-bold fst-italic">Tỉnh/Thành Phố</label>
                                    <select name="province" id="province" class="form-control">
                                        <option value="">Chọn Tỉnh/Thành Phố</option>
                                        @foreach($province as $prov)
                                            <option value="{{ $prov->province_id }}">{{ $prov->name }}</option>
                                        @endforeach
                                    </select>
                                    <small class="text-danger error-province"></small>
                                </div>
                                <div class="col-4">
                                    <label for="district" class="fw-bold fst-italic">Quận/Huyện</label>
                                    <select name="district" id="district" class="form-control">
                                        <option value="">Chọn Quận/Huyện</option>
                                    </select>
                                    <small class="text-danger error-district"></small>
                                </div>
                                <div class="col-4">
                                    <label for="ward" class="fw-bold fst-italic">Phường/Xã</label>
                                    <select name="ward" id="ward" class="form-control">
                                        <option value="">Chọn Phường/Xã</option>
                                    </select>
                                    <small class="text-danger error-ward"></small>
                                </div>
                            </div>
                            <div class="form-group mt-2">
                                <label for="address_detail">Địa chỉ chi tiết:</label>
                                <input type="text" class="form-control" id="address_detail" name="address_detail">
                                <small class="text-danger error-address_detail"></small>
                            </div>
                            <div class="form-group mt-2">
                                <input type="hidden" name="mac_dinh" value="0">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="mac_dinh" name="mac_dinh" value="1">
                                    <label class="form-check-label" for="mac_dinh">Chọn làm mặc định</label>
                                </div>
                            </div>
                            <div class="text-center mt-2">
                                <button type="submit" class="btn btn-danger">Xác nhận</button>
                            </div>
                        </form>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
@endsection
@section('stylesheetAccount')
<style>
    .main-posts{
        background-color: #F3F4F6;
    }
</style>
@endsection