@extends('template.app')

@section('meta') @endsection

@section('title') Finance Report @endsection

@section('styles')

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

    <style>

        table {
            font-family: Arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        div.dataTables_wrapper div.dataTables_filter label {
            font-weight: normal;
            white-space: nowrap;
            margin-left: auto;
            margin-right: auto;
        }

        .table-responsive {
            overflow-x: auto;
            max-width: 100%;
        }

        .dataTables_wrapper {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
        }
        
        .width_150 {
            width: 150px;
        }
        
        .width_200 {
            width: 200px;
        }
        
        .width_250 {
            width: 250px;
        }
        
        .width_300 {
            width: 300px;
        }
        
    </style>

@endsection



@section('content')

    <div class="page-breadcrumb">
        <div class="row">
            <div class="col-7 align-self-center">
                <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Finance Report</h4>
                <div class="d-flex align-items-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb m-0 p-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('allReport') }}" class="text-muted">Mis Report</a></li>
                            <li class="breadcrumb-item text-muted active" aria-current="page">Finance Report</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <div class="col-5 align-self-center">
                <div class="customize-input float-right">
                    <button class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Export </button>
                </div>
            </div>

            <div class="col-sm-8"></div>

            <div class="col-sm-4">
                <div class="col-md-12 align-self-center collapse" id="collapseExample">
                    <div class="customize-input float-right">
                        <form action="{{ route('financeExport') }}" method="get">
                            @csrf
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <input type="text" name="filter_booking_date" class="form-control text-capitalize" autocomplete="off" tabindex="5" id="filter_booking_date" placeholder="DD-MM-YYYY to DD-MM-YYYY">
                                </div>
                                <div class="form-group col-md-4">
                                    <select name="slug" class="form-control" required>
                                        <option value="">Select Status</option>
                                        <option value="all">All</option>
                                        <option value="invoice">Invoice Date</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-2">
                                    <button class="btn btn-primary" type="submit">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body table-responsive" id="datatable" style="text-align: center;">
                        <table class="table table-bordered data-table tables" id="data-table" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th style="min-width: 150px;">Model</th>
                                    <th style="min-width: 150px;">Variant</th>
                                    <th style="min-width: 150px;">Customer Name</th>
                                    <th style="min-width: 150px;">Location</th>
                                    <th style="min-width: 150px;">VIN Number</th>
                                    <th style="min-width: 150px;">Team Leader</th>
                                    <th style="min-width: 150px;">KEC Name</th>
                                    <th style="min-width: 150px;">Invoice No</th>
                                    <th style="min-width: 150px;">Invoice Date</th>
                                    <th style="min-width: 150px;">Financer</th>
                                    <th style="min-width: 150px;">Finance Type</th>
                                    <th style="min-width: 150px;">Repo Rate</th>
                                    <th style="min-width: 150px;">Loan Amount</th>
                                    <th style="min-width: 150px;">Net Disbusment Amount</th>
                                    <th style="min-width: 150px;">Processing Fee</th>
                                    <th style="min-width: 150px;">Finance Discount</th>
                                    <th style="min-width: 150px;">Payout Percentage</th>
                                    <th style="min-width: 150px;">Payout Amount</th>
                                    <th style="min-width: 150px;">Lumsum Amount</th>
                                    <th style="min-width: 150px;">Pay Booster</th>
                                    <th style="min-width: 150px;">Booster Percentage</th>
                                    <th style="min-width: 150px;">Total Payout</th>
                                </tr>

                                <tr class="filterrow">

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="product" value="{{ request()->get('product', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="1" id="product">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_250">
                                            <div class="form-group is-empty">
                                                <input type="text" name="car_varient_name" value="{{ request()->get('car_varient_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="2" id="car_varient_name">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_300">
                                            <div class="form-group is-empty">
                                                <input type="text" name="customer_name" value="{{ request()->get('customer_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="3" id="customer_name">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_300">
                                            <div class="form-group is-empty">
                                                <input type="text" name="branch_name" value="{{ request()->get('branch_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="3" id="branch_name">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_300">
                                            <div class="form-group is-empty">
                                                <input type="text" name="vin_number" value="{{ request()->get('vin_number', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="3" id="vin_number">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="team_name" value="{{ request()->get('team_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="4" id="team_name">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_200">
                                            <div class="form-group is-empty">
                                                <input type="text" name="sales_person_name" value="{{ request()->get('sales_person_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="5" id="sales_person_name">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_200">
                                            <div class="form-group is-empty">
                                                <input type="text" name="invoice_no" value="{{ request()->get('invoice_no', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="5" id="invoice_no">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_200">
                                            <div class="form-group is-empty">
                                                <input type="text" name="invoice_date" value="{{ request()->get('invoice_date', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="5" id="invoice_date">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_250">
                                            <div class="form-group is-empty">
                                                <input type="text" name="financer" value="{{ request()->get('financer', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="8" id="financer">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_200">
                                            <div class="form-group is-empty">
                                                <input type="text" name="finance_type" value="{{ request()->get('finance_type', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="9" id="finance_type">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_200">
                                            <div class="form-group is-empty">
                                                <input type="text" name="repo_rate" value="{{ request()->get('repo_rate', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="10" id="repo_rate">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="loan_amount" value="{{ request()->get('loan_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="11" id="loan_amount">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="net_disbursement_amount" value="{{ request()->get('net_disbursement_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="12" id="net_disbursement_amount">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="processing_fee" value="{{ request()->get('processing_fee', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13" id="processing_fee">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="finance_discount" value="{{ request()->get('finance_discount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13" id="finance_discount">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="payout_percentage" value="{{ request()->get('payout_percentage', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13" id="payout_percentage">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="payout_amount" value="{{ request()->get('payout_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13" id="payout_amount">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="lumsum_amount" value="{{ request()->get('lumsum_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13" id="lumsum_amount">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="pay_booster" value="{{ request()->get('pay_booster', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13" id="pay_booster">
                                            </div>
                                        </div>
                                    </th>
                                    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="booster_percentage" value="{{ request()->get('booster_percentage', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="14" id="booster_percentage">
                                            </div>
                                        </div>
                                    </th>

                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="total_payout" value="{{ request()->get('total_payout', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="15" id="total_payout">
                                            </div>
                                        </div>
                                    </th>

                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> 

@endsection



@section('scripts')

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script type="text/javascript">

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {
            $('#filter_booking_date').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    format: 'DD-MM-YYYY',
                    cancelLabel: 'Clear'
                }
            });

            $('#filter_booking_date').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY') + ' to ' + picker.endDate.format('DD-MM-YYYY'));
                $('#data-table').DataTable().draw();
            });

            $('#filter_booking_date').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                $('#data-table').DataTable().draw();
            });

            let rowCount = $("table tbody tr").length;
            if (rowCount < 3) {
                $(".table").css("height", "600px");
            }

            $('.js-example-basic-single').select2();

            var tableColumns = [
                { data: 'product', name: 'product' },
                { data: 'car_varient_name', name: 'car_varient_name' },
                { data: 'customer_name', name: 'customer_name'},
                { data: 'branch_name', name: 'branch_name'},
                { data: 'vin_number', name: 'vin_number'},
                { data: 'team_name', name: 'team_name'},
                { data: 'sales_person_name', name: 'sales_person_name'},
                { data: 'invoice_no', name: 'invoice_no'},
                { data: 'invoice_date', name: 'invoice_date'},
                { data: 'financer', name: 'financer' },
                { data: 'finance_type', name: 'finance_type' },
                { data: 'repo_rate', name: 'repo_rate' },
                { data: 'loan_amount', name: 'loan_amount' },
                { data: 'net_disbursement_amount', name: 'net_disbursement_amount' },
                { data: 'processing_fee', name: 'processing_fee' },
                { data: 'finance_discount', name: 'finance_discount' },
                { data: 'payout_percentage', name: 'payout_percentage' },
                { data: 'payout_amount', name: 'payout_amount' },
                { data: 'lumsum_amount', name: 'lumsum_amount' },
                { data: 'pay_booster', name: 'pay_booster' },
                { data: 'booster_percentage', name: 'booster_percentage' },
                { data: 'total_payout', name: 'total_payout' }
            ];

            (function(window, $) {
                window.LaravelDataTables = window.LaravelDataTables || {};
                window.LaravelDataTables["dataTableBuilder"] = $("#data-table").DataTable({
                    processing: true,
                    serverSide: true,
                    language: {
                        "info": "_START_ - _END_ of _TOTAL_",
                        "lengthMenu": "_MENU_ ",
                        "infoFiltered": ""
                    },
                    scrollCollapse: true,
                    paging: true,
                    searching: false,
                    bSortCellsTop : true,

                    ajax: {
                        url: '{!! route("FinanceReportFetch") !!}',
                        method: "POST",
                        data: function (d) {
                            d.product = jQuery(".datatable-form-filter input[name='product']").val();
                            d.car_varient_name = jQuery(".datatable-form-filter input[name='car_varient_name']").val();
                            d.customer_name = jQuery(".datatable-form-filter input[name='customer_name']").val();
                            d.branch_name = jQuery(".datatable-form-filter input[name='branch_name']").val();
                            d.vin_number = jQuery(".datatable-form-filter input[name='vin_number']").val();
                            d.team_name = jQuery(".datatable-form-filter input[name='team_name']").val();
                            d.sales_person_name = jQuery(".datatable-form-filter input[name='sales_person_name']").val();
                            d.invoice_no = jQuery(".datatable-form-filter input[name='invoice_no']").val();
                            d.invoice_date = jQuery(".datatable-form-filter input[name='invoice_date']").val();
                            d.financer = jQuery(".datatable-form-filter input[name='financer']").val();
                            d.finance_type = jQuery(".datatable-form-filter input[name='finance_type']").val();
                            d.repo_rate = jQuery(".datatable-form-filter input[name='repo_rate']").val();
                            d.loan_amount = jQuery(".datatable-form-filter input[name='loan_amount']").val();
                            d.net_disbursement_amount = jQuery(".datatable-form-filter input[name='net_disbursement_amount']").val();
                            d.processing_fee = jQuery(".datatable-form-filter input[name='processing_fee']").val();
                            d.finance_discount = jQuery(".datatable-form-filter input[name='finance_discount']").val();
                            d.payout_percentage = jQuery(".datatable-form-filter input[name='payout_percentage']").val();
                            d.payout_amount = jQuery(".datatable-form-filter input[name='payout_amount']").val();
                            d.lumsum_amount = jQuery(".datatable-form-filter input[name='lumsum_amount']").val();
                            d.pay_booster = jQuery(".datatable-form-filter input[name='pay_booster']").val();
                            d.booster_percentage = jQuery(".datatable-form-filter input[name='booster_percentage']").val();
                            d.total_payout = jQuery(".datatable-form-filter input[name='total_payout']").val();
                        },
                        error : function(d) {}
                    },

                    columns: tableColumns,
                    lengthMenu: [
                        [25, 50,100, -1 ],['25', '50','100', 'Show all' ]
                    ],
                    order: [ [0,'ASC'] ],
                    responsive: true,
                    colReorder:{
                        enable: false,
                    },
                    dom: '<"top"f>rt<"bottom"ipl><"clear">',
                    fnInitComplete: function(settings, json) {
                        jQuery('table.table input:checkbox').map(function() {
                            if(jQuery(this).prop("checked") != true){
                                var column = table.column( jQuery(this).attr('data-column') );
                                column.visible(false);
                            }
                        });
                    },
                    pageLength: 25,
                });
            })(window, jQuery);

            $("#min").flatpickr({ onSelect: function () { window.LaravelDataTables["dataTableBuilder"].draw(); }, changeMonth: true, changeYear: true });

            $(document).on("change", "#min", function () {
                window.LaravelDataTables["dataTableBuilder"].draw();
            });

            jQuery('.datatable-form-filter input').on('keyup', function (e) {
                if(jQuery(this).val().length >= 3 || e.keyCode == 13 || !jQuery(this).val()) {
                    window.LaravelDataTables["dataTableBuilder"].draw();
                    e.preventDefault();
                }
            });

            jQuery('.datatable-form-filter select').on('change', function (e) {
                window.LaravelDataTables["dataTableBuilder"].draw();
                e.preventDefault();
            });

            jQuery('input:checkbox[name="name_sort_asc"],input:checkbox[name="name_sort_desc"]').on('click', function (e) {
                window.LaravelDataTables["dataTableBuilder"].draw();
                e.preventDefault();
            });
        }); 

    </script>

@endsection