@extends(backpack_view('blank'))
@section('style')
@endsection
@section('after_styles')
    <link rel="stylesheet" href="{{ asset('gantt/skins/dhtmlxgantt_meadow.css') }}" type="text/css" media="screen" title="no title" charset="utf-8">
    <style>
        /* basic positioning */
        .legend { list-style: none; }
        .legend li { float: left; margin-right: 10px; margin-top:10px; }
        .legend span { border: 1px solid #ccc; float: left; width: 15px; height: 15px; margin: 5px; }
        /* your colors */
        .legend .sesuaisla { background-color: #ccffcc; }
        .legend .klienslowrespon { background-color: #fff998; }
        .legend .pengerjaanlamban { background-color: #ff9c9e; }
        .legend .projectbatal { background-color: #80817F; }
        .weekend{ background: #f4f7f4 !important;}
        .baseline {
            background: #ffd180;
            border: 0px solid rgb(255, 153, 0);
        }
    </style>
@endsection
@section('content')
    <main class="pt-2">
        <nav aria-label="breadcrumb" class="d-none d-lg-block">
            <ol class="breadcrumb bg-transparent p-0 justify-content-end">
                <li class="breadcrumb-item text-capitalize"><a href="{{ url('monitoring') }}">Monitoring</a></li>
            </ol>
        </nav>
        <h2>
            <span class="text-capitalize">Monitoring</span>
        </h2>

    </main>

    <div class="row" section="after_content">
        <div class="col-md-12">
            <input id="search-input" type="search" class="form-control mb-2" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
            <div id="gantt_here" style='width:100%; height:50vh;'></div>
        </div>
    </div>

    <div><br></div>

    <div class="row">

        <!-- <ul class="legend">
            <li> &ensp; &ensp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</li>
            <li> &ensp; &ensp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</li>
            <li> &ensp; &ensp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</li>
            <li> &ensp; &ensp;&emsp;&emsp;&emsp;&emsp;</li>
            <li><span class="sesuaisla"></span> Sesuai SLA</li>
            <li><span class="klienslowrespon"></span> Tidak Sesuai SLA - Klien Slow Respon</li>
            <li><span class="pengerjaanlamban"></span> Tidak Sesuai SLA - Pengerjaan Lamban</li>
            <li><span class="projectbatal"></span> Batal</li>
        </ul> -->

        <div class="col-md-12">
            <div class="card">
                <div class="card-header"></div>
                <div class="card-body p-0">
                    <table class="table table-responsive-sm table-striped mb-0">
                        <thead class="thead-light">
                        <tr>
                            <th>User</th>
                            <th class="text-center">Total Pekerjaan</th>
                            <th class="text-center">Total Selesai</th>
                            <th class="text-center">Total On Progress</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($monitoringUser as $key => $item)
                        <tr>
                            <td>
                                <div>{{ $item->name }}</div>
                            </td>
                            <td class="text-center">{{ $item->total_pekerjaan }}</td>
                            <td class="text-center">{{ $item->total_selesai }}</td>
                            <td class="text-center">{{ $item->total_onprogress }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- tim kerja -->
    <div class="row">
        <div class="col-md-12">
            @include('monitoring.timkerja')
        </div>
    </div>
    <br/>

@endsection

@push('modals')
    <div class="modal" aria-modal="true" role="dialog" id="modal_notes_monitoring">
        <form action="{{ route('monitoring.notes.store') }}" method="post" id="myFormNotes" enctype="multipart/form-data">
            @csrf
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Tambah Catatan</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="card">
                            <div class="card-body row">
                                <!-- text input -->
                                <div class="form-group col-sm-12" element="div">
                                    <label>No. Kontrak</label>
                                    <input type="text" name="no_kontrak" id="no_kontrak_notes" value="" class="form-control" disabled>
                                </div>
                                <div class="form-group col-sm-12" element="div">
                                    <label>Client</label>
                                    <input type="text" name="client" id="client_notes" value="" class="form-control" disabled>
                                </div>
                                <!-- text input -->
                                <div class="form-group col-sm-12" element="div">
                                    <label>Tanggal</label>
                                    <input type="date" name="tgl_notes" id="tgl_notes" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="yyyy-mm-dd" class="form-control" onchange="checkNotes(this.value)">
                                </div>
                                <div class="form-group col-sm-12" element="div">
                                    <label>Catatan</label>
                                    <textarea name="catatan" id="catatan" class="form-control" rows="6"></textarea>
                                    <input type="text" name="uuid_notes" id="uuid_notes" value="" class="form-control" hidden>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" form="myFormNotes" value="Submit" class="btn btn-success">
                            <span class="la la-save" role="presentation" aria-hidden="true"></span> &nbsp;
                            <span data-value="save_and_back">Save and back</span>
                        </button>
                        <button class="btn btn-default" data-dismiss="modal"><span class="la la-ban"></span> Cancel</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endpush


@section('after_scripts')
    <script src="{{asset('gantt/dhtmlxgantt.js')}}" type="text/javascript" charset="utf-8"></script>
    <script>
        function modSampleHeight() {
            var headHeight = 60;
            var sch = document.getElementById("gantt_here");
            sch.style.height = (parseInt(document.body.offsetHeight) - headHeight) + "px";
            var contbox = document.getElementById("contbox");
            contbox.style.width = (parseInt(document.body.offsetWidth) - 300) + "px";

            gantt.setSizes();
        }
    </script>
    <script type="text/javascript">

        let current_year =  new Date().getFullYear();
        let next_year = current_year + 1;
        let last_year = current_year - 1;

        gantt.config.readonly = true;
        //gantt.config.task_height = 25;
        gantt.config.row_height = 40;
        gantt.locale.labels.baseline_enable_button = 'Set';
        gantt.locale.labels.baseline_disable_button = 'Remove';
        gantt.config.date_grid = "%d-%M-%Y";
        //gantt.config.work_time = true;
        gantt.plugins({
            tooltip: true
        });
        /*gantt.config.drag_move = false; //disables the possibility to move tasks by dnd
        gantt.config.drag_links = false; //disables the possibility to create links by dnd
        gantt.config.drag_progress = false; //disables the possibility to change the task //progress by dragging the progress knob
        gantt.config.drag_resize = false; //disables the possibility to resize tasks by dnd*/
        gantt.config.columns =  [
            {name :"no", width:22, label:"", template:function(t){return t.$index + 1}},
            {name:"client", width:100, label:"Pemberi Tugas", template:warningLabelText },
            {name:"no_kontrak", width:100, label:"No. Kontrak", template:warningLabelTextContract },
            {name:"objek_penilaian", width:100, label:"Objek Penilaian", template:warningLabelTextObject },
            {name:"start_date", label:"Start Date", align:"center", template:warningLabelStartDate  },
            {name:"end_date",   label:"End Date",   align:"center", template:warningLabelEndDate  },
            {name:"duration",  label:"Duration",   align:"center", template:warningLabelDuration  },
            {name:"sisa_waktu",  label:"Sisa Waktu",   align:"center", template:warningLabelSisaWaktu  },
            // {name:"due_date",  label:"Due Date",   align:"center", template:warningLabelDueDate  },
        ];
        // Fungsi untuk melakukan filter search berdasarkan label kolom

        //hanya role headdiv yg bisa menambahkan notes
        var isheaddiv = {!! json_encode($isHeaddiv) !!};
        if(isheaddiv === true){
            gantt.config.columns.push({name:"notes", label:"Notes",   align:"center", template:warningLabelNotes  },);
        }

        gantt.config.lightbox.sections = [
            {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
            {name: "time", map_to: "auto", type: "duration"},
            {name: "baseline", map_to: { start_date: "start_date", end_date: "end_date"}, button: true, type: "duration_optional"}
        ];
        gantt.config.lightbox.project_sections = [
            {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
            {name: "time", map_to: "auto", type: "duration", readonly: true},
            {name: "baseline", map_to: { start_date: "start_date", end_date: "end_date"}, button: true, type: "duration_optional"}
        ];
        gantt.config.lightbox.milestone_sections = [
            {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
            {name: "time", map_to: "auto", type: "duration", single_date:true},
            {name: "baseline", single_date:true,map_to: { start_date: "start_date", end_date: "end_date"}, button: true, type: "duration_optional"}
        ];

        gantt.locale.labels.section_baseline = "Planned";

        gantt.templates.scale_cell_class = function(date){
            if(date.getDay()==0||date.getDay()==6){
                return "weekend";
            }
        };
        gantt.templates.timeline_cell_class = function(task,date){
            if(date.getDay()==0||date.getDay()==6){
                return "weekend" ;
            }

        };

        //gantt.setWorkTime({date : new Date(2021, 09, 17)});


        // adding baseline display
        // gantt.addTaskLayer(function draw_planned(task) {
        //     if (task.planned_start && task.planned_end) {
        //         var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end);
        //         var el = document.createElement('div');
        //         el.className = 'baseline';
        //         el.style.left = sizes.left + 'px';
        //         el.style.width = sizes.width + 'px';
        //         el.style.top = sizes.top + gantt.config.task_height + 13 + 'px';
        //         return el;
        //     }
        //     return false;
        // });

        gantt.templates.task_class = function (start, end, task) {
            if (task.planned_end) {
                var classes = ['has-baseline'];
                if (end.getTime() > task.planned_end.getTime()) {
                    classes.push('overdue');
                }
                return classes.join(' ');
            }

            switch (task.kode){
                case "1":
                    return "high";
                    break;
                case "11":
                    return "medium";
                    break;
                case "12":
                    return "low";
                    break;
            }
        };

        gantt.templates.rightside_text = function (start, end, task) {
            if (task.planned_end) {
                if (end.getTime() > task.planned_end.getTime()) {
                    var overdue = Math.ceil(Math.abs((end.getTime() - task.planned_end.getTime()) / (24 * 60 * 60 * 1000)));
                    var text = "<b>Overdue: " + overdue + " days</b>";
                    return text;
                }
            }
        };


        gantt.attachEvent("onTaskLoading", function (task) {
            task.planned_start = gantt.date.parseDate(task.start_date, "xml_date");
            task.planned_end = gantt.date.parseDate(task.end_date, "xml_date");
            return true;
        });

        gantt.attachEvent("OnTaskDblClick", function(id, e){
            var task = gantt.getTask(id);
            window.location.href = "{{ url('tasks/view') . '/' }}"+ task.uuid +"#kontrak";
            return true;
        });

        //gantt.config.date_format = "%Y-%m-%d";
        //gantt.init("gantt_here", new Date(2021,0,1), new Date(2021,11,31));
        //gantt.load('api/monitoring/project');

        gantt.config.start_date = new Date(last_year,0,1);
        gantt.config.end_date = new Date(next_year,11,31);
        gantt.init("gantt_here");

            {{--$.ajax({--}}
            {{--    url: "{{ url('api/monitoring/project') }}",--}}
            {{--    success: function (data) {--}}
            {{--        gantt.parse({--}}
            {{--            data: data.data--}}
            {{--        });--}}
            {{--    }--}}
            {{--});--}}
            {{--$.ajax({--}}
            {{--    url: "{{ url('api/monitoring/project') }}",--}}
            {{--    data: {--}}
            {{--        filter: "test" // Ganti "your_filter_value" dengan nilai filter yang sesuai--}}
            {{--    },--}}
            {{--    success: function(data) {--}}
            {{--        // console.log(data);--}}
            {{--        gantt.parse({--}}
            {{--            data: data.data--}}
            {{--        });--}}
            {{--    }--}}
            {{--});--}}
            $(document).ready(function() {
                // Fungsi untuk memperbarui filter
               async function updateFilter(filterValue) {
                    $.ajax({
                        url: "{{ url('api/monitoring/project') }}",
                        data: {
                            no_kontrak: filterValue
                        },
                        success: async function(data) {
                            gantt.clearAll();
                            console.log(data);
                            // console.log(data.data);
                           await gantt.parse({
                                data: data.data
                            });
                        }
                    });
                }

                // Memperbarui filter dengan nilai awal saat halaman pertama kali dimuat
                updateFilter('');

                // Event handler untuk memperbarui filter saat nilai input berubah
                $('#search-input').on('input', function() {
                    var filterValue = $(this).val();
                    updateFilter(filterValue);
                });
            });


        //Tooltip region
        gantt.templates.tooltip_text = function(start,end,task){
            if(task.notes != null){
                return "<b>Notes :</b> "+task.notes;
            }
        };


        gantt.templates.task_text = function(start, end, task){
            if(task.notes != null)
                return "<span style='color:red'><b>"+task.text+"</b></span>";
            if(task.text === '18')
                return "<span style='color:white'><b>"+task.text+"</b></span>";
            return "<b>"+task.text+"</b>";
        };

        //gantt chart column region
        function warningLabelText(task){
            var text = task.text;
            if(task.overdue == 1)
                return changeColorWarning(text);
            return text;
        }

        function warningLabelTextContract(task){
            var text = task.no_kontrak;
            if(task.overdue == 1)
                return changeColorWarning(text);
            return text;
        }

        function warningLabelTextObject(task){
            var text = task.objek_penilaian;
            if(task.overdue == 1)
                return changeColorWarning(text);
            return text;
        }

        function warningLabelPIC(task){
            var text = task.pic;
            return text;
        }

        function warningLabelStartDate(task){
            var text = task.start_date_display;
            if(task.due_date === 'OVERDUE'){
                return "<span style='color:red'>"+task.start_date_display+"</span>";
            }else{
                return text;
            }
        }

        function warningLabelEndDate(task){
            var text = task.end_date_display;
            if(task.due_date === 'OVERDUE'){
                return "<span style='color:red'>"+task.end_date_display+"</span>";
            }else{
                return text;
            }
        }

        function warningLabelDuration(task){
            var text = task.duration_display;
            if(task.due_date === 'OVERDUE'){
                return "<span style='color:red'>"+task.duration_display+"</span>";
            }else{
                return text;
            }
        }

        function warningLabelSisaWaktu(task){
            var text = task.sisa_waktu;
            if(task.due_date === 'OVERDUE'){
                return "<span style='color:red'>"+task.sisa_waktu+"</span>";
            }else{
                return text;
            }
        }

        function warningLabelDueDate(task){

            var text = task.due_date;
            if(text === 'OVERDUE'){
                return "<span style='color:red'>"+task.due_date+"</span>";
            }else{
                return text;
            }
        }

        function changeColorWarning(param){
            return "<div class='text-danger'>"+param+" </div>";
        }

        //Notes Region

        function warningLabelNotes(task){

            var text = "";
            if(task.current_state == 'delegasipekerjaan' || task.current_state == 'createrkp'){
                text = ""
            }else{
                text = "@if( $isHeaddiv == true) <button class='btn btn-link editbtn-modal' data-target='#modal_notes_monitoring' data-toggle='modal' value='" +task.uuid+"' title='Tambahkan Notes'><i class='la la-comments'></i></button> @endif"
            }

            return text;
        }

        $(document).on("click", ".editbtn-modal", function() {
            var uuid = $(this).val();
            $.ajax({
                type : 'get',
                url : "{{ url('monitoring/notes') }}"+'/'+$(this).val(),
                success: function(data){
                    $("#no_kontrak_notes").val(data.data.no_kontrak);
                    $("#client_notes").val(data.data.nama_client);
                    $("#uuid_notes").val(data.data.uuid);
                }
            })
        });

        function checkNotes(val) {

            $.ajax({
                type : 'get',
                url : "{{ url('monitoring/notes/check') }}"+'/'+$("#uuid_notes").val()+'/'+val,
                success: function(data){
                    $("#catatan").val(data.data);
                }
            })
        }
    </script>

@endsection