@extends('shop::layouts.master')

@section('page_title')
    {{ __('shop::app.customer.account.address.index.page-title') }}
@endsection
@php
    $currentCustomer = auth()->guard('customer')->user();
@endphp
@push('css')
    <link rel="stylesheet" href="{{bagisto_asset('styles/profile.css')}}">
    <link rel="stylesheet" href="{{bagisto_asset('styles/categories-tv.css')}}">
    <link rel="stylesheet" href="{{bagisto_asset('styles/cart.css')}}">
    <link rel="stylesheet" href="{{bagisto_asset('styles/delivery.css')}}">
@endpush
@php

    $defaultCountry = config('app.default_country');

@endphp

@section('content-wrapper')

    <!-- BREADCRUMB ======================================================================== -->
    <section class="breadcrumb">
        <div class="container">

            <div class="breadcrumb-container">
                <ul class="breadcrumb">
                    <li><a href="/">{{__('shop::app.home.page-title')}}</a></li>
                    <li><a href="#" class="current">{{__('shop::app.layouts.profile')}}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- BREADCRUMB end ==================================================================== -->
    <!-- PROFILE CONTENT =================================================================== -->
    <section class="profile-content">
        <div class="container">
            <div class="profile-content-inner">
                <div class="delivery-content-inner-title">
                    <h2 class="delivery-content-inner-title-text">{{ __('shop::app.customer.account.address.index.title') }}</h2>
                    <div class="horizontal"></div>
                </div>

                <div class="profile-inner-bottom-wrapper">

                    <div class="profile-content-inner-bottom">
                        <div class="delivery-content-bottom-title">
                            <h4 class="delivery-content-bottom-title">Ваш адрес</h4>
                        </div>
                        <div class="delivery-content-mid-left-blocks" style="max-width:unset;gap: 2rem;">
                        @if ($addresses->isEmpty())
                            <div>{{ __('shop::app.customer.account.address.index.empty') }}</div>
                            <br/>
                            <a href="{{ route('customer.address.create') }}">{{ __('shop::app.customer.account.address.index.add') }}</a>
                        @else
                            @foreach ($addresses as $address)
                                <div class="content-block" style="max-width: 100%; ">
                                    <div class="content-block-title-wrapper">
                                        <span class="content-block-wrapper-text">Адрес №<span class="address-nr">{{ $loop->index+1 }}</span></span>
                                    </div>
                                    <div class="content-block-main-wrapper">
                                        <textarea class="content-block-main-wrapper-text"
                                            spellcheck="false">{{ $address->state }} , {{ $address->address1 }} , {{ __('shop::app.customer.account.address.index.contact') }}: {{ $address->phone }}</textarea>
                                            <div class="control-links mt-20">


                                                <span>
                                                    <a href="javascript:void(0);" onclick="deleteAddress('{{ __('shop::app.customer.account.address.index.confirm-delete') }}')">
                                                        {{ __('shop::app.customer.account.address.index.delete') }}
                                                    </a>

                                                    <form id="deleteAddressForm" action="{{ route('address.delete', $address->id) }}" method="post">
                                                        @method('delete')
                                                        @csrf
                                                    </form>
                                                </span>
                                            </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                            <button type="button" class="content-link">
                                <div class="content-link-wrapper">
                                    <div class="content-link-img">
                                        <img src="{{bagisto_asset('icons/add.svg')}}" alt="add">
                                    </div>
                                    <span class="content-link-wrapper">Добавить адрес</span>
                                </div>
                            </button>

                        </div>
                        <form class="profile-content-inner-mid-block-wrapper profile-content-inner-mid-block-wrapper-hidden"  method="post" action="{{ route('customer.address.store') }}" @submit.prevent="onSubmit">
                                        @csrf


                            <div class="profile-content-block">
                                <div class="profile-content-block-inner">
                                    <span>{{ __('shop::app.customer.account.address.create.first_name') }}</span>
                                    <input type="text" class="fetch-input" name="first_name">
                                    <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
                                </div>
                            </div>


                            <div class="profile-content-block">
                                <div class="profile-content-block-inner">
                                    <span>{{ __('shop::app.customer.account.address.create.last_name') }}</span>
                                    <input type="text" class="fetch-input" name="last_name">
                                    <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
                                </div>
                            </div>





                            <div class="profile-content-block">
                                <div class="profile-content-block-inner">
                                    <span>{{ __('shop::app.customer.account.address.create.street-address') }}</span>
                                    <input type="text" class="fetch-input" name="address1[]">
                                    <span class="control-error" v-if="errors.has('address1[]')">@{{ errors.first('address1[]') }}</span>
                                </div>
                            </div>

                            @if (core()->getConfigData('customer.settings.address.street_lines') && core()->getConfigData('customer.settings.address.street_lines') > 1)
                                <div class="control-group" style="margin-top: -25px;">
                                    @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
                                        <input type="text" class="control" name="address1[{{ $i }}]" id="address_{{ $i }}">
                                    @endfor
                                </div>
                            @endif


                            <div class="profile-content-block">
                                <div class="profile-content-block-inner">
                                    <span>{{ __('shop::app.customer.account.address.create.city') }}</span>
                                    <input type="text" class="fetch-input"  name="city" >
                                    <span class="control-error" v-if="errors.has('city')">@{{ errors.first('city') }}</span>

                                </div>
                            </div>




                            <div class="profile-content-block">
                                <div class="profile-content-block-inner">
                                    <span>{{ __('shop::app.customer.account.address.create.phone') }}</span>
                                    <input type="text" class="fetch-input" name="phone">
                                    <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>

                                </div>
                            </div>

                            @include ('shop::customers.account.address.country-state', ['countryCode' => old('country'), 'stateCode' => old('state')])


                            <div class="control-group">
                                <span class="checkbox">
                                    <input type="checkbox" class="control" id="default_address" name="default_address" {{ old('default_address') ? 'checked' : '' }} >

                                    <label class="checkbox-view" for="default_address"></label>

                                    {{ __('shop::app.customer.account.address.default-address') }}
                                </span>
                            </div>

                            <div class="button-group">
                                <input style="
                                    color:red;
                                    padding:15px;
                                    color:white;
                                    background-color:#c50003;
                                    cursor: pointer;
                                    border:none;
                                    border-radius:5px;
                                "
                                type="submit" value="{{ __('shop::app.customer.account.address.create.submit') }}">
                            </div>

                        </form>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- PROFILE CONTENT end =============================================================== -->

