@extends('app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Diagnostic Radiology Test Sale Reports
            <small>Preview</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{url('/')}}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active"> Radiology</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Custom Tabs -->
        <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">
                <form method="GET" action="#" id="custom_search_form" class="no-print" role="form">
                    <div class="row">
                        <div class="form-group" style="margin-top: 10px; margin-bottom: 5px;">
                            <div class="col-md-12">
                                <label class="col-md-1">
                                    Radiology Category:
                                </label>
                                <div class="col-md-2">
                                    <select class="form-control" name="radiology_category" id="radiology_category">
                                        <option value="">Select Radiology Category </option>
                                        @foreach ($radiology as $val)
                                          <option value="{{$val->service_sub_category_id}}"> {{$val->service_sub_category_name}} </option>
                                        @endforeach
                                    </select>
                                </div>

                                <label class="col-md-1">
                                    <i class="fa fa-calendar"></i>
                                    From:
                                </label>
                                <div class="col-md-2">
                                    {{csrf_field()}}
                                    <input class="form-control datepicker" autocomplete="off" type="text"
                                           name="from" id="from">
                                </div>
                                <label class="col-md-1">
                                    <i class="fa fa-calendar"></i>
                                    To:
                                </label>
                                <div class="col-md-2">
                                    <input class="form-control datepicker" autocomplete="off" type="text" name="to"
                                           id="to">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-sm btn-primary" type="submit"> Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                @can('diagnostic-radiology-test-report-view')
                    <table id="testSaleReportDatatable"
                           class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>Invoice ID</th>
                            <th>Patient Name</th>
                            <th>Phone No</th>
                            <th>Discount</th>
                            <th>Total</th>
                            <th>Paid</th>
                            <th>Due</th>
                            <th>Date</th>
                            <th>Status</th>
                            <th>Sample</th>
                            <th>Payment</th>
                            <th>Action</th>
                        </tr>
                        </thead>

                        <tfoot>
                        <tr>
                            <th>Invoice ID</th>
                            <th>Patient Name</th>
                            <th>Phone No</th>
                            <th>Discount</th>
                            <th>Total</th>
                            <th>Paid</th>
                            <th>Due</th>
                            <th>Date</th>
                            <th>Status</th>
                            <th>Sample</th>
                            <th>Payment</th>
                            <th>Action</th>
                        </tr>
                        {{-- <tr>
                            <th style="color: green; font-size: 18px;"> Total Amount </th>
                            <th style="color: green; font-size: 18px;"> </th>
                            <th style="color: green; font-size: 18px;" id="totalDiscount"></th>
                            <th style="color: green; font-size: 18px;" id="totalAmount"></th>
                            <th style="color: green; font-size: 18px;" id="totalPaid"></th>
                            <th style="color: red; font-size: 18px;" id="totalDue"></th>
                            <th colspan="4"></th>
                        </tr> --}}
                        </tfoot>
                    </table>
                @endcan
            </div>
        </div>
    </section>
    <!-- Normal Modal -->
    <div id="saleReportModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 800px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Diagnostic Test Sale Report</h4>
                </div>
                <!-- //Message from Ajax request// -->
                <div class="modal-body" id="saleDetailsBody">
                    Loading <img src="{{url('icons/loader.gif')}}" title="loading">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div> <!-- /.modal -->

@endsection


