@extends('layouts.app')

@section('content')




<div class="row clearfix">
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <h2>
                        {{$pageTitle}}
                    </h2>
                    <ul class="header-dropdown m-r--5">
                        <li class="dropdown">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">
                                <i class="material-icons">more_vert</i>
                            </a>

                            <ul class="dropdown-menu pull-right">
                                <li><button data-toggle="modal" data-target="#ModalCreate">Add</button></li>
                                <!-- <li><a href="javascript:void(0);">Another action</a></li>
                                        <li><a href="javascript:void(0);">Something else here</a></li> -->
                            </ul>

                        </li>
                    </ul>
                </div>
                <div class="body">
                    <div class="table-responsive">
                        <!-- <table id="example" class="display" style="width:100%"> -->
                        <table id="example" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nama</th>
                                    <th>Kuota</th>

                                    <th>Action</th>

                                </tr>
                            </thead>
                            <tbody>
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Custom Content -->
        <div class="clearfix">
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header">
                        <h2>
                            PREVIEW
                            <small>Halaman Pratinjau Magang</small>
                        </h2>

                    </div>
                    <div class="body">
                        <div class="row">
                            <div class="col-sm-12 col-md-12">
                                <div class="thumbnail">
                                    <img id="gambar" src="none.png">
                                    <div class="caption">
                                        <h3 id="judul">Judul</h3>
                                        <p id="isi">
                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                            Lorem
                                            Ipsum has been the industry's standard dummy
                                            text ever since the 1500s
                                        </p>
                                        <h3>
                                            <span class="label label-warning" id="nominal">Rp. 00,-</span>
                                        </h3>
                                        <p>
                                            <a href="javascript:void(0);" class="btn btn-primary waves-effect"
                                                role="button">DAFTAR</a>
                                        </p>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- #END# Custom Content -->


    </div>
</div>









@endsection
@section('customjs')

<script>
$(document).ready(function() {


    var oTable = $('#example').DataTable({

        processing: true,
        serverSide: true,
        ajax: {
            url: "{!! route('pelatihan.indexData') !!}",
            type: 'GET',
            data: function(d) {
                // console.log(d);
                //   d.status_user = $('#status_user').val();
                //   d.banned_user = $('#banned_user').val();
                //   d.type_user = $('#type_user').val();


            }
        },
        order: [
            [0, 'desc']
        ],
        columns: [{
                data: 'id',
                name: 'id'
            },
            {
                data: 'nama',
                name: 'nama'
            },
            {
                data: 'is_active',
                name: 'status'
            },

            {
                data: 'action',
                name: 'action'
            },
        ],



    });
});


$(document).on('click', '.edit_folder', function() {

    // $('.edit_folder').on('click', function() {
    // console.log('asdasdas');

    var data = $(this).val();
    // console.log(data);
    // $('.code_edit').val(data['description_programm']);
    $.ajax({
        type: 'POST',
        data: {
            "_token": "{!! csrf_token() !!}",
            "data": data
        },
        dataType: 'JSON',
        url: "{!! route('pelatihan.look') !!}",
        success: function(data) {
            console.log(data);

            $('#nama').val(data['nama']).closest(".form-line").addClass("focused");
            // $('#uraian').val(data['uraian']);
            CKEDITOR.instances.ckeditor2.setData(data['uraian'])
            $('#tgl_mulai').val(data['tgl_mulai']).change();
            $('#tgl_selesai').val(data['tgl_selesai']).change();
            $('#biaya').val(data['biaya']).closest(".form-line").addClass("focused");
            $('#kuota').val(data['kuota']).closest(".form-line").addClass("focused");
            $('#id').val(data['id']);
            $('#is_active').val(data['is_active']).change();
            $('#type').val(data['type']).change();
            // $('.class_id').val(data['id']);
        }
    });

});

function formatRupiah(angka) {
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        minimumFractionDigits: 0 // Menghilangkan koma desimal di belakang (opsional)
    }).format(angka);
}

$(document).on('click', '.ke_gambar', function() {

    // $('.edit_folder').on('click', function() {
    // console.log('asdasdas');

    var data = $(this).val();
    // console.log(data);
    // $('.code_edit').val(data['description_programm']);
    $.ajax({
        type: 'POST',
        data: {
            "_token": "{!! csrf_token() !!}",
            "data": data
        },
        dataType: 'JSON',
        url: "{!! route('pelatihan.look_magang') !!}",
        success: function(data) {
            console.log(data);

            // $('#nama').val(data['nama']).closest(".form-line").addClass("focused");
            $('#judul').text(data['nama']);
            // CKEDITOR.instances.ckeditor2.setData(data['uraian'])
            $('#nominal').text(formatRupiah(data['biaya']));

            $('#gambar').attr('src', data['foto'] ? 'foto_magang/' + data['foto'] :
                'none.png');
            $('#isi').html(data['uraian']);
            // $('#biaya').val(data['biaya']).closest(".form-line").addClass("focused");
            // $('#kuota').val(data['kuota']).closest(".form-line").addClass("focused");
            // $('#id').val(data['id']);
            // $('#is_active').val(data['is_active']).change();
            // $('#type').val(data['type']).change();
            // $('.class_id').val(data['id']);
        }
    });

});
</script>
<script src="{{ asset('bsb/plugins/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('bsb/js/pages/forms/editors.js') }}"></script>

@endsection