@extends('template')
@section('title', $title)
@push('style')
    <style>
        .pagetitle #header-text {
            font-family: "Open Sans", sans-serif;
            font-weight: 700;
            font-size: 16px;
            color: black
        }

        .text-mid {
            color: #000;
            font-size: 16px;
            font-weight: 900;
        }

        .tambah {
            display: flex;
            padding: 8px 12px;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            line-height: 100%;
        }

        .th-text {
            color: #000;
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .td-text {
            color: #0B4238;
            font-family: Open Sans;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .alert-kecil-1 {
            height: 20px;
            width: 40px;
            margin: 0;
            padding: 0;
        }

        .alert-kecil-2 {
            height: 20px;
            width: 80px;
            margin: 0;
            padding: 0;
        }

        .alert-kecil-3 {
            height: 20px;
            width: 80px;
            margin: 0;
            padding: 0;
        }

        .alert-kecil-4 {
            height: 20px;
            width: 110px;
            margin: 0;
            padding: 0;
        }

        .alert-dokumen {
            height: 20px;
            width: 120px;
            margin: 0;
            padding: 0;
        }

        .td-lihat-data {
            font-size: 12px;
            font-weight: 600;
        }

        /* tab */
        #tab nav {
            display: flex;
        }

        #tab nav a {
            font-size: 12px;
            color: whitesmoke;
            text-decoration: none;
            padding: 0.5rem;
            background: rgb(198, 198, 198);
            border: 1px solid silver;
        }

        #tab nav .active {
            background: rgb(59, 147, 59);
        }

        .tab-content {
            display: none;

            /* border: 1px solid silver;
                                                                                                                                                                                                                                                                                                                                                                                                        padding: 1rem; */
        }

        .tab-content.active {
            display: block;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="pagetitle col-9">
            <p id="header-text" class="open-sans">KRITERIA PENGUMPULAN DATA DAN INFORMASI PANJI-PANJI KEBERHASILAN PEMBANGUNAN
                KEPEMUDAAN KAB/KOTA SE KALIMANTAN TIMUR TAHUN 2022</p>
        </div>
    </div>
    <section>
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    @if (Auth::user()->role == 'Admin')
                        <a class="card-title" href="/admin/lihat-data/{{ $instansi->id }}"
                            style="color: #0B4238; font-weight: 600;"><i class="bi bi-chevron-compact-left"></i>
                            <small style="color: #0B4238; font-weight: 600; margin-top: 100px">Kembali</small>
                        </a>
                    @endif
                    @if (Auth::user()->role == 'User')
                        <a class="card-title" href="/master-input" style="color: #0B4238; font-weight: 600;"><i
                                class="bi bi-chevron-compact-left"></i>
                            <small style="color: #0B4238; font-weight: 600; margin-top: 100px">Kembali</small>
                        </a>
                    @endif
                </div>
                <!-- Small tables -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <p class="mx-auto text-mid" style="padding-left: 100px;">{{ strtoupper($judul->uraian) }}</p>
                </div>
                <div class="A">
                    <div id="tab">
                        <div class="d-flex justify-content-between">
                            @if ($judul->uraian == 'ASPEK PARTISIPAN DAN KEGIATAN')
                                <div class="p-2">
                                    <nav>
                                        <a href="#" class="active" data-id='1'>A. KEGIATAN TINGKAT KAB/KOTA</a>
                                        <a href="#" data-id='2'>B. MENGIKUTI KEGIATAN TINGKAT PROVINSI</a>
                                        <a href="#" data-id='3'>C. MENGIKUTI KEGIATAN TINGKAT NASIONAL</a>
                                    </nav>
                                </div>
                                {{-- @if (Auth::user()->role == 'User')
                                    <div class="ml-auto p-2">
                                        <a href="/input-data/create-data/{{ $id }}"
                                            class="btn btn-success tambah">
                                            <i class="bi bi-plus-lg"></i> Tambah Data
                                        </a>
                                    </div>
                                @endif --}}
                            @else
                                <div class="row">
                                </div>
                                {{-- @if (Auth::user()->role == 'User')
                                    <div class="ml-auto p-2">
                                        <a href="/input-data/create-data/{{ $id }}"
                                            class="btn btn-success tambah">
                                            <i class="bi bi-plus-lg"></i> Tambah Data
                                        </a>
                                    </div>
                                @endif --}}
                            @endif
                        </div>
                        <br>
                        @if ($judul->uraian != 'ASPEK PARTISIPAN DAN KEGIATAN')
                            @include('input_data.lihat_data.index_table')
                        @endif
                        @if ($judul->uraian == 'ASPEK PARTISIPAN DAN KEGIATAN')
                            <div class="tab-content active" data-content='1'>
                                @include('input_data.lihat_data.kategori', ['kategori' => 'A'])
                            </div>
                            <div class="tab-content" data-content='2'>
                                @include('input_data.lihat_data.kategori', ['kategori' => 'B'])
                            </div>
                            <div class="tab-content" data-content='3'>
                                @include('input_data.lihat_data.kategori', ['kategori' => 'C'])
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <!--            <select class="form-select" name="kelengkapan" aria-label="Default select example" id="kelengkapan">
                                <option value=" "></option>
                                <option value="Ada">Ada</option>
                                <option value="Tidak Ada">
                                    Tidak Ada</option>
                            </select> -->
    </section>
    <script>
        @section('jquery')
            $("#tab nav a").click(function() {
                const id = $(this).data('id');
                if (!$(this).hasClass('active')) {
                    $("#tab nav a").removeClass('active');
                    $(this).addClass('active');

                    $('.tab-content').hide();
                    $(`[data-content=${id}]`).fadeIn();
                }
            });

            function edit(el) {
                var urutan = $(el).parent().parent().attr('urutan');

                $.ajax({
                    url: "/input-data/" + $(el).parent().parent().attr('id') + "/edit-data/{{ $id }}",
                    type: "GET",
                    success: function(data) {
                        var ada = (data.data.kelengkapan == "Ada") ? "selected" : "";
                        var tidak_ada = (data.data.kelengkapan == "Tidak Ada") ? "selected" : "";
                        var dokumen_terlampir = (data.data.dokumen_terlampir == null) ? "" : data.data
                            .dokumen_terlampir;
                        var form = `

                            <th scope="row" class="th-text text-center">` + urutan + `</th>
                                <td class="th-text" style="width: 450px" >
                                    ` + data.data.aspek + `
                                </td>
                            <td class="text-center" colspan="2" id="kelengkapans-` +
                            data.data.id +
                            `">
                                <select class="form-select update" name="kelengkapan" aria-label="Default select example" id="kelengkapan-` +
                            data.data.id + `">
                                    <option value="Ada" ` + ada + `>Ada</option>
                                    <option value="Tidak Ada" ` + tidak_ada + `>Tidak Ada</option>
                                </select>
                            </td>
                            <td id="dokumen_lampirans-` + data.data.id + `">
                                <input type="text" name="dokumen_lampiran" ids="` + data.data.id +
                            `" class="form-control update" value="` + dokumen_terlampir +
                            `" id="dokumen_lampiran-` + data.data.id + `">
                            </td>
                            <td id="keterangans-` + data.data.id +
                            `">
                                <textarea name="keterangan" id="keterangan-` + data.data.id +
                            `" class="form-control update" ids="` + data.data.id +
                            `" cols="30" rows="5">` +
                            data.data
                            .keterangan + `</textarea>
                            </td>
                            <td>
                                <button class="simpanBtn btn btn-success" urutan="` + urutan + `" id="keterangan-` +
                            data.data.id +
                            `" ids="` + data.data.id +
                            `">Simpan</button>
                            </td>
                            `;
                        $('#' + data.data.id).html(form);
                    },
                })
            }

            $('.editBtn').click(function() {
                edit(this);
            });

            $(document).on('click', '.close', function() {
                var urutan = $(this).parent().parent().parent().attr('urutan');
                $.ajax({
                    url: "/input-data/" + $(this).attr('id') + "/edit-data/{{ $id }}",
                    type: "GET",
                    success: function(data) {
                        var tidak_ada = '';
                        var ada = '';
                        if (data.data.kelengkapan == 'Ada' || data.data.kelengkapan != 'null') {
                            ada = `<button class="td-text alert alert-success alert-kecil-1"
                                            style="color: #0B4238;">` + data.data.kelengkapan +
                                `</button>`
                        } else {
                            tidak_ada = `<button class="td-text alert alert-danger alert-kecil-2"
                                        style="color: #0B4238;">` + data.data.kelengkapan + `</button>`;
                        }
                        if (data.data.dokumen_terlampir) {
                            var link = "Daftar";
                        } else {
                            var link = "Tidak Terdaftar";
                        }
                        var form = `
                                <th scope="row" class="th-text text-center">` + urutan + `</th>
                                <td class="th-text" style="width: 450px" >
                                    ` + data.data.aspek + `
                                </td>
                                <td class="text-center mx-auto">
                                    ` + ada + `
                                </td>
                                <td class="text-center mx-auto">
                                    ` + tidak_ada + `
                                </td>
                                <td class="text-center">
                                    <a href="` + data.data.dokumen_terlampir +
                            `" target="_blank" class="td-text alert alert-light btn alert-dokumen" style="color: #0B4238;">` +
                            link + `</a>
                                </td>
                                <td class="th-text">
                                    ` + data.data.keterangan + `
                                </td>
                                <td class="text-center mx-auto">
                                    <button class="editBtn">Edit</button>
                                </td>
                                `;
                        $('#' + data.data.id).html(form);
                        $('.editBtn').click(function() {
                            edit(this);
                        });
                    },
                })
            });

            function UpdateData(id, urutan, aspek, dokumen, keterangan, kelengkapan) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "/input-data/" + id,
                    type: "PUT",
                    data: {
                        dokumen_terlampir: dokumen,
                        keterangan: keterangan,
                        kelengkapan: kelengkapan
                    },
                    success: function(data) {
                        alert(data.message);
                        var tidak_ada = '';
                        var ada = '';
                        if (data.data.kelengkapan == 'Ada') {
                            ada = `<button class="td-text alert alert-success alert-kecil-1"
                                            style="color: #0B4238;">` + data.data.kelengkapan.toUpperCase() +
                                `</button>`
                        } else {
                            tidak_ada = `<button class="td-text alert alert-danger alert-kecil-2"
                                        style="color: #0B4238;">` + data.data.kelengkapan.toUpperCase() + `</button>`;
                        }

                        if (data.data.dokumen_terlampir) {
                            link = "Daftar";
                        } else {
                            link = "Tidak Terdaftar";
                        }
                        var form = `
                                <th scope="row" class="th-text text-center">` + urutan + `</th>
                                <td class="th-text" style="width: 450px" >
                                    ` + data.data.aspek + `
                                </td>
                                <td class="text-center mx-auto">
                                    ` + ada + `
                                </td>
                                <td class="text-center mx-auto">
                                    ` + tidak_ada + `
                                </td>
                                <td class="text-center">
                                    <a href="` + data.data.dokumen_terlampir +
                            `" target="_blank" class="td-text alert alert-light btn alert-dokumen" style="color: #0B4238;">` +
                            link + `</a>
                                </td>
                                <td class="th-text">
                                    ` + data.data.keterangan + `
                                </td>
                                <td class="text-center mx-auto">
                                    <button class="editBtn btn btn-success">Edit</button>
                                </td>
                                `;
                        $('#' + data.data.id).html(form);


                        $('.editBtn').click(function() {
                            edit(this);
                        });
                    },
                    error: function(err) {
                        $('#isi').show();
                        $('#loading').hide();
                        if (err.status == 422) {
                            // when status code is 422, it's a validation issue
                            console.log(err.responseJSON);
                            $('#success_message').fadeIn().html(err.responseJSON.message);

                            // you can loop through the errors object and show it to the user
                            console.warn(err.responseJSON.errors);
                            // display errors on each form field
                            $.each(err.responseJSON.errors, function(i, error) {
                                // var el = $(document).find('[name="' + i + '"]');
                                // el.after($('<span style="color: red;">' + error[0] +
                                //     '</span>'));
                                // console.log(i);
                                $("#" + i + "-" + id).attr('class', 'form-control update is-invalid');
                                $("#" + i + "s-" + id).append(
                                    "<b class='text-danger'>" + error[0] + "</b>");
                            });
                        }
                    }
                });

            }

            $(document).on("keypress", ".update", function(e) {
                if (e.which == 13) {
                    var id = $(this).attr('ids');
                    UpdateData(id, $('#urutan-' + id).val(), $('#aspek-' + id).val(), $('#dokumen_lampiran-' + id)
                        .val(),
                        $('#keterangan-' + id)
                        .val(), $('#kelengkapan-' + id).val());
                }
            });

            $(document).on("click", ".simpanBtn", function(e) {

                var urutan = $(this).parent().parent().attr('urutan');
                var id = $(this).attr('ids');
                UpdateData(id, urutan, $('#aspek-' + id).val(), $('#dokumen_lampiran-' + id)
                    .val(),
                    $('#keterangan-' + id)
                    .val(), $('#kelengkapan-' + id).val());



            });

            // $(document).on('keypress', function(e) {
            //     if (e.which == 13) {
            //         alert('You pressed enter!');
            //     }
            // });
        @endsection
    </script>
@endsection