@section('script')
    <script type="text/javascript">
        $(document).ready(function () {
            var testDatatable = $('#testSaleReportDatatable').DataTable({
                processing: true,
                serverSide: true,
                columnDefs: [
                    {"width": "5%", "targets": 0},
                    {"width": "10%", "targets": 1},
                    {"width": "5%", "targets": 2},
                    {"width": "5%", "targets": 3},
                    {"width": "5%", "targets": 4},
                    {"width": "5%", "targets": 5},
                    {"width": "5%", "targets": 6},
                    {"width": "2%", "targets": 7},
                    {"width": "1%", "targets": 8},
                    {"width": "1%", "targets": 9},
                    {"width": "1%", "targets": 10},
                    {"width": "15%", "targets": 11},
                ],
                autoWidth: false,
                order: [[0, "asc"]],
                ajax: {
                    url: '{{ route("reports.get.diagnostic.test.list") }}',
                    data: function (d) {
                        d.type = 'radiology';
                        d.from = $('input[name=from]').val();
                        d.to = $('input[name=to]').val();
                        d.radiology_category = $('#radiology_category').val();
                    }
                },
                columns: [
                    {data: 'sale_invoice_id', name: 'sale_invoice_id', orderable: true, searchable: true},
                    {data: 'full_name', name: 'customer.full_name', orderable: true, searchable: true},
                    {data: 'mobile_no', name: 'customer.mobile_no', orderable: true, searchable: true},
                    {data: 'discount', name: 'discount', orderable: true, searchable: true},
                    {data: 'total', name: 'total', orderable: true, searchable: true},
                    {data: 'paid', name: 'paid', orderable: true, searchable: true},
                    {data: 'due', name: 'due', orderable: true, searchable: true},
                    {data: 'date', name: 'date', orderable: true, searchable: true},
                    {data: 'status', name: 'status', orderable: true, searchable: false},
                    {data: 'sample_collection', name: 'sample_collection', orderable: true, searchable: false},
                    {data: 'payment', name: 'payment', orderable: true, searchable: false},
                    {data: 'action', name: 'action', orderable: true, searchable: false}
                ],

                "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(), data;

                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                                i : 0;
                    };

                    //Due
                    // Total Paid over all pages
                    total = api
                        .column(6)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Total Paid over this page
                    pageTotal = api
                        .column(6, {page: 'current'})
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    //Paid Update footer
                    $(api.column(6).footer()).html(
                        'Due ( ' + pageTotal + ' )'
                    );


                    // Total Paid over all pages
                    total = api
                        .column(5)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Total Paid over this page
                    pageTotal = api
                        .column(5, {page: 'current'})
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    //Paid Update footer
                    $(api.column(5).footer()).html(
                        'Total Paid ( ' + pageTotal + ' )'
                    );

                    // Total over all pages
                    total = api
                        .column(4)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Total over this page
                    pageTotal = api
                        .column(4, {page: 'current'})
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column(4).footer()).html(
                        'Total ( ' + pageTotal + ' )'
                    );

                    //Discount
                    // Total over all pages
                    total = api
                        .column(2)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Total over this page
                    pageTotal = api
                        .column(3, {page: 'current'})
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column(3).footer()).html(
                        'Discount ( ' + pageTotal + ' )'
                    );
                }
            });
            $('#custom_search_form').on('submit', function (e) {
                testDatatable.draw();
                e.preventDefault();
            });

        });


        function loadingImg() {
            $('#loading').ajaxStart(function () {
                $(this).show();
            }).ajaxComplete(function () {
                $(this).hide();
            });
        }

        function saleDetails(saleInvoiceId) {
            $(function () {
                loadingImg();
                $("#saleDetailsBody").load("{{url('reports/category-wise-sale-report')}}" + "/" + saleInvoiceId);
            });
        }

        function updateStatus(action, url, id) {
            var reference = $("#reference_" + id);
            if (action == 'delete') {
                if (!confirm('Do you want to Delete ?')) {
                    return false;
                }
            }

            $.ajax({
                url: "update-" + url + '-status/' + action + '/' + id,
                method: "GET",
                dataType: 'json',
                success: function (data) {
                    if (data.success == true) {
                        if (action == 'active') {
                            // reference.
                            reference.prev().show().prev().hide();
                            reference.parent().prev().children().next().show().prev().hide();
                        } else if (action == 'inactive') {
                            reference.prev().hide().prev().show();
                            reference.parent().prev().children().next().hide().prev().show();
                        } else if (action == 'delete') {
                            reference.parent().parent().hide(1000).remove();
                        }

                        $('.box-body-second').show();
                        $('.messageBodySuccess').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    } else {
                        $('.box-body-second').show();
                        $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    }
                },
                error: function (data) {
                    $('.box-body-second').show();
                    $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                }
            });
        }

    </script>
@endsection