@extends ('backend.layouts.app')

@section('title', trans('labels.backend.reports.management'))

@section('page-header')
    <h1>{{ trans('labels.backend.reports.management') }}</h1>
@endsection

@section('content')
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title">{{ trans('labels.backend.reports.management') }}</h3>

            <div class="box-tools pull-right">
                @include('backend.reports.partials.reports-header-buttons')
            </div>
        </div><!--box-header with-border-->

        <div class="box-body">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-2">Total Records - <b><span id="total_records"></span></b></div>
                    <div class="col-md-5">
                        <div class="input-group1 input-daterange" style="display: table;">
                            <div class="input-group-addon">From</div>
                            <input type="text" name="from_date" id="from_date" readonly class="form-control"
                                style="background-color: #ffffff" />
                            <div class="input-group-addon">to</div>
                            <input type="text" name="to_date" id="to_date" readonly class="form-control"
                                style="background-color: #ffffff" />
                        </div>
                    </div>
                    <div class="col-md-5">
                        <button type="button" name="filter" id="filter" class="btn btn-info btn-sm">Filter</button>
                        <button type="button" name="refresh" id="refresh" class="btn btn-warning btn-sm">Refresh</button>
                        <input type="button" id="btnExport"
                            onclick="exportTableToExcel('reports-table', 'reporter_report')" class="btn btn-info btn-sm"
                            value=" Export Table data into Excel " />
                    </div>
                </div>
            </div>
            <div class="table-responsive data-table-wrapper">
                <table id="reports-table" class="table table-condensed table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>{{ trans('labels.backend.reports.table.id') }}</th>
                            <th>Client/Brand-Name</th>
                            <th>Client Contact Person Details</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>E4m Sales Person Name</th>
                            <th>Position</th>
                            <th>Remark</th>
                            <th>created by</th>
                            <th>created at</th>
                            <th>Screen shot</th>

                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                {{ csrf_field() }}
            </div><!--table-responsive-->
        </div><!-- /.box-body -->
    </div><!--box-->
@endsection
@section('after-scripts')
    <script src="{{ mix('js/dataTable.js') }}"></script>




    <script>
        $(document).ready(function() {
            fetch_data();

            function fetch_data(from_date = '', to_date = '') {
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ url('admin/reports/viewfilter') }}",
                    type: "post",
                    data: {
                        from_date: from_date,
                        to_date: to_date,
                        _token: _token
                    },
                    dataType: "json",
                    success: function(data) {
                        //alert(data[0]);
                        var output = '';
                        $('#total_records').text(data.length);
                        for (var count = 0; count < data.length; count++) {
                            output += '<tr>';
                            output += '<td>' + data[count].id + '</td>';
                            output += '<td>' + data[count].client_name + '</td>';
                            output += '<td>' + data[count].client_contact + '</td>';
                            output += '<td>' + data[count].cdate + '</td>';
                            output += '<td>' + data[count].edate + '</td>';
                            output += '<td>' + data[count].sales_name + '</td>';
                            output += '<td>' + data[count].position + '</td>';
                            output += '<td>' + data[count].remark + '</td>';
                            output += '<td>' + data[count].create_by + '</td>';
                            output += '<td>' + data[count].created_at + '</td>';
                            output +=
                                '<td><img height="100" src=\"{{ config('constant.SiteCmsurl') }}reports/' +
                                data[count].photo + '">"</td></tr>';

                        }
                        $('tbody').html(output);
                        $('#reports-table').DataTable();
                    }
                })
            }

            $('#filter').click(function() {
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();
                if (from_date != '' && to_date != '') {
                    fetch_data(from_date, to_date);
                } else {
                    alert('Both Date is required');
                }
            });

            $('#refresh').click(function() {
                $('#from_date').val('');
                $('#to_date').val('');
                fetch_data();
            });


        });
    </script>


@endsection