@extends('layouts.admin.app')
@section('page_title') التقارير @endsection
<link href="{{url('Admin')}}/assets/plugins/select2/select2.min.css" rel="stylesheet"/>
@section('content')
    <x-list.card>
        <x-list.card-header name="التقارير" :add_button="false" :delete_button="false">
            @if(hasRole('report_reviews.print'))
                <a href="#"  id="multiReportPrintBtn" class="btn btn-success btn-icon text-white">
            <span>
                <i class="fa fa-print"></i>
            </span>طباعة المحدد
                </a>
            @endif
        </x-list.card-header>
        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-status bg-blue br-tr-7 br-tl-7"></div>
                    <div class="card-header">
                        <div class="card-title">فلتر المحافظة</div>
                        <div class="card-options">
                            <a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
                            <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="mg-b-20 mg-sm-b-40">اختر المحافظة</p>
                        <div class="wd-200 mg-b-30">
                            <div class="input-group">
                                <select class="form-control select2 custom-select report_filter" id="city_id" data-placeholder="اختر المحافظة ... ">
                                    <option label=" اختر المحافظة ... ">
                                    </option>
                                    @foreach($cities as $city)
                                        <option {{(in_array(admin()->user()->role_on , ['city','area']) && admin()->user()->city_id == $city->id) ? 'selected' : ''}} value="{{$city->id}}">{{$city->name}} </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- COL END -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-status bg-blue br-tr-7 br-tl-7"></div>
                    <div class="card-header">
                        <div class="card-title">فلتر القسم</div>
                        <div class="card-options">
                            <a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
                            <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="mg-b-20 mg-sm-b-40">اختر القسم</p>
                        <div class="wd-200 mg-b-30">
                            <div class="input-group">
                                <select class="form-control select2 custom-select report_filter" id="area_id" data-placeholder="اختر القسم ... ">
                                    <option label=" اختر القسم ... "></option>
                                    @foreach($areas as $area)
                                        <option {{(admin()->user()->role_on == 'area' && admin()->user()->area_id == $area->id) ? 'selected' : ''}}
                                                value="{{$area->id}}">{{$area->name}}</option>
                                    @endforeach
                                </select>

                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- COL END -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-status bg-blue br-tr-7 br-tl-7"></div>
                    <div class="card-header">
                        <div class="card-title">حالة المحضر</div>
                        <div class="card-options">
                            <a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
                            <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="mg-b-20 mg-sm-b-40">اختر حالة المحضر</p>
                        <div class="wd-200 mg-b-30">
                            <div class="input-group">
                                <select class="form-control select2 custom-select report_filter" id="status" data-placeholder="اختر حالة المحضر ... ">
                                    <option label=" اختر حالة المحضر ... ">
                                    </option>
                                    @if(hasRole('reports.search_on') && hasRole('reports.search_off'))
                                        <option value="all">الكل</option>
                                    @endif
                                    @if(hasRole('reports.search_on'))
                                        <option value="on">مفتوح </option>
                                    @endif
                                    @if(hasRole('reports.search_off'))
                                        <option value="off">مغلق </option>
                                    @endif
                                </select>

                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- COL END -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-status bg-blue br-tr-7 br-tl-7"></div>
                    <div class="card-header">
                        <div class="card-title">تصنيف المحضر</div>
                        <div class="card-options">
                            <a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
                            <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="mg-b-20 mg-sm-b-40">اختر التصنيف</p>
                        <div class="wd-200 mg-b-30">
                            <div class="input-group">
                                <select class="form-control select2 custom-select report_filter" id="report_category_id" data-placeholder="اختر التصنيف ... ">
                                    <option label=" اختر التصنيف ... "></option>
                                    @foreach($categories as $category)
                                        <option value="{{$category->id}}">{{$category->name}} </option>
                                    @endforeach
                                </select>

                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- COL END -->
            <div class="col-lg-6 ">
                <div class="card">
                    <div class="card-status bg-blue br-tr-7 br-tl-7"></div>
                    <div class="card-header">
                        <div class="card-title">تاريخ المحضر</div>
                        <div class="card-options">
                            <a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
                            <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="mg-b-20 mg-sm-b-40">اختر تاريخ البداية و النهاية</p>
                        <div class="wd-200 mg-b-30">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                    </div>
                                </div>
                                <input class="form-control fc-datepicker report_filter" id="report_from"  placeholder="تاريخ البداية" type="text">
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                    </div>
                                </div>
                                <input class="form-control fc-datepicker report_filter" id="report_to" placeholder="تاريخ النهاية" type="text">
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- COL END -->
        </div>
        <x-list.card-body :responsive="true">
            <th class="text-white"><input type="checkbox" id="master"></th>
            <th class="text-white">#</th>
            <th class="text-white">رقم المحضر</th>
            <th class="text-white">نوع المحضر</th>
            <th class="text-white">تصنيف المحضر</th>
            <th class="text-white">تاريخ المحضر</th>
            <th class="text-white">بيانات المبلغ</th>
            <th class="text-white">مكان الواقعة</th>
            <th class="text-white">ارقام السيريال</th>
            <th class="text-white">موجز الواقعة</th>
            <th class="text-white">ما تم من اجراءات</th>
            <th class="text-white">ملاحظات</th>
        </x-list.card-body>
    </x-list.card>

    <x-list.modal name="التقارير" :save_button="false" ></x-list.modal>

