@php
    if(!isset($action)) $action = 'create'; //create/update/view
@endphp

<div class="row">
    <div class="form-group col-md-6 required" element="div">
        <label>Tanggal Awal Inspeksi</label>
        <input type="date" name="tgl_awal_inspeksi" value="{{ $data['tgl_awal_inspeksi'] }}" {{$actionInspeksiSurvey == 'view' ? 'readonly' : ''}} pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="yyyy-mm-dd" class="form-control" required>
    </div>

    <div class="form-group col-md-6 required" element="div">
        <label>Tanggal Akhir Inspeksi</label>
        <input type="date" name="tgl_akhir_inspeksi" value="{{ $data['tgl_akhir_inspeksi'] }}" {{$actionInspeksiSurvey == 'view' ? 'readonly' : ''}} pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="yyyy-mm-dd" class="form-control" required>
    </div>

    <div class="form-group col-sm-12" element="div">
        <label>Catatan Hasil Survey</label>
        <textarea type="text" name="catatan_hasil_survey" id="catatan_hasil_survey"  class="form-control" {{$actionInspeksiSurvey == 'view' ? 'readonly' : ''}}>{{$data['catatan_hasil_survey']}}</textarea>
    </div>

{{--                @if($actionInspeksiSurvey == 'create' || $actionInspeksiSurvey == 'edit')--}}
{{--                    <div class="form-group col-md-12">--}}
{{--                        <button type="button" class="btn btn-primary" id="add_hasil_inspeksi"  data-target="#modal_hasil_inspeksi" data-toggle="modal"><span class="la la-plus"></span>Tambah</button>--}}
{{--                    </div>--}}
{{--                @endif--}}
{{--                <div class="form-group col-md-12">--}}
{{--                    <label></label>--}}
{{--                    <table class="bg-white table table-striped table-hover dataTable" id="table_hasil_inspeksi" style="width: 100%">--}}
{{--                        <thead>--}}
{{--                        <th>No</th>--}}
{{--                        <th>Tanggal</th>--}}
{{--                        <th>Catatan</th>--}}
{{--                        <th>Aksi</th>--}}
{{--                        </thead>--}}
{{--                        <tbody>--}}

