@extends('dashboard.layout.content')

@section('customTitle')
{{__('نقاط التحديثات')}}
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-12 layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <div class="filter-container">

                        <div class="d-inline-flex">
                            <div class="d-flex flex-column justify-content-center">
                                <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i></button>
                            </div>
                            <div class="mt-3 mb-3">
                                <a href="{{ route('dashboard.dash_notes.create') }}" class="btn btn-info" target="_blank">
                                    <i class="las la-check-circle"></i>
                                    {{ __('إضافة نقطة جديدة') }}
                                </a>
                            </div>
                        </div>

                        <div class="filters-inputs">
                            <form>
                                <div class="form-row">
                                    <div class="form-group col-md-4 mb-0">
                                        <label for="priorityFilter">{{ "الأولوية" }}</label>
                                        <select id="priorityFilter" class="form-control ">
                                            <option value="" selected></option>
                                            <option value="normal">{{ __('عادية') }}</option>
                                            <option value="medium">{{ __('متوسطة') }}</option>
                                            <option value="high">{{ __('عالية') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4 mb-0">
                                        <label for="typeFilter">{{ "النوع" }}</label>
                                        <select id="typeFilter" class="form-control ">
                                            <option value="" selected></option>
                                            <option value="new_feature">{{ __('ميزة جديدة') }}</option>
                                            <option value="improvement">{{ __('تحسين') }}</option>
                                            <option value="issue">{{ __('مشكلة') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4 mb-0">
                                        <label for="sectionFilter">{{ "القسم" }}</label>
                                        <select id="sectionFilter" class="form-control ">
                                            <option value="" selected></option>
                                            <option value="dashboard">{{ __('لوحة الإدارة') }}</option>
                                            <option value="contract_system">{{ __('نظام العقود') }}</option>
                                            <option value="application_system">{{ __('نظام التطبيقات') }}</option>
                                            <option value="system">{{ __('النظام') }}</option>
                                            <option value="mobile">{{ __('تطبيق الجوال') }}</option>
                                            <option value="webapp">{{ __('الموقع التفاعلي') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4 mb-0">
                                        <label for="statusFilter">{{ "الحالة" }}</label>
                                        <select id="statusFilter" class="form-control ">
                                            <option value="" selected></option>
                                            <option value="reviewing">{{ __('قيد المراجعة') }}</option>
                                            <option value="reviewed">{{ __('تمت المراجعة') }}</option>
                                            <option value="confirmed">{{ __('مؤكدة') }}</option>
                                            <option value="started">{{ __('بدأت') }}</option>
                                            <option value="canceled">{{ __('ألغيت') }}</option>
                                            <option value="postponed">{{ __('تأجلت') }}</option>
                                            <option value="waiting_for_the_test">{{ __('بانتظار الاختبار') }}</option>
                                            <option value="passed_the_test">{{ __('تجاوزت الاختبار') }}</option>
                                            <option value="failed_the_test">{{ __('فشلت في الاختبار') }}</option>
                                            <option value="finished">{{ __('انتهت') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="startDateFilter">{{ __('validation.attributes.start_date') }}</label>
                                        <input type="date" id="startDateFilter" class="form-control basicFlatpickr flatpickr flatpickr-input">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="endDateFilter">{{ __('validation.attributes.end_date') }}</label>
                                        <input type="date" id="endDateFilter" class="form-control basicFlatpickr flatpickr flatpickr-input">
                                    </div>

                                    <div class="form-group col-md-4 mb-0">
                                        <label for="shownPointsFilter">{{ "النقاط الظاهرة" }}</label>
                                        <select id="shownPointsFilter" class="form-control ">
                                            <option value="" selected></option>
                                            <option value="all">{{ __('جميع النقاط') }}</option>
                                            <option value="current">{{ __('الحالية فقط') }}</option>
                                            <option value="archived">{{ __('الأرشيف فقط') }}</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="notesTable" class="table table-hover text-center">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{__('اسم المضيف')}}</th>
                                    <th>{{__('كود النقطة')}}</th>
                                    <th>{{__('القسم')}}</th>
                                    <th>{{__('العنوان')}}</th>
                                    <th>{{__('الترتيب')}}</th>
                                    <th>{{__('النوع')}}</th>
                                    <th>{{__('الأولوية')}}</th>
                                    <th>{{__('الحالة')}}</th>
                                    <th>{{__('خيارات')}}</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>#</th>
                                    <th>{{__('اسم المضيف')}}</th>
                                    <th>{{__('كود النقطة')}}</th>
                                    <th>{{__('القسم')}}</th>
                                    <th>{{__('العنوان')}}</th>
                                    <th>{{__('الترتيب')}}</th>
                                    <th>{{__('النوع')}}</th>
                                    <th>{{__('الأولوية')}}</th>
                                    <th>{{__('الحالة')}}</th>
                                    <th>{{__('خيارات')}}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

<x-bootstrap.modal id="detailsModal" content="dashboard.notes.modals.details" />

@endsection

@section('customScript')
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>
<script>
    $("#offers-menu-box").attr("data-active", "true")

    let notesTable = initializeDataTable("#notesTable",{
        columns : [
            {data: 'DT_RowIndex', orderable: false, searchable: false },
            {data: "admin_id", searchable: false, orderable: false},
            {data: "code", searchable: true},
            {data: "section", searchable: true, orderable: false},
            {data: "title", searchable: true, orderable: false},
            {data: "ordering", searchable: false, orderable: true},
            {data: "type", searchable: true, orderable: false},
            {data: "priority", searchable: true, orderable: false},
            {data: "status", searchable: true, orderable: false},
            {data: "actions", searchable: false, orderable: false},
    ]});

    $("#priorityFilter,#typeFilter,#sectionFilter,#statusFilter,#startDateFilter,#endDateFilter,#shownPointsFilter").on("change",function(){
        reloadDataTable(notesTable,{
            priority : $("#priorityFilter").val(),
            type : $("#typeFilter").val(),
            section : $("#sectionFilter").val(),
            status : $("#statusFilter").val(),
            start_date : $("#startDateFilter").val(),
            end_date : $("#endDateFilter").val(),
            shown_points : $("#shownPointsFilter").val(),
        });
    });

    ajaxSelect2('#carFilter','/dashboard/select2/cars',{
        withAll: true
    });

    $(document).on("click",".detailsBtn",function(e){
        e.preventDefault();

        let note_id = $(this).data("note-id");
        let responsible_person = $(this).data("responsible-person");
        let start_date = $(this).data("start-date");
        let due_date = $(this).data("due-date");
        let is_belongs_to_update = $(this).data("is-belongs-to-update");
        let dash_update_code = $(this).data("dash-update-code");
        let details = $(this).data("details");

        $("#detailsModal .modal-title").html("التفاصيل : ");
        $("#detailsModal #note_id").val(note_id);
        $("#detailsModal #responsible_person").val(responsible_person);
        $("#detailsModal #start_date").val(start_date);
        $("#detailsModal #due_date").val(due_date);
        $("#detailsModal #is_belongs_to_update").val(is_belongs_to_update);
        $("#detailsModal #dash_update_code").val(dash_update_code);
        $("#detailsModal #details").val(details);
        $("#detailsModal").modal();

    });

    $("body").on("click", ".change_note_status_btn", function(){
        $.ajax({
            url: "{{ route('dashboard.notes.change_note_status') }}",
            type: "GET",
            data: {
                note_id: $(this).parent().parent().find(".note_id").val(), 
                note_status: $(this).parent().parent().find(".note_status").val() 
            },
            success: function(result){
                location.reload();
            }
        });
    });

</script>

<script>
    let timer;
    $("body").on('change', '.ordering', function(){
        clearTimeout(timer);
        timer = setTimeout(() => {
            $.ajax({
                url: "{{ route('dashboard.notes.change_ordering') }}",
                type: "GET",
                data: {
                    note_id: $(this).data("note-id"),
                    ordering: $(this).val(), 
                },
                success: function(){
                    reloadDataTable(notesTable);
                }
            });
        }, 500);
    });
</script>

@endsection