@extends('layouts.index')
@section('title')
    Lakip
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{url('home')}}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Lakip
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Lakip</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-12 col-xl-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center mb-4">
                            <h4>Semua Lakip</h4>
                            <div class="ms-auto">
                                <div class="btn-group">
                                    <a href="#!"
                                        class="
                      btn btn-primary
                      font-weight-medium
                      rounded-pill
                      px-4
                    "
                                        data-bs-toggle="modal" data-bs-target="#createmodel">
                                       <i class="fa fa-plus"></i> Tambah Lakip
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div id="tableLoad">
                            @csrf
                            @include('lakip.table_load')
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
        </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>
    <!-- create Modal -->
    <div class="modal fade" id="createmodel" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h5 class="modal-title" id="createModalLabel">
                        <i class="ti-marker-alt me-2"></i> Tambah Lakip Baru
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="tambah" enctype="multipart/form-data">
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="user" class="feather-sm fil-white"></i>
                            </button>
                            <input type="text" class="form-control" placeholder="Judul Lakip..." aria-label="nama"
                                id="nama_tambah" name="nama" />
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="calendar" class="feather-sm fil-white"></i>
                            </button>
                            <input type="number" class="form-control" placeholder="Tahun Lakip..." aria-label="tahun"
                                id="tahun_tambah" name="tahun" />
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="file" class="feather-sm fil-white"></i>
                            </button>
                            <input type="file" class="form-control" id="file_tambah" name="file" />
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button"
                        class="
                    btn btn-light-danger
                    text-danger
                    font-weight-medium
                    rounded-pill
                    px-4
                "
                        data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-success rounded-pill px-4">
                        Save
                    </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- update Modal -->
    <div class="modal fade" id="updatemodel" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h5 class="modal-title" id="createModalLabel">
                        <i class="ti-marker-alt me-2"></i> Ubah Lakip
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="ubah" enctype="multipart/form-data">
                        <input type="hidden" name="id" id="id_ubah">
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="user" class="feather-sm fil-white"></i>
                            </button>
                            <input type="text" class="form-control" placeholder="Judul Lakip..." aria-label="nama"
                                id="nama_ubah" name="nama" />
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="calendar" class="feather-sm fil-white"></i>
                            </button>
                            <input type="number" class="form-control" placeholder="Tahun Lakip..." aria-label="tahun"
                                id="tahun_ubah" name="tahun" />
                        </div>
                        <div>
                            Recent File : <b><i id="file_preview_ubah"></i></b>
                            <br><br>
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="camera" class="feather-sm fil-white"></i>
                            </button>
                            <input type="file" class="form-control" id="file_ubah" name="file" />
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="activity" class="feather-sm fil-white"></i>
                            </button>
                            <select name="status" class="form-select " id="status_ubah">
                                <option value="Y">Aktif</option>
                                <option value="T">Tidak Aktif</option>
                            </select>
                         </div>

                </div>
                <div class="modal-footer">
                    <button type="button"
                        class="
                    btn btn-light-danger
                    text-danger
                    font-weight-medium
                    rounded-pill
                    px-4
                "
                        data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-success rounded-pill px-4">
                        Save
                    </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>
    <script>

        //Aksi Tambah
        const tambah = document.getElementById('tambah');

        tambah.addEventListener('submit', async (e) => {
            e.preventDefault();

            const nama = tambah.nama.value;
            const tahun = tambah.tahun.value;
            const file = $('#file_tambah')[0].files;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("nama", nama);
            formData.append("tahun", tahun);
            formData.append("file", file[0]);

            try {
                let response = await fetch("{{ route('lakip.store-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_tahun = datasend.data.tahun;
                    var res_status = datasend.data.status;
                    var res_file = datasend.data.file;
                    var res_badge = 'success';
                    var res_status_value = 'Aktif';

                    if (res_status == 'T') {
                        res_badge = 'danger';
                        res_status_value = 'Tidak Aktif';
                    }

                    var row = '<tr id="list_'+res_id+'"> <td>+</td>';
                    row += '<td> <b>'+res_nama+'</b> </td><td>'+res_tahun+'</td><td><a href="'+res_file+'" class="text-bold" download>'+res_file+'</a></td>';
                    row += '<td> <span class="badge bg-light-'+res_badge+' text-'+res_badge+'">'+res_status_value+'</span> </td> <td> <button type="button" data-uid="'+res_id+'"';
                    row += 'data-status="'+res_status_value+'" data-nama='+res_nama+'" onclick="listUpdate(this)" class="btn btn-outline-info btn-sm"><i class="fa fa-edit"></i></button>';
                    row += '<button type="button" onclick="listDelete('+res_id+')" class="btn btn-outline-danger btn-sm"><i class="fa fa-trash"></i></button> </td> </tr>';

                    $('#nama_tambah').val("");
                    $('#tahun_tambah').val("");
                    $('#file_tambah').val("");
                    $('#list').append(row);
                    $('#createmodel').modal('hide');
                    Swal.fire('Lakip berhasil ditambahkan', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        //Aksi Ubah

        function listUpdate(obj) {

            var id = obj.getAttribute('data-uid');

            fetch("{{url('lakip-detail')}}/"+id).then(function(response) {
                response.json().then(function(text) {
                    var res = text;
                    var nama = res.data.nama;
                    var tahun = res.data.tahun;
                    var file = res.data.file;
                    var status = res.data.status;

                    $('#id_ubah').val(id);
                    $('#nama_ubah').val(nama);
                    $('#tahun_ubah').val(tahun);
                    $('#file_preview_ubah').html(file);
                    $('#status_ubah').val(status);
                });
            });


            $('#updatemodel').modal('show');
        }

        const ubah = document.getElementById('ubah');

        ubah.addEventListener('submit', async (e) => {
            e.preventDefault();

            const id = ubah.id.value;
            const nama = ubah.nama.value;
            const tahun = ubah.tahun.value;
            const file = $('#file_ubah')[0].files;
            const status = ubah.status.value;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id", id);
            formData.append("nama", nama);
            formData.append("tahun", tahun);
            formData.append("status", status);
            if (file[0] != undefined) {
                formData.append("file", file[0]);
            }
            formData.append("status", status);

            try {
                let response = await fetch("{{ route('lakip.update-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_tahun = datasend.data.tahun;
                    var res_status = datasend.data.status;
                    var res_file = datasend.data.file;
                    var res_badge = 'success';
                    var res_status_value = 'Aktif';

                    if (res_status == 'T') {
                        res_badge = 'danger';
                        res_status_value = 'Tidak Aktif';
                    }

                    var row = '<tr id="list_'+res_id+'"> <td>+</td>';
                    row += '<td> <b>'+res_nama+'</b></td><td>'+res_tahun+'</td><td><a href="'+res_file+'" class="text-bold" download>'+res_file+'</a></td>';
                    row += '<td> <span class="badge bg-light-'+res_badge+' text-'+res_badge+'">'+res_status_value+'</span> </td> <td> <button type="button" data-uid="'+res_id+'"';
                    row += 'data-status="'+res_status_value+'" data-nama='+res_nama+'" onclick="listUpdate(this)" class="btn btn-outline-info btn-sm"><i class="fa fa-edit"></i></button>';
                    row += '<button type="button" onclick="listDelete('+res_id+')" class="btn btn-outline-danger btn-sm"><i class="fa fa-trash"></i></button> </td> </tr>';

                    $('#nama_ubah').val("");
                    $('#tahun_ubah').val("");
                    $('#file_ubah').val("");
                    $('#list_' + res_id).replaceWith(row);
                    $('#updatemodel').modal('hide');
                    Swal.fire('Lakip berhasil diperbaharui', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        function listDelete(id) {
            Swal.fire({
                title: 'apakah kamu yakin menghapus Lakip ini?',
                icon: 'info',
                confirmButtonText: `Ya, Hapus !`,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('lakip.delete-modal') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "id": id
                        },

                        success: function(result) {
                            Swal.fire('Lakip berhasil dihapus', '', 'success')
                            $('#list_' + id).remove();
                        }
                    });
                } else {

                }
            });
        }

        // Pagintaion

        $(document).ready(function(){
            
            $(document).on('click', '.page-link', function(event){
                event.preventDefault(); 
                var page = $(this).attr('href').split('page=')[1];
                loadTable(page);
            });
            
            function loadTable(page) {
                var _token = "{{ csrf_token() }}";
                $.ajax({
                    url:"{{ route('lakip.load-table') }}",
                    method:"POST",
                    data:{_token:_token, page:page},
                    success:function(data) {
                            $('#tableLoad').html(data);
                    }
                });
            }

        });
    </script>
@endsection