{{--                        </tbody>--}}
{{--                    </table>--}}
{{--                </div>--}}
    <input type="hidden" name="hasil_inspeksi" id="hasil_inspeksi" value="{{ $data['hasil_inspeksi'] != null ? $data['hasil_inspeksi'] : json_encode([]) }}">
    <input type="hidden" name="oldhasil_inspeksi" id="oldhasil_inspeksi" value="{{ $data['hasil_inspeksi'] != null ? $data['hasil_inspeksi'] : '' }}">

    <div class="form-group col-sm-12" element="div">
        <input type="hidden" name="inspeksi_selesai" id="inspeksi_selesai" value="{{ $data['inspeksi_selesai'] ?? '0' }}">
        <input type="checkbox" aria-label="Setuju" name="inspeksi_selesai" id="inspeksi_selesai_cek" value="1" {{ ($data['inspeksi_selesai'] == "1" ? "checked" : "")}} {{($actionInspeksiSurvey == 'view' || $actionInspeksiSurvey == 'edit') ? 'disabled' : ''}} onclick="Checkbox()">
        <label>Inspeksi Selesai Dilakukan</label>
        <label>&ensp;&ensp;&ensp;&ensp;</label>
        <input type="hidden" name="data_lengkap" id="data_lengkap" value="{{ $data['data_lengkap'] ?? '0' }}">
        <input type="checkbox" aria-label="Setuju" name="data_lengkap" id="data_lengkap_cek" value="1" {{ ($data['data_lengkap'] == "1" ? "checked" : "")}} {{($actionInspeksiSurvey == 'view' || $actionInspeksiSurvey == 'edit') ? 'disabled' : ''}} onclick="Checkbox()">
        <label>Data Sudah Lengkap</label>
    </div>

    @if(isset($showStartMonitoring) && $showStartMonitoring == true)
        <div class="form-group col-sm-12" element="div">
            <input type="hidden" name="start_monitoring" id="start_monitoring" value="{{ $data['start_monitoring'] ?? '0' }}">
            <button type="button" class="btn btn-primary" id="startmonitoring" name="startmonitoring" style="visibility: hidden" onclick="StartMonitor()">Mulai Monitoring</button>
        </div>
    @else
        <div class="form-group col-sm-12" element="div">
            <label id="warningmonitoring" hidden>*Karena laporan final yang disampaikan per kontrak, maka WO berikut baru bisa maju ketahap selanjutnya, jika semua WO pada kontrak {{ $data['no_kontrak'] }} sudah menyimpan data hasil inspeksi.</label>
        </div>
    @endif

    @if ($actionResumeKertasKerja != 'view')
        @if ($cangenerateresume == true)
            <div class="form-group col-md-12" element="div">
                @component("components.buttondownload", ["href" => url('tasks/generate/resume/'. $data['uuid']), "label" => "Generate Resume", "icon" => "download"])@endcomponent
            </div>
        @endif
        <div class="form-group col-md-6 required" element="div">
            <label>Tanggal Upload Resume & Kertas Kerja</label>
            <input type="date" name="tgl_upload_resumekertaskerja" readonly value="{{ $data['tgl_upload_resumekertaskerja'] ?? date('Y-m-d') }}" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="yyyy-mm-dd" class="form-control">
        </div>
    @endif
    <div class="form-group col-md-6 required" element="div">

        <input type="hidden" name="oldfile_resumekertaskerja" id="oldfile_resumekertaskerja" value="{{$data['file_resume_kertaskerja'] ?? ''}}">
        @if(!empty($data['file_resume_kertaskerja']))
            <button type="button" class="btn btn-sm btn-link float-right inline-create-button" id="view_modal_historykertaskerja" data-target="#modal_historykertaskerja" data-toggle="modal"><span class="la la-plus"></span>Lihat History Kertas Kerja</button>
        @endif
        @if ($actionResumeKertasKerja != 'view')
            <label>&emsp;Upload Resume dan Kertas Kerja</label>
            @component('components.inputfile', ['name' => 'file_resume_kertaskerja', 'disabled' => ($actionResumeKertasKerja == 'view')])@endcomponent
        @endif
        <input type="hidden" name="namafile_resumekertaskerja" id="namafile_resumekertaskerja" value="{{$actionResumeKertasKerja != 'create' ? $data['file_resume_kertaskerja'] : ''}}">
        @if(!empty($data['file_resume_kertaskerja']))
            <label>&emsp;</label>
            @component("components.buttondownload", ["href" => url('tasks/download/'. $data['file_resume_kertaskerja']), "label" => "Download Resume & Kertas Kerja", "icon" => "download"])@endcomponent
        @endif
    </div>

</div>

@push('modals')
    <div class="modal" aria-modal="true" role="dialog" id="modal_historykertaskerja">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">History Resume dan Kertas Kerja</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">
                            <table class="bg-white table table-striped table-hover dataTable" id="table_historykertaskerja" width="100%">
                                <thead>
                                <th>No</th>
                                <th>Keterangan</th>
                                <th>Catatan</th>
                                <th>User</th>
                                <th>Aksi</th>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="la la-ban"></span> Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" aria-modal="true" role="dialog" id="modal_hasil_inspeksi">
        <form>
            @csrf
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Tambah Laporan Hasil Survey</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-sm-12" element="div">
                                    <label>Tanggal</label>
                                    <input type="date" name="tgl_survey" id="tgl_survey" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="yyyy-mm-dd" class="form-control">
                                </div>
                                <!-- text input -->
                                <div class="form-group col-sm-12" element="div">
                                    <label>Catatan</label>
                                    <textarea type="text" name="nama" id="nama_hasil_inspeksi" value="" class="form-control"></textarea>
                                </div>
                                <!-- text input -->
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" onclick="addHasilSurvey('hasil_inspeksi')">
                            <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

