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

<div class="row mt-4">
    <div class="form-group col-md-6" element="div">
        <label>Nomor Penawaran/Kontrak</label>
        <input type="text" name="no_kontrak" value="{{$action != 'create' ? $data['no_kontrak'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control" maxlength="255">
    </div>

    <div class="form-group col-md-6" element="div">
        <label>Tanggal Penawaran Kontrak <span style="color:red">*</span></label>
        <input type="date" name="tgl_kontrak" value="{{$action != 'create' ? $data['tgl_kontrak'] : ''}}" {{$action == '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 {{ $action != 'view' ? 'col-sm-6' : 'col-sm-6' }}" element="div">
        <label>Pemberi Tugas <span style="color:red">*</span></label>
        <select value="{{$action != 'create' ? $data['client_id'] : ''}}" {{$action == 'view' ? 'readonly disabled' : ''}} name="client_id" id="client_id" style="width: 100%" class="form-control select2-selection select2-selection--single"  tabindex="-1" aria-hidden="true" data-initialized="true" required>
        </select>
        @if($action != 'view')
            <button type="button" class="btn btn-sm btn-link float-right inline-create-button" id="add_clients" onclick="window.open('{{ url('admin/client/create') }}', '_blank')"><span class="la la-plus"></span>Tambah Pemberi Tugas</button>
        @endif
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Uraian Pekerjaan</label>
        <input type="text" name="uraian_pekerjaan" value="{{$action != 'create' ? $data['uraian_pekerjaan'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control" maxlength="255">
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Pengguna Laporan</label>
        {{--<select value="{{$action != 'create' ? $data['pengguna_laporan'] : ''}}" {{$action == 'view' ? 'readonly disabled' : ''}} name="pengguna_laporan[]" id="pengguna_laporan" style="width: 100%" multiple="multiple" class="form-control select2-selection select2-selection--single"  tabindex="-1" aria-hidden="true" data-initialized="true">
        </select>--}}
        <textarea name="pengguna_laporan" id="pengguna_laporan" {{$action == 'view' ? 'readonly' : ''}} class="form-control" required>{{$action != 'create' ? $data['pengguna_laporan'] : ''}}</textarea>
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Alamat Pemberi Tugas <span style="color:red">*</span></label>
        <textarea name="client_alamat" id="client_alamat" {{$action == 'view' ? 'readonly' : ''}} class="form-control" required>{{$action != 'create' ? $data['client_alamat'] : ''}}</textarea>
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Contact Person Marketing</label>
        <input type="text" name="cp_nama" id="cp_nama" value="{{$action != 'create' ? $data['cp_nama'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-md-3 required" element="div">
        <label>Telp</label>
        <input type="text" name="cp_telp" id="cp_telp" value="{{$action != 'create' ? $data['cp_telp'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-md-3 required" element="div">
        <label>Email</label>
        <input type="text" name="cp_email" id="cp_email" value="{{$action != 'create' ? $data['cp_email'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Contact Person Teknis</label>
        <input type="text" name="cp_teknis_nama" id="cp_teknis_nama" value="{{$action != 'create' ? $data['cp_teknis_nama'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-md-3 required" element="div">
        <label>Telp</label>
        <input type="text" name="cp_teknis_telp" id="cp_teknis_telp" value="{{$action != 'create' ? $data['cp_teknis_telp'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-md-3 required" element="div">
        <label>Email</label>
        <input type="text" name="cp_teknis_email" id="cp_teknis_email" value="{{$action != 'create' ? $data['cp_teknis_email'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Customer Relation</label>
        <select value="{{$action != 'create' ? $data['marketing_nama'] : ''}}" {{$action == 'view' ? 'readonly disabled' : ''}} name="marketing_nama" id="marketing_nama" style="width: 100%" class="form-control select2-selection select2-selection--single"  tabindex="-1" aria-hidden="true" data-initialized="true">
        </select>
    </div>

    <div class="form-group col-sm-6" element="div">
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Manager Teknis</label>
        <select value="{{$action != 'create' ? $data['pic_survey_nama'] : ''}}" {{$action == 'view' ? 'readonly disabled' : ''}} name="pic_survey_nama" id="pic_survey_nama" style="width: 100%" class="form-control select2-selection select2-selection--single"  tabindex="-1" aria-hidden="true" data-initialized="true">
        </select>
    </div>

    <div class="form-group col-md-3 required" element="div">
        <label>Telp</label>
        <input type="text" id="pic_survey_telp" name="pic_survey_telp" value="{{$action != 'create' ? $data['pic_survey_telp'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-md-3 required" element="div">
        <label>Email</label>
        <input type="text" id="pic_survey_email" name="pic_survey_email" value="{{$action != 'create' ? $data['pic_survey_email'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>
</div>
<div class="row"><div class="form-group col-md-12 required" element="div"><hr></div></div>
<div class="row">
    <div class="form-group col-md-6 required" element="div">
        <label>Objek Penilaian <span style="color:red">*</span></label>
        <input type="text" name="objek_penilaian" id="objek_penilaian" value="{{$action != 'create' ? $data['objek_penilaian'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control" required>
    </div>

    <div class="form-group col-md-6" element="div">
        <label>Objek Alamat <span style="color:red">*</span></label>
        <textarea name="objek_alamat" id="objek_alamat" {{$action == 'view' ? 'readonly' : ''}} class="form-control" required>{{$action != 'create' ? $data['objek_alamat'] : ''}}</textarea>
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Tujuan Penilaian</label>
        <input type="text" name="tujuan" id="tujuan" value="{{$action != 'create' ? $data['tujuan'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Dasar Nilai</label>
        <input type="text" name="dasar_nilai" id="dasar_nilai" value="{{$action != 'create' ? $data['dasar_nilai'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Pendekatan Penilaian</label>
        <select name="pendekatan" id="pendekatan" {{$action == 'view' ? 'disabled' : ''}} class="form-control">
            @foreach(\App\Registry::PENDEKATAN_PENILAIAN as $key => $value)
            <option value="{{ $key }}" {{$action != 'create' ? ($data['pendekatan'] == $key ? 'selected' : '') : ''}}>{{ $value }}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group col-sm-4" element="div">
        <label>Waktu Pengerjaan</label>
        <input type="text" name="waktu_pengerjaan" id="waktu_pengerjaan" value="{{$action != 'create' ? $data['waktu_pengerjaan'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">

    </div>
    <div class="form-group col-sm-2" element="div">
        <label>&ensp;</label><br>
        <select name="is_hari_kalender" id="is_hari_kalender" style="width: 100%" class="form-control select select-selection select-selection--single"  tabindex="-1" aria-hidden="true" {{$action == 'view' ? 'disabled' : ''}}>
            <option value="0" {{$action != 'create' ? ($data['is_hari_kalender'] == 0 OR $data['is_hari_kalender'] == null ? 'selected' : '') : ''}}>Hari Kerja</option>
            <option value="1" {{$action != 'create' ? ($data['is_hari_kalender'] == 1 ? 'selected' : '') : ''}}>Hari Kalender</option>
        </select>
{{--        <label>Hari Kerja</label>--}}
    </div>
    <div class="form-group col-sm-6" element="div">
        <label>Channel</label>
        <select value="{{$action != 'create' ? $data['channel'] : ''}}" {{$action == 'view' ? 'readonly disabled' : ''}} name="channel" id="channel" style="width: 100%" class="form-control select2-selection select2-selection--single"  tabindex="-1" aria-hidden="true" data-initialized="true">
        </select>
    </div>
    <div class="form-group col-sm-6" element="div">
        <label>Jenis Pekerjaan</label>
        <select value="{{$action != 'create' ? $data['jenis_pekerjaan'] : ''}}" {{$action == 'view' ? 'readonly disabled' : ''}} name="jenis_pekerjaan" id="jenis_pekerjaan" style="width: 100%" class="form-control select2-selection select2-selection--single"  tabindex="-1" aria-hidden="true" data-initialized="true">
        </select>
    </div>
</div>
<div class="row"><div class="form-group col-md-12 required" element="div"><hr></div></div>
<div class="row">
{{--    <input type="hidden" name="dok_teknis" id="dok_teknis" value="{{ $action != 'create' ? $data['documents'] != null ? (json_decode($data['documents']))->dok_teknis : json_encode([]) : json_encode([]) }}">--}}
{{--    <input type="hidden" name="dok_arsip" id="dok_arsip" value="{{ $action != 'create' ? $data['documents'] != null ? (json_decode($data['documents']))->dok_arsip : json_encode([]) : json_encode([]) }}">--}}
    <input type="hidden" name="dok_ttd" id="dok_ttd" value="{{ $action != 'create' ? $data['documents'] != null ? (json_decode($data['documents']))->dok_ttd : json_encode([]) : json_encode([]) }}">

    <div class="form-group col-md-12">
        <div class="card col-md-12">
            <div class="card-header">
                <div >
                    <label class="mb-0 text-primary">Dokumen Arsip</label>
                    @if($action != 'view')
                        <button type="button" class="btn btn-sm btn-link float-right inline-create-button" id="add_dokumen_arsip" data-bs-target="#modal_dok_arsip" data-bs-toggle="modal"><span class="la la-plus"></span>Tambah Dokumen Arsip</button>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <div class="form-group col-md-12">
                    <table class="bg-white table table-striped table-hover dataTable" id="table_dok_ttd" width="100%">
                        <thead>
                        <th>No</th>
                        <th>Nama</th>
                        <th>File</th>
                        <th>Aksi</th>
                        </thead>
                        <tbody>
                        @foreach($docs as $idx => $row)
                            <tr id="{{str_replace(' ','',$row->name)}}">
                                <td width="12px">{{$idx+1}}</td>
                                <td>{{$row->name}}</td>
                                <td>
                                    @if (isset($row->filename) && $row->filename != "")
{{--                                        <a href="{{url('tasks/download/dockontrak/'.$row->filename)}}">Download</a>--}}
                                        <a href="{{$row->filename}}" target="_blank">Download</a>
                                    @endif
                                    @if ($action == 'create' ? true : false)
                                        <input id="file_{{$idx}}" name="file_{{$idx}}" type="file" class="form-control file-upload hidden" {{ $idx === 0 ? 'required' : '' }} {{$action != 'create' ? 'disabled' : ''}}>
                                    @endif
                                    @if ($action == 'edit' ? true : false)
                                        <input id="file_{{$idx}}" name="file_{{$idx}}" type="file" class="form-control file-upload hidden" {{ isset($row->filename) ? $idx === 0 && $row->filename === "" ? 'required' : '' : ''}} {{$action != 'edit' ? 'disabled' : ''}}>
                                    @endif
{{--                                    @component('components.inputfile', ['name' => 'file_'.$idx, "value" => url('tasks/download/'. $row->name), 'label' => 'Upload File', 'disabled' => ($action == 'view'), 'required' => ($row->isrequired === true ? 'required' : '')])@endcomponent--}}
                                </td>
                                <td>@if(!$row->isrequired)
                                        @if ($action == 'create' ? true : false)
                                            <button type="button" {{$action != 'create' ? 'disabled' : ''}} class="btn btn-sm btn-danger" onclick="deleteDocs('dok_arsip','{{ $row->name }}')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>
                                        @endif
                                            @if ($action == 'edit' ? true : false)
                                            <button type="button" {{$action != 'edit' ? 'disabled' : ''}} class="btn btn-sm btn-danger" onclick="deleteDocs('dok_arsip','{{ $row->name }}')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>
                                        @endif
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
                            {{--<div class="row">--}}
{{--    <div class="form-group col-md-12">--}}
{{--        <div class="card col-md-12">--}}
{{--            <div class="card-header">--}}
{{--                <div >--}}
{{--                    <label class="mb-0 text-primary">Dokumen Arsip Penilaian (Wajib)</label>--}}
{{--                    @if($action != 'view')--}}
{{--                        <button type="button" class="btn btn-sm btn-link float-right inline-create-button" id="add_dokumen_arsip" data-target="#modal_dok_arsip" data-toggle="modal"><span class="la la-plus"></span>Tambah Dokumen Arsip Penilaian (Wajib)</button>--}}
{{--                    @endif--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="card-body">--}}
{{--                <div class="form-group col-md-12">--}}
{{--                    <table class="bg-white table table-striped table-hover dataTable" id="table_dok_arsip" style="width:100% !important;">--}}
{{--                        <thead>--}}
{{--                        <th>No</th>--}}
{{--                        <th>Nama</th>--}}
{{--                        <th>Aksi</th>--}}
{{--                        </thead>--}}
{{--                    </table>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}
{{--<div class="row">--}}
{{--    <div class="form-group col-md-12">--}}
{{--        <div class="card col-md-12">--}}
{{--            <div class="card-header">--}}
{{--                <div >--}}
{{--                    <label class="mb-0 text-primary">Dokumen Data Teknis Penilaian</label>--}}
{{--                    @if($action != 'view')--}}
{{--                        <button type="button" class="btn btn-sm btn-link float-right inline-create-button"  id="add_dokumen_teknis" data-target="#modal_dok_teknis" data-toggle="modal"><span class="la la-plus"></span>Tambah Dokumen Data Teknis Penilaian</button>--}}
{{--                    @endif--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="card-body">--}}
{{--                <div class="form-group col-md-12">--}}
{{--                    <table class="bg-white table table-striped table-hover dataTable" id="table_dok_teknis" style="width:100% !important;">--}}
{{--                        <thead>--}}
{{--                        <th>No</th>--}}
{{--                        <th>Nama</th>--}}
{{--                        <th>Aksi</th>--}}
{{--                        </thead>--}}
{{--                    </table>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}

@section('modals')
@if($action != 'view')
<div class="modal" aria-modal="true" role="dialog" id="modal_dok_arsip">
    <form>
        @csrf
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Tambah Dokumen Arsip</h4>
                    <button type="button" class="btn btn-default" aria-label="Close" data-bs-dismiss="modal"><span aria-hidden="true">X</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>Nama</label>
                                <input type="text" name="nama" id="nama_dok_arsip" value="" class="form-control" required>
                                <input type="hidden" name="nama" id="category" value="Dokumen Bertandatangan" class="form-control">
                                <input type="hidden" name="nama" id="isrequired" value="false" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="addDocs('dok_arsip')">
                        <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-bs-dismiss="modal"><span class="la la-ban"></span> Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal"  aria-modal="true" role="dialog" id="modal_dok_teknis">
    <form>
        @csrf
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Tambah Dokumen Data Teknis Penilaian</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">
                            <!-- text input -->
                            <div class="form-group col-sm-12" element="div">
                                <label>Nama</label>
                                <input type="text" name="nama" id="nama_dok_teknis" value="" class="form-control" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="addDocs('dok_teknis')">
                        <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>
@endif
@endsection

@section('after_scripts')
    @include('tasks.js')

    <link href="{{asset('packages/select2/dist/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('packages/select2-bootstrap-theme/dist/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
    <script src="{{asset('packages/select2/dist/js/select2.min.js')}}" type="text/javascript"></script>

    <script>
        var arr_dok_ttd = {!! $action != 'create' ? $data['documents'] != null ? (json_decode($data['documents']))->dok_ttd : json_encode($docs) : json_encode($docs) !!} ;
        {{--var table_dok_ttd = $('#table_dok_ttd').DataTable({--}}
        {{--    "ordering": false,--}}
        {{--    "info": false,--}}
        {{--    "paging": false,--}}
        {{--    "searching": false,--}}
        {{--    "bAutoWidth" : false,--}}
        {{--    data: arr_dok_ttd,--}}
        {{--    columns: [--}}
        {{--        {--}}
        {{--            "data": null,--}}
        {{--            "width" : "12px",--}}
        {{--            "searchable": false,--}}
        {{--            "orderable": false,--}}
        {{--            render: function (data, type, full, meta) {--}}
        {{--                return +meta.row + 1;--}}
        {{--            }--}}
        {{--        },--}}
        {{--        {--}}
        {{--            "data": "name",--}}
        {{--        },--}}
        {{--        {--}}
        {{--            "data": null,--}}
        {{--            "searchable": false,--}}
        {{--            "orderable": false,--}}
        {{--            "render": function (data, type, full, meta){--}}
        {{--                var isrequired = full.isrequired;--}}
        {{--                if(isrequired === true) return `<div class="input-group"><span class="input-group-btn"><span class="btn btn-primary file-upload"> Browse&hellip; <input id="dat" type="file" name="file" target="`+full.name+`" required"/></span></span> <input id="`+full.name+`" type="text" class="form-control" readonly="readonly"></div>`--}}
        {{--                else return `<span class="input-group-btn"><span class="btn btn-primary file-upload"> Browse&hellip; <input id="dat" type="file" name="file"/></span></span>`--}}
        {{--            }--}}
        {{--        },--}}
        {{--        {--}}
        {{--            "data": null,--}}
        {{--            "searchable": false,--}}
        {{--            "orderable": false,--}}
        {{--            "render": function (data, type, full, meta){--}}
        {{--                var btndelete = '-';--}}
        {{--                var isrequired = full.isrequired;--}}
        {{--                if(!isrequired){--}}
        {{--                    @if ($action == 'create' ? true : false)--}}
        {{--                        btndelete = `<button type="button" ` + "{{$action != 'create' ? 'disabled' : ''}}" + ` class="btn btn-sm btn-danger" onclick="deleteDocs('dok_arsip','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;--}}
        {{--                    @endif--}}
        {{--                        @if ($action == 'edit' ? true : false)--}}
        {{--                        btndelete = `<button type="button" ` + "{{$action != 'edit' ? 'disabled' : ''}}" + ` class="btn btn-sm btn-danger" onclick="deleteDocs('dok_arsip','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;--}}
        {{--                    @endif--}}
        {{--                }--}}
        {{--                return btndelete;--}}
        {{--            }--}}
        {{--        },--}}
        {{--    ],--}}
        {{--    processing: true,--}}
        {{--    serverSide: false,--}}
        {{--    order: [[1, 'desc']],--}}
        {{--});--}}
        // $('#table_dok_ttd').on('change', 'input[name="file"]', function(event) {
        //     var input = $(this),
        //         label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        //     var fileTarget = $(this).attr('target');
        //     document.getElementById(fileTarget).value = label;
        //     var inputElement = document.querySelector("input[type='file']");
        //     var filesdok = [];
        //     for (i = arr_dok_ttd.length - 1; i >= 0; --i) {
        //         if (arr_dok_ttd[i].name === fileTarget) {
        //             arr_dok_ttd[i].file = label;
        //         }else{
        //             arr_dok_ttd[i].file = "";
        //         }
        //         filesdok[i] = inputElement.files[0];
        //         arr_dok_ttd[i].inputfile = inputElement.files[0];
        //     }
        //     $('#files').val(filesdok);
        //     $('#dok_ttd').val(JSON.stringify(arr_dok_ttd));
        // });

        $(document).ready(function () {
            @if ($action != 'create' ? true : false)
                let clientId = {{ $action != 'create' ? $data['client_id'] : 0 }};
                //$("#client_id").select2("val", client_id);

            @endif
            arr_dok_ttd = {!! json_encode($docs) !!};
            $('#dok_ttd').val(JSON.stringify(arr_dok_ttd));
        });
        function toggleModal(id){
            $('#modal_'+id).modal('toggle');
            //$('.modal-backdrop').remove();
        }

        // region kontrak
        $('#client_id').select2({
            delay: 250,
            closeOnSelect: true,
            placeholder: "Pilih Pemberi Tugas",
            width: "100%",
            // minimumInputLength: 3,
            ajax: {
                url: '{!! url('api/master/clients/list') !!}',
                type: 'GET',
                data: function (params) {
                    return {
                        _token: '{{ csrf_token() }}',
                        key: params.term,
                    };
                },
                processResults: function(data) {
                    var result = [];
                    data.forEach(function (value) {
                        result.push({id: value.id, text: value.nama, attrdata: value})
                    });
                    return {results: result};
                }
            }
        }).on('select2:select', function (e) {
            let data = e.params.data.attrdata;
            $("#client_alamat").val(data.alamat);
            $("#cp_telp").val(data.cp_telp);
            $("#cp_nama").val(data.cp_nama);
            $("#cp_email").val(data.cp_email);
            //$("#nilai_kontrak").val(data.nilai_kontrak);

        });
        @if ($action != 'create' ? true : false)
            $.ajax({
                type: 'GET',
                url: '{{ url('api/client/') }}/' + {{ $action != 'create' ? $data['client_id'] : 0 }}
            }).then(function (data) {
                // create the option and append to Select2
                var option = new Option(data.nama, data.id, true, true);
                $('#client_id').append(option).trigger('change');

                // manually trigger the `select2:select` event
                $('#client_id').trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });

        $.ajax({
            type: 'GET',
            url: '{{ url('api/user/find') }}/' + '{{ $action != 'create' ? ($data['pic_survey_nama'] ?? '0') : '0' }}'
        }).then(function (data) {
            // create the option and append to Select2
            var option = new Option(data.name, data.id, true, true);
            $('#pic_survey_nama').append(option).trigger('change');

            // manually trigger the `select2:select` event
            $('#pic_survey_nama').trigger({
                type: 'select2:select',
                params: {
                    data: data
                }
            });
        });

        $.ajax({
            type: 'GET',
            url: '{{ url('api/user/find') }}/' + '{{ $action != 'create' ? ($data['marketing_nama'] ?? '0') : '0' }}'
        }).then(function (data) {
            // create the option and append to Select2
            var option = new Option(data.name, data.id, true, true);
            $('#marketing_nama').append(option).trigger('change');

            // manually trigger the `select2:select` event
            $('#marketing_nama').trigger({
                type: 'select2:select',
                params: {
                    data: data
                }
            });
        });

        $.ajax({
            type: 'GET',
            url: '{{ url('api/find/channel') }}/' + '{{ $action != 'create' ? ($data['channel'] ?? '0') : '0' }}'
        }).then(function (data) {

            // create the option and append to Select2
            var option = new Option(data.channel, data.id, true, true);
            $('#channel').append(option).trigger('change');

            // manually trigger the `select2:select` event
            $('#channel').trigger({
                type: 'select2:select',
                params: {
                    data: data
                }
            });
        });

        $.ajax({
            type: 'GET',
            url: '{{ url('api/find/jenis_pekerjaan') }}/' + '{{ $action != 'create' ? ($data['jenis_pekerjaan'] ?? '0') : '0' }}'
        }).then(function (data) {

            // create the option and append to Select2
            var option = new Option(data.jenis, data.id, true, true);
            $('#jenis_pekerjaan').append(option).trigger('change');

            // manually trigger the `select2:select` event
            $('#jenis_pekerjaan').trigger({
                type: 'select2:select',
                params: {
                    data: data
                }
            });
        });

        @endif

        $('#marketing_nama').select2({
            delay: 250,
            closeOnSelect: true,
            placeholder: "Pilih Customer Relation",
            width: "100%",
            // minimumInputLength: 3,
            ajax: {
                url: '{!! url('api/user/list/byrole') !!}/6',
                type: 'GET',
                data: function (params) {
                    return {
                        _token: '{{ csrf_token() }}',
                        key: params.term,
                    };
                },
                processResults: function(data) {
                    var result = [];
                    data.forEach(function (value) {
                        result.push({id: value.user_id, text: value.name})
                    });
                    return {results: result};
                }
            }
        });

        $('#channel').select2({
            delay: 250,
            closeOnSelect: true,
            placeholder: "Pilih Channel",
            width: "100%",
            // minimumInputLength: 3,
            ajax: {
                url: '{!! url('api/list/channel') !!}',
                type: 'GET',
                data: function (params) {
                    return {
                        _token: '{{ csrf_token() }}',
                        key: params.term,
                    };
                },
                processResults: function(data) {
                    var result = [];
                    data.forEach(function (value) {
                        result.push({id: value.id, text: value.channel})
                    });
                    return {results: result};
                }
            }
        });

        $('#jenis_pekerjaan').select2({
            delay: 250,
            closeOnSelect: true,
            placeholder: "Pilih Jenis Pekerjaan",
            width: "100%",
            // minimumInputLength: 3,
            ajax: {
                url: '{!! url('api/list/jenis_pekerjaan') !!}',
                type: 'GET',
                data: function (params) {
                    return {
                        _token: '{{ csrf_token() }}',
                        key: params.term,
                    };
                },
                processResults: function(data) {
                    var result = [];
                    data.forEach(function (value) {
                        result.push({id: value.id, text: value.jenis})
                    });
                    return {results: result};
                }
            }
        });

        $('#pic_survey_nama').select2({
            delay: 250,
            closeOnSelect: true,
            placeholder: "Pilih Manager Teknis",
            width: "100%",
            // minimumInputLength: 3,
            ajax: {
                url: '{!! url('api/user/list/byrole') !!}/10',
                type: 'GET',
                data: function (params) {
                    return {
                        _token: '{{ csrf_token() }}',
                        key: params.term,
                    };
                },
                processResults: function(data) {
                    var result = [];
                    data.forEach(function (value) {
                        result.push({id: value.user_id, text: value.name, attrdata: value})
                    });
                    return {results: result};
                }
            }
        }).on('select2:select', function (e) {
            let data = e.params.data.attrdata;
            $("#pic_survey_telp").val(data.phone);
            $("#pic_survey_email").val(data.email);

        });
        // endregion kontrak

        // region dokumen
        {{--var arr_dok_teknis = {!! $action != 'create' ? $data['documents'] != null ? (json_decode($data['documents']))->dok_teknis : json_encode([]) : json_encode([]) !!} ;--}}
        {{--var table_dok_teknis = $('#table_dok_teknis').DataTable({--}}
        {{--    "ordering": false,--}}
        {{--    "info": false,--}}
        {{--    "paging": false,--}}
        {{--    "searching": false,--}}
        {{--    //"bLengthChange": false,--}}
        {{--    "bAutoWidth" : false,--}}
        {{--    data: arr_dok_teknis,--}}
        {{--    columns: [--}}
        {{--        {--}}
        {{--            "data": null,--}}
        {{--            "width" : "12px",--}}
        {{--            "searchable": false,--}}
        {{--            "orderable": false,--}}
        {{--            render: function (data, type, full, meta) {--}}
        {{--                return +meta.row + 1;--}}
        {{--            }--}}
        {{--        },--}}
        {{--        {--}}
        {{--            "data": "name",--}}
        {{--        },--}}
        {{--        {--}}
        {{--            "data": null,--}}
        {{--            "searchable": false,--}}
        {{--            "orderable": false,--}}
        {{--            "render": function (data, type, full, meta){--}}
        {{--                var btndelete = '-';--}}
        {{--                @if ($action == 'create' ? true : false)--}}
        {{--                    btndelete = `<button type="button"  ` + "{{$action != 'create' ? 'disabled' : ''}}" + `  class="btn btn-sm btn-danger" onclick="deleteDocs('dok_teknis','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;--}}
        {{--                @endif--}}
        {{--                @if ($action == 'edit' ? true : false)--}}
        {{--                    btndelete = `<button type="button" ` + "{{$action != 'edit' ? 'disabled' : ''}}" + ` class="btn btn-sm btn-danger" onclick="deleteDocs('dok_teknis','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;--}}
        {{--                @endif--}}

        {{--                return btndelete;--}}
        {{--            }--}}
        {{--        },--}}
        {{--    ],--}}
        {{--    processing: true,--}}
        {{--    serverSide: false,--}}
        {{--    order: [[1, 'desc']],--}}
        {{--});--}}

        {{--var arr_dok_arsip = {!! $action != 'create' ? $data['documents'] != null ? (json_decode($data['documents']))->dok_arsip : json_encode([]) : json_encode([]) !!} ;--}}
        {{--var table_dok_arsip = $('#table_dok_arsip').DataTable({--}}
        {{--    "ordering": false,--}}
        {{--    "info": false,--}}
        {{--    "paging": false,--}}
        {{--    "searching": false,--}}
        {{--    "bAutoWidth" : false,--}}
        {{--    data: arr_dok_arsip,--}}
        {{--    columns: [--}}
        {{--        {--}}
        {{--            "data": null,--}}
        {{--            "width" : "12px",--}}
        {{--            "searchable": false,--}}
        {{--            "orderable": false,--}}
        {{--            render: function (data, type, full, meta) {--}}
        {{--                return +meta.row + 1;--}}
        {{--            }--}}
        {{--        },--}}
        {{--        {--}}
        {{--            "data": "name",--}}
        {{--        },--}}
        {{--        {--}}
        {{--            "data": null,--}}
        {{--            "searchable": false,--}}
        {{--            "orderable": false,--}}
        {{--            "render": function (data, type, full, meta){--}}
        {{--                var btndelete = '-';--}}
        {{--                @if ($action == 'create' ? true : false)--}}
        {{--                    btndelete = `<button type="button" ` + "{{$action != 'create' ? 'disabled' : ''}}" + ` class="btn btn-sm btn-danger" onclick="deleteDocs('dok_arsip','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;--}}
        {{--                @endif--}}
        {{--                @if ($action == 'edit' ? true : false)--}}
        {{--                    btndelete = `<button type="button" ` + "{{$action != 'edit' ? 'disabled' : ''}}" + ` class="btn btn-sm btn-danger" onclick="deleteDocs('dok_arsip','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;--}}
        {{--                @endif--}}
        {{--                return btndelete;--}}
        {{--            }--}}
        {{--        },--}}
        {{--    ],--}}
        {{--    processing: true,--}}
        {{--    serverSide: false,--}}
        {{--    order: [[1, 'desc']],--}}
        {{--});--}}

        /*
        // region dokumen
        var table_dokumen_teknis = $('#table_dokumen_teknis').DataTable({
            "ordering": false,
            "info": false,
            "paging": false,
            "searching": false,
            "bLengthChange": false,
            bAutoWidth: false,
            data: arr_dok_teknis,
            columns: [
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
            ],
            processing: true,
            serverSide: false,
            order: [[1, 'desc']],
        });

        var table_dokumen_arsip = $('#table_dokumen_arsip').DataTable({
            "ordering": false,
            "info": false,
            "paging": false,
            "searching": false,
            "bLengthChange": false,
            data: arr_dok_arsip,
            columns: [
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
            ],
            processing: true,
            serverSide: false,
            order: [[1, 'desc']],
        });
        // endregion dokumen
        */

        function addDocs(modal){
            var obj = {};
            switch (modal){
                case 'dok_teknis':
                    obj.name = $('#nama_dok_teknis').val();
                    arr_dok_teknis.push(obj);
                    table_dok_teknis.clear().draw();
                    table_dok_teknis.rows.add(arr_dok_teknis); // Add new data
                    table_dok_teknis.columns.adjust().draw(); // Redraw the DataTable
                    $('#dok_teknis').val(JSON.stringify(arr_dok_teknis));
                    $('#nama_dok_teknis').val('');
                    break;
                case 'dok_arsip':
                    obj.name = $('#nama_dok_arsip').val();
                    obj.category = $('#category').val();
                    obj.isrequired = $('#isrequired').val();
                    var rowidx = $('#table_dok_ttd tr:last')[0].rowIndex + 1;
                    arr_dok_ttd.push(obj);
                    $('#dok_ttd').val(JSON.stringify(arr_dok_ttd));
                    $('#nama_dok_ttd').val('');
                    var markup = "<tr id='"+($('#nama_dok_arsip').val()).split(' ').join('')+"'>" +
                        "<td>" + Number(rowidx) + "</td>" +
                        "<td>" +$('#nama_dok_arsip').val()+"</td>" +
{{--                        "<td>" + `@component('components.inputfile', ['name' => 'file_', "value" => url('tasks/download/'), 'label' => 'Upload File', 'disabled' => ($action == 'view')])@endcomponent` + "</td>" +--}}
                        "<td>" + `<input id="file_`+Number(rowidx-1)+`" name="file_`+Number(rowidx-1)+`" type="file" class="form-control  file-upload hidden">` +
                        "<td>" + `<button type="button" class="btn btn-sm btn-danger" onclick="deleteDocs('dok_arsip','`+$('#nama_dok_arsip').val()+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>` + "</td>" +
                        "</tr>";

                    $("#table_dok_ttd tbody").append(markup);
                    // arr_dok_arsip.push(obj);
                    // table_dok_arsip.clear().draw();
                    // table_dok_arsip.rows.add(arr_dok_arsip); // Add new data
                    // table_dok_arsip.columns.adjust().draw(); // Redraw the DataTable
                    // $('#dok_arsip').val(JSON.stringify(arr_dok_arsip));
                    $('#nama_dok_arsip').val('');
                    break;
            }
            toggleModal(modal.toLowerCase());
        }

        function deleteDocs(modal,name){
            var i = 0;
            switch (modal){
                case 'dok_teknis':
                    for (i = arr_dok_teknis.length - 1; i >= 0; --i) {
                        if (arr_dok_teknis[i].name === name) {
                            arr_dok_teknis.splice(i,1);
                            table_dok_teknis.clear().draw();
                            table_dok_teknis.rows.add(arr_dok_teknis); // Add new data
                            table_dok_teknis.columns.adjust().draw(); // Redraw the DataTable
                        }
                    }
                    $('#dok_teknis').val(JSON.stringify(arr_dok_teknis));
                    break;
                case 'dok_arsip':
                    for (i = arr_dok_ttd.length - 1; i >= 0; --i) {
                        if (arr_dok_ttd[i].name === name) {
                            arr_dok_ttd.splice(i,1);
                            // table_dok_ttd.clear().draw();
                            // table_dok_ttd.rows.add(arr_dok_ttd); // Add new data
                            // table_dok_ttd.columns.adjust().draw(); // Redraw the DataTable
                            var nameID = name.split(' ').join('');
                            $('#table_dok_ttd #' + nameID).remove();
                        }
                    }
                    $('#dok_ttd').val(JSON.stringify(arr_dok_ttd));
                    break;
            }
        }
        // endregion dokumen

        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 "";
            }
        }
    </script>
@endsection