@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">

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

                    <div class="row">

                        {{-- <div class="col-md-6">
                            <div class="form-group">
                                <label>Unique Code</label>
                                <input type="text" name="a" value="xxxxxxxxxxx" class="form-control" readonly>
                            </div>

                        </div> --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Valid From </label>                                
                                <input type="text" name="valid_from" value="{{\Carbon\Carbon::now()->toDateString()}}" class="form-control datepick">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Valid Until </label>                                
                                <input type="text" name="valid_until" value="{{\Carbon\Carbon::now()->toDateString()}}" class="form-control datepick">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Product</label>
                                <select name="product_id" class="form-control">
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12 collapse detail-product" id="collapseExample">                            
                        </div>
                        {{-- <div class="col-md-12">
                            <div class="row dtForm">
                        {!!\FormDt::getDtAttrForm('voucher')!!}
                            </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="currency"]').select2() 
let statusArr = {
        0:'Active',
        1:'Claimed',
        2:'Expired'        
    };

let productForm = $('[name="product_id"]');

productForm.select2({
                placeholder: 'Choose product ...',
                width: '100%',
                allowClear: true,
                ajax: {            
                    url: '{{route("products.datatable")}}',
                    dataType: 'json',
                    data: function(params) {                
                        return {                    
                            start: params.page == NaN ? 0 : (params.page-1) * 25,
                            length: 25,
                            columns: {
                                0:{
                                name: 'op.product_name',
                                orderable: true,
                                searchable: true
                                },
                                1:{
                                name: 'op.category_id',
                                orderable: true,
                                searchable: true,
                                search: {
                                        regex: true,
                                        value : '1|2|7',
                                    },
                                },
                                2:{
                                    name: 'op.status',
                                    orderable: true,
                                    searchable: true,
                                    search: {
                                            regex: true,
                                            value : '1',
                                        },
                                    }
                            },
                            search: {
                                // regex: true,
                                value: params.term,
                            },
                            order: {0:{dir:'asc'}}
                        }
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;                
                        let newData = []
                        let key_x = 0;

                        $.each(data.data, function(key, val){
                            
                            newData[key_x] = {'id' : val.id, 'text' : val.product_name};
                            key_x++;                            
                        })
    
                        data.results = newData;
                    
                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 25) < data.recordsFiltered
                            }
                        }
    
                    },
                    cache: true
                },
                minimumInputLength: 0,
        });
    
        productForm.on('select2:select', function (e) {
            $('.loadingpart').remove();
            $('#collapseExample').collapse('hide').html('');
            $(this).closest('div').after('<div class="text-center loadingpart"><img src="{{asset("ajax-loader.gif")}}"></div>');
            getCurrency(e.params.data.id);
            // discountForm.val(null).trigger('change');
        });
        productForm.on("select2:unselect", function (e) { 
            $('#collapseExample').collapse('hide').html('');            
            $('#inputGroupPrepend').html('...')
            // showVat()
            total_amount = 0;
            subTotal = 0;
            vat_amount = 0;
            discount_amount = 0;
        })