@endsection

@push('scripts')
    <script>
        function deleteAddress(message) {
            if (! confirm(message)) {
                return;
            }

            $('#deleteAddressForm').submit();
        }
    </script>
    <script>
        $(document).ready(function(){

        // ADD ADDRESS ======================================

        let addBtn = document.querySelector('.content-link');
        let addBlock = document.querySelector(
            '.profile-content-inner-mid-block-wrapper-hidden'
        );
        let parent = document.querySelector('.delivery-content-mid-left-blocks');
        let saveBtn = document.querySelector('.save-button');
        let inputArea = document.querySelectorAll('.fetch-input');
        let wholeLine = '';
        addBtn.addEventListener('click', () => {
            addBlock.classList.add('shown');
            // addBtn.style.display = "none";
            // addBtn.style.height = "0px"
            parent.removeChild(addBtn);
            saveBtn.innerText = 'Добавить';
            saveBtn.classList.add('saveable');
        });

        saveBtn.addEventListener('click', () => {
            wholeLine = '';
            if (saveBtn.classList.contains('saveable')) {
                for (let i = 0; i < inputArea.length; i++) {
                    wholeLine = wholeLine + ' ' + inputArea[i].value;
                }

                let block = document.createElement('div');
                block.classList.add('content-block');

                let innerWrpr1 = document.createElement('div');
                innerWrpr1.classList.add('content-block-title-wrapper');

                let innerWrpr2 = document.createElement('div');
                innerWrpr2.classList.add('content-block-main-wrapper');

                let inText = document.createElement('h4');
                inText.classList.add('content-block-wrapper-text');

                let innerSpan = document.createElement('span');
                innerSpan.classList.add('address-nr');

                let innerTextArea = document.createElement('textarea');
                innerTextArea.classList.add('content-block-main-wrapper-text');


                innerTextArea.innerText = wholeLine;
                inText.innerText = 'Адрес №';
                inText.appendChild(innerSpan);
                innerWrpr1.appendChild(inText);
                innerWrpr2.appendChild(innerTextArea);
                block.appendChild(innerWrpr1);
                block.appendChild(innerWrpr2);
                parent.appendChild(block);
                parent.style.gap = '2rem';
                // parent.removeChild(addBtn);
                parent.appendChild(addBtn);
                saveBtn.classList.remove('saveable');
                saveBtn.innerText = 'Сохранить';
                addNum('address-nr');
                textAreaFunctions();
                inputArea.forEach((el) => {
                    el.value = '';
                });
                if (addrCount >= 6) {
                    parent.removeChild(addBtn);
                }
            }
        });
        saveBtn.addEventListener('click', () => {
            if (!saveBtn.classList.contains('saveable')) {
                addBlock.classList.remove('shown');
            }
        });

        // ADD ADDRESS end ==================================

        });
</script>


@endpush

