@extends(\Auth::user()->role != 10 ? 'layout' : 'layoutfrontdesk')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}

    .multiselect-native-select{
        display: inline;
    }
</style>
@endsection

@section('title', 'Report POS')

@section('content')

	<!-- Page header -->
	<div class="page-header {{in_array(\Auth::user()->role, [1,2]) ? 'page-header-light' : ''}}">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4>  <span class="font-weight-semibold">Reporting Shop POS</span></h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
			<div class="d-flex">
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

		<!-- REPORT -->
		<div class="card">
			<div class="card-body px-3">
				<div class="row">
					<div class="col-md-12">
						<div class="alert alert-secondary text-center mb-2 p-1" role="alert">
							<h4 class="font-weight-bold m-0">REPORT SHOP POS</h4>
						</div>
					</div>
				</div>
				<div id="accordion-group">

					<div class="card mb-0 rounded-bottom-0">
						<div class="card-header">
							<h6 class="card-title">
								<a data-toggle="collapse" href="#daily-revenue-report"><i class="fas fa-chevron-circle-down"></i> Daily Sales Report</a>
							</h6>
						</div>

						<div id="daily-revenue-report" class="collapse container" data-parent="#accordion-group" style="max-width:none;">
							<div class="card-body ">
								<form method="post" class="row" style="width: inherit" target="_blank">
									@csrf

                                    <!--Filter by Shop-->
                                    <div class="col-md-3">
                                        <span>Shop<span class="text-danger">*</span> : </span>
                                        <select name="shop[]"
                                                id="shop_multiselect"
                                                class="form-control select"
                                                multiple="multiple"
                                                required
                                                data-fouc
                                        >
                                            <option value="">** Pilih Shop **</option>
                                            @foreach ($shops as $shop)
                                                <option value="{{$shop->id}}">{{$shop->nama}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Filter untuk tanggal -->
                                    <div class="col-md-2">
                                        <span>Tanggal* : </span>
                                        <input type="text" id="tanggal" name="tanggal" onchange="getUser()" class="form-control daterange-single" autocomplete="off" required>
                                    </div>

                                    <!-- Filter untuk Shift -->
                                    <div class="col-md-2">
                                        <span>Shift : </span>
                                        <select name="shift"
                                                id="shift"
                                                class="form-control form-control-select2"
                                                onchange="getUser()"
                                        >
                                        <option value="">** Semua Shift **</option>
                                            @foreach(config('custom.shift_pos') as $key => $value)
                                                <option value="{{$key}}">{{$value}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Filter untuk User -->
                                    <div class="col-md-3">
                                        <span>User</span>
                                        <select data-placeholder="Pilih user ..." name="user[]" id="user_multiselect" class="form-control select" multiple="multiple" data-fouc>
                                        </select>
										<small class="text-danger">*Kosongi untuk menampilkan semua user</small>
                                    </div>

                                    <!-- Tombol PDF -->
                                    <div class="col-md-2" style="padding-top:15px">
                                        <button type="submit" class="btn btn-danger m-1" formaction="{{url('daily-sales-report-pos')}}">
                                            <i class="far fa-file-pdf"></i>&nbsp;Download PDF
                                        </button>
                                    </div>
								</form>
							</div>
						</div>
					</div>

					<div class="card mb-0 rounded-0 border-y-0">
						<div class="card-header">
							<h6 class="card-title">
								<a class="collapsed" data-toggle="collapse" href="#guest-account-balance"><i class="fas fa-chevron-circle-down"></i> Order Taker Report</a>
							</h6>
						</div>

						<div id="guest-account-balance" class="collapse" data-parent="#accordion-group">
							<div class="card-body">
								<form action="{{ route('report-pos.orderTakerReport') }}" class="row" style="width: inherit" target="_blank" >

                                    <!--Filter by Shop order taker report-->
                                    <div class="col-md-3">
                                        <span>Shop : </span>
                                        <select name="shop_id"
                                                id="shop_order_taker_report"
                                                class="form-control form-control-select2"
                                        >
                                            <option value="0">** Pilih Semua Shop **</option>
                                            @foreach ($shops as $shop)
                                                <option value="{{$shop->id}}">{{$shop->nama}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Filter untuk tanggal order taker report -->
                                    <div class="col-md-2">
                                        <span>Tanggal : </span>
                                        <input type="text" name="tanggal"
											class="form-control"
											id="tanggal_order_taker_report"
										>
                                    </div>

                                    <!-- Tombol PDF -->
                                    <div class="col-md-2" style="padding-top:15px">
                                        <!-- Masih Partial -->
                                        <button type="submit" class="btn btn-danger m-1">
                                            <i class="far fa-file-pdf"></i>&nbsp;Download PDF
                                        </button>
                                    </div>
								</form>
							</div>
						</div>
					</div>

					<div class="card mb-0 rounded-0 border-bottom-0">
						<div class="card-header">
							<h6 class="card-title">
								<a class="collapsed" data-toggle="collapse" href="#room-revenue-report"><i class="fas fa-chevron-circle-down"></i> Restaurant transaction Journal By BillNo</a>
							</h6>
						</div>

						<div id="room-revenue-report" class="collapse" data-parent="#accordion-group">
							<div class="card-body">
									<form action="{{route('report-pos.restaurantJournalBill')}}" class="row" style="width: inherit" target="_blank" >

                                    <!-- Filter untuk tanggal shop journal report -->
                                    <div class="col-md-2">
                                        <span>Tanggal : </span>
                                        <input type="text" name="tanggal"
											class="form-control"
											id="tanggal_restaurant_journal"
										>
                                    </div>

                                    <!-- Tombol PDF -->
                                    <div class="col-md-2" style="padding-top:15px">
                                        <button type="submit" class="btn btn-danger m-1">
                                            <i class="far fa-file-pdf"></i>&nbsp;Download PDF
                                        </button>
                                    </div>
								</form>
							</div>
						</div>
					</div>

                    <div class="card mb-0 rounded-0 border-bottom-0">
						<div class="card-header">
							<h6 class="card-title">
								<a class="collapsed" data-toggle="collapse" href="#restaurant_journal_article"><i class="fas fa-chevron-circle-down"></i> Restaurant transaction Journal By No Article</a>
							</h6>
						</div>

						<div id="restaurant_journal_article" class="collapse" data-parent="#accordion-group">
							<div class="card-body">
									<form action="{{route('report-pos.restaurantJournalArticle')}}" class="row" style="width: inherit" target="_blank" >

                                    <!-- Filter untuk tanggal shop journal report -->
                                    <div class="col-md-2">
                                        <span>Tanggal : </span>
                                        <input type="text" name="tanggal"
											class="form-control"
											id="tanggal_restaurant_journal_article"
										>
                                    </div>

                                    <!-- Tombol PDF -->
                                    <div class="col-md-2" style="padding-top:15px">
                                        <button type="submit" class="btn btn-danger m-1">
                                            <i class="far fa-file-pdf"></i>&nbsp;Download PDF
                                        </button>
                                    </div>
								</form>
							</div>
						</div>
					</div>

				</div>

			</div>
		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->

@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/loaders/blockui.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/loaders/progressbar.min.js')}}"></script>

	<!-- JS Date Picker -->
	<!-- <script src="{{asset('/')}}/global_assets/js/plugins/ui/moment/moment.min.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/daterangepicker.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/anytime.min.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.date.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.time.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/legacy.js"></script> -->
	<script src="{{asset('/')}}/global_assets/js/plugins/notifications/jgrowl.min.js"></script>
	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/gallery_library.js')}}"></script>
	<script type="text/javascript">
    //Button tooltip
	$('.btn-tooltip').tooltip()

	$( document ).ready(function() {
        // Default initialization
        $('.select').select2({
            minimumResultsForSearch: Infinity
        });

        // ambil tanggal datesystem untuk daily sales report
        $('#tanggal').daterangepicker({
			singleDatePicker: true,
            startDate: "{{ getSystemDate() }}",
			maxDate: "{{ getSystemDate() }}",
			locale: {
				format: 'YYYY-MM-DD'
			}
		});

        // Default style
        @if(session('error'))
            new PNotify({
                title: 'Error',
                text: '{{ session('error') }}.',
                icon: 'icon-blocked',
                type: 'error'
            });
        @endif
        @if ( session('success'))
            new PNotify({
                title: 'Success',
                text: '{{ session('success') }}.',
                icon: 'icon-checkmark3',
                type: 'success'
            });
        @endif

	});

    function getUser() {
        // define variable
        shop    = $('#shop_multiselect').val();
        tanggal = $('#tanggal').val();
        shift   = $('#shift').val();

        // opsi untuk dimasukkan ke select user
        let option  = ``;
        option      += `<option value="">** Semua User **</option>`

        $.ajax({
            type: "GET",
            url : "{{ url('/get-user-report-pos/') }}",
            data: {
                    shop    :shop,
                    tanggal :tanggal,
                    shift   :shift,
                },
            dataType: "json",
            success: function (data) {

                $.each(data, function(index,value){
                    option += `<option value="${value.user.id}">${value.user.nama}</option>`;
                })

                $('#user_multiselect').html(option);

            }
        });

    }

	</script>


	{{-- script order taker report --}}
	<script>
		// Inisialisasi datepicker untuk order taker report
        $('#tanggal_order_taker_report').daterangepicker({
            maxDate:  "{{ getSystemDate() }}",
			startDate: "{{ getSystemDate() }}",
			endDate: "{{ getSystemDate() }}",
            applyClass: 'btn-primary',
	        cancelClass: 'btn-light',
            locale: {
            format: 'YYYY-MM-DD'
            }
        });

        // Inisialisasi datepicker range untuk journal report by no bill
        $('#tanggal_restaurant_journal').daterangepicker({
            maxDate:    "{{ getSystemDate() }}",
			startDate:  "{{ getSystemDate() }}",
			endDate:    "{{ getSystemDate() }}",
            applyClass: 'btn-primary',
	        cancelClass: 'btn-light',
            locale: {
            format: 'YYYY-MM-DD'
            }
        });

        // Inisialisasi datepicker range untuk journal report by no article
        $('#tanggal_restaurant_journal_article').daterangepicker({
            maxDate:    "{{ getSystemDate() }}",
			startDate:  "{{ getSystemDate() }}",
			endDate:    "{{ getSystemDate() }}",
            applyClass: 'btn-primary',
	        cancelClass: 'btn-light',
            locale: {
            format: 'YYYY-MM-DD'
            }
        });

	</script>
@endsection