@extends('layouts.backend.app')

@section('content')
    <!-- Start right Content here -->
    <div class="main-content">
        <div class="page-content">


            <!-- Page Preloder -->
            <div id="preloder">
                <div class="loader"></div>
            </div>


            <div class="container-fluid">
                <div class="page-title-box">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h6 class="page-title">Spare View</h6>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ dashboardurl() }}">Home </a></li>
                                <li class="breadcrumb-item active" aria-current="page">Spare View</li>
                            </ol>
                        </div>
                        <div class="col-md-4">
                            <a class="btn btn-primary button-1 float-right " href="{{ route('spareparts') }}">
                                <span class="pe-1 color-primary"><i class="ti-angle-left"></i></span> Back</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-3">
                        <div class="row g-0 align-items-center ">
                            <div class="col-md-8">

                                <div class="card-body">
                                    <p class="card-text">
                                        <span class="card-title h-5">Product Name : </span>
                                        @if (!empty($sparedata->name))
                                            {{ $sparedata->name }}
                                        @endif
                                    </p>

                                    <p class="card-text">
                                        <span class="card-title h-5">No of Qty : </span>
                                        @if (!empty($sparedata->qty))
                                            {{ $sparedata->qty }}
                                        @endif
                                    </p>

                                    <p class="card-text">
                                        <span class="card-title h-5">Supplier Name : </span>
                                        @if (!empty($sparedata->SupName12->sup_name))
                                            {{ $sparedata->SupName12->sup_name }}
                                        @endif
                                    </p>

                                    <p class="card-text">
                                        <span class="card-title h-5">Selling Price : </span>
                                        @if (!empty($sparedata->selling_price))
                                            {{ $sparedata->selling_price }}
                                        @endif
                                    </p>

                                    <p class="card-text">
                                        <span class="card-title h-5">Single Price : </span>
                                        @if (!empty($sparedata->single_price))
                                            {{ $sparedata->single_price }}
                                        @endif
                                    </p>


                                </div>

                            </div>
                            <div class="col-md-4">
                                <div class="card-body d-flex justify-content-end">
                                    <button class="btn btn-primary prbtn"><i class="fas fa-print"></i> Print
                                        Barcodes</button>
                                </div>
                            </div>
                        </div>

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

                                <table class="display" style="width:100%" id="dataList">
                                    <thead>
                                        <tr>
                                            <th width="10%"><input name="select_all" value="1"
                                                    class="chbx form-group" id="selectAllAgents" type="checkbox" /></th>
                                            <th width="10%">S.No</th>
                                            <th width="10%">Dispaly</th>
                                            <th width="70%">Barcode</th>
                                            <th width="10%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                        <input type="hidden" id="previewImg">

                    </div>

                </div>
            </div>

            <style>
                .barcode-img {
                    display: block;
                    margin: 0 auto;
                    text-align: center;
                    /* Center the images horizontally */
                }
            </style>





            <div id="prnpg"></div>
        @endsection

        @section('scripts')
            <script src="https://cdn.bootcss.com/html2pdf.js/0.9.1/html2pdf.bundle.js"></script>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.1/html2pdf.bundle.min.js"></script>

            <script>
                $(document).on('click', '.prbtn', function() {
                    var chkId = '';
                    $('.chbxvs').each(function() {
                        if ($(this).is(':checked')) {
                            chkId += $(this).val() + ",";
                        }
                    });
                    chkId = chkId.slice(0, -1);

                    var pathn = $('meta[name="base_url"]').attr("content") + '/sparepart-barcode-multiple';
                    var token = $('meta[name="csrf-token"]').attr("content");

                    $("#preloder").fadeIn();

                    $.ajax({
                        url: pathn,
                        type: "get",
                        data: {
                            _token: token,
                            chkId: chkId
                        },
                        success: function(data) {
                            $('#prnpg').html(data.msg);
                            var element = document.getElementById('prnpg');

                            var printContents = document.getElementById('prnpg').innerHTML;
                            var originalContents = document.body.innerHTML;
                            document.body.innerHTML = printContents;
                            self.print();
                            document.body.innerHTML = originalContents;

                            // html2pdf(element, {
                            //     margin: [0, 0, 0, 20],
                            //     padding: 0,
                            //     filename: 'barcodes.pdf',
                            //     image: { type: 'element', quality: 1 },
                            //     html2canvas: { scale: 2, logging: true },
                            //     jsPDF: {
                            //         unit: 'px',
                            //         format: [142, 71],
                            //         orientation: 'l'
                            //     },
                            //     pagebreak: { mode: 'avoid-all', after: '.barcode-img' }
                            // }).from('element-to-print').outputPdf().get('pdf').then(function (pdfObj) {
                            //     pdfObj.autoPrint();
                            //     window.open(pdfObj.output("bloburl"), "F");
                            // });

                            const myTimeout = setTimeout(myGreeting, 2000);
                        }
                    });
                });


                function myGreeting() {
                    $("#prnpg").html('');
                    $("#preloder").fadeOut();
                }

                $(document).ready(function() {

                    var reporttables = $('#dataList').DataTable({
                        "order": [
                            [0, "desc"]
                        ],
                        "serverSide": true,
                        "stateSave": true,
                        'processing': true,
                        "pageLength": 20,
                        "lengthMenu": [
                            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420,
                                450, 475, 500
                            ],
                            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420,
                                450, 475, 500
                            ]
                        ],
                        oLanguage: {
                            sProcessing: '<div class="lds-css"><div style="width:100%;height:100%" class="lds-eclipse"><div></div><p>Please wait while we are processing your request.</p></div></div>'
                        },
                        "ajax": {
                            'type': 'GET',
                            'url': '{{ route('sparepart-barcode-data') }}',
                            "data": function(d) {
                                d.pagenme =
                                    '@if (!empty($sparedata->id)){{ $sparedata->id }}@endif',
                                    d.lot_no = $("#lot_no").val(),
                                    d.no_pro = $("#no_pro").val(),
                                    d.sup_name = $("#sup_name").val(),
                                    d.pay_status = $("#pay_status").val()
                            }
                        },
                        searching: false,
                        "iDisplayLength": 20,
                        "columnDefs": [{
                                'targets': 0,
                                'searchable': false,
                                'orderable': false,
                                'className': 'dt-body-center text-center',
                                "render": function(data, type, row, meta) {
                                    return '<input type="checkbox" name="lotid[]" class="chbx form-group chbxvs" id="vlis_' +
                                        row.id + '" value="' + row.id + '">';
                                }
                            },
                            {
                                "targets": 1,
                                orderable: true,
                                className: "text-center",
                                "render": function(data, type, row, meta) {
                                    return row.index;
                                }
                            },
                            {
                                "targets": 2,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    return row.display;
                                }
                            },
                            {
                                "targets": 3,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    return row.barcodesimg;
                                }
                            },
                            {
                                "targets": 4,
                                orderable: true,
                                className: "text-center",
                                "render": function(data, type, row, meta) {

                                    var tbl = '';
                                    tbl += '<div class="action bank d-flex justify-content-start">';

                                    tbl +=
                                        '<a href="javascript:(0)" class="edit text-info btn btn-sm btn-info text-white" data-barcode="' +
                                        row.barcodes + '" data-id="' + row.id + '" id="btn_convert">';
                                    tbl += '<i class="fas fa-download"></i>';
                                    tbl += '</a>';

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

                $('body').on('change', '#selectAllAgents', function() {
                    var rows, checked;
                    rows = $('#dataList').find('tbody tr');
                    checked = $(this).prop('checked');
                    $.each(rows, function() {
                        var checkbox = $($(this).find('td').eq(0)).find('input').prop('checked', checked);
                    });
                });

                $('body').on('click', '.dt-body-center', function() {

                    var sld = $(this).find('input').val();
                    if ($('#vlis_' + sld).prop("checked") == true) {
                        $('#vlis_' + sld).prop('checked', true);
                    } else {
                        $('#vlis_' + sld).prop('checked', false);
                    }
                });
            </script>

            <script>
                $(document).on('click', '#btn_convert', function() {

                    var chkId = $(this).data("id");
                    var barcode = $(this).data("barcode");

                    var pathn = $('meta[name="base_url"]').attr("content") + '/sparepart-barcode-multiple';
                    var token = $('meta[name="csrf-token"]').attr("content");

                    $("#preloder").fadeIn();

                    $.ajax({
                        url: pathn,
                        type: "get",
                        data: {
                            _token: token,
                            chkId: chkId
                        },
                        success: function(data) {

                            $('#prnpg').html(data.msg);
                            var element = document.getElementById('prnpg');
                            html2pdf(element, {
                                    margin: [0, 0, 0, 15],
                                    padding: 0,
                                    filename: barcode + '.pdf',
                                    image: {
                                        type: 'element',
                                        quality: 1
                                    },
                                    html2canvas: {
                                        scale: 2,
                                        logging: true
                                    },
                                    jsPDF: {
                                        unit: 'px',
                                        format: [207, 94],
                                        orientation: 'l'
                                    },
                                    pagebreak: {
                                        before: '.beforeClass',
                                        after: ['#after1', '#after2'],
                                        avoid: 'img'
                                    }

                                }).from('element-to-print').outputPdf().get('pdf')
                                .then(function(pdfObj) {
                                    pdfObj.autoPrint();
                                    window.open(pdfObj.output("bloburl"), "F")
                                });

                            const myTimeout = setTimeout(myGreeting, 2000);

                        }
                    });
                });


                function vldfn() {
                    $('#dataList').DataTable().ajax.reload();
                }
            </script>
        @endsection