@extends('layouts.dashboard.without_sidebar')
@section('title', 'رسیدگی به شکایات')
@section('styles')
    <!-- map links -->
    <link rel="stylesheet" href="{{ asset('dist/css/leaflet.css') }}" />
    <!-- data table links -->
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}" />
    <!-- select2 link -->
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('dist/css/select2-bootstrap4.min.css') }}" />
    <!-- date picker link -->
    <link rel="stylesheet" href="{{ asset('dist/css/persian-datepicker.min.css') }}" />
    <!-- tables main style link -->
    <link rel="stylesheet" href="{{ asset('version2/css/dashboard_layouts/_tablesStyle.css') }}" />
    <!-- this page styles -->
    <link rel="stylesheet" href="{{ asset('version2/css/dashboard_pages/fast_react/pending.css?_=') }}" />
@endsection
@section('breadcrumb')
    <nav class="breadcrumb-selfdesign">
        <div class="container d-flex align-items-center justify-content-between">
            <ul class="d-flex align-items-center">
                <li class="breadcrumb-item-selfdesign"><a href="{{route('v2.dashboard')}}">داشبورد</a></li>
                <i class="mr-2 fa fa-angle-left arrow-icon text-dark"></i>
                <li class="current breadcrumb-item-selfdesign">رسیدگی به شکایات</li>
            </ul>
            <a href="{{route('v2.dashboard')}}" class="btn breadcrumb-back">بازگشت</a>
        </div>
    </nav>
