@extends(get_view('pages.user.index'))
@section('user.sidebar-my-addresses')
    active
@endsection
@section('user.content')

    <div class="row">
        <div class="col-12">
            <h4>
                {{ translate('my_addresses') }}

                <button type="button" class="btn btn-primary btn-sm float-sm-right" data-toggle="modal" data-target="#addressModal">
                    <i class="fa fa-plus"></i> {{ translate('add_new_address') }}
                </button>
            </h4>
        </div>
        @if ($user_addresses->count() > 0)
            @foreach ($user_addresses as $item)
                <div class="col-md-4 col-sm-6 col-12">
                    <div class="card mt-3 mb-3">
                        <div class="card-header">
                            <b>{{ $item->title }}</b>
                        </div>
                        <div class="card-body">
                            <p class="m-0 p-0"><b>{{ $item->fullname }}</b></p>
                            <p class="m-0 p-0">{{ $item->phone }}</p>
                            <p class="m-0 p-0">{{ $item->country->name }}/{{ $item->city }}/{{ $item->district }}
                                - {{ $item->postcode }}</p>
                            <p class="m-0 p-0">{{ $item->address }}</p>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-sm address-edit" data-id="{{ encrypt($item->id) }}"><i class="fa fa-edit"></i> {{ translate('edit') }}</a>
                            <a href="{{ route('front.my-addresses.remove', ['id' => encrypt($item->id)]) }}" class="btn btn-sm text-danger"><i class="fa fa-trash"></i> {{ translate('delete') }}</a>
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <div class="col-12 text-center py-5">
                <h4>{{ translate('your_registered_address_not_found') }}</h4>
                <p>{{ translate('please_add_new_address') }}</p>
                <p>
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addressModal">
                        {{ translate('add_new_address') }}
                    </button>
                </p>
            </div>
        @endif
    </div>

    @include(get_view('components.user.addresses.add-new-address-modal'))
    @include(get_view('components.user.addresses.update-modal'))


@endsection
@section('user.footer')
<script>
    $(document).ready(function () {
        $(".address-edit").click(function () {
            var id = $(this).data('id');
            var addressModal = $("#updateAddressModal");
            var form = $("form", addressModal);
            addressModal.modal('show');

            $.get('/user/my-addresses/get', {id:id}, function (data) {
                $("input[name='id']", addressModal).val(id);
                $("input[name='title']", addressModal).val(data.title);
                $("input[name='fullname']", addressModal).val(data.fullname);
                $("input[name='phone']", addressModal).val(data.phone);
                $("select[name='country_id']", addressModal).val(data.country_id);
                $("input[name='city']", addressModal).val(data.city);
                $("input[name='district']", addressModal).val(data.district);
                $("input[name='address']", addressModal).val(data.address);
                $("input[name='postcode']", addressModal).val(data.postcode);
            });
        })
    })
</script>
@endsection