@extends('admin._layouts.master')

@section('content')

    {!! Form::model($customer , array('id' => 'main-form', 'url' => $action, 'method' => $method)) !!}
    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">@transTitleCase('ui.create.title', [
                         'model_name' => trans('models.customer.model_name')
                     ])
                    </h3>
                    @if($editing)
                        <div class="pull-right box-tools">
                            <a href="{{ route('admin.sales.customers.transactions.index', $customer->id) }}" class="btn btn-slim btn-default">
                                <i class="fa fa-exchange"></i>&nbsp; @transUc('models.generic.transactions')
                            </a>
                        </div>
                    @endif
                </div>
                <div class="box-body">
                    {!! FormGroup::text('name', transUcFirst('models.generic.name')) !!}
                    {!! FormGroup::text('surname', transUcFirst('models.customer.surname')) !!}
                </div>
            </div>
        </div>

        <div class="col-sm-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">@transTitleCase('admin.sales.customers.addresses.addresses')</h3>
                </div>
                <div class="box-body">
                    <div id="address-list" class="addresses box-group">

                        @include('admin.sales.customers._partials.item')

                        @foreach($addresses as $id => $address)
                            @include('admin.sales.customers._partials.item')
                        @endforeach
                    </div>

                    <a id="create-btn" class="btn btn-grey btn-success button-centered">
                        <i class="fa fa-plus"></i>&nbsp; @transUc('ui.listing.add_new_row')
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-body">
                    @include('admin._partials.form-submit')
                </div>
            </div>
        </div>

    </div>
    {!! Form::close() !!}

@endsection

@push('scripts')

    <script>
        var $addressList

        $(function () {
            var $createBtn = $('#create-btn')
            $addressList   = $('#address-list')

            $addressList.find('.address.hidden').hide()

            // init existing address items
            $addressList.find('.address').not('.hidden').each(function () {
                initAddressItem($(this))
            })

            $createBtn.click(addAddressItem)

            $addressList.accordion({
                collapsible   : true,
                active        : false,
                icons         : false,
                header        : ".box-header",
                beforeActivate: function (event, ui) {
                    var $newAddressItem = ui.newPanel.parent()
                    var $oldAddressItem = ui.oldPanel ? ui.oldPanel.parent() : null

                    $newAddressItem.find('.delete-btn').show()
                    $newAddressItem.addClass('box-solid')

                    if ($oldAddressItem) {
                        $oldAddressItem.find('.delete-btn').hide()
                        $oldAddressItem.removeClass('box-solid')
                    }
                }
            })

            $('#main-form').on('submit', function (e) {
                // before submitting the form, remove the 'new' or 'template' address item to not no submit it's data. It's only there to be cloned.
                $addressList.find('.address.hidden').remove()
            })
        })

        /* ------------------------------------------------------------------------------------------------------------------- add Address Item -+- */
        function addAddressItem() {
            var $item = $addressList.find('.address.hidden').clone().removeClass('hidden')

            $addressList.append($item)

            var itemKey = (Math.random() + 1).toString(36).substr(2, 5)

            $item.find('input, select, textarea').each(function () {
                var name = $(this).attr('name')
                $(this).attr('name', name.replace('addresses[new]', 'addresses[' + itemKey + ']'))
            })


            $item.show(300, function () {
                $item.find('.box-header').trigger('click')

                $addressList.accordion('refresh')
            })

            initAddressItem($item)
        }

        /* ------------------------------------------------------------------------------------------------------------------ init Address Item -+- */
        function initAddressItem($addressItem) {

            var $title = $addressItem.find('.box-title')

            $addressItem.find('.delete-btn').click(deleteAddress)
            $addressItem.find('.title-input').on('input', function () {
                $title.text($(this).val())
            })
        }

        /* ---------------------------------------------------------------------------------------------------------------- delete Address Item -+- */
        function deleteAddress(e) {
            e.preventDefault()

            var $target = $(e.target).parents('.address')

            $target.hide(500, function () {
                $target.remove()
                $addressList.accordion('refresh')
            })
        }

    </script>

@endpush