@extends('template')
@section('title', 'Edit Menu Pengawasan')
@section('content')
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <div class="page-title">
                                <h4 class="mb-0 font-size-18">Data Monitoring</h4>

                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Menu Pengawasan</a></li>
                                    <li class="breadcrumb-item"><a href="/data-monitoring">Data Monitoring</a></li>
                                    <li class="breadcrumb-item active">Ubah</li>
                                </ol>
                            </div>


                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <!-- Start Page-content-Wrapper -->
                <div class="page-content-wrapper">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between ">
                                        <h4 class="card-title">Ubah Data Monitoring</h4>
                                        {{-- <button style="margin-top:0!important;" class="btn btn-purple text-white m-3"><i
                                                class="mdi mdi-plus"></i>Tambahkan
                                            Data</button> --}}
                                    </div>
                                    <form action="{{ route('data-monitoring.update', $DataMonitoring->id) }}"
                                        enctype="multipart/form-data" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item">
                                                <a class="nav-link active" aria-current="page" href="#detail">Detail</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#rencana">Form Rencana Pelaksanaan</a>
                                            </li>
                                            {{-- <li class="nav-item">
                                                <a class="nav-link" href="#infoP">Info Penilaian</a>
                                            </li> --}}
                                        </ul>
                                        <br>
                                        <div class="tab-content">
                                            <div id="detail" class="tab-pane active">
                                                @include('menu_pengawasan.data_monitoring.form.edit.main')
                                            </div>
                                            <div id="rencana" class="tab-pane fade">
                                                @include('menu_pengawasan.data_monitoring.form.edit.rencana')
                                            </div>
                                            {{-- <div id="cctv" class="tab-pane fade">
                                                @include('menu_pengawasan.data_monitoring.form.edit.cctv')
                                            </div> --}}
                                            {{-- <div id="infoP" class="tab-pane fade">
                                                @include('menu_pengawasan.data_monitoring.form.edit.infoP')
                                              </div> --}}
                                        </div>
                                        <hr>
                                        <button type="submit" class="btn btn-success">SIMPAN</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->

                </div>
                <!-- End Page-content -->

            </div>
            <!-- Container-Fluid -->
        </div>
        <!-- End Page-content-wrapper -->
    </div>
    <script>
        @section('jqeury')
            var getMonths = function(startDate, endDate) {
                var resultList = [];
                var date = new Date(startDate);
                var endDate = new Date(endDate);
                var monthNameList = ["January", "February", "March", "April", "May", "June", "July", "August",
                    "September", "October", "November",
                    "December"
                ];

                while (date <= endDate) {
                    var stringDate = monthNameList[date.getMonth()] + " " + date.getFullYear();

                    //get first and last day of month
                    var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
                    var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

                    resultList.push({
                        month: monthNameList[date.getMonth()],
                        year: date.getFullYear(),
                        str: stringDate,
                        first: firstDay,
                        last: lastDay,
                    });
                    date.setMonth(date.getMonth() + 1);
                }

                return resultList;
            };

            $('#rencana_b').click(function() {
                if ($('#tgl_pelaksanaan').val() != $('#tgl_pelaksanaan_same').val() || $(
                        '#sampai_tgl_pelaksanaan').val() !=
                    $(
                        '#sampai_tgl_pelaksanaan_same').val()) {
                    $('.rencana_plan').html("");
                    var mos = getMonths($('#tgl_pelaksanaan').val(), $('#sampai_tgl_pelaksanaan').val());
                    console.log(mos);
                    for (var m in mos) {
                        var field = `<div class="form-group">
                                    <label for=""> Rencana Perbulan (%)  | ` + mos[m].month +
                            ` | ` + mos[m].year + ` </label>
                                    <input type="text" class="form-control" name="rencana_p[]" value="0" placeholder="Rencana Perbulan (%)" id="rencana_b"></input>
                                    <input type="hidden" value="` + mos[m].month + `" class="form-control" name="rencana_m[]" placeholder="Rencana Perbulan (%)" id="rencana_b"></input>
                                    <input type="hidden" value="` + mos[m].year + `" class="form-control" name="rencana_y[]" placeholder="Rencana Perbulan (%)" id="rencana_b"></input>
                                </div><br>`;
                        $('.rencana_plan').append(field);
                        // $('#divMonths').append('<a href="/?start=' + mos[m].first.toISOString() + '&end=' + mos[m].last
                        //     .toISOString() + '">' + mos[m].str + '</a><br>');
                    }
                }

            });

            $('#program_id').select2();
            $('#kegiatan_id').select2();
            $('#sub_kegiatan_id').select2();
            $('#penyedia_jasa_id').select2();
            $('#ppkom_ppk').select2();
            $('#pekerjaan_id').select2();
            $('#pptk').select2();
            $('#check').hide();
            $('#edits').hide();

            $(".nav-tabs a").click(function() {
                $(this).tab('show');
            });

            function kegiatan(id) {
                $('#kegiatan_id').empty();
                $('#kegiatan_id').append($('<option>', {
                    value: "",
                    text: "Mohon Ditunggu"
                }));
                $('#sub_kegiatan_id').empty();
                $('#sub_kegiatan_id').append($('<option>', {
                    value: "",
                    text: "Pilih Kegiatan dulu"
                }));
                $('#pekerjaan_id').empty();
                $('#pekerjaan_id').append($('<option>', {
                    value: "",
                    text: "Pilih Sub Kegiatan dulu"
                }));
                var status = "";
                $.ajax({
                    url: '/program/' + id + '/edit',
                    type: "GET",
                    dataType: 'json',
                    success: function(data) {
                        $('#kegiatan_id').empty();
                        $('#kegiatan_id').append($('<option>', {
                            value: "",
                            text: "Pilih Kegiatan"
                        }));
                        $.each(data.kegiatan, function(key, value) {
                            $('#kegiatan_id').append($('<option>', {
                                value: value.proker_kegiatan_id,
                                text: value.nama_program
                            }));
                        });

                        @if (old('kegiatan_id'))
                            $("#kegiatan_id").val("{{ old('kegiatan_id') }}").change();
                        @endif
                    },
                    error: function(error) {
                        $('#kegiatan_id').empty();
                        $('#kegiatan_id').append($('<option>', {
                            value: "",
                            text: "Terjadi Kesahalan!"
                        }));
                    }
                });
            }

            $('#program_id').change(function() {
                var id = $(this).val();
                $('#nilai_kontrak').val(0);
                kegiatan(id);
            });

            function sub_kegiatan(id) {
                $('#sub_kegiatan_id').empty();
                $('#sub_kegiatan_id').append($('<option>', {
                    value: "",
                    text: "Mohon Ditunggu"
                }));
                $('#pekerjaan_id').empty();
                $('#pekerjaan_id').append($('<option>', {
                    value: "",
                    text: "Pilih Sub Kegiatan dulu"
                }));
                $.ajax({
                    url: '/program/' + id,
                    type: "GET",
                    dataType: 'json',
                    success: function(data) {
                        $('#sub_kegiatan_id').empty();
                        $('#sub_kegiatan_id').append($('<option>', {
                            value: "",
                            text: "Pilih Sub Kegiatan"
                        }));
                        $.each(data.sub, function(key, value) {
                            $('#sub_kegiatan_id').append($('<option>', {
                                value: value.proker_sub_kegiatan_id,
                                text: value.nama_program
                            }));
                        });

                        @if (old('sub_kegiatan_id'))
                            $("#sub_kegiatan_id").val("{{ old('sub_kegiatan_id') }}").change();
                        @endif
                    },
                    error: function(error) {
                        $('#sub_kegiatan_id').empty();
                        $('#sub_kegiatan_id').append($('<option>', {
                            value: "",
                            text: "Terjadi Kesahalan!"
                        }));
                    }
                });
            }

            $(document).on('change', '#kegiatan_id', function() {
                var id = $(this).val();
                $('#nilai_kontrak').val(0);
                sub_kegiatan(id);
            });

            function pekerjaan(id) {
                $('#pekerjaan_id').empty();
                $('#pekerjaan_id').append($('<option>', {
                    value: "",
                    text: "Mohon Ditunggu"
                }));
                $.ajax({
                    url: '/program/rincian/' + id,
                    type: "GET",
                    dataType: 'json',
                    success: function(data) {
                        $('#pekerjaan_id').empty();
                        $('#pekerjaan_id').append($('<option>', {
                            value: "",
                            text: "Pilih Pekerjaan"
                        }));
                        $.each(data.pekerjaan, function(key, value) {
                            // $('#pekerjaan_id').append($('<option>', {
                            //     value: value.proker_rincian_kegiatan_id,
                            //     text: value.uraian
                            // }));

                            $('#pekerjaan_id').append($('<option nilai="' + value.nilai_kontrak +
                                '" value="' + value
                                .proker_rincian_kegiatan_id + '">' + value.uraian + '</option>'
                            ));
                        });

                        @if (old('pekerjaan_id'))
                            $("#pekerjaan_id").val("{{ old('pekerjaan_id') }}").change();
                        @endif
                    },
                    error: function(error) {
                        $('#pekerjaan_id').empty();
                        $('#pekerjaan_id').append($('<option>', {
                            value: "",
                            text: "Terjadi Kesahalan!"
                        }));
                    }
                });
            }

            $(document).on('change', '#sub_kegiatan_id', function() {
                var id = $(this).val();
                $('#nilai_kontrak').val(0);
                pekerjaan(id);
            });

            $(document).on('change', '#pekerjaan_id', function() {
                $('#nama_pekerjaan').val($("#pekerjaan_id option:selected").text());
                $('#nilai_kontrak').val($("#pekerjaan_id option:selected").attr('nilai'));
            });

            @if (old('program_id'))
                kegiatan({{ old('program_id') }});
            @endif

            //$("#program_id").val("166").change();
            //$('.id_100 option[value=166]').attr('selected','selected');

            // Tenaga Ahli
            function table() {
                var iteration = 0;
                $.ajax({
                    url: '/tenaga-ahli/create?id={{ $DataMonitoring->id }}',
                    type: "GET",
                    dataType: 'json',
                    success: function(data) {
                        $("#tenaga_ahli_data").html("");
                        $.each(data.tenaga_ahli, function(key, value) {
                            iteration = iteration + 1;
                            $("#tenaga_ahli_data").append(
                                `<tr>
                                    <td>` + iteration + `</td>
                                    <td>` + value.nama + `</td>
                                    <td>` + value.alamat +
                                `</td>
                                    <td>
                                        <button type="button" status="false" href="#" class="btn btn-dark dokumen" id="` +
                                value.id + `">Dokumen</button>
                                        <button type="button" value="` + value.id + `" data-bs-toggle="modal" data-bs-target="#exampleModal" id="Edit_Tenaga_Kerja" class="btn btn-primary edit">EDIT</button>
                                        <button type="button" value="` + value.id + `" id="Delete_Tenaga_Kerja" class="btn btn-danger hapus">HAPUS</button>
                                    </td>
                                </tr>`
                            );
                            $("#tenaga_ahli_data").append(
                                `<tr class="dokumen_` + value.id + `">
                                        <td></td>
                                        <td> Ijasah</td>
                                        <td></td>
                                        <td><a href="` + value.ijasah + `" target="_blank" class="btn btn-success">Buka</a></td>
                                </tr>`
                            );
                            var total = value.sertifikat.length;
                            // console.log(total);
                            var urutan = 0;
                            $.each(value.sertifikat, function(key, sertifikat) {
                                if (total == 1) {
                                    urutan = "";
                                } else {
                                    urutan = urutan + 1;
                                }
                                $("#tenaga_ahli_data").append(
                                    `<tr class="dokumen_` + sertifikat
                                    .tenaga_ahli_id + `">
                                        <td></td>
                                        <td> Sertifikat ` + urutan + `</td>
                                        <td></td>
                                        <td><a href="` + sertifikat.file + `" target="_blank" class="btn btn-success">Buka</a></td>
                                    </tr>`
                                );
                            });

                            $('.dokumen_' + value.id).hide();
                        });
                    }
                });
            }

            $(document).on('click', '.dokumen', function() {
                if ($(this).attr('status') == "false") {
                    $('.dokumen_' + $(this).attr('id')).show();
                    $(this).attr('status', 'true');
                } else {
                    $('.dokumen_' + $(this).attr('id')).hide();
                    $(this).attr('status', 'false');
                }

            });

            table();

            $('#create_tenaga_ahli').click(function() {
                $('#check').hide();
                $('#edits').hide();
                $('#tambahs').show();
                $('#nama').val("");
                $('#alamat').val("");
                $('#ijasah').val("");
                $('.modal-title').html("Tambah Tenaga Ahli");
            });

            $(document).on('click', '#Edit_Tenaga_Kerja', function(e) {
                var iteration = 0;
                $.ajax({
                    url: '/tenaga-ahli/' + $(this).val() + '/edit',
                    type: "GET",
                    dataType: 'json',
                    success: function(data) {
                        $('#check').show();
                        $('.modal-title').html("Edit Tenaga Ahli");
                        $('#tambahs').hide();
                        $('#edits').show();
                        $('#nama').val(data.tenaga_ahli.nama);
                        $('#alamat').val(data.tenaga_ahli.alamat);
                        $('#edit_tenaga_ahli').val(data.tenaga_ahli.id);
                        $('#ijasah_link').attr('href', data.tenaga_ahli.ijasah);
                    }
                });
            });

            $(document).on('click', '#Delete_Tenaga_Kerja', function(e) {
                e.preventDefault();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    type: 'DELETE',
                    url: "/tenaga-ahli/" + $(this).val(),
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function(msg) {
                        alert(msg.message);
                        table();
                    },
                    error: function() {
                        alert("Data Gagal Diupload");
                    }
                });
            });

            $('#simpan_tenaga_ahli').click(function(e) {
                e.preventDefault();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                var nama = $('#nama').val();
                var alamat = $('#alamat').val();
                const ijasah = $('#ijasah').prop('files')[0];
                var totalSertifikat = document.getElementById('sertifikat').files.length;
                //let token  = $("#token").attr("content");

                let formData = new FormData();
                formData.append('nama', nama);
                formData.append('alamat', alamat);
                formData.append('ijasah', ijasah);
                //formData.append('_token', token)
                for (var index = 0; index < totalSertifikat; index++) {
                    formData.append("sertifikat[]", document.getElementById('sertifikat').files[index]);
                }


                $.ajax({
                    type: 'POST',
                    url: "/tenaga-ahli?id={{ $DataMonitoring->id }}",
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function(msg) {
                        alert(msg.message);
                        $('#nama').val("");
                        $('#alamat').val("");
                        $('#ijasah').val("");
                        $('#exampleModal').modal('toggle');
                        table();
                    },
                    error: function() {
                        alert("Data Gagal Diupload");
                    }
                });
            });

            $('#edit_tenaga_ahli').click(function(e) {
                e.preventDefault();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                var nama = $('#nama').val();
                var alamat = $('#alamat').val();
                const ijasah = $('#ijasah').prop('files')[0];
                var totalSertifikat = document.getElementById('sertifikat').files.length;
                //let token  = $("#token").attr("content");

                let formData = new FormData();
                formData.append('nama', nama);
                formData.append('alamat', alamat);
                formData.append('ijasah', ijasah);
                for (var index = 0; index < totalSertifikat; index++) {
                    formData.append("sertifikat[]", document.getElementById('sertifikat').files[index]);
                }
                //formData.append('_token', token)


                $.ajax({
                    type: 'POST',
                    url: "/tenaga-ahli/" + $(this).val(),
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(msg) {
                        alert(msg.message);
                        $('#nama').val("");
                        $('#alamat').val("");
                        $('#ijasah').val("");
                        $('#exampleModal').modal('toggle');
                        table();
                    },
                    error: function() {
                        alert("Data Gagal Diupload");
                    }
                });
            });

            // CCTV
            var fieldHTML = `<tr>
                    <td>
                        <input type="text" name="link[]" class="form-control" id="">
                    </td>
                    <td>
                        <button class="btn btn-primary" type="button" id="delete_link"> - </button>
                    </td>
                </tr>`;
            $('#add_Link').click(function() {
                $('.field_wrapper').append(fieldHTML);
            });

            $(document).on('click', '#delete_link', function(e) {
                e.preventDefault();
                $(this).closest('tr').remove();
            });
        @endsection
    </script>
@endsection