@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>Client:</label>
                                <br>
                                <select name="client_id" class="form-control">
                                </select>
                                {{-- <input type="text" name="client_id" 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-12">
                            <div class="form-group">
                                <label>Choose or Write More Product:</label>
                                <br>
                                <select name="product_id[]" class="form-control js-example-basic-multiple" multiple="multiple">
                                </select>
                            </div>                                
                        </div> 
                        <div class="col-md-12">                            
                            <table class="table table-bordered" width="100%">
                                <thead>
                                    <tr>
                                        <td width="60%">Product</td>
                                        <td width="20%">Qty</td>
                                        <td width="20%">Price</td>
                                        {{-- <td>Amount</td> --}}
                                        <td>#</td>
                                    </tr>
                                </thead>
                                <tbody class="items">

                                </tbody>
                            </table>               
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Promo & Discount:</label>
                                <br>
                                <select name="promo_id" class="form-control">
                                </select>
                            </div>                                
                        </div> 
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>VAT</label>
                                <div class="input-group">
                                    <div class="radio">
                                        <label for="optionsRadios1" style="font-weight:400">
                                            <input type="radio" name="vat" id="optionsRadios1" value="1">
                                            Yes
                                        </label>
                                    </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <div class="radio">
                                        <label for="optionsRadios2" style="font-weight:400">
                                            <input type="radio" name="vat" id="optionsRadios2" value="0" checked>
                                            No
                                        </label>
                                    </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    
                                    <div class="radio">
                                        <label style="font-weight:400">
                                            <span id="vat"></span>
                                        </label>
                                    </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </div>
                            </div>                        
                        </div>
                        {{-- <div class="col-md-12">
                            <div class="form-group">
                                <label>WHT</label>
                                <br>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="wht" id="optionsRadios3" value="0" checked>
                                    <label class="form-check-label" for="optionsRadios3" style="font-weight:400">
                                        0 %
                                    </label>
                                </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="wht" id="optionsRadios4" value="2">
                                    <label class="form-check-label" for="optionsRadios4" style="font-weight:400">
                                        2 %
                                    </label>
                                </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="wht" id="optionsRadios5" value="10">
                                    <label class="form-check-label" for="optionsRadios5" style="font-weight:400">
                                        10 %
                                    </label>
                                </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    
                            </div>                                                                                    
                        </div> --}}
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Send Invoice Mail</label>
                                <br>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="send_mail" id="optionsRadios7" value="1">
                                    <label class="form-check-label" for="optionsRadios7" style="font-weight:400">
                                        Yes
                                    </label>
                                </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="send_mail" id="optionsRadios8" value="0" checked>
                                    <label class="form-check-label" for="optionsRadios8" style="font-weight:400">
                                        No
                                    </label>
                                </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                                                    
                            </div>                                                                                    
                        </div>                        

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

                    </div>

                </div>

                <div class="card-footer">
                    <div class="row">
                        <div class="col-12">
                            <dl class="row detail_amount">
                                <dt class="col-sm-4">Promo & Discount</dt><dd class="col-sm-8">: <span class="currency"></span> <span id="discount_amount"></span></dd>
                                <dt class="col-sm-4">Amount Due</dt><dd class="col-sm-8">: <span class="currency"></span> <span id="amount_due"></span></dd>
                            </dl>
                        </div>
                        <div class="col-12">

                            <button type="submit" class="btn btn-info float-right">Save</button>
                        </div>
                    </div>
                    {{-- <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 src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>

<script>
    
//Initialize Elements
let locationId = $('[name="location_id"]');
let clientId = $("select[name='client_id']");
let productId = $('[name="product_id[]"]');
let discountForm = $('[name="promo_id"]');
let locationData = null;
let amount_due = 0;
let wht = 0;
let vat = 0;
let subtotal = 0;
let discount_amount = 0;
let lengthDt = 4;
let product = [];

let amount_order = () => {

    let vat_amount = 0;
    subtotal = 0;

    if (product.length > 0){
        for (const key in product) {
            if (product.hasOwnProperty(key)) {
                subtotal += product[key].price * parseInt($('[name="qty['+product[key].id+']"]').val())
                // console.log(subtotal)
            }
        }
    }

    // amount_due = amount_due + parseInt(price)
    amount_due = subtotal - discount_amount

    if ($('[name="vat"]:checked').val() > 0){

        vat_amount = amount_due * (vat / 100)
    }
    let wht_amount = amount_due * (wht / 100)

    $('#amount_due').html(new Intl.NumberFormat('de-DE').format(amount_due + vat_amount - wht_amount))
    $('#discount_amount').html(new Intl.NumberFormat('de-DE').format(discount_amount))
}

let setItemsBody = (product) => {    
    if (product.length == 0){
        $('.items').html('<tr id="no_items"><td colspan="'+lengthDt+'" align="center">no items on cart</td></tr>')
        // $('.items').html(tbody)
    } else {
        $('#no_items').remove()
        let tbody = '';

        tbody += '<tr id="product_'+product.id+'">'
        tbody += '<td>'+product.product_name+'</td>'
        tbody += '<td><div class="form-group"><input type="number" name="qty['+product.id+']" style="width:100px" align="center" onkeyup="changeQty('+product.id+')" value="1" min="1""></div></td>'
        tbody += '<td>'+product.price+'</td>'
        tbody += '<td></td>'
        // tbody += '<td>'+product.price+'</td>'
        tbody += '</tr>'
        $('.items').append(tbody)
    }
}


let changeQty = (id) => {
    amount_order()    
    // if($('[name="qty['+id+']"]').val() > 0){
    // }
}

$('[name="wht"]').on('change', function(){

    wht = $('[name="wht"]:checked').val()
    amount_order()
})

$('[name="vat"]').on('change', function(){
    setLocation()
    amount_order()
})

let setLocation = () => {    
    if (locationData != null){

        $('.currency').html(locationData.currency)
        vat = locationData.vat_amount

        if ($('[name="vat"]:checked').val() > 0){
            $('#vat').html('('+locationData.vat_amount+' %)')
        } else {
            $('#vat').html('')
        }
    } else {
        $('.currency').html('')
        vat = 0
    }
}

amount_order()

discountForm.select2({
            placeholder: 'Choose promo ...',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("promo.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.name',
                            orderable: true,
                            searchable: true
                            },
                            1:{
                            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.name};
                        key_x++;
                    })

                    data.results = newData;

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

                },
                cache: true
            },
            minimumInputLength: 0,
        });

