@extends('layout.main') @section('content')
<section>
    <div class="container-fluid">
        @if (session()->has('success'))
            <div class="alert alert-success alert-dismissible text-center">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ session()->get('success') }}
            </div>
        @endif
        @if(in_array("warranties-add", $all_permission))
            <a href="{{route('warranties.create')}}" class="btn btn-info"><i
                    class="dripicons-plus"></i> {{__('file.Add Import Product')}}</a>
        @endif
    </div>
    {!! Form::open(['route' => 'warranties.index', 'method' => 'get']) !!}
    <div class="col-md-6 offset-md-3 mt-4">
        <div class="form-group row">
            <label class="d-tc mt-2"><strong>{{trans('file.Choose Your Date')}}</strong> &nbsp;</label>
            <div class="d-tc">
                <div class="input-group">
                    <input type="text" id="daterangepicker-change-date" class="daterangepicker-field form-control" value="{{date('d-m-Y', strtotime($start_date))}} To {{date('d-m-Y', strtotime($end_date))}}" required />
                    <input type="hidden" id="start_date" name="start_date" value="{{$start_date}}" />
                    <input type="hidden" id="end_date" name="end_date" value="{{$end_date}}" />
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="submit">{{trans('file.submit')}}</button>
                    </div>
                </div>
            </div>
        </div> 
    </div>
    {{Form::close()}}
    <div class="table-responsive">
        <table id="warranty-data-table" class="table" style="width: 100%">
            <thead>
            <tr>
                <th class="not-exported"></th>
                <th>{{trans('file.Date')}}</th>
                <th>{{trans('file.Item Name')}}</th>
                <th>{{trans('file.Item Code')}}</th>
                <th>{{trans('file.Unit')}}</th>
                <th>{{trans('file.Quantity')}}</th>
                <th>{{trans('file.Old Serial Number')}}</th>
                <th>{{trans('file.New Serial Number')}}</th>
                <th>{{trans('file.Batch Number')}}/{{trans('file.Old Lot Number')}}</th>
                <th>{{trans('file.Batch Number')}}/{{trans('file.New Lot Number')}}</th>
                <th>{{trans('file.RMA Number')}}</th>
                <th>{{trans('file.TR Number')}}</th>
                <th>{{trans('file.Invoice Number')}}</th>
                <th>{{trans('file.Invoice Date')}}</th>
                <th>{{trans('file.TKHQ Number')}}</th>
                <th class="text-center">{{trans('file.Fee Repair')}}</th>
                <th class="text-center">{{trans('file.Fee Exchange')}}</th>
                <th class="text-center">{{trans('file.Transport Cost')}}</th>
                <th>{{trans('file.customer')}}</th>
                <th class="text-center">{{trans('file.Warranty Type')}}</th>
                <th class="text-center not-exported">{{trans('file.action')}}</th>
            </tr>
            </thead>

        </table>
    </div>
</section>

<div id="warranty-details" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
    <div role="document" class="modal-dialog">
        <div style="border: none" class="modal-content">
            <div class="container mt-3">
                <div class="row">
                    <div class="col-md-1">
                        <button id="print-btn" type="button" class="btn btn-default btn-sm d-print-none"><i class="dripicons-print"></i> {{trans('file.Print')}}</button>
                    </div>
                    <div class="col-md-10" id="invoice-title"></div>
                    <div class="col-md-1">
                        <button type="button" id="close-btn" data-dismiss="modal" aria-label="Close" class="close d-print-none"><span aria-hidden="true"><i class="dripicons-cross"></i></span></button>
                    </div>                
                </div>
            </div>
            <div id="warranty-content" class="modal-body"></div>
            <div class="ml-2 mr-2" id="border-print">
                <table class="table table-bordered product-warranty-list">
                    <thead>
                        <th>STT</th>
                        <th>{{trans('file.product')}}</th>
                        <th>{{trans('file.Code')}}</th>
                        <th>{{trans('file.Quantity')}}</th>
                        <th>{{trans('file.Unit')}}</th>
                        <th>{{trans('file.Fee Repair')}}</th>
                        <th>{{trans('file.Fee Exchange')}}</th>
                        <th>{{trans('file.Transport Cost')}}</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div id="warranty-footer" class="modal-body"></div>
      </div>
    </div>
</div>

