@extends('templates.structure')

@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.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')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" />
<style>
    .status-shine{
        cursor: pointer;
        color: #6c757d;
    }
    .check {
        color: black;
    }
    .status-shine:hover {
        background-color: #f8f9fa;
        font-weight: bold;
        color: black;
    }
    .swal2-overflow {
        overflow-x: visible;
        overflow-y: visible;
    }
    #example1_filter{
        display: none;
    }

    .ck-content { min-height:400px; max-height:auto; }
</style>
@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                {{-- <div class="card-header">
                    <h3 class="card-title">Data Table With Full Features</h3>
                </div> --}}
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="example1" class="table table-hover" style="width:100%">
                        <thead>
                            <tr>
                                <th>Invoice Number</th>
                                <th>Client ID</th>
                                <th>Company Name</th>
                                <th>Location Name</th>
                                <th>Due Date</th>
                                <th>Date Generated</th>
                                <th>Status</th>
                                <th>Created By</th>
                                <th>Created At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Form Payment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formPayment" role="form">
                    <div class="form-group">
                        <label for="paid_reference" class="col-form-label">Paid reference:</label>
                        <input type="text" class="form-control" id="paid_reference" name="paid_reference">
                    </div>
                    <div class="form-group">
                        <label for="amount_paid" class="col-form-label">Amount paid:</label>
                        <input type="text" class="form-control" id="amount_paid" name="amount_paid">
                    </div>
                    <div class="form-group">
                        <label for="date_paid" class="col-form-label">Date paid:</label>
                        <input type="text" class="form-control tanggal" id="date_paid" name="date_paid">
                    </div>
                    <input type="hidden" name="id">
                    {{-- <input type="hidden" name="status" value="1"> --}}
                    <div class="form-group">
                        <label>Image</label>
                            <div style="display:none">
                                <br>
                            </div>
                            <img id="falseinput" class="img-responsive" src="#" alt="your image" style="max-height:500px;max-width:500px;width: expression(this.width > 500 ? 500: true);"/>
                            <br>
                            <br>
                            <input type="file" name="image" id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" class="form-control">
                            <textarea id="base" style="display:none"></textarea>
                    </div>
                    <div class="form-group">
                        <label>WHT</label>
                        <input type="text" class="form-control" id="wht" name="wht" value="0">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Paid References Notes:</label>
                        <textarea class="form-control" id="paid_references_notes" name="paid_references_notes"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="savePayment">Save</button>
            </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form id="formMail" role="form">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Form Mail</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                        <input type="hidden" name="invoice_id">
                        {{-- <div class="form-group">
                            <label for="paid_reference" class="col-form-label">From:</label>
                            <input type="text" class="form-control" id="sending_from" name="sending_from">
                        </div> --}}
                        <div class="form-group">
                            <label for="amount_paid" class="col-form-label">To:</label>
                            <input type="text" class="form-control" id="sending_to" name="sending_to">
                        </div>
                        <div class="form-group">
                            <label for="amount_paid" class="col-form-label">Cc:</label>
                            <input type="text" class="form-control" id="sending_cc" name="sending_cc">
                        </div>
                        <div class="form-group">
                            <label for="amount_paid" class="col-form-label">Bcc:</label>
                            <input type="text" class="form-control" id="sending_bcc" name="sending_bcc">
                        </div>
                        <div class="form-group">
                            <label for="date_paid" class="col-form-label">Subject:</label>
                            <input type="text" class="form-control" id="subject" name="subject">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">Message:</label>
                            <textarea id="editor1" name="sending_message" style="width: 100%;" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Attach Invoice</label>
                            <div class="input-group">
                                <div class="radio">
                                    <label for="optionsRadios1" style="font-weight:400">
                                        <input type="radio" name="attach" id="optionsRadios1" value="1" checked>
                                        Yes
                                    </label>
                                </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="radio">
                                    <label for="optionsRadios2" style="font-weight:400">
                                        <input type="radio" name="attach" id="optionsRadios2" value="0">
                                        No
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="date_paid" class="col-form-label">Next Follow Up:</label>
                            <input type="text" class="form-control tanggal" id="next_follow_up" name="next_follow_up">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="sendMail">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.row -->