discountForm.on('select2:select', function (e) {
    $('.loadingpart').remove();
    $(this).closest('div').after('<div class="text-center loadingpart"><img src="{{asset("ajax-loader.gif")}}"></div>');
    getPromo(e.params.data.id); 
});
discountForm.on("select2:unselect", function (e) { 
    
    discount_amount = 0;   
    amount_order() 
})

let getPromo = (id) => {        
            axios.get('{{route("promo.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]) 
                $('.loadingpart').remove();
                let data = response.data.data[0];
                if(data.discount_type == 'fix'){
                    if(data.discount > 0){
                        discount_amount = data.discount;
                    }
                }
                if(data.discount_type == 'percentage'){
                    if(data.discount > 0){
                        discount_amount = subtotal * (data.discount / 100);
                    }   
                }

                amount_order()
            })
            .catch(function (error) {                 
                console.log(error);
                $('.loadingpart').remove();
            });
        };
    

locationId.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
        }
    });

locationId.on('select2:select', function (e) {
    // console.log(e.params.data.id)   
    axios.get('{{route("locations.datatable")}}?columns[0][name]=op.id&columns[0][searchable]=true&columns[0][search][value]='+e.params.data.id, config) .then(function (response) {        
        locationData = response.data.data[0]        
        setLocation()
        amount_order()
    })
    .catch(function (error) {                 
        console.log(error);
    }); 
});
locationId.on("select2:unselect", function (e) { 
    locationData = null;
    setLocation()
})
    
clientId.select2({
        placeholder: 'Client name ...',
        width: '100%',
        allowClear: true,
        minimumInputLength:3,
        ajax: {            
            url: '{{route("clients.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.fullname',
                        orderable: true,
                        searchable: true
                        },
                        1:{
                        name: 'op.company_name',
                        orderable: true,
                        searchable: true
                        },
                        2:{
                        name: 'op.clientid',
                        orderable: true,
                        searchable: true
                        },
                        3:{
                        name: 'op.status',
                        orderable: true,
                        searchable: true,
                        // search: {
                        //         regex: true,
                        //         value : '1',
                        //     },
                        }
                    },
                    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){
                    var text = val.clientid;
                    text += (val.fullname != null ? ' - '+val.fullname : '');
                    text += (val.company_name != null ? ' - '+val.company_name : '');

                    newData[key] = {'id' : val.clientid, 'text' : text};
                })

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

            },
            cache: true
        }
    });



productId.select2({
    placeholder: 'Choose product ...',
    tags: true,
    // tokenSeparators: [',', ' '],
    tokenSeparators: ['+1'],
    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 : '3|4|5|6',
                        },
                    },
                    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;                
            var newData = []
            $.each(data.data, function(key, val){
                newData[key] = {'id' : val.id, 'text' : val.product_name + ' | ' + val.currency + ' ' + val.price};                    
            })

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

        },
        cache: true
    },
    minimumInputLength: 0,
    // maximumInputLength: 5,
});

