@extends('layouts/pos_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    <style>
        .page-item.active .page-link {
            background-color: lightgrey !important;
            border: 1px solid black;
        }

        .page-link {
            color: black !important;
        }

        .table.table-condensed>thead>tr>td,
        .table.table-condensed>tbody>tr>td,
        .table.table-condensed>tfoot>tr>td,
        .table.table-condensed>thead>tr>th,
        .table.table-condensed>tbody>tr>th,
        .table.table-condensed>tfoot>tr>th {
            border: 1px solid #dbdbdb !important;
        }

        .color-black {
            color: #000;
        }
    </style>
    <div class="row page-wrap ">
        <div class="col-md-12">
            <div class="" style="">
                <div class=" ">


                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-title">
                                <h2>{{ $data['pageTitle'] }}</h2>
                            </div>
                            <div class="panel-options">
                                <a href="" class="btn btn-info pull-right addViewBtn printIcon" id="printIcon">
                                    <i class="glyphicon glyphicon-plus-sign addIcon"></i>Print
                                </a>
                            </div>
                        </div>


                        <div class="panel-body panelBodyView printIcon" id="printDiv">
                            @php
                                $options = ['' => 'Select any'];
                                $status = ['' => 'Select any', '' => 'All', '0' => 'New Registration Attempt', '1' => 'Registration Success', '2' => 'Registration Failed'];

                                // $searchElements = [['element' => 'report_level', 'showAll' => 'no'], ['element' => 'branchId'], ['element' => 'custom', 'id' => 'status', 'name' => 'status', 'type' => 'select', 'label' => 'Status', 'options' => $status], ['element' => 'supplierId'], ['element' => 'group_id'], ['element' => 'category_id'], ['element' => 'sub_category_id'], ['element' => 'model_id'], ['element' => 'dateRange'], ['element' => 'custom', 'id' => 'fillProductBarcode', 'name' => 'fillProductBarcode', 'type' => 'text', 'label' => 'Barcode'], ['element' => 'custom', 'id' => 'fillProductPID', 'name' => 'fillProductPID', 'type' => 'text', 'label' => 'PID/EMI']];
                                $searchElements = [['element' => 'report_level', 'showAll' => 'no'], ['element' => 'branchId'], ['element' => 'custom', 'id' => 'status', 'name' => 'status', 'type' => 'select', 'label' => 'Status', 'options' => $status], ['element' => 'supplierId'], ['element' => 'group_id'], ['element' => 'category_id'], ['element' => 'sub_category_id'], ['element' => 'model_id'], ['element' => 'dateRange'], ['element' => 'custom', 'id' => 'fillProductPID', 'name' => 'fillProductPID', 'type' => 'text', 'label' => 'Barcode'], ['element' => 'custom', 'id' => 'fillCustomerPhone', 'name' => 'fillCustomerPhone', 'type' => 'text', 'label' => 'Customer Phone']];
                            @endphp

                            @include('partials.searchPanel.main', ['searchElements' => $searchElements])

                            <div class="row vert-offset-top-2" id="posDigitalRegistrationReportPDF">
                                <style>
                                    @media print {

                                        table th {
                                            border-top: 1px solid #000 !important;
                                        }

                                        .table thead tr th {
                                            border: 1px solid #474444 !important;
                                        }

                                        .table thead tr td {
                                            border: 1px solid #000 !important;
                                        }

                                        .table.table-condensed>thead>tr>th,
                                        .table.table-condensed>tbody>tr>th,
                                        .table.table-condensed>tfoot>tr>th,
                                        .table.table-condensed>thead>tr>td,
                                        .table.table-condensed>tbody>tr>td,
                                        .table.table-condensed>tfoot>tr>td {
                                            border: 1px solid #000 !important;
                                        }

                                        tr.footerrow {
                                            font-weight: bold;
                                        }

                                        p.text-center.reportHeading {
                                            font-size: 15px;
                                        }
                                    }
                                </style>

                                <p class="text-center reportHeading">
                                    <span class="companyNameData" style="color:#fff;"><b> {{ $data['company']->name }}
                                        </b></span><br>
                                    <span
                                        style="color:#fff;font-size:11px;"><b>{{ $data['company']->address }}</b></span><br>
                                    <span style="color:#fff;"><b>Branch Name: </b></span> <span id="brnachName"
                                        style="color:#fff;font-weight:bold"></span><br>
                                    <span style="color:#fff;"><u><b
                                                id="pageTitle">{{ $data['pageTitle'] }}</b></u></span><br>
                                    <span style="color:#fff;" id="seachmonth"> </span><br>
                                </p>
                                <p class="text-right" style="color:#fff;">Printed Date: {{ date('d-m-Y') }}</p>
                                <table
                                    class="table table-striped table-bordered table-condensed first-col-dark dataTable no-footer"
                                    cellpadding="0" cellspacing="0" width="100">
                                    <thead>
                                        <tr>
                                            <th style="width:3%">SL No.</th>
                                            <th style="width:8%">Sales Date</th>
                                            <th style="width:8%">Branch Name</th>
                                            <th style="width:8%">Sales Bill No</th>
                                            <th style="width:9%">Customer Name</th>
                                            <th style="width:9%">Customer Mobile No.</th>
                                            <th style="width:8%">Product Name</th>
                                            <th style="width:8%">Model Name</th>
                                            <th style="width:8%">Product Barcode</th>
                                            {{-- <th style="width:8%">PID/IME</th> --}}
                                            <th style="width:8%">Registration Status</th>
                                            <th style="width:11%">Remarks</th>
                                            {{-- <th style="width:8%">Qty</th>
                                            <th style="width:8%">Sales Amount</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody id="table_data">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {

            $('form').submit(function(event) {

                $('#brnachName').html('');

                var datehtml = '';
                var branchhtml = '';

                $('#loadingModal').show();
                $('#table_footer_data').html('');
                var form = $('form').serialize();
                $('#table_data').html(''),
                    event.preventDefault();

                var fillBranchId = $('#fillBranchId').val();
                var status = $('#status').val();
                var startdate = $('#fillDateFrom').val();
                var enddate = $('#fillDateTo').val();

                // if (fillBranchId == "" || fillBranchId == null) {
                //     Swal.fire({
                //         icon: 'error',
                //         title: 'Please select branch!',
                //         showConfirmButton: true,
                //     })
                //     $('#loadingModal').hide();
                //     return false;
                // }

                if (startdate == "" || enddate == "") {
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select start and end date first!',
                        showConfirmButton: true,
                    })
                    $('#loadingModal').hide();
                    return false;
                }

                $.ajax({
                    type: 'post',
                    url: '{{ Request::url() }}',
                    data: $('form').serialize(),
                    dataType: 'json',
                    success: function(_response) {

                        $('#loadingModal').hide();
                        if (_response.responseTitle == 'success') {
                            $('#brnachName').html(_response.branch);
                            $('#seachmonth').html(_response.seachmonth);
                            var html = '';
                            var htmlT = '';

                            var totalQty = 0;
                            var totalGrossSalesAmount = 0;
                            console.log('_response.data ',_response.data.length);
                            if(_response.data.length > 0){
                                $.each(_response.data, function(key, value) {
                                    html = '<tr>';
                                    html += '<td style="text-align:center;width:3%">' +
                                        value.sl +
                                        ' </td>';
                                    html += '<td style="text-align:center;width:8%"> ' +
                                        value
                                        .sales_date + ' </td>';
                                    html += '<td style="text-align:left;width:9%"> ' + value
                                        .branch_name + ' </td>';
                                    html += '<td style="text-align:center;width:8%"> ' +
                                        value
                                        .sales_bill_no + ' </td>';
                                    html += '<td style="text-align:left;width:9%"> ' + value
                                        .customer_name + ' </td>';
                                    html += '<td style="text-align:left;width:9%"> ' + value
                                        .customer_phone + ' </td>';
                                    html += '<td style="text-align:left;width:8%"> ' + value
                                        .product_name + '  </td>';
                                    html += '<td style="text-align:left;width:8%"> ' + value
                                        .model_name + '  </td>';
                                    html +=
                                        '<td style="text-align:center;width:8%"> ' +
                                        value
                                        .product_ime + '  </td>';
                                    html += '<td style="text-align:center;width:8%"> ' +
                                        value
                                        .status + '  </td>';
                                    html +=
                                        '<td style="text-align:center;width:11%"> ' +
                                        value
                                        .remarks + '  </td>';
                                    html += '</tr> ';

                                    totalGrossSalesAmount += parseFloat(value
                                        .sales_amount);
                                    totalQty += value.tqty;

                                    $('#table_data').append(html);
                                });
                            }else{
                                html = '<tr>';
                                html += '<td style="text-align:center;color:#b24e4e !important;" colspan="11">No Records Founds!!</td>';
                                html += '</tr> ';
                                $('#table_data').append(html);
                            }
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Something went wrong!',
                                showConfirmButton: true
                            })
                            return false;
                            $('#loadingModal').hide();
                        }
                    },
                    error: function(_response) {
                        toastr.error('_response.errors');
                        $('#loadingModal').hide();
                    }
                });
            });

        });


        function zerocheck(value) {

            if (value == 0) {
                return "-";
            } else {
                return value.toLocaleString("en-IN", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                //return value;
            }

        }

        function zerocheckForQty(value) {

            if (value == 0) {
                return "-";
            } else {
                return value;
            }

        }


        /*$("#printIcon").click(function(event) {
            event.preventDefault();
            var printContents = document.getElementById("posDigitalRegistrationReportPDF").innerHTML;
            var printStyle =
                '<style> @page {size: auto;margin: 0mm;margin-top:20px;margin-bottom:20px;margin-right:10px;} @media print  { .table thead tr th {white-space: normal;background-color:#fff !important;border:1px solid #000 !important;} .table tbody tr td {white-space: normal;background-color:#fff !important;border:1px solid #000 !important;} .table tbody tr th {white-space: normal;background-color:#fff !important;border:1px solid #000 !important;} #posDigitalRegistrationReportPDF {width: 100%;height: auto;overflow: visible;}}</style>';
            var printDiv =
                '<div id="order-details-wrapper" style="margin-top:25px;padding-left:10px;padding-right:10px;">' +
                printStyle + printContents + '</div>';

            var win = window.open('', 'printwindow');
            win.document.write(printDiv);
            win.document.close();
            win.focus();
            win.print();
            win.close();
            // document.body.innerHTML = printDiv;
            // var originalContents = document.body.innerHTML;
            // window.print();
            // document.body.innerHTML = originalContents;
            // location.reload();

        });*/

        $("#printIcon").click(function(event) {
        event.preventDefault();
        var mainContents = document.getElementById("posDigitalRegistrationReportPDF").innerHTML;

        var printStyle =
            '<style> table thead tr .trr {border-bottom:1px solid #000;} table thead tr .trrr {border-bottom:1px solid #000;border-top:none;} table {width: 100%;text-align: center;border-collapse: separate;border-spacing: 0;} table th {border-top: 1px solid;border-right: 1px solid;} table td {border-bottom: 1px solid;border-right: 1px solid;padding: 6px;} table th:first-child,table td:first-child {border-left: 1px solid;} table thead th {position: sticky;top: 0;} table th {font-weight:bold;font-size:12px;} table td {font-size:12px;} .table.table-condensed>thead>tr>td,.table.table-condensed>tbody>tr>td,.table.table-condensed>tfoot>tr>td,.table.table-condensed>thead>tr>th,.table.table-condensed>tbody>tr>th,.table.table-condensed>tfoot>tr>th {padding: 1px 1px !important;font-size: 8px !important}.table thead tr th {font-size: 8px !important;} tr.footerrow {font-weight: bold;} .reportHeading {text-align:center;font-size: 12px;}.page-container .main-content {overflow: hidden;padding: 0px 2px 2px 2px;}.page-container .main-content .panel {padding: 0px 2px;}  p.text-center.reportHeading span{ color:#000 !important;} p.text-left .monthendList { color: #000 !important;} #posDigitalRegistrationReportPDF p.text-right .printClass { color: #000 !important;text-align:right} p.text-right.printClass {text-align: right;} p.text-left.monthendList {width: 70%;margin-bottom: 0px;} .viewMonthendList{display:none;}</style>';
        var footerContents = '';
        // var footerContents =
        //     "<div class='row' style='font-size:12px; padding-left:0; padding-top:15px;'>Prepared By<span style='display:inline-block; width: 35%; padding-top:15px;font-weight:bold'></span> Checked By<span style='display:inline-block; width: 35%; padding-right:0; padding-top:15px;'></span>Approved By</div>";
        var printContents = '<div id="order-details-wrapper" style="padding: 10px;">' + printStyle +
            mainContents + footerContents + '</div>';
        var win = window.open('', 'printwindow');
        win.document.write(printContents);
        win.document.close();
        win.focus();
        win.print();
        win.close();
        // document.body.innerHTML = printContents;
		// var originalContents = document.body.innerHTML;
		// window.print();
		// document.body.innerHTML = originalContents;

    });
    </script>
@endsection