@endsection
@section('content')
    <!-- pending complaint table -->
    <div class="mb-5 table-box pending-table">
        <div class="d-flex flex-column mb-1 content-center-datatable align-items-center justify-content-center">
            <div class="d-flex align-items-center justify-content-center w-100 mt-3 pt-1">
                <hr class="col mx-2">
                <span class="table-header mx-2">لیست شکایات در حال بررسی</span>
                <hr class="col mx-2">
            </div>
            <span class="mt-2 counter-parent"><span class="pt-1 header-counter pending-counter"></span></span>
        </div>
        <table id="pending_complaint" class="table table-striped table-bordered" width="100%">
            <thead>
                <tr style="background-color: #015688">
                    <th rowspan="2">کد یکتا</th>
                    <th rowspan="2">کد پیگیری</th>
                    <th rowspan="2">استان</th>
                    <th rowspan="2">شهرستان</th>
                    <th rowspan="2">ادارات شهری</th>
                    <th rowspan="2">موضوع گزارش</th>
                    <th rowspan="2">نوع گزارش</th>
                    <th rowspan="2">توضیح گزارش</th>
                    <th rowspan="2">موقعیت مکانی</th>
                    <th rowspan="2">شماره تماس گیرنده </th>
                    <th rowspan="2">تاریخ ثبت گزارش</th>
                    <th rowspan="2">اقدامات</th>
                    <th rowspan="2">ثبت موقعیت</th>
                    <th colspan="2">تصاویر اقدام</th>
                    <th rowspan="2">ثبت توضیحات</th>
                    <th rowspan="2">عملیات</th>
                </tr>
                <tr style="background-color: #ff5c0f">
                    <th>قبل</th>
                    <th>بعد</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- end pending complaint table -->

    <!-- road observation register position modal -->
    <div id="show_register_position_modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="modal-title d-flex align-items-center"><img class="ml-2" src="{{ asset('dist/images/new-design/iranTempOrange.svg') }}" />ثبت مختصات (<span style="color: crimson" class="row-id" data-row-id=""></span>)</p>
                    <button type="button" class="close m-0 p-0" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body modal-font-size pt-1 pb-1">
                    <div class="col-12 mb-3 p-0 map-parent-border">
                        <div id="add_map" class="daily-acc-show-map"></div>
                    </div>
                    <div class="row map-latlng-input-row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="d-block text-center"> ثبت دستی مختصات </label>
                                <input type="text" class="form-control input-map-register-pos input-add-register-pos" name="add_register_pos"
                                    id="add_register_pos" data-inputmask="'mask': '(99.999999) - (99.999999)'"
                                    data-mask placeholder="(شروع) => (عرض جغرافیایی) - (طول جغرافیایی)" autocomplete="off" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="choose_position">ثبت موقعیت</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end road observation register position modal -->

    <!-- road observation show description -->
    <div id="description_road_observation_modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="modal-title d-flex align-items-center"><i class="fa fa-comment ml-2"></i>توضیحات</p>
                    <button type="button" class="close m-0 p-0" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body modal-font-size pt-1 pb-1">
                    <h6 class="description-text text-start p-3"></h6>
                </div>
            </div>
        </div>
    </div>
    <!-- end road observation show description -->

    <!-- road observation show on map modal -->
    <div id="show_road_observation_modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="modal-title d-flex align-items-center"><img class="ml-2" src="{{ asset('dist/images/new-design/iranTempGreen.svg') }}" />نمایش مختصات</p>
                    <button type="button" class="close m-0 p-0" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body modal-font-size py-1">
                    <div class="map-show-box img-thumbnail d-flex align-items-center">
                        <div id="map_show"></div>
                    </div>
                    <div class="ml-2 mr-2 mt-3 mb-3">
                        <table class="table table-bordered table-secondary">
                            <thead>
                                <tr>
                                    <th class="text-center show-font">عرض جغرافیایی</th>
                                    <th class="text-center show-font">طول جغرافیایی</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center show-font" id="show_on_map_lat"></td>
                                    <td class="text-center show-font" id="show_on_map_lng"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end road observation show on map modal -->

    <!-- road observation add description -->
    <div id="add_description_road_observation_modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="modal-title d-flex align-items-center"><i class="fa fa-envelope-open ml-2"></i>توضیحات (<span style="color: crimson" class="row-id" data-row-id=""></span>)</p>
                    <button type="button" class="close m-0 p-0" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body modal-font-size pt-1 pb-1">
                    <label for="add_description">توضیحات</label>
                    <textarea class="form-control input-add-desc" name="add_description" id="add_description" rows="5"></textarea>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="add_description_cta">ثبت توضیحات</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end road observation add description -->

    <!-- road observation refrence -->
    <div id="refrence_road_observation_modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="modal-title d-flex align-items-center"><i class="fa fa-comment ml-2"></i>ارجاع</p>
                    <button type="button" class="close m-0 p-0" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body modal-font-size pt-1 pb-1">
                    <div class="col-12 form-group">
                        <label for="refrence_office">اداره کل/استان</label>
                        <select id="refrence_office" name="refrence_office" class="form-control select-refrence"></select>
                    </div>
                    <div class="col-12 form-group">
                        <label for="refrence_description">توضیحات</label>
                        <textarea class="form-control textarea-refrence" name="refrence_description" id="refrence_description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="refrence_cta" data-row-id="">ارجاع</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end road observation refrence -->

    <!-- filter box -->
    <div class='parent-filter'>
        <div class="row mt-2">
            <div class="col-12 mb-2">
                <select id="filter_province" class="form-control stylescroll"></select>
            </div>
            <!-- <div class="col-12 mb-2">
                <select id="select-subject-progress" class="form-control" name="select-subject-progress">
                    <option value="0">انتخاب نوع گزارش</option>
                    <option value="1"> چاله و ناهمواري در سطح راه</option>
                    <option value="2">پاكسازي سطح راه (سنگريزه)</option>
                    <option value="3">ايمن سازي حفاظها و علائم آسيب ديده و نا ايمن</option>
                    <option value="4">پاكسازي سطح راه (جسم خارجي)</option>
                    <option value="5">پاكسازي سطح راه (گازوئيل و مواد روغني)</option>
                    <option value="6">پاكسازي سطح راه (لاشه حيوان)</option>
                </select>
            </div> -->
            <div class="col-12 mb-2">
                <input type="text" id="filter_date_from" class="form-control" placeholder="از تاریخ" autocomplete="off">
            </div>
            <div class="col-12 text-left"><button id="btn_filter" class="btn-set-filter px-2 py-1">فیلتر</button></div>
        </div>
    </div>
    <!-- end filter box -->

    <!-- excel box -->
    <div class='parent-excel'>
        <div class="row mt-2">
            <div class="col-12 mb-2">
                <select id="select-province-excel" class="form-control" name="select-province-excel">
                </select>
            </div>
            <div class="form-group col-12 mb-2">
                <input type="text" id="datapicker-from-excel-table"
                class="form-control datepicker-excel-from pwt-datepicker-input-element" placeholder="از تاریخ" autocomplete="off">
            </div>
            <div class="form-group col-12 mb-2">
                <input type="text" id="datapicker-to-excel-table"
                class="form-control datepicker-excel-to pwt-datepicker-input-element" placeholder="تا تاریخ" autocomplete="off">
            </div>
            <div class="col-12 text-left"><button id="btn_excel-download" class="btn-set-filter px-2 py-1">دریافت فایل</button></div>
        </div>
    </div>
    <!-- end excel box -->
@endsection
@section('scripts-body')
    <!-- bootstrap js -->
    <script src="{{ asset('plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <!-- sweetalert2 js -->
    <script src="{{ asset('dist/js/sweetalert2js.js') }}"></script>
    <!-- map scripts -->
    <script src="{{ asset('dist/js/leaflet.js') }}"></script>
    <script src="{{ asset('dist/js/leaflet.markercluster.js') }}"></script>
    <script src="{{ asset('dist/js/leaflet-routing-machine.js') }}"></script>
    <!-- input mask -->
    <script src="{{ asset('plugins/inputmask/min/jquery.inputmask.bundle.min.js') }}"></script>
    <!-- datatables script -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
    <!-- date picker script -->
    <script src="{{ asset('dist/js/persian-datepicker.min.js') }}"></script>
    <script src="{{ asset('dist/js/persian-date.min.js') }}"></script>
    <!-- moment & jalali -->
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('dist/js/jalali-moment.browser.js') }}"></script>
    <!-- page script -->
    <script src="{{ asset('version2/js/dashboard_pages/fast_react/pending.js?_='). mt_rand(1, 99999999999) }}"></script>
@endsection