@extends('templates.structure')
@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
@endsection
@section('content')

<div class="row">
    <div class="col-md-12">

        <div class="card">
            <div class="card-header">
                {{-- <h3 class="card-title">Form User</h3> --}}
            </div>

            <form role="form" id="form">
                <div class="card-body">

                    <div class="row">                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Promo Name</label>                                
                                <input type="text" name="name" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Location ID</label>                                
                                <select name="location_id" class="form-control">                                    
                                </select>
                            </div>

                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Discount Type</label>                                
                                <select name="discount_type" class="form-control">
                                    <option value="fix">Fix</option>
                                    <option value="percentage">Percentage</option>
                                </select>
                            </div>
                        </div>                
                        <div class="col-md-8">
                            <div class="form-group">
                                <label>Discount</label>                                
                                <input type="number" name="discount" class="form-control">
                            </div>
                        </div>        
                        <div class="col-md-12">
                            <div class="row dtForm">
                        {!!\FormDt::getDtAttrForm('promo')!!}
                            </div>
                        </div>
                    </div>

                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>

    </div>
</div>
@endsection


@section('custom_js')
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>

<script>
    
//Initialize Elements
$('[name="location_id"]').select2({
        placeholder: 'Choose location ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("locations.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.location_name',
                        orderable: true,
                        searchable: true
                        }
                    },
                    search: {value: params.term},
                    order: {0:{dir:'asc'}}
                }
            },
            processResults: function (data, params) {
                params.page = params.page || 1;                
                var newData = []
                $.each(data.data, function(key, val){
                    newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                })

                data.results = newData;
            
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 25) < data.recordsFiltered
                    }
                }

            },
            cache: true
        }
    });

$( "#form" ).submit(function( e ) {
    e.preventDefault()

    let bodyFormData = new FormData();
    bodyFormData.append('name', $('[name="name"]').val())
    bodyFormData.append('location_id', $('[name="location_id"]').val())
    bodyFormData.append('discount', $('[name="discount"]').val())
    bodyFormData.append('discount_type', $('[name="discount_type"]').val())

    $.each($('.dtForm :input').serializeArray(), function (key, val) {
        bodyFormData.append(val.name, val.value)
    })

    axios.post('{{route("promo.store")}}', bodyFormData, config) .then(function (response) {
                console.log(response);
                window.location = response.data.additional.redirect;

            })
            .catch(function (error) { console.log(error);
                $('.newerror').remove()
                var msgs = error.response.data.data.message
                $.each(msgs, function (index, value) {
                        if(index.split(".").length > 1){
                            var newindex = index.split(".")
                            $('[name="'+newindex[0]+'['+newindex[1]+']"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                        } else {

                            $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                        }
                        // console.log(value[0])
                    });
            });
})
    
</script>
@endsection