@extends('layouts.index')

@push('css')
{{-- bootstrapt tabel plugins --}}
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link href="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

<style>
    /* Customize search input styling */
    .dataTables_filter input {
        width: 600px;
    }

    /* Customize placeholder text */
    .dataTables_filter input::placeholder {
        color: #999;
        font-style: italic;
    }
</style>
@endpush

@section('content')

<div class="page-content">
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <div class="page-title">
                        <h4 class="mb-0 font-size-18">Pencarian Pekerjaan</h4>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active">Welcome to {{ env('APP_NAME') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="page-content-wrapper">

            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between w-100 align-items-center mt-5 table-responsive">
                                @role('admin|admin-opd|monev')
                                    <form action="" class="d-flex w-100 mx-4">
                                        <div class="row w-100">
                                            <div class="col-12">
                                                <div class="mx-1 w-90" style="margin-top:28px">
                                                    <h6>OPD :</h6>
                                                    <select name="pd" id="opd_id" class="form-control select-opd">
                                                        @role('admin')
                                                            <option value="">Pilih Perangkat Daerah</option>
                                                            @foreach ($opd as $item)
                                                                <option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
                                                            @endforeach
                                                        @endrole

                                                        @role('admin-opd|monev')
                                                            @if (Auth::user()->opd_id == null)
                                                                <option value="">Pilih Perangkat Daerah</option>
                                                                @foreach ($opd as $item)
                                                                    <option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
                                                                @endforeach
                                                            @else
                                                                @foreach ($opd as $item)
                                                                    <option value="{{ $item->id }}"  @if(Auth::user()->opd_id == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
                                                                @endforeach
                                                            @endif
                                                        @endrole
                                                    </select>
                                                </div>

                                                <div class="mx-1 w-90" style="margin-top:28px">
                                                    <h6>Kegiatan :</h6>
                                                    <select name="nama_kegiatan" id="nama_kegiatan" class="form-control select-opd">
                                                        <option value="" >Pilih Program Terlebih dahulu</option>
                                                        @if ($request->nama_kegiatan)
                                                            <option value="{{ $request->nama_kegiatan }}" selected>{{ $request->nama_kegiatan }}</option>
                                                        @endif
                                                    </select>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="row w-100">
                                            <div class="col-12">
                                                <div class="mx-1 w-90" style="margin-top:28px">
                                                    <h6>Program :</h6>
                                                    <select name="nama_program" id="nama_program" class="form-control select-opd">
                                                        <option value="" >Pilih Perangkat Daerah Terlebih dahulu</option>
                                                        @if ($request->nama_program)
                                                            <option value="{{ $request->nama_program }}" selected>{{ $request->nama_program }}</option>
                                                        @endif
                                                    </select>
                                                </div>

                                                <div class="mx-1 w-90" style="margin-top:28px">
                                                    <h6>Sub Kegiatan :</h6>
                                                    <select name="nama_sub_kegiatan" id="nama_sub_kegiatan" class="form-control select-opd">
                                                        <option value="" >Pilih Kegiatan Terlebih Dahulu</option>
                                                        @if ($request->nama_sub_kegiatan)
                                                            <option value="{{ $request->nama_sub_kegiatan }}" selected>{{ $request->nama_sub_kegiatan }}</option>
                                                        @endif
                                                    </select>
                                                </div>

                                                <div class="mx-1 text-end" style="margin-top:28px">
                                                    <button type="submit" class="btn btn-warning">Filter</button>
                                                    <a href="{{url('/pencarian_rincian')}}" class="btn btn-success">Reset</a>
                                                </div>

                                                {{-- <div class="mx-1" style="margin-top:28px">
                                                    <a href="{{url('/program_unggulan')}}" class="btn btn-success">Reset</a>
                                                </div> --}}
                                            </div>
                                        </div>

                                    </form>
                                    @endrole
                                <div>
                                </div>
                            </div>
                            <div class="d-flex flex-column justify-content-center w-100 align-items-around"
                                style="display: block">

                                <div class="table-responsive py-4" style="padding: 25px;">
                                    <table id="rincian-table" class="table table-flush" data-height="500" data-show-columns="true">
                                        <thead class="thead-light">
                                            <tr class="table-primary">
                                                <th rowspan="2">Kode Rekening</th>
                                                <th rowspan="2" class="text-nowrap">SKPD Pelaksana</th>
                                                <th rowspan="2" class="text-nowrap">Program</th>
                                                <th rowspan="2" class="text-nowrap">Kegiatan</th>
                                                <th rowspan="2" class="text-nowrap">Sub Kegiatan</th>
                                                <th rowspan="2" class="text-nowrap">Paket Pekerjaan</th>
                                                <th rowspan="2" class="text-center text-nowrap">Pagu</th>
                                                <th rowspan="2" class="text-center text-nowrap">Nilai Kontrak</th>
                                                <th rowspan="2" class="text-center text-nowrap">Sisa Pagu</th>
                                                <th rowspan="2" class="text-center text-nowrap">Realisasi Fisik</th>
                                                <th colspan="3" class="text-center text-nowrap">Realisasi Keuangan</th>
                                                <th rowspan="2" class="text-center text-nowrap">Penyedia</th>
                                                <th rowspan="2" class="text-center text-nowrap">Permasalahan</th>
                                                <th rowspan="2" class="text-center text-nowrap">Tindak Lanjut</th>
                                                <th rowspan="2" class="text-center text-nowrap">Dokumentasi</th>
                                            </tr>
                                            <tr class="table-primary">
                                                {{-- <th class="text-center">
                                                    %
                                                </th> --}}
                                                <th class="text-center">
                                                    Rp
                                                </th>
                                                <th class="text-center text-nowrap">
                                                    Pembayaran (%)
                                                </th>
                                                <th class="text-center text-nowrap">
                                                    Penyerapan (%)
                                                </th>
                                            </tr>
                                        </thead>
                                        
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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


@endsection

@push('js')
{{-- bootrapt tabel --}}
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>

{{-- <script>
    $('img[data-enlargable]').addClass('img-enlargable').click(function(){
        var src = $(this).attr('src');
        var encodedSrc = encodeURIComponent(src); // Encode the URL

        // Create a container to display the enlarged image
        var $container = $('<div>').css({
            background: 'RGBA(0,0,0,.5)',
            width: '100%',
            height: '100%',
            position: 'fixed',
            zIndex: '10000',
            top: '0',
            left: '0',
            cursor: 'zoom-out',
        }).appendTo('body');

        // Create an image element inside the container
        $('<img>').attr('src', src).css({
            maxWidth: '100%',
            maxHeight: '100%',
            margin: 'auto',
            display: 'block',
        }).appendTo($container);

        // Click anywhere on the container to close it
        $container.click(function(){
            $(this).remove();
        });
    });
</script> --}}

<script>
    $(document).ready(function() {
        $('#opd_id').change(function() {
            var ini = $(this);
            $.ajax({
                url:'{{ route('api.get.prokerprogram') }}',
                method: 'POST',
                dataType: 'json',
                data:{opd_id: ini.val(),_token: '{{ csrf_token() }}'},
            }).done(function(res){
                var el = '';
                el += '<option value="">Pilih Program</option>';
                $.each(res,function(index,value){
                    el += "<option value='" + value.program.nama_program + "' data-id='" + value.id + "'>" + value.program.nama_program + "</option>";
                });
                $('#nama_program').select2({
                    // width: '100%',
                    // placeholder: 'Pilih Program',
                });
                $('#nama_program').html(el);

            }).fail(function(err){
                console.log('terjadi kegagalan!');
            });
        });

        $('#nama_program').change(function() {
            var ini = $(this);
            var programId = ini.find('option:selected').data('id');
            $.ajax({
                url:'{{ route('api.get.prokerkegiatan') }}',
                method: 'POST',
                dataType: 'json',
                data:{proker_program_id: programId,_token: '{{ csrf_token() }}'},
            }).done(function(res){
                var el = '';
                el += '<option value="">Pilih Kegiatan</option>';
                $.each(res,function(index,value){
                    el += '<option value="' + value.kegiatan.nama_kegiatan + '" data-id="' + value.id + '">' + value.kegiatan.nama_kegiatan + '</option>';
                });
                $('#nama_kegiatan').select2({
                    // width: '100%',
                    // placeholder: 'Pilih Kegiatan',
                });
                $('#nama_kegiatan').html(el);

            }).fail(function(err){
                console.log('terjadi kegagalan!');
            });
        });

        $('#nama_kegiatan').change(function() {
            var ini = $(this);
            var subKegiatanId = ini.find('option:selected').data('id');
            $.ajax({
                url:'{{ route('api.get.prokersubkegiatan') }}',
                method: 'POST',
                dataType: 'json',
                data:{proker_kegiatan_id: subKegiatanId,_token: '{{ csrf_token() }}'},
            }).done(function(res){
                var el = '';
                el += '<option value="">Pilih Sub Kegiatan</option>';
                $.each(res,function(index,value){
                    el += '<option value="' + value.sub_kegiatan.nama_sub_kegiatan + '" data-id="' + value.id + '">' + value.sub_kegiatan.nama_sub_kegiatan + '</option>';
                });
                $('#nama_sub_kegiatan').select2({
                    // width: '100%',
                    // placeholder: 'Pilih Sub Kegiatan',
                });
                $('#nama_sub_kegiatan').html(el);

            }).fail(function(err){
                console.log('terjadi kegagalan!');
            });
        });
    });
</script>

<script>
    $(document).ready(function() {
        var table = $('#rincian-table').DataTable({
            processing: true,
            serverSide: true,
            language: {
                searchPlaceholder: 'Ketik disini untuk mencari data...',
                search: ''
            },
            ajax: {
                   url: "{{ route('getRincian') }}",
                   data: function(d) {
                        d.pd = $('#opd_id').val();
                        d.nama_program = $('#nama_program').val();
                        d.nama_kegiatan = $('#nama_kegiatan').val();
                        d.nama_sub_kegiatan = $('#nama_sub_kegiatan').val();
                        d.pengadaan = "{{ $pengadaan ?? '' }}"
                        d.metode = "{{ $metode ?? '' }}"
                        d.status = "{{ $status ?? '' }}"
                        d.kode_rekening = "{{ $kode_rekening ?? '' }}"
                    }
                },
            columns: [
                { data: 'kode_rekening', name: 'kode_rekening' },
                { data: 'opd_nama_perangkat_daerah', name: 'opd_nama_perangkat_daerah' },
                { data: 'nama_program', name: 'nama_program' },
                { data: 'nama_kegiatan', name: 'nama_kegiatan' },
                { data: 'nama_sub_kegiatan', name: 'nama_sub_kegiatan' },
                { data: 'uraian', name: 'uraian' },
                {   data: 'pagu',
                    name: 'pagu',
                    render: function(data, type, row, meta) {
                        if (type === 'display') {
                            return 'Rp' + data;
                        }
                        return data;
                    }
                },
                {   data: 'nilai_kontrak',
                    name: 'nilai_kontrak',
                    render: function(data, type, row, meta) {
                        if (type === 'display') {
                            return 'Rp' + data;
                        }
                        return data;
                    }
                },
                {   data: 'sisa_pagu',
                    name: 'sisa_pagu',
                    render: function(data, type, row, meta) {
                        if (type === 'display') {
                            return 'Rp' + data;
                        }
                        return data;
                    }
                },
                { data: 'realisasi_fisik', name: 'realisasi_fisik' },
                {   data: 'realisasi_keuangan',
                    name: 'realisasi_keuangan',
                    render: function(data, type, row, meta) {
                        if (type === 'display') {
                            return 'Rp' + data;
                        }
                        return data;
                    }
                },
                { data: 'realisasi_keuangan_pembayaran', name: 'realisasi_keuangan_pembayaran' },
                { data: 'realisasi_keuangan_penyerapan', name: 'realisasi_keuangan_penyerapan' },
                { data: 'penyedia', name: 'penyedia' },
                { data: 'permasalahan', name: 'permasalahan' },
                { data: 'tindak_lanjut', name: 'tindak_lanjut' },
                { data: 'dokumentasi', name: 'dokumentasi', orderable: false, searchable: false }
            ],
            createdRow: function(row, data, dataIndex) {
                // Remove non-numeric characters and convert to float for sorting
                var pagu = parseFloat(data.pagu.replace(/[^\d.-]/g, ''));
                var realisasi_fisik = parseFloat(data.realisasi_fisik.replace(/[^\d.-]/g, ''));
                var realisasi_keuangan = parseFloat(data.realisasi_keuangan.replace(/[^\d.-]/g, ''));
                var realisasi_keuangan_pembayaran = parseFloat(data.realisasi_keuangan_pembayaran.replace(/[^\d.-]/g, ''));
                var realisasi_keuangan_penyerapan = parseFloat(data.realisasi_keuangan_penyerapan.replace(/[^\d.-]/g, ''));

                // Set data-sort attribute with the processed numeric values
                $('td', row).eq(5).addClass('text-end text-nowrap').attr('data-sort', pagu);
                $('td', row).eq(6).addClass('text-center').attr('data-sort', realisasi_fisik);
                $('td', row).eq(7).addClass('text-end text-nowrap').attr('data-sort', realisasi_keuangan);
                $('td', row).eq(8).addClass('text-center').attr('data-sort', realisasi_keuangan_pembayaran);
                $('td', row).eq(9).addClass('text-center').attr('data-sort', realisasi_keuangan_penyerapan);
            },
            dom: 'lBfrtip',
            buttons: [
                'excel', 'csv'
            ],
                "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
        });
    });
</script>

<script type="text/javascript">
    $('.select-opd').select2({
    //    width:'100%',
    });

    $('.tanggal_awal_akhir').datepicker({
        format:'yyyy-mm-dd',
        autoclose:true,
    });



</script>

@endpush