@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="hasRole('reports.add')" :delete_button="hasRole('reports.delete')">
        @if(hasRole('reports.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-3">
            <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 {{(admin()->user()->role_on == 'city' || admin()->user()->role_on == 'area') ? 'disabled' : ''}}
                                    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-3">
            <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 {{admin()->user()->role_on == 'area' ? 'disabled' : ''}}
                                    class="form-control select2 custom-select report_filter" id="area_id" data-placeholder="اختر القسم ... ">
                                <option label=" اختر القسم ... "></option>
                                @foreach($areas as $area)
                                    <option {{(in_array(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-3">
            <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-3 ">
            <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></th>--}}
        <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">سيريال 1</th>
        <th class="text-white">سيريال 2</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="true" ></x-list.modal>

@endsection
@push('admin_js')

    <script>
        var  columns =[
            // {
            //     className: 'dt-control',
            //     orderable: false,
            //     data: 'plus',
            //     defaultContent: ''
            // },
            {data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},
            {data: 'id', name: 'id'},
            {data: 'number', name: 'number'},
            {data: 'year', name: 'year'},
            {data: 'city', name: 'city'},
            {data: 'area', name: 'area'},
            {data: 'report_category', name: 'report_category'},
            {data: 'report_type', name: 'report_type'},
            {data: 'date', name: 'date'},
            {data: 'address', name: 'address'},
            {data: 'serial1', name: 'serial1'},
            {data: 'serial2', name: 'serial2'},
            {data: 'status', name: 'status'},
            {data: 'logs', name: 'logs'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ];
    </script>
    @include('layouts.admin.inc.ajax',['url'=>'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 url = '{{route('reports.index')}}?report_from=' + report_from + "&report_to=" + report_to +
                "&status=" + status + "&city_id=" + city_id + "&area_id=" + area_id;
            $('#exportexample').DataTable().ajax.url(url).draw();
        }

        // $(document).ready(function (){
            $(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( $('#city_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 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>

    <script>
        // $('#exportexample tbody').on('click', '.dt-control', function () {
        //     let tr = $(this).closest('tr');
        //     let row = $('#exportexample').row(tr);
        //     alert(1);
        //     // if (row.child.isShown()) {
        //     //     // This row is already open - close it
        //     //     row.child.hide();
        //     //     tr.removeClass('shown');
        //     // } else {
        //     //     // Open this row
        //     //     row.child(format(row.data())).show();
        //     //     tr.addClass('shown');
        //     // }
        // });
        //
        // function format(d) {
        //     // `d` is the original data object for the row
        //     return (
        //         '<dl>' +
        //         '<dt>Full name:</dt>' +
        //         '<dd>' + d.name + '</dd>' +
        //         '<dt>Extension number:</dt>' +
        //         '<dd>' + d.extn + '</dd>' +
        //         '</dl>'
        //     );
        // }

    </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