@push('after_scripts')
    <script>
        var table_historykertaskerja = $('#table_historykertaskerja').DataTable({
            paging: false,
            searching : false,
            info : false,
            ajax: {
                url : "{{ url('api/history/kertaskerja') }}",
                type : 'GET',
                data: function (data) {
                    data.uuid = "{{$data['uuid']}}";
                }
            },
            columns: [
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "type",
                },
                {
                    "data": "catatan",
                },
                {
                    "data": "cool_name",
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btndownload = '-';
                        if (full.nama_file !== null) {
                            btndownload = `<a href="{{ url('tasks/download/') }}/`+full.nama_file+`" target="_blank" class=" btn btn-raised btn-primary"><i class="fa fa-download"></i> Download</a>`;
                        }

                        return btndownload;
                    }
                },
            ],
        });

        // region hasil survey
        var arr_hasil_inspeksi = {!! $data['hasil_inspeksi'] != null ? $data['hasil_inspeksi'] : json_encode([]) !!};
        var table_hasil_inspeksi = $('#table_hasil_inspeksi').DataTable({
            "ordering": false,
            "info": false,
            "paging": false,
            "searching": false,
            "bLengthChange": false,
            data: arr_hasil_inspeksi,
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "date",
                    "render": function (data){
                        return dateFormat(data);
                    }
                },
                {
                    "data": "name",
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btndelete = '-';
                        @if (($actionInspeksiSurvey == 'create' || $actionInspeksiSurvey == 'edit') ? true : false)
                            btndelete = `<button type="button" class="btn btn-sm btn-danger" onclick="deleteHasilSurvey('`+full.name+full.date+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;
                        @endif
                            return btndelete;
                    }
                },
            ],
            processing: true,
            serverSide: false,
            order: [[1, 'desc']],
        });

        function addHasilSurvey(modal){
            var obj = {};
            obj.name = $('#nama_hasil_inspeksi').val();
            obj.date = $('#tgl_survey').val();
            arr_hasil_inspeksi.push(obj);
            table_hasil_inspeksi.clear().draw();
            table_hasil_inspeksi.rows.add(arr_hasil_inspeksi); // Add new data
            table_hasil_inspeksi.columns.adjust().draw(); // Redraw the DataTable
            $('#hasil_inspeksi').val(JSON.stringify(arr_hasil_inspeksi));
            $('#nama_hasil_inspeksi').val('');
            $('#tgl_survey').val('');
            toggleModal(modal.toLowerCase());
        }

        var showStartMonitoring = {!! isset($showStartMonitoring) ? json_encode($showStartMonitoring) : json_encode('false') !!};

        function Checkbox() {
            
            if ($('#inspeksi_selesai_cek').is(':checked') == true && $('#data_lengkap_cek').is(':checked')){

                if(showStartMonitoring == true){
                    document.getElementById('startmonitoring').style.visibility = 'visible';
                }else{
                    document.getElementById('warningmonitoring').removeAttribute('hidden');
                }
                
            }else{
                //document.getElementById('startmonitoring').style.visibility = 'hidden';
                $('#start_monitoring').val(0);
            }
        }

        let actioncheckin = {!! json_encode($actionInspeksiSurvey) !!};
        if(actioncheckin === "create"){
            if ($('#inspeksi_selesai_cek').is(':checked') == true && $('#data_lengkap_cek').is(':checked')){
                if(showStartMonitoring == true){
                    document.getElementById('startmonitoring').style.visibility = 'visible';
                }else{
                    document.getElementById('warningmonitoring').removeAttribute('hidden');
                }
                
            }else{
                //document.getElementById('startmonitoring').style.visibility = 'hidden';
                $('#start_monitoring').val(0);
            }
        }
        

        function StartMonitor(){
            $('#start_monitoring').val(1);
            Swal.fire(
                'Start Monitoring!',
                ' ',
                'success'
            )
        }

        function deleteHasilSurvey(name){
            var i = 0;
            let varname = '';
            for (i = arr_hasil_inspeksi.length - 1; i >= 0; --i) {
                varname = arr_hasil_inspeksi[i].name+arr_hasil_inspeksi[i].date;
                if (varname === name) {
                    arr_hasil_inspeksi.splice(i,1);
                    table_hasil_inspeksi.clear().draw();
                    table_hasil_inspeksi.rows.add(arr_hasil_inspeksi); // Add new data
                    table_hasil_inspeksi.columns.adjust().draw(); // Redraw the DataTable
                    $('#hasil_inspeksi').val(JSON.stringify(arr_hasil_inspeksi));
                }
            }
        }
        // endregion hasil survey
    </script>
@endpush