@extends(backpack_view('blank'))
@section('after_styles')
    <style>
        /* width */
        .myScrollbar::-webkit-scrollbar {
            width: 15px !important;
            background: #888 !important;
            height: 16px !important;
        }

        /* Track */
        .myScrollbar::-webkit-scrollbar-track {
            background: #aebbfa;
            box-shadow: inset 0 0 5px grey;
        }

        /* Handle */
        .myScrollbar::-webkit-scrollbar-thumb {
            background: #888;
        }

        /* Handle on hover */
        .myScrollbar::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

    </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="{{ backpack_url('dashboard') }}">Admin</a></li>
                <li class="breadcrumb-item text-capitalize"><a href="{{ url('tasks') }}">Pekerjaan</a></li>
                <li class="breadcrumb-item text-capitalize active" aria-current="page">Daftar</li>
            </ol>
        </nav>
        <h2>
            <span class="text-capitalize">Pekerjaan</span>
        </h2>

        <div class="container-fluid animated fadeIn">
            <div class="row">
                <div class="col-md-12">
                    <div class="row mb-0">
                        <div class="col-sm-6">
                            <div class="d-print-none with-border">
                            </div>
                        </div>
                    </div>
                    <div class="row mb-0">
                        <div class="col-sm-12">
                            <table id="table-tasks" class="bg-white table table-striped table-hover dataTable" width="100%">
                                <thead class="text-center">
                                <tr>
                                    <th rowspan="2"></th>
                                    <th rowspan="2">No</th>
                                    <th rowspan="2">Pemberi Tugas</th>
                                    <th rowspan="2">Nomor Penawaran/Kontrak</th>
                                    <th rowspan="2">Objek Pekerjaan</th>
                                    <th colspan="2">Tanggal Inspeksi</th>
                                    <th colspan="2">Tanggal Mulai</th>
                                    <th colspan="2">Tanggal Resume</th>
                                    <th colspan="2">Tanggal Final</th>
                                    <th rowspan="2">Laporan Final</th>
                                    <th rowspan="2">HK</th>
                                    <th rowspan="2">Due Date</th>
                                    <th rowspan="2">Status</th>
                                    <th rowspan="2">Actions</th>
                                </tr>
                                <tr>
                                    <th>Rencana</th>
                                    <th>Realisasi</th>
                                    <th>Rencana</th>
                                    <th>Realisasi</th>
                                    <th>Rencana</th>
                                    <th>Realisasi</th>
                                    <th>Rencana</th>
                                    <th>Realisasi</th>
                                </tr>
                                </thead>
                                <!--todo gagal pakai fixed header-->
{{--                                <tfoot class="text-center">--}}