<script>
    $("ul#inventory").siblings('a').attr('aria-expanded','true');
    $("ul#inventory").addClass("show");
    $("ul#warranty").siblings('a').attr('aria-expanded', 'true');
    $("ul#warranty").addClass("show");
    $("ul#warranty #warranty-list-menu").addClass("active");
    $("table").css({ "color": "#000000" });
    $("#warranty-data-table th").css({ "border": "1px solid #333333", "text-align": "center" });
    $(".product-warranty-list th").css({ "border": "1px solid #333333", "text-align": "center" });

    function confirmDelete() {
        if (confirm("Are you sure want to delete?")) {
            return true;
        }
        return false;
    }

    var ids = [];
    var all_permission = @json($all_permission);
    var user_verified = @json(env('USER_VERIFIED'));
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).on("click", "tr.warranty-link td:not(:first-child, :last-child)", function(){
        var warranty = $(this).parent().data('warranty');
        warrantyDetails(warranty);
    });

    $(document).on("click", ".view", function(){
        var warranty = $(this).parent().parent().parent().parent().parent().data('warranty');
        warrantyDetails(warranty);
    });

    $("#print-btn").on("click", function(){
        var divToPrint=document.getElementById('warranty-details');
            var newWin=window.open('','Print-Window');
            newWin.document.open();
            newWin.document.write('<link rel="stylesheet" href="<?php echo asset('public/vendor/bootstrap/css/bootstrap.min.css') ?>" type="text/css"><style type="text/css">@media print {.modal-dialog { max-width: 1200px;} .product-warranty-list th { border: 1px solid #333333 !important; } .product-warranty-list td { border: 1px solid #333333 !important; } }</style><body onload="window.print()">'+divToPrint.innerHTML+'</body>');
            newWin.document.close();
            setTimeout(function(){
                newWin.close();
        },10);
    });

    var table = $('#warranty-data-table').DataTable({
        responsive: true,
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: "{{route('warranties.data')}}",
            data: {
                all_permission: all_permission,
                start_date: $('#start_date').val(),
                end_date: $('#end_date').val() 
            },
            dataType: "json",
            type: "post"
        },
        "createdRow": function (row, data, dataIndex) {
            $(row).addClass('warranty-link');
            $(row).attr('data-warranty', data['warranty']);
            $('td', row).css( "border", "1px solid #333333" );
        },
        "columns": [
            {"data": "key", "className": "text-center"},
            {"data": "date", "className": "text-center"},
            {"data": "product_name"},
            {"data": "product_code"},
            {"data": "unit", "className": "text-center"},
            {"data": "qty", "className": "text-center"},
            {"data": "old_serial_number"},
            {"data": "serial_number"},
            {"data": "old_batch_number"},
            {"data": "batch_number"},
            {"data": "RMA_number"},
            {"data": "tr_number"},
            {"data": "invoice_number"},
            {"data": "invoice_date", "className": "text-center"},
            {"data": "TKHQ_number"},
            {"data": "fee_repair", "className": "text-right"},
            {"data": "fee_exchange", "className": "text-right"},
            {"data": "transport_cost", "className": "text-right"},
            {"data": "customer"},
            {"data": "method", "className": "text-right"},
            {"data": "options", "className": "text-right"},
        ],
        'language': {
            'lengthMenu': '_MENU_ {{trans("file.records per page")}}',
            "info": '<small>{{trans("file.Showing")}} _START_ - _END_ (_TOTAL_)</small>',
            "search": '{{trans("file.Search")}}',
            'paginate': {
                'previous': '<i class="dripicons-chevron-left"></i>',
                'next': '<i class="dripicons-chevron-right"></i>'
            }
        },
        order: [['1', 'asc']],
        'columnDefs': [
            {
                "orderable": false,
                'targets': [0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
            },
            {
                'render': function (data, type, row, meta) {
                    if (type === 'display') {
                        data = '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                    }

                    return data;
                },
                'checkboxes': {
                    'selectRow': true,
                    'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                },
                'targets': [0]
            }
        ],
        'select': {style: 'multi', selector: 'td:first-child'},
        'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]],
        dom: '<"row"lfB>rtip',
        buttons: [
            {
                extend: 'pdf',
                text: '{{trans("file.PDF")}}',
                exportOptions: {
                    columns: ':visible:not(.not-exported)',
                    rows: ':visible',
                    stripHtml: false
                },
                customize: function (doc) {
                    for (var i = 1; i < doc.content[1].table.body.length; i++) {
                        if (doc.content[1].table.body[i][0].text.indexOf('<img src=') !== -1) {
                            var imagehtml = doc.content[1].table.body[i][0].text;
                            var regex = /<img.*?src=['"](.*?)['"]/;
                            var src = regex.exec(imagehtml)[1];
                            var tempImage = new Image();
                            tempImage.src = src;
                            var canvas = document.createElement("canvas");
                            canvas.width = tempImage.width;
                            canvas.height = tempImage.height;
                            var ctx = canvas.getContext("2d");
                            ctx.drawImage(tempImage, 0, 0);
                            var imagedata = canvas.toDataURL("image/png");
                            delete doc.content[1].table.body[i][0].text;
                            doc.content[1].table.body[i][0].image = imagedata;
                            doc.content[1].table.body[i][0].fit = [30, 30];
                        }
                    }
                },
            },
            {
                extend: 'csv',
                charset: 'UTF-8',
                bom: true, 
                text: '{{trans("file.CSV")}}',
                exportOptions: {
                    columns: ':visible:not(.not-exported)',
                    rows: ':visible',
                    format: {
                        body: function (data, row, column, node) {
                            if (column === 1 || column === 2 || column === 3 || column === 4 || column === 5 || column === 6 || 
                                column === 7 || column === 8 || column === 9 || column === 10 || column === 11 || column === 12 ||
                                column === 13 || column === 14 || column === 15 || column === 16) {
                                return data.replace(/<br>/g, '\n');
                            }
                            return data;
                        }
                    }
                }
            },
            {
                extend: 'print',
                text: '{{trans("file.Print")}}',
                messageTop: function(){
                    return `
                        <div> 
                            <div style="display:flex;justify-content: center">
                                <div style="padding-right: 15px"> 
                                    <img src="{{url('public/logo', $general_setting->site_logo)}}" width="65">
                                </div>
                                <div> 
                                    <h4 style="text-align:left;color:red;">{{trans('file.Company name system')}}</h4> 
                                    <p style="text-align:left;color:red;">{{trans('file.Company address system')}}</p> 
                                </div>
                            </div>
                            <div style="text-align:center;">         
                                <br>                
                                <h3 style="text-transform: uppercase" class="modal-title text-center container-fluid">{{trans('file.Warranty/Repair Import list')}}</h3>
                            </div>
                        </div>
                    `;
                },
                exportOptions: {
                    columns: ':visible:not(.not-exported)',
                    rows: ':visible',
                    stripHtml: false
                },
                customize: function ( doc ) {
                    $(doc.document.body).find('table td').css('border', '1px solid #333333');
                    $(doc.document.body).find('table th').css({'border': '1px solid #333333', "text-align": "center"});;
                    $(doc.document.body).find('table td:nth-child(4), table td:nth-child(12)').css('text-align', 'center');
                    $(doc.document.body).find('table td:nth-child(5), table td:nth-child(18), table td:nth-child(15), table td:nth-child(16), table td:nth-child(17)').css('text-align', 'right');
                },
            },
            {
                text: '{{trans("file.delete")}}',
                className: 'buttons-delete',
                action: function (e, dt, node, config) {
                    if (user_verified = '1') {
                        ids.length = 0;
                        $(':checkbox:checked').each(function (i) {
                            if (i) {
                                ids[i - 1] = $(this).closest('tr').data('id');
                            }
                        });
                        if (ids.length && confirmDelete()) {
                            $.ajax({
                                type: 'POST',
                                url: '{{route('warranties.destroyBySelection')}}',
                                data: {
                                    ids: ids
                                },
                                success: function (res) {
                                    $(location).attr('href', '{{route('warranties.index')}}');
                                },
                                error: function (res) {
                                    $(location).attr('href', '{{route('warranties.index')}}');
                                }
                            });
                        } else if (!ids.length) {
                            alert('No warranty is selected!');
                        }
                    } else {
                        alert('This feature is disable for demo!');
                    }
                }
            },
            {
                extend: 'colvis',
                text: '{{trans("file.Column visibility")}}',
                columns: ':gt(0)'
            },
        ],
    });

    if (all_permission.indexOf("warranties-delete") == -1) {
        $('.buttons-delete').addClass('d-none');
    }


    function warrantyDetails(warranty){
        console.log("warranty", warranty)
        let type_header = `{{trans('file.Warranty Import Report')}}`
        let type_title = `{{trans('file.Warranty Import Details')}}`
        let type = warranty[4]
        if(type === "repair") {
            type_header = `{{trans('file.Repair Import Report')}}`
            type_title = `{{trans('file.Repair Import Details')}}`
        }     

        var report_title = `
            <div style="display:flex;justify-content: center; text-align:center">
                <div> 
                    <div id="report-logo" style="padding-top:3px;">
                        <img src="{{url('public/logo', $general_setting->site_logo)}}" width="65">
                    </div>
                </div>
                <div> 
                    <div id="report-title" style="text-align:left; color:red; font-size: 0.75em; padding-bottom:8px;">
                        <h4 id="exampleModalLabel" class="modal-title text-center container-fluid">{{trans('file.Company name system')}}</h4>
                    </div> 
                    <div id="report-address" style="text-align:left; color:red; font-size: 0.75em; padding-bottom:8px;">
                        <div class="modal-title text-center container-fluid">{{trans('file.Company address system')}}</div>
                    </div> 
                </div>
            </div>
            <div style="text-align:center;">                
                <div id="report-content" style="padding-bottom:8px; padding-top:8px;">
                    <h4 style="text-transform: uppercase" class="modal-title text-center container-fluid">${type_header}</h4>
                </div>
                <div class="col-md-12 text-center" style="padding-bottom:8px;">
                    <i style="font-size: 15px;">${type_title}</i>
                </div>
            </div>
        `

        var htmltext = '';
        htmltext += '<strong>{{trans("file.Date")}}: </strong>'+warranty[0]
        warranty[11] ? htmltext += '<br><strong>{{trans("file.customer")}}: </strong>'+ warranty[11] : ""
        
        $.get('warranties/product_warranty/' + warranty[2], function(data){
            console.log("data", data)
            $(".product-warranty-list tbody").remove();
            var product_name = data[0];
            var qty = data[1];
            var unit_code = data[2];
            var fee_repair = data[3];
            var fee_exchange = data[4];
            var transport_cost = data[5];
            var product_code = data[10];
            
            var newBody = $("<tbody>");
            $.each(product_name, function(index){
                var newRow = $("<tr>");
                var cols = '';
                cols += '<td class="text-center">' + (index+1) + '</td>';
                cols += '<td>' + product_name[index] + '</td>';
                cols += '<td>' + product_code[index] + '</td>';
                cols += '<td class="text-center">' + qty[index] + '</td>';
                cols += '<td class="text-center">' + unit_code[index] + '</td>';
                cols += '<td class="text-right">' + fee_repair[index].toLocaleString('de-DE', { minimumFractionDigits: 2 }) + '</td>';
                cols += '<td class="text-right">' + fee_exchange[index].toLocaleString('de-DE', { minimumFractionDigits: 2 }) + '</td>';
                cols += '<td class="text-right">' + transport_cost[index].toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.") + '</td>';
                newRow.append(cols);
                newBody.append(newRow);
            });

            $("table.product-warranty-list").append(newBody);
            $(".product-warranty-list td" ).css({ "border": "1px solid #333333" });
        });

        var htmlfooter = '<p><strong>{{trans("file.Note")}}:</strong> '+warranty[12];
   
        $('#invoice-title').html(report_title);
        $('#warranty-content').html(htmltext);
        $('#warranty-footer').html(htmlfooter);
        $('#warranty-details').modal('show');
    }

    if(all_permission.indexOf("warranties-delete") == -1)
        $('.buttons-delete').addClass('d-none');

        $(".daterangepicker-field").daterangepicker({
        callback: function(startDate, endDate, period){
            var start_date = startDate.format('YYYY-MM-DD');
            var end_date = endDate.format('YYYY-MM-DD'); 

            var display_start_date = startDate.format('DD-MM-YYYY');
            var display_end_date = endDate.format('DD-MM-YYYY');  
            var title = display_start_date + ' To ' + display_end_date;
            $(this).val(title);
            $('input[name="start_date"]').val(start_date);
            $('input[name="end_date"]').val(end_date);
        }
    });

    $('#daterangepicker-change-date').on("change", function(){
        var date_value = $(this).val();
        var arrDate = (date_value.trim()).split("To")

        var start = arrDate[0].trim().split("-")
        var end = arrDate[1].trim().split("-")
        var start_date = start[2] + '-' + start[1] + '-' + start[0]
        var end_date = end[2] + '-' + end[1] + '-' + end[0]

        $('input[name="start_date"]').val(start_date);
        $('input[name="end_date"]').val(end_date);
    }); 
</script>
@endsection