@extends('admin.master')

@section('title', 'Sales 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 Sales 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: Sales 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-6 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-6 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">
                    Sales Invoices
                </h3>
                <a href="{{ url('/reports/salesInvoices/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 style="width: 68px;">Date</th>
                                <th>Inv No</th>
                                <th>Tracking Ref</th>
                                <th style="width: 170px;">Consingee</th>
                                <th style="width: 170px;">Ship to</th>
                                <th>Container No</th>
                                <th>Lock No</th>
                                <th>Tare</th>
                                <th>T. Qty</th>
                                <th>Subtotal({{$settings->currency_symbol}})</th>
                                <th>Discount(%)</th>
                                <th>T. Amount({{$settings->currency_symbol}})</th>
                                <th>Note</th>
                                <th>Sold By</th>
                                <th style="width:150px;">Action</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr class="bg-secondary">
                                <th>SL#</th>
                                <th style="width: 68px;">Date</th>
                                <th>Inv No</th>
                                <th>Tracking Ref</th>
                                <th style="width: 170px;">Consingee</th>
                                <th style="width: 170px;">Ship to</th>
                                <th>Container No</th>
                                <th>Lock No</th>
                                <th>Tare</th>
                                <th>T. Qty</th>
                                <th>Subtotal({{$settings->currency_symbol}})</th>
                                <th>Discount(%)</th>
                                <th>T. Amount({{$settings->currency_symbol}})</th>
                                <th>Note</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_sales_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/salesInvoices') }}",
            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'
            },
            {
                data: 'inv_no',
                name: 'inv_no'
            },
            {
                data: 'tracking_ref',
                name: 'tracking_ref'
            },
            {
                data: 'consingee',
                name: 'consingee'
            },
            {
                data: 'ship_to',
                name: 'ship_to'
            },
            {
                data: 'container_no',
                name: 'container_no'
            },
            {
                data: 'lock_no',
                name: 'lock_no'
            },
            {
                data: 'tare',
                name: 'tare'
            },
            {
                data: 'total_qty',
                name: 'total_qty'
            },
            {
                data: 'sub_total',
                name: 'sub_total',
                render: function(data, type, full, meta) {
                    var price = numeral(data).format('0,0.00');
                    return price;
                },
            },
            {
                data: 'dis_percent',
                name: 'dis_percent',
                render: function(data, type, full, meta) {
                    return data + "%";
                },
            },
            {
                data: 'totalAmount',
                name: 'totalAmount',
                render: function(data, type, full, meta) {
                    var price = numeral(data).format('0,0.00');
                    return price;
                },
            },
            {
                data: 'salesNote',
                name: 'salesNote'
            },
            {
                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 / salesInvoices / print / ') }}/' + actionByID + "/" +
                    dateFrom + "/" + dateTo;
            } else {
                print_url = '{{ url(' / reports / salesInvoices / 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_sales_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_amount').text(numeral(data[0].total_amount).format('0,0.00'));
            }
        })
    }


});
</script>
@endsection