<!-- Include forms.details -->

@extends('components.form', [
    'id' => $id,                    // INPUT ID-NAME BIND
    'resource' => $resource,        // FORM RESOURCE TARGET
    'static' => @$static,           // NOT DINAMIC JUST ALWAYS INS
    'table' => @$table,             // RELATED TABLE ID
    'groups' => [
        [
            'deliver_ref' => [
                'type' => 'input-text',
                'label' => __('form.label.receiver'),
                'div-class' => 'col-md-5',
                'placeholder' => __('form.placeholder.details.receiver'),  
                'help' => __('form.help.details.receiver'),  
            ],
            'code' => [
                'required' => true,
                'type' => 'input-text',
                'label' => __('form.label.code'),
                'label-class' => 'col-md-1',
                'div-class' => 'col-md-2',
                'value' => Utils::newCode($resource),
                'placeholder' => __('form.placeholder.code'),
                'help' => __('form.help.details.code'),
                'help-icon' => 'fa fa-barcode',
            ]
        ],
        [
            'deliver_from' => [
                'required' => true,
                'type' => 'timepicker',
                'label' => __('form.label.from'),
                'label-class' => 'col-md-3',
                'div-class' => 'col-md-3',
                'input-class' => 'centered',
                'placeholder' => __('form.placeholder.details.from'),
                'help' => __('form.help.details.from'),
                'help-icon' => 'fa fa-clock',
            ],

            'deliver_until' => [
                'required' => true,
                'type' => 'timepicker',
                'label' => __('form.label.until'),
                'label-class' => 'col-md-1',
                'div-class' => 'col-md-3',
                'input-class' => 'centered',
                'placeholder' => __('form.placeholder.details.until'),
                'help' => __('form.help.details.until'),
                'help-icon' => 'fa fa-clock',
            ],
        ],
        [
            'deliver_address' => [
                'type' => 'input-buttons',
                'label' => __('form.label.address'),
                'div-class' => 'col-md-7',
                'placeholder' => __('form.placeholder.details.address'),  
                'help' => __('form.help.details.address'),
                'buttons' => [
                    [
                        'class' => 'address-view',
                        'icon' => 'fa fa-eye',
                        'title' => __('form.message.view-address'),
                    ],
                    [
                        'class' => 'address-set',
                        'icon' => 'fa fa-globe',
                        'attrs' => 'data-target="{{ $id }}" data-field="deliver_address"',
                        'title' => __('form.message.set-address'),
                    ],
                    
                ]
            ]
        ],
        [
            'deliver_lat' => [
                'required' => true,
                'type' => 'input-text',
                'label' => __('form.label.latitude'),
                'label-class' => 'col-md-3',
                'div-class' => 'col-md-2',
                'input-class' => 'centered',
                'placeholder' => __('form.placeholder.details.latitude'),  
                'help' => __('form.help.details.latitude'),
                'help-icon' => 'fa fa-globe',
                'hclass' => 'latitude',
            ],
            'deliver_long' => [
                'required' => true,
                'type' => 'input-text',
                'label' => __('form.label.longitude'),
                'label-class' => 'col-md-2',
                'div-class' => 'col-md-2',
                'input-class' => 'centered',
                'placeholder' => __('form.placeholder.details.longitude'),  
                'help' => __('form.help.details.longitude'),
                'help-icon' => 'fa fa-globe',
                'hclass' => 'longitude',
            ],
        ],
        [
            'billing_address' => [
                'type' => 'input-text',
                'label' => __('form.label.billing'),
                'div-class' => 'col-md-7',
                'placeholder' => __('form.placeholder.details.billing'),  
                'help' => __('form.help.details.billing'),
            ]
        ],
        [
            'notes' => [
                'type' => 'textarea',
                'label' => __('form.label.notes'),
            ]
        ]
    ]
])


@push('ready')
<script>

