@extends('layouts.app')

@section('content')

<div class="row clearfix">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <h2>
                        Detail {{$pageTitle}} - {{$magang_name}}
                    </h2>
                    <!-- <a href="{{ route('pelatihan.export_excel', $magang_id)}}" class="btn btn-success my-3"
                        target="_blank">EXPORT
                        EXCEL</a> -->
                    <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="{{ route('pelatihan.export_excel', $magang_id)}}">
                                        <div class="demo-google-material-icon"> <i
                                                class="material-icons">file_download</i> <span class="icon-name">Export
                                                Excel</span></div>
                                    </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>Email</th>
                                    <th>Tagihan</th>

                                    <th>Action</th>

                                </tr>
                            </thead>

                            <tbody>
                                @forelse ($peserta_magang as $item)
                                <tr>
                                    <td>{{$item['peserta']->id}}</td>
                                    <td>{{$item['peserta']->nama}}</td>
                                    <td>{{$item['peserta']->email}}</td>
                                    <td>
                                        <div class="progress">
                                            <div class="progress-bar bg-pink progress-bar-striped active text-dark"
                                                role="progressbar"
                                                aria-valuenow="{{($item['tagihan_terbayar']/$item['total_tagihan'])*100}}"
                                                aria-valuemin="0" aria-valuemax="100"
                                                style="width: {{($item['tagihan_terbayar']/$item['total_tagihan'])*100}}%">
                                                {{number_format(($item['tagihan_terbayar']/$item['total_tagihan'])*100, 0)}}
                                                %
                                            </div>
                                        </div>
                                    </td>
                                    <td><button type="button" value="{{$item['peserta']->id}}"
                                            class="btn btn-default waves-effect ke_detail" data-toggle="modal"
                                            data-target="#defaultModal">Lihat</button></td>

                                </tr>


                                @empty
                                @endforelse
                            </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 profile-card">

                    <div class="header">
                        <span>
                            <h5>Total Tagihan</h5>
                        </span>
                       
                        <span class="badge bg-cyan" id="total_tagihan">Rp. 0,-</span>
                        <span class="label bg-amber" id="sisa"></span>
                    </div>
                    <div class="profile-footer">
                        <ul id="card_tagihan">

                        </ul>
                        <a class="btn btn-primary btn-lg waves-effect btn-block"
                            href="{{ route('pembayaran.index')}}">Lihat Pembayaran</a>
                    </div>
                </div>
            </div> -->
        <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="defaultModalLabel">Total Tagihan</h4><span class="label bg-amber"
                            id="sisa"></span>
                    </div>
                    <div class="modal-body">
                        <div class="body table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Tanggal</th>
                                        <th>Status</th>
                                        <th>Nominal</th>
                                    </tr>
                                </thead>
                                <tbody id="card_tagihan">


                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a type="button" class="btn btn-link waves-effect" href="{{ route('pembayaran.index')}}">LIHAT
                            PEMBAYARAN</a>
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
                    </div>
                </div>
            </div>
        </div>



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


</div>
</div>

@endsection
@section('customjs')


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


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



    });
});


$(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_detail', function() {

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

    // var data['ini'] = $(this).val();
    var data = {
        ini: $(this).val(),
        magang_id: @json($magang_id)
        // magang_id: '{!! json_encode($magang_id)!!}'

    };
    // console.log(data);
    // $('.code_edit').val(data['description_programm']);
    $.ajax({
        type: 'POST',
        data: {
            "_token": "{!! csrf_token() !!}",
            "data": data
        },
        dataType: 'JSON',
        url: "{!! route('pelatihan.look_detail') !!}",
        success: function(data) {
            console.log(data);
            $('#card_tagihan').empty().append();
            $('#sisa').text('');


            for (i = 0; i < data.pembayaran.length; i++) {
                var warna = (data.pembayaran[i].status == 0) ? 'bg-amber' : 'bg-teal';
                var status = (data.pembayaran[i].status == 0) ? 'Tagihan' : 'Lunas';
                // var tanggalIndo = data.pembayaran[i].created_at.toLocaleDateString('id-ID');
                var tanggalIndo = new Date(data.pembayaran[i].created_at)
                    .toLocaleDateString('id-ID', {
                        day: 'numeric',
                        month: 'long',
                        year: 'numeric'
                    });

                // $('#card_tagihan').append(
                //     '<li>' +
                //     '<span> ' + (i + 1) + '.' + tanggalIndo + '</span>' +
                //     '<span class="label ' + warna + '">' + status + '</span>' +
                //     '<span>' + formatRupiah(data.pembayaran[i].total) +
                //     '</span>' +
                //     '</li>'
                // );
                $('#card_tagihan').append(
                    '<tr>' +
                    '<th> ' + (i + 1) + '</th>' +
                    '<th> ' + tanggalIndo + '</th>' +
                    '<th><span class="label ' + warna + '">' + status + '</span></th>' +
                    '<th>' + formatRupiah(data.pembayaran[i].total) +
                    '</th>' +
                    '</tr>'
                );

            }
            $('#card_tagihan').append(
                '<tr>' +
                '<th> </th>' +
                '<th> Total dibayar </th>' +
                '<th> </th>' +

                '<th>' + formatRupiah(data.tagihan_terbayar) +
                '</th>' +
                '</tr>'
            );
            if (data['total_tagihan'] == data.tagihan_terbayar) {

                $('#sisa').text('Lunas');
            }



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

            // $('#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>


@endsection