@extends('layouts.dashboard.with_sidebar')
@section('title', 'فعالیت روزانه')
@section('styles')
    <!-- date picker link -->
    <link rel="stylesheet" href="{{ asset('dist/css/persian-datepicker.min.css') }}" />
    <!-- map links -->
    <link rel="stylesheet" href="{{ asset('dist/css/leaflet.css') }}" />
    <!-- this page styles -->
    <link rel="stylesheet" href="{{ asset('version2/css/dashboard_pages/road_items/operation_create.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')
    <div class="d-flex align-items-center mb-2">
        <hr class="col mx-2">
        <div class="d-flex">
            <button data-toggle="tooltip" data-placement="bottom" data-original-title="ثبت فعالیت برای موارد مشاهده شده در گشت راهداری" class="search-item mx-1" id="search_item">ثبت فعالیت برای موارد مشاهده شده در گشت راهداری</button>
            <a href="{{route('v2.dashboard')}}" class="d-block d-md-none btn btn-default mx-1">بازگشت</a>
        </div>
    </div>
    <div class="item-box">
        <div class="d-flex align-items-center m-2">
            <hr class="col">    
            <div class="d-flex mx-2">
                <h5>انتخاب آیتم</h5>
            </div>
            <hr class="col">
        </div>
        <div class="fill-item d-flex flex-wrap align-items-center justify-content-start mb-3 p-2 rounded"></div>
    </div>
    <div class="sub-item-box my-5">
        <div class="d-flex align-items-center m-2">
            <hr class="col">  
            <div class="d-flex mx-2">
                <h5>انتخاب موضوع مشاهده شده</h5>
            </div>
            <hr class="col">
        </div>
        <div class="fill-sub-item d-flex flex-wrap align-items-center justify-content-start mb-3 p-2 rounded">
            <span class="blink_me item-counter px-2 ml-auto mr-auto"><h5 class="mb-0 text-danger">ابتدا باید یکی از آیتم های بالا را انتخاب کنید!</h5></span>
        </div>
    </div>
    <!-- all modals -->
        <!-- item data -->
        <div class="modal fade" id="itemData_modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header align-items-center">
                        <h5 class="modal-title">اطلاعات مورد مشاهده شده</h5>
                        <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">
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <div class="col-12 form-group">
                                <label for="item">آیتم:</label>
                                <input type="text" data-item-id="" class="form-control clean-input value-important" readonly autocomplete="off" name="item" id="item">
                            </div>
                            <div class="col-12 form-group">
                                <label for="item_amount">مقدار:</label><p class="sub-item-unit"></p>
                                <input type="number" class="form-control clean-input value-important" autocomplete="off" name="item-amount" id="item_amount">
                            </div>
                        </div>
                        <div class="col-12 form-group">
                            <label for="sub_item">مورد مشاهده شده:</label>
                            <input type="text" data-end-point="" data-sub-item-id="" data-sub-image="" class="form-control clean-input value-important" readonly autocomplete="off" name="sub-item" id="sub_item">
                        </div>
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <div class="form-group col-6">
                                <label for="local_name">تاریخ فعالیت:</label>
                                <input type="text" class="form-control clean-input value-important" autocomplete="off" readonly name="projectDate" id="project_date"></input>
                            </div>
                            <div class="form-group col-6">
                                <label for="local_name">ساعت شروع فعالیت:</label>
                                <input type="text" class="form-control clean-input value-important" autocomplete="off" readonly name="projectTime" id="project_time"></input>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-around mb-3">
                            <div class="col-lg-4 upload-box d-none">
                                <div class="img-box col d-flex justify-content-center">
                                    <div class="d-flex flex-column w-100">
                                        <label class="imgbox d-flex align-items-center justify-content-center" for="deviceImg1">
                                            <span class="img-title" id="deviceImg1Title">عکس قبل</span>
                                            <img class="img-preview" id="deviceImg1Preview" src="" />
                                        </label>
                                        <button class="btn-delete-img btn btn-danger btn-sm" id="deleteDeviceImg1" disabled><i class="fa fa-trash" style="color: #fff;"></i></button>
                                    </div>
                                    <input type="file" name="deviceImg1" id="deviceImg1" class="img-input d-none" accept=".jpg, .png">
                                </div>
                            </div>
                            <div class="col-lg-4 upload-box d-none">
                                <div class="img-box col d-flex justify-content-center">
                                    <div class="d-flex flex-column w-100">
                                        <label class="imgbox d-flex align-items-center justify-content-center" for="deviceImg2">
                                            <span class="img-title" id="deviceImg2Title">عکس بعد</span>
                                            <img class="img-preview" id="deviceImg2Preview" src="" />
                                        </label>
                                        <button class="btn-delete-img btn btn-danger btn-sm" id="deleteDeviceImg2" disabled><i class="fa fa-trash" style="color: #fff;"></i></button>
                                    </div>
                                    <input type="file" name="deviceImg2" id="deviceImg2" class="img-input d-none" accept=".jpg, .png">
                                </div>
                            </div>
                        </div>
                        <div class="item-map-box rounded p-1">
                            <div id="add_map" class="rounded"></div>
                            <div class="map-coordinates-box">
                                <label class="d-block text-center text-white">ثبت دستی مختصات</label>
                                <input type="text" class="form-control clean-input value-important mb-1 manually-coordinate-input" name="add-coordinates-start" id="add_coordinates_start" data-inputmask="'mask': '(99.999999) - (99.999999)'" data-mask placeholder="(عرض جغرافیایی) - (طول جغرافیایی)" />
                                <input type="text" class="form-control clean-input value-important d-none manually-coordinate-input" name="add-coordinates-end" id="add_coordinates_end" data-inputmask="'mask': '(99.999999) - (99.999999)'" data-mask placeholder="(عرض جغرافیایی) - (طول جغرافیایی)" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="negative-cta" data-dismiss="modal">بستن</button>
                        <button id="send_item_data_cta" type="button" class="positive-cta">ثبت</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end item data -->
        <!-- show item data -->
        <div class="modal fade" id="searchItem_modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header align-items-center">
                        <h5 class="modal-title">جستجوی مورد مشاهده شده در گشت راهداری و ترابری</h5>
                        <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">
                        <div class="filter-box">
                            <div class="row">
                                <div class="col-12">
                                    <label style="text-align: center;">با استفاده از فیلترهای زیر مورد مشاهده شده در گشت مورد نظر را پیدا کنید.</label>
                                </div>
                            </div>
                            <div>
                                <div class="row date-box">
                                    <div class="col-6">
                                        <label for="road_items_filter_date_from">از تاریخ: </label>
                                        <input type="text" class="form-control clean-input date-from-filter least-one-fill" autocomplete="off" readonly name="roadItemsFilterDateFrom" id="road_items_filter_date_from"></input>
                                    </div>
                                    <div class="col-6">
                                        <label for="road_items_filter_date_to">تا تاریخ: </label>
                                        <input type="text" class="form-control clean-input date-to-filter least-one-fill" autocomplete="off" readonly name="roadItemsFilterDateTo" id="road_items_filter_date_to"></input>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-6">
                                        <label for="roadItem_unique_id">آیتم: </label>
                                        <select class="form-control clean-select least-one-fill" autocomplete="off" name="item-id" id="item_id">
                                            <option value="0" selected>انتخاب آیتم</option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label for="roadItem_unique_id">کد یکتا گشت: </label>
                                        <input type="text" class="form-control clean-input least-one-fill" autocomplete="off" name="roadPatrolId" id="road_patrol_id"></input>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-center my-4">
                                <hr class="col">
                                <button class="filter-cta mx-2" id="filter_date">اعمال فیلتر</button>
                                <hr class="col">
                            </div>
                        </div>
                        <div class="search-box row align-items-end">
                            <div class="col form-group">
                                <label for="item_unique_id">کد یکتا آیتم:</label><p class="sub-item-unit"></p>
                                <select class="form-control clean-select value-important" autocomplete="off" name="item-unique-id" id="item_unique_id" disabled>
                                    <option value="0" disabled selected>انتخاب کد یکتا آیتم</option>
                                </select>
                            </div>
                        </div>
                        <div class="observed-item-data"></div>
                    </div>
                    <div class="modal-footer">
                        <button id="accept_item" data-item-id="" data-item-name="" data-sub-item-id="" type="button" class="positive-cta d-none" disabled>انتخاب مورد</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end show item data -->
        <!-- item data -->
        <div class="modal fade" id="FoundItemData_modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header align-items-center">
                        <h5 class="modal-title">اطلاعات مورد مشاهده شده</h5>
                        <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">
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <div class="col-12 form-group">
                                <label for="FoundItem_item">آیتم:</label>
                                <input type="text" data-item-id="" class="form-control clean-input value-important" readonly autocomplete="off" name="item" id="FoundItem_item">
                            </div>
                            <div class="col-12 form-group">
                                <label for="FoundItem_item_amount">مقدار:</label><p class="sub-item-unit"></p>
                                <input type="number" class="form-control clean-input value-important" autocomplete="off" name="item-amount" id="FoundItem_item_amount">
                            </div>
                        </div>
                        <div class="col-12 form-group">
                            <label for="FoundItem_sub_item">مورد مشاهده شده:</label>
                            <select class="form-control clean-select value-important" name="FoundItem-subitem" id="FoundItem_sub_item"></select>
                        </div>
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <div class="form-group col-6">
                                <label for="FoundItem_project_date">تاریخ فعالیت:</label>
                                <input type="text" class="form-control clean-input value-important" autocomplete="off" readonly name="projectDate" id="FoundItem_project_date"></input>
                            </div>
                            <div class="form-group col-6">
                                <label for="FoundItem_project_time">ساعت شروع فعالیت:</label>
                                <input type="text" class="form-control clean-input value-important" autocomplete="off" readonly name="projectTime" id="FoundItem_project_time"></input>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-around mb-3">
                            <div class="col-lg-4 upload-box d-none">
                                <div class="img-box col d-flex justify-content-center">
                                    <div class="d-flex flex-column w-100">
                                        <label class="imgbox d-flex align-items-center justify-content-center" for="FoundItem_deviceImg1">
                                            <span class="img-title" id="FoundItem_deviceImg1Title">عکس قبل</span>
                                            <img class="img-preview" id="FoundItem_deviceImg1Preview" src="" />
                                        </label>
                                        <button class="btn-delete-img btn btn-danger btn-sm" id="FoundItem_deleteDeviceImg1" disabled><i class="fa fa-trash" style="color: #fff;"></i></button>
                                    </div>
                                    <input type="file" name="FoundItem_deviceImg1" id="FoundItem_deviceImg1" class="img-input d-none" accept=".jpg, .png">
                                </div>
                            </div>
                            <div class="col-lg-4 upload-box d-none">
                                <div class="img-box col d-flex justify-content-center">
                                    <div class="d-flex flex-column w-100">
                                        <label class="imgbox d-flex align-items-center justify-content-center" for="FoundItem_deviceImg2">
                                            <span class="img-title" id="FoundItem_deviceImg2Title">عکس بعد</span>
                                            <img class="img-preview" id="FoundItem_deviceImg2Preview" src="" />
                                        </label>
                                        <button class="btn-delete-img btn btn-danger btn-sm" id="FoundItem_deleteDeviceImg2" disabled><i class="fa fa-trash" style="color: #fff;"></i></button>
                                    </div>
                                    <input type="file" name="FoundItem_deviceImg2" id="FoundItem_deviceImg2" class="img-input d-none" accept=".jpg, .png">
                                </div>
                            </div>
                        </div>
                        <div class="item-map-box rounded p-1">
                            <div id="FoundItem_add_map" class="rounded"></div>
                            <div class="map-coordinates-box">
                                <label class="d-block text-center text-white">ثبت دستی مختصات</label>
                                <input type="text" class="form-control clean-input value-important mb-1 manually-coordinate-input" name="add-coordinates-start-found-item" id="add_coordinates_start_found_item" data-inputmask="'mask': '(99.999999) - (99.999999)'" data-mask placeholder="(عرض جغرافیایی) - (طول جغرافیایی)" />
                                <input type="text" class="form-control clean-input value-important d-none manually-coordinate-input" name="add-coordinates-end-found-item" id="add_coordinates_end_found_item" data-inputmask="'mask': '(99.999999) - (99.999999)'" data-mask placeholder="(عرض جغرافیایی) - (طول جغرافیایی)" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="negative-cta" data-dismiss="modal">بستن</button>
                        <button id="FoundItem_send_item_data_cta" type="button" class="positive-cta">ثبت</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end item data -->
    <!-- end all modals -->
@endsection
@section('scripts-body')
    <!-- map files -->
    <script src="{{ asset('dist/js/leaflet.js') }}"></script>
    <script src="{{ asset('/dist/js/leaflet-routing-machine.js?_=') }}"></script>
    <!-- date picker script -->
    <script src="{{ asset('dist/js/persian-datepicker.min.js?_=v1.2') }}"></script>
    <script src="{{ asset('dist/js/persian-date.min.js') }}"></script>
    <!-- input mask -->
    <script src="{{ asset('plugins/inputmask/min/jquery.inputmask.bundle.min.js') }}"></script>
    <!-- page script -->
    <script src="{{ asset('version2/js/dashboard_pages/road_items/operation_create.js?_='). mt_rand(1, 99999999999) }}"></script>
@endsection