@extends('layouts/app', ['activePage' => 'spmi', 'title' => 'SPMI'])

@section('content')
<div>
    <div class="content">
        <div class="container">
            <div class="row no-gutters mt-5">
                <div class="col-md-12">
                    <div class="card border-0">
                    <p class="text-center">
                            <h3 class="card-title text-center font-weight-bold" style="color: #006634;">
                            Standar Penjaminan Mutu Internal
                            </h3>
                            </p>
                            <br>
                        <div class="row">
                            <div class="col-4">
                                <div class="list-group" id="list-tab" role="tablist">
                                    @for($i = 0; $i < count($dok); $i++)
                                    <a class="list-group-item list-group-item-action" id="list-home-list{{$i}}"
                                        data-toggle="list" href="#list-home{{$i}}" onclick="getDoc('{{$i}}', '{{$dok[$i]->id}}')" role="tab" aria-controls="home">
                                        {{$dok[$i]->nama}}
                                        
                                    </a>
                                    @endfor
                                    <!-- <a class="list-group-it    em list-group-item-action" id="list-profile-list"
                                        data-toggle="list" href="#list-profile" role="tab"
                                        aria-controls="profile">Profile</a>
                                    <a class="list-group-item list-group-item-action" id="list-messages-list"
                                        data-toggle="list" href="#list-messages" role="tab"
                                        aria-controls="messages">Messages</a>
                                    <a class="list-group-item list-group-item-action" id="list-settings-list"
                                        data-toggle="list" href="#list-settings" role="tab"
                                        aria-controls="settings">Settings</a> -->
                                </div>
                            </div>
                            <div class="col-8">
                                <div class="tab-content" id="nav-tabContent">
                                    @for($i = 0; $i < count($dok); $i++)
                                    <div class="tab-pane fade show active" id="list-home{{$i}}" role="tabpanel"
                                        aria-labelledby="list-home-list">
                                        <p class="text-dark" id="name-doc{{$i}}">

                                        </p>
                                    </div>
                                    @endfor
                                    
                                    <!-- <div class="tab-pane fade" id="list-profile" role="tabpanel"
                                        aria-labelledby="list-profile-list">...</div>
                                    <div class="tab-pane fade" id="list-messages" role="tabpanel"
                                        aria-labelledby="list-messages-list">...</div>
                                    <div class="tab-pane fade" id="list-settings" role="tabpanel"
                                        aria-labelledby="list-settings-list">...</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    $(document).ready(function () {
        demo.checkFullPageBackgroundImage();

        setTimeout(function () {
            // after 1000 ms we add the class animated to the login/register card
            $('.card').removeClass('card-hidden');
        }, 700)
    });

    function getDoc(index,id){
        console.log(index)
        console.log(id)

        $.ajax({
                url: "/docs/get/" + id,
                type: "GET",
                dataType: 'json',
                success: function (data) {
                    console.log(data.data)
                    $("#isiDoc").remove();

                    // if(data.data != []){
                        for (let i = 0; i < data.data.length; i++) {
                            const element = data.data[i];
                            $("#name-doc"+index).append("<p id='isiDoc'><a class='text-dark' href='/docs/download/"+element.id+"'>"+element.nama+" <i class='fas fa-download'></i></a></p>");
                            
                        }

                    // }else{
                    //     $("#name-doc"+index).append("<a href='javascript:void(0)'> tidak ada dokumen </a>");
                    // }
                
                },
                error: function (data) {
                    console.log('Error:', data);
                    // $('#saveBtn').html('Save Changes');
                }
            });
    }
    function yuhu(id) {
        console.log(id,'id')
        $.ajax({
            url: "/docs/download/" + id,
            type: "GET",
            dataType: 'json',
            success: function (data) {
                console.log(data, 'data')
                // $('#docForm').trigger("reset");
                // $('#input-id').val(data.data.id)
                // $('#input-nama').val(data.data.nama)
                // $('#levelSelect').val(data.data.level)
                // $('#tambahDoc').modal('hide');
                // table.draw();
                //    demo.notifSuccess("Jenis Dokumen berhasil disimpan!")

            },
            error: function (data) {
                console.log('Error:', data);
                // $('#saveBtn').html('Save Changes');
            }
        });
    }

</script>
@endpush