@endsection
@push('admin_js')

    <script>
        var  columns =[
            {data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},
            {data: 'id', name: 'id'},
            {data: 'number', name: 'number'},
            {data: 'report_type', name: 'report_type'},
            {data: 'report_category', name: 'report_category'},
            {data: 'created_at', name: 'created_at'},
            {data: 'reporter_details', name: 'reporter_details'},
            {data: 'address', name: 'address'},
            {data: 'serial', name: 'serial'},
            {data: 'details', name: 'details'},
            {data: 'action', name: 'action'},
            {data: 'notes', name: 'notes'},
        ];
    </script>
    @include('layouts.admin.inc.ajax',['url'=>'review_reports'])

    <script>
        $(document).ready(function () {
            $(document).on('change', '#city_id', function () {
                $.ajax({
                    type: 'GET',
                    url: '{{url("admin/get_city_areas")}}?city_id=' + $(this).val(),
                    success: function (data) {
                        $("#area_id").show();
                        $("#area_id").html(data);
                    },
                    error: function () {
                        console.log(data);
                    }
                });
            })
        })
    </script>

    <script>
        function reload_table(){
            var report_from = $('#report_from').val();
            var report_to = $('#report_to').val();
            var status = $('#status').val();
            var city_id = $('#city_id').val();
            var area_id = $('#area_id').val();
            var report_category_id = $('#report_category_id').val();
            var url = '{{route('review_reports.index')}}?report_from=' + report_from + "&report_to=" + report_to +
                "&status=" + status + "&city_id=" + city_id + "&area_id=" + area_id + "&report_category_id=" + report_category_id;
            $('#exportexample').DataTable().ajax.url(url).draw();
        }

        $(document).on('change','.report_filter', function () {
            reload_table()
        })
    </script>

    <script>
        $(document).on('click', '#multiReportPrintBtn', function () {
            var allVals = [];
            $(".sub_chk:checked").each(function() {
                allVals.push($(this).attr('data-id'));
            });
            if( $('#area_id').val() == '')
            {
                my_toaster("قم بتحديد المنطقة اولا ",'warning')
            }
            else if(allVals.length <=0)
            {
                my_toaster("قم بتحديد التقارير المطلوب طباعتها",'warning')
            }
            else {
                var ids = allVals.join(",");
                var report_from = $('#report_from').val();
                var report_to = $('#report_to').val();
                var city_id = $('#city_id').val();
                var area_id = $('#area_id').val();
                var report_category_id = $('#report_category_id').val();
                var status = $('#status').val();
                var url = '{{ url("admin/multiReportPrint?ids=") }}' + ids + '&report_from=' + report_from
                    + '&report_to=' + report_to + '&city_id=' + city_id + '&area_id=' + area_id
                    + '&status=' + status ;
                window.open(url, '_blank');
            }

        });
    </script>

    <!-- INTERNAL BOOTSTRAP-DATERANGEPICKER JS -->
    <script src="{{url('Admin')}}/assets/plugins/bootstrap-daterangepicker/moment.min.js"></script>
    <script src="{{url('Admin')}}/assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>

    <!-- INTERNAL  TIMEPICKER JS -->
    <script src="{{url('Admin')}}/assets/plugins/time-picker/jquery.timepicker.js"></script>
    <script src="{{url('Admin')}}/assets/plugins/time-picker/toggles.min.js"></script>

    <!-- INTERNAL DATEPICKER JS-->
    <script src="{{url('Admin')}}/assets/plugins/date-picker/spectrum.js"></script>
    <script src="{{url('Admin')}}/assets/plugins/date-picker/jquery-ui.js"></script>
    <script src="{{url('Admin')}}/assets/plugins/input-mask/jquery.maskedinput.js"></script>

    <!--INTERNAL  FORMELEMENTS JS -->
    <script src="{{url('Admin')}}/assets/js/form-elements.js"></script>
    <script src="{{url('Admin')}}/assets/js/select2.js"></script>

    <!-- INTERNAL SELECT2 JS -->
    <script src="{{url('Admin')}}/assets/plugins/select2/select2.full.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.card-options-collapse').click();
        })
    </script>

@endpush