@endsection

@section('custom_js')
<!-- DataTables -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4/jquery.dataTables.yadcf.min.js"></script> --}}
<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="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.14.0/printThis.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script>
let statusArr = [
        'unpaid',
        'paid',
        'void',
        'canceled',
        'expire'
        ];

let status = 0;

var table = $('#example1').DataTable({
    "searchDelay": 450,
    "scrollX": true,
    "processing": true,
    "serverSide": true,
    "ajax": {
            url: '{{route("invoice.datatable")}}',
            data: function (d) {
                d.client = $('[name=client]').val();
                d.location_id = $('[name=location_id]').val();
                d.from = $('[name=from]').val();
                d.to = $('[name=to]').val();
                d.status = $('[name=status]').val();
            }
        },
    "columns": [
        {"data": "invoice_number", "orderable": true, "searchable": false},
        {"data": function ( row, type, set ) {
            return row.client_name;

        }, "orderable": false, "searchable": false},
        {"data": "company_name", "orderable": false, "searchable": false},
        {"data": "location_name", "orderable": false, "searchable": false},
        {"data": "date_due", "orderable": true, "searchable": false},
        {"data": "date_generated", "searchable": false},
        {"data": function ( row, type, set ) {
            return statusArr[row.status];
        }, "orderable": false, "searchable": false},
        {"data": function ( row, type, set ) {
            return row.created_by;
        }, "orderable": false, "searchable": false},
        {"data": "created_at", "orderable": true, "searchable": false, "visible": false},
        {"data": null, "orderable": false, "searchable": false},
    ],
    "order" :[[ 4, 'desc' ]],
    "columnDefs": [
        {
        "targets": -1,
        "data": "action",
        "render": function ( data, type, row, meta ) {
            var action = '<div class="btn-group float-right" role="group" aria-label="Basic example">';
            action += '<button class="btn btn-outline-success details-control" ><span class="fa fa-info"></span></button>&nbsp;'
            if (data.status == 1 || data.status == 0) {

                action += '<button class="btn btn-outline-primary" onclick="printInvoice('+data.id+')"><span class="fa fa-print"></span></button>&nbsp;'
            }
            if (data.status == 0) {

                // action += '<button class="btn btn-outline-info" onclick="sendMail('+data.id+', \''+data.email+'\')"><span class="fa fa-send"></span></button>&nbsp;'
            }

            action += '</div>';
            return action
            }
        }
    ],
})

let setStatus = (statusChoice, id) => {

    Swal({
        title: 'Are you sure?',
        text: "You want to "+statusArr[statusChoice]+"!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor:'#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, '+statusArr[statusChoice]+' it!'
        })
        .then((result) => {
            if (result.value) {
                status = statusChoice;
                if(statusChoice == '1'){
                    $('#exampleModal').modal('show')
                    $('[name="id"]').val(id)
                    $('#savePayment').attr('onclick', 'savePayment('+id+', '+status+')')
                } else {
                    savePayment(id, status);
                }
            }
    }), function(dismiss) {
    // dismiss can be "cancel" | "close" | "outside"
    }

};


let addLocationId = () => {
    let location_name = $('[name="location_id"]');
    location_name.select2({
        placeholder: 'Location',
        // theme: "bootstrap",
        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
        }
    });
}

let addFilterRange = () => {
    $('.dataTables_scroll').before('<div class="row">\
        <div class="col"><select name="client" class="form-control" placeholder="Client"></select></div>\
        <div class="col"><input type="text" name="from" class="form-control datepick" placeholder="Due Date From"></div>\
        <div class="col"><input type="text" name="to" class="form-control datepick"  placeholder="Due Date To"></div>\
        <div class="col"><select name="status" class="form-control"  placeholder="status"></select></div>\
        <div class="col"><select name="location_id" class="form-control"  placeholder="location_id"></select></div>\
        </div>\
    ')
    $('.datepick').datepicker({
        autoclose: true,
        format: "yyyy-mm-dd",
        // onSelect: function(selectedDate) { alert(selectedDate) }
    });

    var select = $('[name="status"]')
    select.select2({
        placeholder: 'Status',
        // theme: "bootstrap",
        width: '100%',
        allowClear: true,
        data: [
            {id:'', text:''},
            {id:0, text:statusArr[0]},
            {id:1, text:statusArr[1]},
            {id:2, text:statusArr[2]},
            {id:3, text:statusArr[3]},
            {id:4, text:statusArr[4]},
            ]
    })


    addLocationId()

    $('[name="client"], [name="from"], [name="to"], [name="status"], [name="location_id"]').change(function () {
        table.draw();
    })
}