let DetailProduct = ( data ) => {        
        // `d` is the original data object for the row
        var result = '';
        result += '<div class="card detail_product"><div class="card-header"><strong><center>Detail Product : '+data.product_name+'</center></strong>'+showImageProduct(data.image)+'</div>';

        result += '<div class="card-body"><dl class="row">';
            result += '<dt class="col-sm-5">Location name</dt><dd class="col-sm-7">: '+data.location_name+'</dd>';
            result += '<dt class="col-sm-5">Category desc</dt><dd class="col-sm-7">: '+data.category_desc+'</dd>';


            if(data.renewal_period != null){
                result += '<dt class="col-sm-5">Renewal period</dt><dd class="col-sm-7">: '+data.renewal_period+' month(s)</dd>';
            }

            if(data.flexi_office != null){
                result += '<dt class="col-sm-5">Flexi office</dt><dd class="col-sm-7">: '+checkUncheckVariable(data.flexi_office)+'</dd>';
            } else {
                result += '<dt class="col-sm-5">Flexi office</dt><dd class="col-sm-7">: '+checkUncheckVariable(false)+'</dd>';
            }

            if(data.dedicated_address != null){
                result += '<dt class="col-sm-5">Dedicated address</dt><dd class="col-sm-7">: '+checkUncheckVariable(data.dedicated_address)+'</dd>';
            } else {
                result += '<dt class="col-sm-5">Dedicated address</dt><dd class="col-sm-7">: '+checkUncheckVariable(false)+'</dd>';
            }

            if(data.dedicated_phone_number != null){
                result += '<dt class="col-sm-5">Dedicated phone number</dt><dd class="col-sm-7">: '+checkUncheckVariable(data.dedicated_phone_number)+'</dd>';
            } else {
                result += '<dt class="col-sm-5">Dedicated phone number</dt><dd class="col-sm-7">: '+checkUncheckVariable(false)+'</dd>';
            }            

            if(data.working_pass != null){
                result += '<dt class="col-sm-5">Working pass</dt><dd class="col-sm-7 working_pass">: '+data.working_pass+' day(s)</dd>';
            } else {
                result += '<dt class="col-sm-5">Working pass</dt><dd class="col-sm-7 working_pass">: 0 day(s)</dd>';
            }

            if(data.meeting_room_hours != null){
                result += '<dt class="col-sm-5">Meeting room hours</dt><dd class="col-sm-7 meeting_room_hours">: '+data.meeting_room_hours+' hour(s)</dd>';
            } else {
                result += '<dt class="col-sm-5">Meeting room hours</dt><dd class="col-sm-7 meeting_room_hours">: 0 hour(s)</dd>';
            }

        result += '<dt class="col-sm-5">Price</dt><dd class="col-sm-7 currency">: '+data.currency+' '+new Intl.NumberFormat('de-DE').format(data.price)+'</dd>';
        
        result += '<br><dt class="col-sm-5">Total</dt><dd class="col-sm-7"><strong>: '+data.currency+' <span id="total_amount">'+new Intl.NumberFormat('de-DE').format(data.price)+'</span></strong></dd>';

        subTotal = data.price

        total_amount = data.price;

        result += '</dl></div></div>';

        return result;

    };

let getCurrency = (id) => {        
        axios.get('{{route("products.datatable")}}?columns[0][name]=op.id&columns[0][searchable]=true&columns[0][search][value]='+id, config) .then(function (response) {
            // console.log(response.data.data[0])    
            $('.detail-product').html(DetailProduct ( response.data.data[0] ));
            $('.loadingpart').remove();
            $('#collapseExample').collapse('show');
            $('#inputGroupPrepend').html(response.data.data[0].currency)
            // showVat(response.data.data[0].vat_amount) 
            // selectPromo();
        })
        .catch(function (error) { 
            $('.detail-product').html('');
            $('#collapseExample').collapse('hide');
            $('.loadingpart').remove();
            console.log(error);
        });
    }

let checkUncheckVariable = (data) => {
        if(data == 'true'){
            return '<span class="fa fa-check text-success"></span>';
        } else {
            return '<span class="fa fa-close text-danger"></span>';
        }
    };

let showImageProduct = (image) => {
        // console.log(image)
        if(image != null){
            var images = image.split(",")

            if(images.length > 0){
                valuename = ''
                for (let index = 0; index < images.length; index++) {
                    valuename += '<br><img class="img-responsive text-center" src="{{\Config::get("thirdparty.TURBO_URL")}}/storage/app/media/products/'+images[index].replace(" ", "")+'" alt="your image" style="max-height:500px;max-width:100%;width: expression(this.width > 500 ? 500: true);"/>'
                }
            }            

            return valuename;
        }

        return '';
    };


let date = new Date();
    date.setDate(date.getDate());

$('.datepick').datepicker({
    autoclose: true,
    format: "yyyy-mm-dd",
    onSelect: function(selectedDate) { alert(selectedDate) },
    startDate: date,
})

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

    let bodyFormData = new FormData();
    bodyFormData.append('valid_from', $('[name="valid_from"]').val())
    bodyFormData.append('valid_until', $('[name="valid_until"]').val())
    bodyFormData.append('product_id', $('[name="product_id"] option:selected').val())

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

    axios.post('{{route("voucher.store")}}', $(this).serialize(), 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