@extends('admin.master')

@section('title', 'Local Invoices')

@section('contents')
    <!-- row -->
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">Filter Local Invoices</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Date From <small>mm/dd/yyyy</small></label>
                                <input type="date" value="" class="form-control" id="dateFrom">
                                <span id="errDateFrom" style="color:red;display: none;">This field must fill up</span>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Date To <small>mm/dd/yyyy</small></label>
                                <input type="date" value="" class="form-control" id="dateTo">
                                <span id="errDateTo" style="color:red;display: none;">This field must fill up</span>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Sold By</label>
                                <select id="actionBy" class="form-control">
                                    <option value="all">All employees</option>
                                    @foreach($employees  as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->emp_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group"><br>
                                <div class="mt-2">
                                    <button type="button" id="searchBy" class="btn btn-info">Search</button>
                                    <button type="button" id="resetBy" class="btn btn-warning ml-5">Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card card-widget widget-user">
                <!-- Add the bg color to the header using any of the bg-* classes -->
                <div class="widget-user-header bg-white" style="height:auto !important;">
                    <h4 class="widget-user-username">Summary: Local Invoices</h4>
                    <hr>
                    <p class="p-0 m-0">
                        Date From: &nbsp;<strong><span id="smDateFrom"></span></strong>&nbsp;&nbsp;&nbsp;
                        Date To:&nbsp;<strong><span id="smDateTo"></span></strong>&nbsp;&nbsp;&nbsp;
                        Sold By: &nbsp;<strong><span id="smactionBy"></span></strong>
                    </p>
                </div>
                <div class="overlay" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt"></i>
                </div>
                <div class="card-footer" style="padding-top: 0;padding-bottom: 0;">
                    <div class="row">
                        <div class="col-sm-4 border-right bg-success">
                            <div class="description-block">
                                <h5 id="show_total_products" class="description-header" style="font-size: 30px;">0</h5>
                                <span class="description-text">TOTAL INVOICE</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 border-right bg-warning">
                            <div class="description-block">
                                <h5 id="show_total_tax" class="description-header" style="font-size: 30px;">0</h5>
                                <span class="description-text">TOTAL GST AMOUNT({{$settings->currency_symbol}})</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-4 bg-cyan">
                            <div class="description-block">
                                <h5 id="show_total_amount" class="description-header" style="font-size: 30px;">00.0</h5>
                                <span class="description-text">TOTAL AMOUNT({{$settings->currency_symbol}})</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">
                        Local Invoices
                    </h3>
                    <a href="{{ url('/reports/localInvoices/print/all') }}" target="_blank" id="prindBy" class="btn btn-success float-right">Print</a>
                </div>
                <!-- /.card-header -->
                <div class="card-body table-responsive">
                    <div class="dataTables_wrapper dt-bootstrap4">
                        <table id="products" class="table table-sm table-striped table-bordered table-hover dataTable" style="width: 100%" role="grid" aria-describedby="products">
                            <thead>
                            <tr class="bg-secondary">
                                <th>SL#</th>
                                <th>Date</th>
                                <th>Inv No</th>
                                <th>Reference</th>
                                <th style="width: 170px;">Customer Details</th>
                                <th>Pay-on-to</th>
                                <th>Advice to</th>
                                <th>T. Qty</th>
                                <th>Subtotal</th>
                                <th>Discount(%)</th>
                                <th>GST(%)</th>
                                <th>Total</th>
                                <th>Sold By</th>
                                <th style="width:150px;">Action</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr class="bg-secondary">
                                <th>SL#</th>
                                <th>Date</th>
                                <th>Inv No</th>
                                <th>Reference</th>
                                <th style="width: 170px;">Customer Details</th>
                                <th>Pay-on-to</th>
                                <th>Advice to</th>
                                <th>T. Qty</th>
                                <th>Subtotal</th>
                                <th>Discount(%)</th>
                                <th>GST(%)</th>
                                <th>Total</th>
                                <th>Sold By</th>
                                <th style="width:150px;">Action</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="overlay" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt"></i>
                </div>
            </div>
            <!-- /.card -->

        </div>
    </div>
    <!-- /.row -->

    <!-- Delete modal -->
    <div class="modal fade" id="modal-delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal_heading">Delete Invoice Confirmation</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="modal_text">Are you sure to delete the invoice?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <form action="" method="post" id="deleteform">
                        @csrf
                        @method('delete')
                        <button type="submit" id="deleteBtn" class="btn btn-primary">Yes</button>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
@endsection

@section('script_links')
    <script>
        @foreach(['success','error'] as $type)
            @if(Session::has('msg-'.$type))
            toastr.{{ $type }}('{{ Session::get('msg-'.$type) }}');
            @endif
        @endforeach

        $(function() {
            // active left-menu
            // for tree addClass .menu-open
            // for submenu addClass .active
            $('#menu_reports').addClass('menu-open');
            $('#sub_local_invoices').addClass('active');

            var dateFrom = $('#dateFrom').val();
            var dateTo = $('#dateTo').val();
            var actionByID = $("#actionBy").val();
            var actionBy = $("#actionBy option:selected").text();
            var print_url = "";

            load_data(dateFrom,dateTo,actionByID,actionBy);

            var table = $("#products").DataTable({
                            initComplete: function () {
                                $('#products_filter label input').focus();
                            },
                            pageLength: 25,
                            processing: true,
                            serverSide: true,
                            ajax:{
                                url: "{{ url('/reports/localInvoices') }}",
                                data: {
                                    dateFrom: function() { return $('#dateFrom').val() },
                                    dateTo : function() { return $('#dateTo').val() },
                                    actionBy: function() { return $('#actionBy').val() }
                                }

                            },
                            columns:[
                                {
                                    data: 'DT_RowIndex',
                                    name: 'DT_RowIndex'
                                },
                                {
                                    data: 'sales_date',
                                    name: 'sales_date',
                                    render: function(data,type,full,meta){

                                        var symbol = '{{ $settings->currency_symbol }}';
                                        var price = numeral(data).format(symbol+'0,0.00');
                                        return price;
                                    },
                                },
                                {
                                    data: 'inv_no',
                                    name: 'inv_no'
                                },
                                {
                                    data: 'tracking_ref',
                                    name: 'tracking_ref'
                                },
                                {
                                    data: 'ship_to',
                                    name: 'ship_to'
                                },
                                {
                                    data: 'pay_on_to',
                                    name: 'pay_on_to'
                                },
                                {
                                    data: 'advice_to',
                                    name: 'advice_to'
                                },
                                {
                                    data: 'total_qty',
                                    name: 'total_qty'
                                },
                                {
                                    data: 'sub_total',
                                    name: 'sub_total',
                                    render: function(data,type,full,meta){
                                        var symbol = '{{ $settings->currency_symbol }}';
                                        var price = numeral(data).format(symbol+'0,0.00');
                                        return price;
                                    },
                                },
                                {
                                    data: 'dis_percent',
                                    name: 'dis_percent',
                                    render: function(data,type,full,meta){
                                        if(data == null) data = 0;
                                        return data+"%";
                                    },
                                },
                                {
                                    data: 'tax_percent',
                                    name: 'tax_percent',
                                    render: function(data,type,full,meta){
                                        if(data == null) data = 0;
                                        return data+"%";
                                    },
                                },
                                {
                                    data: 'totalAmount',
                                    name: 'totalAmount',
                                    render: function(data,type,full,meta){
                                        var symbol = '{{ $settings->currency_symbol }}';
                                        var price = numeral(data).format(symbol+'0,0.00');
                                        return price;
                                    },
                                },
                                {
                                    data: 'sold_by',
                                    name: 'sold_by'
                                },
                                {
                                    data: 'action',
                                    name: 'action',
                                    orderable: false
                                }
                            ]
                        });

            $("#searchBy").click(function () {
                dateFrom = $('#dateFrom').val();
                dateTo = $('#dateTo').val();
                actionByID = $("#actionBy").val();
                actionBy = $("#actionBy option:selected").text();

                if(dateFrom != "" && dateTo == ""){
                    $('#errDateTo').show();
                } else if(dateFrom == "" && dateTo != ""){
                    $('#errDateFrom').show();
                } else {
                    if(dateFrom != "" && dateTo != ""){
                        print_url = '{{ url('/reports/localInvoices/print/') }}/'+actionByID+"/"+dateFrom+"/"+dateTo;
                    } else {
                        print_url = '{{ url('/reports/localInvoices/print/') }}/'+actionByID;
                    }
                    $("#prindBy").attr('href',print_url);
                    $('#errDateFrom').hide();
                    $('#errDateTo').hide();
                    load_data(dateFrom,dateTo,actionByID,actionBy);
                    table.ajax.reload();
                }
            });

            $("#resetBy").click(function () {
                $('#dateFrom').val("");
                $('#dateTo').val("");
                $('#actionBy').val("all");
                $('#errDateFrom').hide();
                $('#errDateTo').hide();
                table.ajax.reload();
            });

            $('#products tbody').on( 'click', '.delete', function () {
                var id = $(this).attr('id');

                var action = "{{ url('/invoice/') }}/"+id;
                $("#deleteform").attr("action",action);
            });

            function load_data(dateFrom,dateTo,actionByID,actionBy){
                $.ajax({
                    method: "POST",
                    url: "{{ url('/get_local_invoice_summary') }}",
                    data: { _token: "{{ csrf_token() }}", dateFrom: dateFrom, dateTo: dateTo, actionBy:actionByID },
                    beforeSend: function() {
                        $(".overlay").show();
                    },
                    complete: function(){
                        $(".overlay").hide();
                    },
                    success: function(data) {
                        $("#smDateFrom").text(dateFrom);
                        $('#smDateTo').text(dateTo);
                        $("#smactionBy").text(actionBy);
                        $('#show_total_products').text(data[0].total_qty);
                        $('#show_total_tax').text(numeral(data[0].total_tax).format('0,0.00'));
                        $('#show_total_amount').text(numeral(data[0].total_amount).format('0,0.00'));
                    }
                })
            }


        });
    </script>
@endsection