addFilterRange()


let client = $("select[name='client']")

    $("select[name='client']").select2({
        placeholder: 'Client name ...',
        width: '100%',
        allowClear: true,
        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
        }
    });


let savePayment = (id, newStatus) => {

    if (status == '1'){
        // input = $('#formPayment').serialize();
        var inputformdata = new FormData();
            inputformdata.append('paid_reference', $('[name="paid_reference"]').val())
            inputformdata.append('amount_paid', $('[name="amount_paid"]').val())
            inputformdata.append('date_paid', $('[name="date_paid"]').val())
            inputformdata.append('wht', $('[name="wht"]:checked').val())
            inputformdata.append('image', $('#base').val())
            inputformdata.append('paid_references_notes', $('[name="paid_references_notes"]').val())
            inputformdata.append('status', newStatus)


    } else {

        var inputformdata = new FormData();
        inputformdata.append('status', newStatus)

    }

    inputformdata.append('id', id)

    axios.post('{{url("invoice-paid")}}', inputformdata, config).then(function (response) {
                // console.log(response);
                $('#exampleModal').modal('hide')
                table.ajax.reload();
            })
            .catch(function (error) { console.log(error);
                $('.newerror').remove()
                if(error.response.data.data.error_code != 'BAD_REQUEST'){

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

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

}

$('#exampleModal').on('hidden.bs.modal', function (e) {
  // do something...
  hideModal()
})

let hideModal = () => {
    $('.newerror').remove()
    $('#exampleModal').find("input, textarea").val("");
    $('#savePayment').removeAttr('onlick')
}

$('.tanggal').datepicker({
    autoclose: true,
    format: "yyyy-mm-dd",
    container: '#exampleModal',
});

let printInvoice = (invoiceId) => {
    window.open('{{url("/invoicePrint")}}/'+invoiceId,'_blank');
};


// sendmail modal ///////////////

var myEditor;
ClassicEditor
    .create(document.querySelector('#editor1'))
    .then(function (editor) {
        // The editor instance
        // console.log( 'Editor was initialized', editor );
        myEditor = editor;
    })
    .catch(function (error) {
        console.error(error)
    })

$( "#formMail" ).submit(function( e ) {
    e.preventDefault();

    let input = ''
    let bodyFormData = new FormData();
    let inputonject = input.split("&")

    input = $(this).serialize();

    for (const key in inputonject) {
        if (inputonject.hasOwnProperty(key)) {
            var setInput = inputonject[key].split('=')
            bodyFormData.append(setInput[0], setInput[1])
        }
    }

    bodyFormData.append('sending_message', myEditor.getData() != "<p>&nbsp;</p>" ? myEditor.getData() : '')

    axios.post('{{route("invoice.send-mail-invoice.store")}}', input, config).then(function (response) {
        // console.log(response);
        Swal({
            type: 'success',
            title: 'Send Success!',
            text: '',
            // footer: '<a href>Why do I have this issue?</a>'
        })
        $('#exampleModal1').modal('hide')
        // table.ajax.reload();
    })
    .catch(function (error) { console.log(error);
        $('.newerror').remove()
        var msgs = error.response.data.data.message
        $.each(msgs, function (index, value) {
                $('[name="'+index+'"]').after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
            });
    });
})

let sendMail = (invoiceId, email) => {
    $('#sending_to').val(email)
    $('#exampleModal1 [name="invoice_id"]').val(invoiceId)
    $('#exampleModal1').modal('show')
}

let hideMailModal = () => {
    $('.newerror').remove()
    $('#exampleModal1').find("input, textarea").val("");
    myEditor.setData('');
    $('#sendMail').removeAttr('onlick')
}

$('#exampleModal1').on('hidden.bs.modal', function (e) {
  // do something...
  hideMailModal()
})

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            if(e.target.result != undefined){
                $('#falseinput').closest('div').css('display', 'block')
            }
            $('#falseinput').attr('src', e.target.result);
            $('#base').val(e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

</script>
@endsection



@section('addCustomInfo')
if(v.name == 'amount_due' || v.name == 'amount_paid'){
    valuename = new Intl.NumberFormat('en-US').format(valuename);
}
if(v.name == 'status'){
    {{-- valuename = statusArr[data.status]; --}}
    console.log(data.status)
    if(data.status == 0){

        let statusNow = data.status;
            let activeStatus = '';
            valuename = '';

            for( let keystatus in statusArr)
            {
                if (keystatus == statusNow) {
                    activeStatus = 'check text-success"';
                } else {
                    activeStatus = 'circle" onclick="setStatus('+keystatus+', '+data.id+')"';
                }

                valuename += '<div class="status-shine '+activeStatus+' >\
                                    <span class="fa fa-'+activeStatus+'"></span>&nbsp;&nbsp;&nbsp;'+statusArr[keystatus]+'\
                            </div>';
            }
    } else {
        valuename = statusArr[data.status];
    }
}

if(v.name == 'discount_price'){
    valuename = new Intl.NumberFormat('en-US').format(valuename);

    if(data.discount_type == 'percentage'){
        valuename += ' %';
    }
}

if(v.name == 'vat'){
    valuename = new Intl.NumberFormat('en-US').format(valuename);
    valuename += ' %';
}

if (v.name == 'show_period'){

    if(valuename == '1')
    {
        valuename = '<span class="fa fa-check text-success"></span>';
    }

    if(valuename == '0')
    {
        valuename = '<span class="fa fa-close text-danger"></span>';
    }
}
if (v.name == 'wht'){

    if(valuename == '0')
    {
        valuename = '<span class="fa fa-close text-danger"></span>';
    } else {
        valuename = new Intl.NumberFormat('en-US').format(valuename);
        valuename += ' %';
    }
}
if (v.name == 'payment_proof'){
    if(valuename != null){
        valuename = '<img class="img-responsive" src="{{\Config::get("thirdparty.TURBO_URL")}}/storage/app/media/payment_proof/'+valuename+'" alt="your image" style="max-height:500px;max-width:100%;width: expression(this.width > 500 ? 500: true);"/>&nbsp;&nbsp;&nbsp;'
    }
}
@endsection

@section('moreinfoJsLg')
result += '<tr><td><strong>Items</strong></td><td>\
                <table class="table table-bordered" width="100%" id="tbody_items_'+data.id+'">\
                    <thead>\
                        <tr style="font-weight: bold">\
                            <td>Product</td><td>Price</td><td>Qty</td>\
                        </tr>\
                    </thead><tbody></tbody>';
result += '</table></td></tr>';

result += '<tr>\
<td><strong>Follow Up Logs</strong></td>\
<td><a class="btn btn-primary" href="{{url("invoice/follow-up")}}/'+data.id+'">Show Follow Up</a></td>\
</tr>';
@endsection

@section('addCustomInfoXhr')

    axios.get('{{route("invoice-items.datatable")}}?columns[0][name]=op.invoice_id&columns[0][searchable]=true&columns[0][search][value]='+row.data().id, config) .then(function (response) {
        {{-- console.log(response.data.data)  --}}
        let tbody = '';
        let items = response.data.data;
        for(let item in items){
            {{-- console.table(item) --}}
            tbody += '<tr><td>'+items[item].product_name+'</td><td align="right">'+new Intl.NumberFormat('en-US').format(items[item].price)+'</td><td align="right">'+items[item].quantity+'</td></tr>'
        }

        $('#tbody_items_'+row.data().id).find('tbody').html(tbody)
    })
    .catch(function (error) {
        console.log(error);
        $('.loadingpart').remove();
    });
@endsection