@extends('admin.layout.main_v')
@section('reports_active_class')
    @include('admin.layout.active_class')
@stop
@section('style')
	@if(App::getLocale() == 'ar')
		<link href="{{asset('assets/assets/vendors/custom/datatables/datatables.bundle.rtl.css')}}" rel="stylesheet" type="text/css" />
	@else
		<!--begin::Page Vendors Styles(used by this page) -->
		<link href="{{asset('assets/assets_1/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
		<link href="{{url("/")}}/assets/assets_1/bootstrap-select/dist/css/bootstrap-select.css" rel="stylesheet" type="text/css" />

		<!--end::Page Vendors Styles -->
	@endif
@stop
@section('js')
    <!--begin::Page Vendors(used by this page) -->
	<script src="{{asset('assets/assets_1/js/demo1/pages/crud/datatables/basic/basic.js')}}" type="text/javascript"></script>
	<script src="{{asset('assets/assets_1/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
	<script src="{{asset('assets/assets_1/bootstrap-select/dist/js/bootstrap-select.js')}}" type="text/javascript"></script>
	<script src="{{asset('assets/assets_1/js/demo1/pages/crud/forms/widgets/bootstrap-select.js')}}" type="text/javascript"></script>
    <!--end::Page Vendors -->
    <!--end::Page Vendors -->
	<script>
        let data_table_url = '{!!route('admin.reports.list')!!}';

        let Modal = $('#status_modal');
        let Table = $('#booking_table');

        $(document).ready(function() {
            Table.DataTable({
                processing: true,
                serverSide: true,
                "pageLength": 50,
                sDom: 'lrtip',
                "order": [[ 0, "desc" ]],
                @include('admin.shared.pagination')
                ajax:{
                    "url":  data_table_url,
                    "type": 'GET',
                    "data": function(d) {
						@if(auth('vendors')->check())
						d.i_vendor_id = '{{auth('vendors')->user()->getAuthIdentifier()}}',
						@endif
                        d.s_dates = $('#s_dates').val()
                    }
                },
                columns: [
					{className: 'text-center', data: 's_vendor_name', name: 's_vendor_name', orderable: true, searchable: true},
					{className: 'text-center', data: 'i_total_booking_count', name: 'i_total_booking_count', orderable: true, searchable: true},
					{className: 'text-center', data: 'i_confirmed_booking_count', name: 'i_confirmed_booking_count', orderable: true, searchable: true},
					{className: 'text-center', data: 'i_pending_booking_count', name: 'i_pending_booking_count', orderable: true, searchable: true},
					{className: 'text-center', data: 'i_canceled_booking_count', name: 'i_canceled_booking_count', orderable: true, searchable: true},
					{className: 'text-center', data: 'd_total_sales', name: 'd_total_sales', orderable: true, searchable: true},
                ]
            });

            $('.reset_form').click(function(){
                $('#i_status').val(0);
                $('#s_dates').val('')
                Table.DataTable().ajax.reload();
            });

            $('.search_btn').click( function(ev) {
                Table.DataTable().ajax.reload();
            });

            // var start = moment().subtract(29, 'days');
            var start = moment();
            var end = moment();
            $('#s_dates').daterangepicker({
                buttonClasses: 'm-btn btn',
                applyClass: 'btn-primary',
                cancelClass: 'btn-secondary',

                startDate: start,
                endDate: end,
                locale:{
                    direction: 'ltr',
                    format: moment.localeData().longDateFormat('L'),
                    separator: ' - ',
                    applyLabel: '@lang('dashboard.text_apply')',
                    cancelLabel: '@lang('dashboard.text_cancel')',
                    weekLabel: 'W',
                    customRangeLabel: '@lang('dashboard.text_custom_range')',
                    daysOfWeek: moment.weekdaysMin(),
                    monthNames: moment.monthsShort(),
                    firstDay: moment.localeData().firstDayOfWeek()
                },
                ranges: {
                    '@lang('dashboard.text_today')': [moment(), moment()],
                    '@lang('dashboard.text_yesterday')': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '@lang('dashboard.text_week')': [moment().subtract(6, 'days'), moment()],
                    '@lang('dashboard.text_last_30_days')': [moment().subtract(29, 'days'), moment()],
                    '@lang('dashboard.text_this_month')': [moment().startOf('month'), moment().endOf('month')],
                    '@lang('dashboard.text_last_month')': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            },
                function(start, end, label) {
                // $('#kt_tabs_6_1 #s_dates').val( start.format('YYYY-DD-MM') + ' / ' + end.format('YYYY-DD-MM'));
            });


            $('#s_dates').val('');

			$('.users_select').select2({
				placeholder: "Please Select",
				minimumInputLength: 0,
				ajax: {
					url: '{{route('admin.users.find')}}',
					dataType: 'json',
					data: function (params) {
						return {
							key_word: $.trim(params.term),
						};
					},
					processResults: function (data) {
						return {
							results: data
						};
					},
					cache: true
				}
			});
		});

		function export_data(url) {
			$('#filter_form').attr('action', url).submit();
		}
    </script>
@endsection

@section('content')
<!--units-management -->
<div class="kt-portlet kt-portlet--mobile">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <span class="kt-portlet__head-icon">
                <i class="kt-font-brand flaticon-statistics"></i>
            </span>
            <h4 class="kt-portlet__head-text">
                @if(isset($data['name']))
                    {{ $data['name'] }}
                @endif
            </h4>
        </div>
    </div>

    <div class="kt-portlet__body">

		<div class="kt-form kt-form--label-right kt-margin-b-10">
			<div class="row align-items-center">
				<div class="col-xl-12" id="">
					<div class="col-xl-12" id="filter_options">
						<form id="filter_form" action="" method="POST">
							@csrf
							<div class="form-group row">
								<div class="col-lg-3">
									<label for="s_dates" class="form-control-label">Select Period:</label>
									<input type="text" class="form-control" name="s_dates" id="s_dates" placeholder=""/>
								</div>
							</div>

							<div class="form-group row">
								<div class="col-lg-3">
									<a href="javascript:;" style="width: 100%" class="btn btn-warning btn-elevate btn-sm btn-icon search_btn">
                                <span>
                                    <i class="la la-search"></i>
                                    <span>{{trans('general.text_do_search')}}</span>
                                </span>
									</a>
								</div>
								<div class="col-lg-3">
									<a href="javascript:;" style="width: 100%" class="btn btn-dark btn-elevate btn-sm btn-icon reset_form">
										<span>
											<i class="la la-search-minus"></i>
											<span>{{trans('general.text_cancel_search')}}</span>
										</span>
									</a>
								</div>

								<div class="col-lg-2">
									<button style="width: 100%" class="btn btn-success btn-elevate btn-sm btn-icon" onclick="export_data('{{route('admin.reports.excel_export')}}')"><i class="fa fa-file-excel"></i>&nbsp; Excel Export</button>
								</div>

								<div class="col-lg-2">
									<button style="width: 100%" class="btn btn-success btn-elevate btn-sm btn-icon" onclick="export_data('{{route('admin.reports.csv_export')}}')"><i class="fa fa-file-alt"></i>&nbsp; CSV export</button>
								</div>

								<div class="col-lg-2">
									<button style="width: 100%" class="btn btn-danger btn-elevate btn-sm btn-icon" onclick="export_data('{{route('admin.reports.pdf_export')}}')"><i class="fa fa-file-pdf"></i>&nbsp; PDF export</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!--end: Search Form -->

		<!--begin: Datatable -->
		<table class="table table-striped- table-bordered table-hover table-checkable" id="booking_table">
			<thead>
			<tr>
				<th class="text-center">Vendor Name</th>
				<th class="text-center">Bookings Count</th>
				<th class="text-center">Confirmed Bookings</th>
				<th class="text-center">Pending Bookings</th>
				<th class="text-center">Canceled Bookings</th>
				<th class="text-center">Total Sales</th>
			</tr>
			</thead>
		</table>

	</div>
</div>
<!--end units-management -->
<div class="modal fade" data-width="400" id="status_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>
@stop