@php
    if(!isset($action)) $action = 'create'; //create/update/view
@endphp
<div class="row">
    <div class="form-group col-md-12">
        <div class="card col-md-12">
            <div class="card-header">Detail Rencana</div>
            <div class="card-body">
                @if($action != 'view')
                    <div class="form-group col-md-12">
                        <button type="button" class="btn btn-primary" id="add_rkp"  data-bs-target="#modal_rk_survey" data-bs-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_rk_survey" style="width: 100%">
                        <thead>
                        <th>No</th>
                        <th>Tanggal Awal</th>
                        <th>Tanggal Akhir</th>
                        <th>Keterangan</th>
                        <th>Aksi</th>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="rk_survey" id="rk_survey">

@push('modals')
    @if($action != 'view')
        <div class="modal" aria-modal="true" role="dialog" id="modal_rk_survey">
            <form>
                @csrf
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Tambah Rencana Kerja 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">
                                    <!-- text input -->
                                    <div class="form-group col-sm-12" element="div">
                                        <label>Keterangan</label>
                                        <textarea type="text" name="nama" id="nama_rk_survey" value="" class="form-control"></textarea>
                                    </div>
                                    <!-- text input -->
                                    <div class="form-group col-sm-12" element="div">
                                        <label>Tanggal Awal</label>
                                        <input type="date" name="tglawal_rk_survey" id="tglawal_rk_survey" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="yyyy-mm-dd" class="form-control">
                                    </div>
                                    <div class="form-group col-sm-12" element="div">
                                        <label>Tanggal Akhir</label>
                                        <input type="date" name="tglakhir_rk_survey" id="tglakhir_rk_survey" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="yyyy-mm-dd" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" onclick="addRkSurvey('rk_survey')">
                                <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
@endpush

@push('after_scripts')
    <script>
        // region rencana kerja proyek
        var arr_rk_survey = {!! $action != 'create' ? $data['rk_survey'] != null ? ($data['rk_survey']) : json_encode([]) : json_encode([]) !!} ;
        var table_rk_survey = $('#table_rk_survey').DataTable({
            "ordering": false,
            "info": false,
            "paging": false,
            "searching": false,
            "bLengthChange": false,
            data: arr_rk_survey,
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "dateawal",
                    "render": function (data){
                        return dateFormat(data);
                    }
                },
                {
                    "data": "dateakhir",
                    "render": function (data){
                        return dateFormat(data);
                    }
                },
                {
                    "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" class="btn btn-sm btn-danger" onclick="deleteRkSurvey('`+full.name+full.dateawal+full.dateakhir+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;
                        @endif
                        return btndelete;
                    }
                },
            ],
            processing: true,
            serverSide: false,
            order: [[1, 'desc']],
        });

        function addRkSurvey(modal){
            var obj = {};
            obj.name = $('#nama_rk_survey').val();
            obj.dateawal = $('#tglawal_rk_survey').val();
            obj.dateakhir = $('#tglakhir_rk_survey').val();
            arr_rk_survey.push(obj);
            table_rk_survey.clear().draw();
            table_rk_survey.rows.add(arr_rk_survey); // Add new data
            table_rk_survey.columns.adjust().draw(); // Redraw the DataTable
            $('#rk_survey').val(JSON.stringify(arr_rk_survey));
            $('#nama_rk_survey').val('');
            $('#tglawal_rk_survey').val('');
            $('#tglakhir_rk_survey').val('');
            toggleModal(modal.toLowerCase());
        }

        function deleteRkSurvey(name){
            var i = 0;
            let varname = '';
            for (i = arr_rk_survey.length - 1; i >= 0; --i) {
                varname = arr_rk_survey[i].name+arr_rk_survey[i].dateawal+arr_rk_survey[i].dateakhir;
                if (varname === name) {
                    arr_rk_survey.splice(i,1);
                    table_rk_survey.clear().draw();
                    table_rk_survey.rows.add(arr_rk_survey); // Add new data
                    table_rk_survey.columns.adjust().draw(); // Redraw the DataTable
                }
            }
        }
        // endregion rencana kerja proyek
    </script>
@endpush