@extends('admin.master')

@section('title', 'Sold Products')

@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 Sold Products</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: Sold Products</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 QTY</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-6 bg-info">
                            <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">
                        Sold Products
                    </h3>
                    <a href="{{ url('/reports/soldProducts/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>Item name</th>
                                <th style="display: none;">Description</th>
                                <th style="display: none;">car_brand</th>
                                <th style="display: none;">car_model</th>
                                <th style="display: none;">car_color</th>
                                <th style="display: none;">car_fuel_type</th>
                                <th style="display: none;">car_trim</th>
                                <th style="display: none;">car_model_year</th>
                                <th style="display: none;">car_reg_number</th>
                                <th style="display: none;">car_condition</th>
                                <th style="display: none;">car_transmission</th>
                                <th style="display: none;">car_body_type</th>
                                <th style="display: none;">car_engine_capacity</th>
                                <th style="display: none;">car_kilometers_run</th>
                                <th>Date</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Serial/Chassis no</th>
                                <th>Type</th>
                                <th>Inv No</th>
                                <th>Qty</th>
                                <th>Unit Price({{$settings->currency_symbol}})</th>
                                <th>Total({{$settings->currency_symbol}})</th>
                                <th>Sold By</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr class="bg-secondary">
                                <th>SL#</th>
                                <th>Item name</th>
                                <th style="display: none;">Description</th>
                                <th style="display: none;">car_brand</th>
                                <th style="display: none;">car_model</th>
                                <th style="display: none;">car_color</th>
                                <th style="display: none;">car_fuel_type</th>
                                <th style="display: none;">car_trim</th>
                                <th style="display: none;">car_model_year</th>
                                <th style="display: none;">car_reg_number</th>
                                <th style="display: none;">car_condition</th>
                                <th style="display: none;">car_transmission</th>
                                <th style="display: none;">car_body_type</th>
                                <th style="display: none;">car_engine_capacity</th>
                                <th style="display: none;">car_kilometers_run</th>
                                <th>Date</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Serial/Chassis no</th>
                                <th>Type</th>
                                <th>Inv No</th>
                                <th>Qty</th>
                                <th>Unit Price({{$settings->currency_symbol}})</th>
                                <th>Total({{$settings->currency_symbol}})</th>
                                <th>Sold By</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 -->
@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_sold_products').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/soldProducts') }}",
                                data: {
                                    dateFrom: function() { return $('#dateFrom').val() },
                                    dateTo : function() { return $('#dateTo').val() },
                                    actionBy: function() { return $('#actionBy').val() }
                                }

                            },
                            columnDefs: [
                                { "visible": false, "targets": 1 },
                                { "visible": false, "targets": 2 },
                                { "visible": false, "targets": 3 },
                                { "visible": false, "targets": 4 },
                                { "visible": false, "targets": 5 },
                                { "visible": false, "targets": 6 },
                                { "visible": false, "targets": 7 },
                                { "visible": false, "targets": 8 },
                                { "visible": false, "targets": 9 },
                                { "visible": false, "targets": 10 },
                                { "visible": false, "targets": 11 },
                                { "visible": false, "targets": 12 },
                                { "visible": false, "targets": 13 },
                                { "visible": false, "targets": 14 }
                            ],
                            columns:[
                                {
                                    data: 'DT_RowIndex',
                                    name: 'DT_RowIndex'
                                },
                                {
                                    data: 'item_name',
                                    name: 'item_name'
                                },
                                {
                                    data: 'description',
                                    name: 'description'
                                },
                                {
                                    data: 'car_brand',
                                    name: 'car_brand'
                                },
                                {
                                    data: 'car_model',
                                    name: 'car_model'
                                },
                                {
                                    data: 'car_color',
                                    name: 'car_color'
                                },
                                {
                                    data: 'car_fuel_type',
                                    name: 'car_fuel_type'
                                },
                                {
                                    data: 'car_trim',
                                    name: 'car_trim'
                                },
                                {
                                    data: 'car_model_year',
                                    name: 'car_model_year'
                                },
                                {
                                    data: 'car_reg_number',
                                    name: 'car_reg_number'
                                },
                                {
                                    data: 'car_condition',
                                    name: 'car_condition'
                                },
                                {
                                    data: 'car_transmission',
                                    name: 'car_transmission'
                                },
                                {
                                    data: 'car_body_type',
                                    name: 'car_body_type'
                                },
                                {
                                    data: 'car_engine_capacity',
                                    name: 'car_engine_capacity'
                                },
                                {
                                    data: 'car_kilometers_run',
                                    name: 'car_kilometers_run'
                                },
                                {
                                    data: 'sales_date',
                                    name: 'sales_date'
                                },
                                {
                                    data: 'product_name',
                                    name: 'product_name'
                                },
                                {
                                    data: 'product_desc',
                                    name: 'product_desc'
                                },
                                {
                                    data: 'serial_no',
                                    name: 'serial_no'
                                },
                                {
                                    data: 'type',
                                    name: 'type',
                                    render: function(data,type,full,meta){
                                        if(data == "Cars"){
                                            return "<span class='right badge badge-success'>"+data+"</span>";
                                        } else {
                                            return "<span class='right badge badge-info'>"+data+"</span>";
                                        }
                                    },
                                },
                                {
                                    data: 'inv_no',
                                    name: 'inv_no'
                                },
                                {
                                    data: 'qty',
                                    name: 'qty'
                                },
                                {
                                    data: 'price',
                                    name: 'price',
                                    render: function(data,type,full,meta){
                                        var price = numeral(data).format('0,0.00');
                                        return price;
                                    },
                                },
                                {
                                    data: 'total',
                                    name: 'total',
                                    render: function(data,type,full,meta){
                                        var price = numeral(data).format('0,0.00');
                                        return price;
                                    },
                                },
                                {
                                    data: 'sold_by',
                                    name: 'sold_by'
                                }
                            ]
                        });

            $("#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/soldProducts/print/') }}/'+actionByID+"/"+dateFrom+"/"+dateTo;
                    } else {
                        print_url = '{{ url('/reports/soldProducts/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();
            });

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


        });
    </script>
@endsection