@extends('layouts.app')
@section('title')
    <title>Baboon - Adresat e dorëzimit</title>
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-12 user-sidebar">
                @include('user.account.partials.sidebar')
            </div>
            <div class="col-md-9 col-sm-8 col-xs-12 user-profile open-restaurants order-history-list">
                <div id="add-new-address-button" class="mb-4 cursor-pointer" style="margin: unset">
                    <div class="flex justify-flex-start align-items-center add-address-profile-btn">
                        <img src="{{asset('images/circle-plus.svg')}}" class="add-address-icon"/>
                        <h3 style="padding-left: 1rem">Shto një adresë të re</h3>
                    </div>
                </div>
                @foreach($addresses as $address)
                    @if($address->active)
                        <article class="profile-address">
                            <div class="row">
                                <div class="col-md-12 flex justify-space-between address-type">
                                    <div class="flex align-items-center">
                                        @if($address->type == 0)
                                            <div class="address-list-icon">
                                                <img style="max-height: 20px;" src="{{$address->primary ? asset('images/address-list-home-selected.svg') : asset('images/address-list-home.svg')}}">
                                            </div>
                                            <h5>Shtëpi</h5>
                                        @elseif($address->type == 1)
                                            <div class="address-list-icon">
                                                <img style="max-height: 20px;" src="{{$address->primary ? asset('images/briefcase-selected.svg') : asset('images/briefcase.svg')}}">
                                            </div>
                                            <h5>Punë</h5>
                                        @elseif($address->type == 2)
                                            <div class="address-list-icon">
                                                <img style="max-height: 20px;" src="{{$address->primary ? asset('images/other-locations-selected.svg') : asset('images/other-locations.svg')}}">
                                            </div>
                                            <h5>Tjetër</h5>
                                        @endif
                                    </div>
                                    <div class="cursor-pointer" onclick="openEditModal({{json_encode($address)}})">
                                        Edit
                                    </div>
                                </div>
                                <div class="col-md-12 single-restaurant-logo">
                                    <h4>
                                        {{$address->addressStreet}}
                                    </h4>
                                    <h5>
                                        {{$address->addressDetails}}
                                    </h5>
                                    <div class="flex justify-space-between align-items-center">
                                        <h4>
                                            {{$address->phonePrefix}} {{$address->phone}}
                                        </h4>
                                        <a href="#" class="single-order-detail-title theme-color pull-right"
                                           onclick="openconfirmDelModal({{$address->id}},{{$address->primary}})">
                                            <img style="max-height: 20px" src="{{asset('images/trash.svg')}}">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
    <!-- Confirm delete modal -->
    <div class="modal fade" id="confirm-delete-add-modal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        Konfirmo fshirjen e adresës së dërgimit
                    </h4>
                </div>
                <div class="modal-body">
                    <p>
                        Jeni të sigurt që dëshironi të fshini këtë adresë?
                    </p>

                </div>
                <div class="modal-footer">
                    <form class="form-horizontal" method="POST" id="add-delete-form">
                        {{ csrf_field() }}
                        {{ method_field('DELETE') }}

                        <button type="submit" class="btn btn-success" id="confirm-delete-btn">Confirm</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </form>

                </div>
            </div>

        </div>
    </div>
    <div class="modal fade" id="primary-add-modal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        Konfirmo fshirjen e adresës së dërgimit
                    </h4>
                </div>
                <div class="modal-body">
                    <p>
                        Ju nuk mund të fshini adresën primare!
                    </p>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    @include('user.account.address_book.partials.addModal')
    @include('user.account.address_book.partials.activationModal')
    @include('user.account.address_book.partials.editModal')
@endsection
@section('custom-js')
    <script>
        function getAddressCodeBoxElement(index) {
            return document.getElementById('addressCodeBox' + index);
        }
        function onKeyUpAddressActivationCode(index, event) {
            const eventCode = event.which || event.keyCode;
            if (getAddressCodeBoxElement(index).value.length === 1) {
                if (index !== 4) {
                    getAddressCodeBoxElement(index+ 1).focus();
                } else {
                    getAddressCodeBoxElement(index).blur();
                    let val = getAddressCodeBoxElement(1).value + getAddressCodeBoxElement(2).value + getAddressCodeBoxElement(3).value + getAddressCodeBoxElement(4).value
                    $('#addressActivisationCode').val(val)
                    $('#address-code-verification-form').submit();
                }
            } else if (getAddressCodeBoxElement(index).value.length) {
                getAddressCodeBoxElement(index).value = event.key;

                if (index !== 4) {
                    getAddressCodeBoxElement(index+ 1).focus();
                } else {
                    getAddressCodeBoxElement(index).blur();
                    let val = getAddressCodeBoxElement(1).value + getAddressCodeBoxElement(2).value + getAddressCodeBoxElement(3).value + getAddressCodeBoxElement(4).value
                    $('#addressActivisationCode').val(val)
                    $('#address-code-verification-form').submit();
                }
            }
            if (eventCode === 8 && index !== 1) {
                getAddressCodeBoxElement(index - 1).focus();
            }
        }
        function onFocusAddressActivationCode(index) {
            for (item = 1; item < index; item++) {
                const currentElement = getAddressCodeBoxElement(item);
                if (!currentElement.value) {
                    currentElement.focus();
                    break;
                }
            }
        }

        $(document).ready(function () {
            let storeActivateAddress = {{ session('storeActivateAddress') && session('storeActivateAddress') == true ? 1 : 0 }}
            if (storeActivateAddress) {
                {{request()->session()->forget('storeActivateAddress')}}
                $('#address-phone-activation-code-modal').modal('show');
            }
        })

        $('#edit-address-modal').on('hidden.bs.modal', function () {
            $('#editHomeImage').hide();
            $('#editHomeImageSelected').hide();
            $('#editWorkImage').hide();
            $('#editWorkImageSelected').hide();
            $('#editOtherLocationsImage').hide();
            $('#editOtherLocationsImageSelected').hide();
            $('#editIsPrimarySelected').hide();
            $('#editIsPrimary').hide();
        })

        function openEditModal(address) {
            $('#editAutocomplete').val(address.addressStreet)
            $('#editAddressDetails').val(address.addressDetails)

            if (address.primary) {
                $('#editIsPrimarySelected').show();
            } else {
                $('#editIsPrimary').show();
            }

            if (address.type == 0) {
                $('#editAddressTypeHome').prop('checked', true)
                $('#editHomeImageSelected').show();
                $('#editWorkImage').show();
                $('#editOtherLocationsImage').show();
            } else if (address.type == 1) {
                $('#editAddressTypeWork').prop('checked', true)
                $('#editWorkImageSelected').show();
                $('#editHomeImage').show();
                $('#editOtherLocationsImage').show();
            } else if (address.type == 2) {
                $('#editAddressTypeOther').prop('checked', true)
                $('#editOtherLocationsImageSelected').show();
                $('#editWorkImage').show();
                $('#editHomeImage').show();
            }

            $('.edit-country-prefix-select').select2("val", address.phonePrefix);
            $('#edit-phone-input').val(address.phone)
            $('#edit-add-lat').val(address.latitude)
            $('#edit-add-lng').val(address.longitude)
            $('#edit-address-id').val(address.id)
            initEditAutocomplete();

            $('#edit-address-modal').modal('show');
        }

        function openconfirmDelModal(id, primary) {
            if (primary) {
                $('#primary-add-modal').modal('show');
            }
            else {
                $('#confirm-delete-add-modal').modal('show');

                $('#confirm-delete-btn').on('click', function (e) {
                    e.preventDefault();
                    $('#add-delete-form').attr('action', "