productId.on('select2:select', function (e) {
    // console.log(e.params.data.id)

    if(parseInt(e.params.data.id) < 5000000){

        axios.get('{{route("products.datatable")}}?columns[0][name]=op.id&columns[0][searchable]=true&columns[0][search][value]='+e.params.data.id, config) .then(function (response) {  
                let data = response.data.data[0]        
                let customeproduct = {
                    id: data.id,
                    product_name: data.product_name,
                    price: data.price,        
                }
                product.push(customeproduct);
                setItemsBody(customeproduct)
                amount_order()
        })
        .catch(function (error) {                 
            console.log(error);
        });        

    }  else {

        setBodyItems(e.params.data.id)        
    }
});
productId.on("select2:unselect", function (e) { 
    // console.log(e.params.data)
    // console.log(e.params.data.id)
    if(parseInt(e.params.data.id) < 5000000){

        axios.get('{{route("products.datatable")}}?columns[0][name]=op.id&columns[0][searchable]=true&columns[0][search][value]='+e.params.data.id, config) .then(function (response) {        
            let data = response.data.data[0]
            removeProductFromItems(parseInt(data.id))
            // amount_order(parseInt(data.price))
        })
        .catch(function (error) {                 
            console.log(error);
        }); 
    } else {

        removeProductFromItems(e.params.data.id)
    }
})

let removeProductFromItems = (id) => {
    if(Number.isInteger(id)){

        $('#product_'+id).remove()
    } else {

        var newid = window.btoa(id);

        $('#product_'+newid.substr(0, newid.length-2)).remove()

        id = newid.substr(0, newid.length-2);
    }

    if (product.length > 0){
        for (const key in product) {
            if (product.hasOwnProperty(key)) {                
                if (id == product[key].id) {
                    product.splice(key, 1);                    
                    break;
                }
            }
        }
        amount_order()
    }
}

$( "#form" ).submit(function( e ) {
    e.preventDefault()
    let input = $(this).serialize();
    let items = window.btoa(JSON.stringify(product))

    axios.post('{{route("invoice.store")}}', $(this).serialize()+'&items='+items, config) .then(function (response) {                
        console.log(response.data)
        window.location = response.data.additional.redirect;
    })
    .catch(function (error) { console.log(error);
        $('.newerror').remove()
        if(error.response.data.data.error_code == 'BAD_REQUEST_01'){

            Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: error.response.data.data.message,
                    // footer: '<a href>Why do I have this issue?</a>'
                })
        } 
        if(error.response.data.data.error_code == 'BAD_REQUEST'){

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


    });
})

let setBodyItems = (name) => {
    let tbody = '';    
    
    var newid = window.btoa(name);
    var customid = newid.substr(0, newid.length-2);
    tbody += '<tr id="product_'+newid.substr(0, newid.length-2)+'">'
    tbody += '<td>'+name+'<input type="hidden" name="product_name['+customid+']" value="'+name+'"></td>'
    tbody += '<td><div class="form-group"><input type="number" name="qty['+customid+']" style="width:100px" align="center" value="1" min="1" onkeyup="changeQty(\''+customid+'\')"></div></td>'
    tbody += '<td><input type="number" name="product_price['+customid+']" style="width:100%" align="center" value="0" min="0""></td>'
    tbody += '<td><span class="btn btn-primary btn-sm actionrow" onclick="updatecustom(\''+customid+'\')"><i class="fa fa-save"></i> Add Product</span></td>'
    // tbody += '<td>'+product.price+'</td>'
    tbody += '</tr>'
    $('.items').append(tbody)
    
}

let updatecustom = (id) => {
    if(parseInt($('[name="product_price['+id+']"]').val()) > 0){

        let customeproduct = {
            id: id,
            product_name: $('[name="product_name['+id+']"]').val(),
            price: $('[name="product_price['+id+']"]').val(),        
        }

        product.push(customeproduct);
        amount_order()
        changeToremove(id)

    } else {
        Swal({
            type: 'error',
            title: 'Oops...',
            text: 'Price can not be 0',
            // footer: '<a href>Why do I have this issue?</a>'
        })
    }
    
}

let changeToremove = (id) => {
    $('#product_'+id).find('.actionrow').remove()    
    var price = $('[name="product_price['+id+']"]').val()
    $('[name="product_price['+id+']"]').closest('td').html(price)
    $('[name="product_price['+id+']"]').remove() 

}

    
</script>
@endsection