{{--                                <tr>--}}
{{--                                    <th rowspan="2">Pemberi Tugas</th>--}}
{{--                                    <th rowspan="2">Nomor Penawaran/Kontrak</th>--}}
{{--                                    <th>Rencana</th>--}}
{{--                                    <th>Realisasi</th>--}}
{{--                                    <th>Rencana</th>--}}
{{--                                    <th>Realisasi</th>--}}
{{--                                    <th>Rencana</th>--}}
{{--                                    <th>Realisasi</th>--}}
{{--                                    <th rowspan="2">HK</th>--}}
{{--                                    <th rowspan="2">Due Date</th>--}}
{{--                                    <th rowspan="2">Status</th>--}}
{{--                                    <th rowspan="2">Actions</th>--}}
{{--                                </tr>--}}
{{--                                <tr>--}}
{{--                                    <th colspan="2">Tanggal Inspeksi</th>--}}
{{--                                    <th colspan="2">Tanggal Mulai</th>--}}
{{--                                    <th colspan="2">Tanggal Final</th>--}}
{{--                                </tr>--}}
{{--                                </tfoot>--}}
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('modals')
    <div class="modal" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" id="modal_filter">
        <form>
            @csrf
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Filter</h4>
                        <button type="button" class="btn btn-default" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">X</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="card">
                            <div class="card-body row">
                                <div class="form-group col-md-12 required" element="div">
                                    <label>Status</label>
                                    <select class="form-control" name="status" id="status">
                                        <option value="all" {{ ($filter['status'] == 'all') ? 'selected' : '' }}>All</option>
                                        <option value="notstarted" {{ ($filter['status'] == 'notstarted') ? 'selected' : '' }}>Belum Dimulai</option>
                                        <option value="onprogress" {{ ($filter['status'] == 'onprogress') ? 'selected' : '' }}>On Progress</option>
                                        <option value="final" {{ ($filter['status'] == 'final') ? 'selected' : '' }}>Selesai</option>
                                        <option value="batal" {{ ($filter['status'] == 'batal') ? 'selected' : '' }}>Batal</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-12 required" element="div">
                                    <label>Tahun</label>
                                    <select class="form-control" name="tahun" id="tahun">
                                        <option value="all" {{ ($filter['tahun'] == 'all') ? 'selected' : '' }}>All</option>
                                        @for($i= 2020; $i < date('Y')+1; $i++)
                                            <option value="{{ $i }}" {{ ($filter['tahun'] == $i) ? 'selected' : '' }}>{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="la la-ban"></span> Cancel</button>
                        <button type="submit" class="btn btn-primary">Filter</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endpush

@section('after_scripts')
    <!-- custom js / css-->
    @include('tasks.js')
    <script>
        var add = '{{ $canAdd }}' ? '<a href="{{ url('tasks/create') }}" class="btn btn-primary" data-style="zoom-in"><span class="ladda-label"><i class="la la-plus"></i> Add Task</span></a>' : '';
        var filter = '  <a href="#" id="filter_data" class="btn btn-primary" data-target="#modal_filter" data-toggle="modal"><i class="la la-search"></i> Filter</span></a>';
        $(document).ready(function(){
            $('.dataTables_scrollBody').addClass('myScrollbar')
        });

        var table = $('#table-tasks').DataTable({
            dom: '<"toolbar">frtl<"top"i><"bottom"p>',
            language: { search: '', searchPlaceholder: "Search...", sLengthMenu:"_MENU_ entries per page",
                paginate: {
                    "previous": "<",
                    "next": ">"
                }
            },
            "scrollX": true,
            ajax: {
                url : "{{ route('tasks.datatable') }}",
                type : 'GET',
                data: function (data) {
                    data.filterListKontrak = "{{ $filterListKontrak }}";
                    data.userId = "{{ $userId }}";
                    data.tahun = "{{ $filter['tahun'] }}";
                    data.status = "{{ $filter['status'] }}";
                    data.dtch = "{{ $filter['dtch'] }}";
                    data.dtjp = "{{ $filter['dtjp'] }}";
                    data.tgl_awal = "{{ $filter['tgl_awal'] }}";
                    data.tgl_akhir = "{{ $filter['tgl_akhir'] }}";
                    data.user_id_dashboard = "{{ $filter['user_id_dashboard'] }}";
                }
            },
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            fnInitComplete: function(){
                $('div.toolbar').html(add+filter).addClass("col-sm-6");
                $('#table-tasks_filter').addClass("col-sm-8");
            },
            fixedHeader: {
                header: true,
                footer: true
            },
            // buttons: [
            //     { extend: 'excel', text: 'Export to Excel', className: 'btn btn-success' }
            // ],
            columns: [
                {
                    "data": "parent_id",
                    "searchable": false, "visible": false,
                    render: function (data, type, full, meta) {
                        if(data == null){
                            data = 0;
                        }
                        return data;
                    }
                },
                {
                    "data": null,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }

                },
                {
                    "data": "client_name",
                    render: function (data, type, full, meta){
                        let pemberi = data;
                        if (full.uraian_pekerjaan !== null) pemberi += " - " + full.uraian_pekerjaan;
                        return pemberi;
                    }
                },
                {
                    "data": "no_kontrak",
                    render: function (data, type, full, meta){
                        return '<a href="{{ url('tasks/view') }}/'+full.uuid+'#kontrak" class="btn btn-link" title="Lihat" target="_blank">'+data+'</a>' + '<br/>'+dateFormat(full.tgl_kontrak);
                    }
                },
                    {{--{--}}
                    {{--    "data": "no_kontrak",--}}
                    {{--    "render": function (data, type, full, meta) {--}}

                    {{--        if (type === 'display') {--}}
                    {{--            // Membuat tautan dengan data no_kontrak dan tgl_kontrak--}}
                    {{--            var link = '<a href="{{url('tasks/detail')}}'+'/' + full.uuid + '">' + data + '<br/>' + dateFormat(full.tgl_kontrak) + '</a>';--}}
                    {{--            return link ;--}}
                    {{--        }--}}
                    {{--        return data;--}}
                    {{--    }--}}
                    {{--},--}}
                {
                    "data": "objek_penilaian",
                    render: function (data, type, full, meta){
                        return data;
                    }
                },
                {
                    "data": "tgl_rencana_awal_inspeksi",
                    "render": function (data, type, full, meta){
                        let tgl_awal = (data != null) ? dateFormat(data) : '';
                        let tgl_akhir = (full.tgl_rencana_akhir_inspeksi != null) ? ' - ' + dateFormat(full.tgl_rencana_akhir_inspeksi) : '';
                        return tgl_awal + tgl_akhir;
                    }
                },
                {
                    "data": "tgl_awal_inspeksi",
                    "render": function (data, type, full, meta){

                        let tgl_awal = (data != null) ? dateFormat(data) : '';
                        let tgl_akhir = (full.tgl_akhir_inspeksi != null) ? ' - ' + dateFormat(full.tgl_akhir_inspeksi) : '';
                        return tgl_awal + tgl_akhir;
                    }
                },
                {
                    "data": "tgl_rencana_resume",
                    "render": function (data){
                        return dateFormat(data);
                    }
                },
                {
                    "data": "tgl_upload_resumekertaskerja",
                    "render": function (data){
                        var date = null;
                        if(data !== null){
                            date = addDays(data, 1);
                        }

                        return dateFormat(date);
                    }
                },
                {
                    "data": "tgl_rencana_mulai",
                    "render": function (data){
                        return dateFormat(data);
                    }
                },
                {
                    "data": "tgl_akhir_inspeksi",
                    "render": function (data){
                        var date = null;
                        if(data !== null){
                            date = addDays(data, 1);
                        }

                        return dateFormat(date);
                    }
                },
                {
                    "data": "tgl_rencana_final",
                    "render": function (data){
                        if(data !== null) {
                            return dateFormat(data);
                        }
                        return data;
                    }
                },
                {
                    "data": "tgl_upload_lapfinal",
                    "render": function (data){
                        if(data !== null) {
                            return dateFormat(data);
                        }
                        return data;
                    }
                },
                {
                    "data": "is_laporan_per_wo"
                },
                {
                    "data": "waktu_pengerjaan"
                },
                {
                    "data": "duedate",
                    render: function (data, type, full, meta){
                        return statusFormat(data);
                        //return data;
                    }
                },
                {
                    "data": "state_name",
                    render: function (data, type, full, meta){

                        //return data;
                        // if (full.ispending = true && !full.state_code.includes('batal'))
                        //     return `<label><span class="badge badge bg-danger badge-sm  me-1 mb-1 mt-1">Pending</span></label>`;
                        return stateFormat(data,full.state_code);
                    }
                },
                {
                    "data": 'actions',
                    "searchable": false,
                    "orderable": false,
                    "className": "text-nowrap"
                },
            ],
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            // fixedHeader: true,
            // scrollY: "600px",
            // scrollCollapse: true,
        });


        function dateFormat(val) {
            var arrmonth = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
            if(val) {
                var date = new Date(val.replace(/-/g, "/"));
                var month = date.getMonth();
                return date.getDate() + " " + arrmonth[month] + " " + date.getFullYear();
            }else{
                return "";
            }
        }

        function stateFormat(name,val) {
            var badge = 'badge-default';
              switch (val){
                  case "END":
                      badge = 'badge bg-success badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "batal":
                      badge = 'badge bg-dark badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "createkontrak":
                      badge = 'badge bg-primary badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "penugasan":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "delegasipekerjaan":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "approvaldireksi":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "createrkp":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "persetujuanrkp":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "createrks":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "persetujuanrks":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "processallowance":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "inspection":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "reportinspection":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "resumeinspection":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "reviewinspection":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "persetujuaninspection":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "distributeresume":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "tanggapanresume":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "reportpenilaianresume":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "reviewreportpenilaian":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "printreport":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  case "archiveandsend":
                      badge = 'badge bg-warning badge-sm  me-1 mb-1 mt-1';
                      break;
                  default:
                      break;

              }
              return `<label><span class="badge `+badge+`">`+name+`</span></label>`;
        }

        function statusFormat(val) {
            var badge = 'badge-default';
            switch (val){
                case "{!! \App\Registry::DUEDATE_DONE !!}":
                    badge = 'badge bg-success badge-sm  me-1 mb-1 mt-1';
                    break;
                case "{!! \App\Registry::DUEDATE_OVERDUE !!}":
                    badge = 'badge bg-danger badge-sm  me-1 mb-1 mt-1';
                    break;
                case "{!! \App\Registry::DUEDATE_CANCEL !!}":
                    badge = 'badge bg-default badge-sm me-1 mb-1 mt-1';
                    break;
                case "{!! \App\Registry::DUEDATE_ONPROGRESS !!}":
                    badge = 'badge bg-info badge-sm  me-1 mb-1 mt-1';
                    break;
                default:
                    badge = 'badge bg-primary badge-sm  me-1 mb-1 mt-1';
                    break;

            }
            return `<label><span class="badge `+badge+`">`+val+`</span></label>`;
        }

        function addDays(date, days) {
            var result = new Date(date);
            result.setDate(result.getDate() + days);
            var dateString = result.toISOString().split('T')[0]

            return dateString;
        }

    </script>
    <script>
        $('#table-tasks_filter').addClass('d-flex justify-content-end');
        $('#table-tasks_length').addClass('d-flex justify-content-start my-3');
    </script>
@endsection