jQuery(document).ready(function() {
    // INIT FORM
    {{ $id }}Form.init({
        setup: {
            components: function(form){
                // BIND FORMAT FIELDS TO SUBMIT
                $("#{{ $id }} input[name=cash]").on( "change", function(){ 
                    //Validation.formatMoneyField(event.target);
                });

                $("#{{ $id }} input[name=code]").on( "change", function(){ 
                    Validation.formatCodeField(event.target);
                });

                /*
                // GOOGLE MAPS ADDRESS HANDLE
                googleAddressAutocomplete("#{{ $id }} input[name=deliver_address]", function(handle){
                    
                    var info = getGoogleAddressResponseInfo(handle.getPlace());
                    $("#{{ $id }} input[name=city]").val(info.locality);
                    $("#{{ $id }} input[name=cap]").val(info.postal_code);
                    
                });
                */

                // ADDRESS HANDLES LOAD
                $("#{{ $id }} .address-view").on( "click", function(){ 
                    var address = $("#{{ $id }} input[name=deliver_address]").val().trim();
                    if(address.length<5){
                        return danger('Invalid Adress for view');
                    }
                    {{ $id }}Form.ref('smap').show(address);
                });

                $("#{{ $id }} .address-set").on( "click", function(){ 
                    // SET ADDRESS LOCATION TO THE SPECIFIED TARGET
                    {{ $id }}Form.ref('map').fill("#{{ $id }}");
                });

                $('#{{ $id }} input[name=store_code]').select2({
                    minimumInputLength: 1,
                    minimumResultsForSearch: 10,
                    ajax: {
                        quietMillis: 200,
                        url: "{{ route( @$routes['stores-list'] ?: 'stores.list' ) }}",
                        dataType: "json",
                        type: "GET",
                        data: function (term) {
                            return { search : term }
                        },
                        results: function (data) {
                            return {
                                results: $.map(data, function (value, key) {
                                    return {
                                        text: value,
                                        id: key
                                    }
                                })
                            };
                        }
                    }
                });

                $('#{{ $id }} .timepicker-24x').timepicker({
                    autoclose: true,
                    minuteStep: 5,
                    showSeconds: false,
                    showMeridian: false,
                });
                
                $('#{{ $id }} input[name=deliver_until]').add('#{{ $id }} input[name=deliver_from]')
                    .on('changeTime.timepicker', function(e) {
                    $(this).val(moment( e.time.value, "HH:mm").format("HH:mm") );
                });

                                
                $('#{{ $id }} .datepickerx').datepicker({
                    format: 'd MM yyyy',
                    todayHighlight: true,
                    autoclose: true,
                    startDate: '+0d',   // START TODAY
                })
                .on("changeDate", function(e) {
                    console.log('DATE PICKER SELECTED');
                });

                // INIT INPUT SPIN FIELD
                $('#{{ $id }} input[name=deliver_lat]').TouchSpin({
                    inputGroupClass: 'input-medium',
                    spinUpClass: 'btn-info',
                    spinDownClass: 'blue',
                    verticalbuttons: true,
                    max: 90,
                    min: -90,
                    step: 0.00001,
                    boost: true,
                    decimals: 6,
                    boostat: 5,
                    maxboostedstep: 50,
                    // prefix: '&euro;',
                    //postfix: '°'
                });

                // INIT INPUT SPIN FIELD
                $('#{{ $id }} input[name=deliver_long]').TouchSpin({
                    inputGroupClass: 'input-medium',
                    spinUpClass: 'btn-info',
                    spinDownClass: 'blue',
                    verticalbuttons: true,
                    max: 180,
                    min: -180,
                    step: 0.00001,
                    boost: true,
                    decimals: 6,
                    boostat: 5,
                    maxboostedstep: 50,
                    // prefix: '&euro;',
                    // postfix: '°'
                });
            },
            validate: {
                rules: {
                    'name' : {
                        required: true,
                        minlength: 3,
                    },
                    'deliver_ref' : {
                        required: true,
                        minlength: 3,
                        regex: Validation.regex('name'),
                    },
                },
                submit: {
                    successUpdate: function(id){
                        // UPDATE RELATED ITEM IN TABLE
                        var table = {{ $id }}Form.ref('table');
						if(defined(table)) table.update(id);

                        // CLOSE RELATED MODAL IF ANY
                        var modal= {{ $id }}Form.ref('modal');
						if(defined(modal)) modal.hide();

                        // NOTIFY ALL DONE
                        success("{{ __('form.action.updated') }}");
                    },
                    successInsert: function(){
                        // RELOAD TABLE
                        var table = {{ $id }}Form.ref('table');
						if(defined(table)) table.reload();

                        // CLEAR FORM
                        {{ $id }}Form.empty(); 

                        // NOTIFY ALL DONE
                        success("{{ __('form.action.saved') }}");
                    }
                }
            },
        },
    });
});

</script>
@endpush