@extends('layouts.index')

@push('css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.min.css"
    rel="stylesheet">

<style>
    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
        color: white !important;
        font-weight: 700 !important;
    }

</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">Identifikasi Paket 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-lg-12">
                    <div class="card">
                        <!-- Card body -->
                        <div class="card-body">
                            <div class="card-title">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h3 class="mb-0">Identifikasi Paket Pekerjaan</h3>
                                    </div>
                                    <div class="col-6 text-end">
                                        {{-- <a href="{{ route('proker.index', ['pd' => $rincian_kegiatan->ProkerKegiatan->ProkerProgram->proker->opd_id, 'tahun' => $rincian_kegiatan->ProkerKegiatan->ProkerProgram->proker->tahun]) }}"
                                            class="btn btn-warning">
                                            Kembali
                                        </a> --}}
                                    </div>
                                </div>
                            </div>
                            <form method="POST" action="{{route($url.'.update', $rincian_kegiatan->id)}}">
                                {{csrf_field()}}
                                {{method_field('PUT')}}
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group my-3">
                                            <label class="form-control-label" for="program">Program </label>
                                            <input type="text" class="form-control" name="program"
                                                value=" [{{$rincian_kegiatan->prokerSubKegiatan->prokerKegiatan->prokerProgram->program->kode}}] {{$rincian_kegiatan->prokerSubKegiatan->prokerKegiatan->prokerProgram->program->nama_program}}"
                                                readonly>
                                        </div>

                                        <div class="form-group my-3">
                                            <label class="form-control-label" for="kegiatan">Kegiatan </label>
                                            <input type="text" class="form-control" name="kegiatan"
                                                value=" [{{$rincian_kegiatan->prokerSubKegiatan->prokerKegiatan->kegiatan->kode}}] {{$rincian_kegiatan->prokerSubKegiatan->prokerKegiatan->kegiatan->nama_kegiatan}}"
                                                readonly>
                                        </div>

                                        <div class="form-group my-3">
                                            <label class="form-control-label" for="sub_kegiatan_id"> Sub Kegiatan
                                            </label>
                                            <input type="text" class="form-control" name="kegiatan"
                                                value=" [{{$rincian_kegiatan->prokerSubKegiatan->subkegiatan->kode}}] {{$rincian_kegiatan->prokerSubKegiatan->subkegiatan->nama_sub_kegiatan}}"
                                                readonly>
                                        </div>

                                        <div class="form-group my-3">
                                            <label class="form-control-label" for="sub_kegiatan_id"> Paket Pekerjaan
                                            </label>
                                            <input type="text" class="form-control" name="kegiatan"
                                                value=" [{{$rincian_kegiatan->kode_rekening}}] {{$rincian_kegiatan->uraian}}"
                                                readonly>
                                        </div>
                                    </div>

                                    {{-- <div class="col-md-6">
                                        <div class="form-group my-3">
                                            <label class="form-control-label" for="kpa_id"> PA / KPA </label>
                                            <select class="form-control select2" data-toggle="select" name="kpa_id"
                                                disabled>
                                                <option value="">Pilih PA / KPA</option>
                                                @foreach($kpa as $data)
                                                <option value="{{$data->id}}" @if($data->id ==
                                                    $rincian_kegiatan->kpa_id) selected @endif>{{$data->nama}}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group my-3">
                                            <label class="form-control-label" for="pptk"> PPTK </label>
                                            <select class="form-control select2" data-toggle="select" name="pptk_id"
                                                disabled>
                                                <option value="">Pilih PPTK</option>
                                                @foreach($pptk as $data)
                                                <option value="{{$data->id}}" @if($data->id ==
                                                    $rincian_kegiatan->user_id) selected @endif>{{$data->nama}}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group my-3">
                                            <label class="form-control-label" for="sumber_dana"> Sumber Dana </label>
                                            <select class="form-control select2" data-toggle="select"
                                                name="sumber_dana_id" disabled>
                                                <option value="">Pilih Sumber Dana</option>
                                                @foreach($sumber_dana as $data)
                                                <option value="{{$data->id}}" @if($data->id ==
                                                    $rincian_kegiatan->sumber_dana_id) selected
                                                    @endif>{{$data->sumber_dana}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group my-3">
                                            <label class="form-control-label" for="bagian"> Bagian/Bidang/Kelurahan/UPT
                                            </label>
                                            <input type="text" class="form-control" name="bagian"
                                                value="{{ $rincian_kegiatan->bagian }}" required
                                                placeholder="Bagian/Bidang/Kelurahan/UPT" readonly>
                                        </div>
                                    </div> --}}
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-title">
                                <div class="row">
                                    <div class="col-6">
                                        <h3 class="mb-0">Detail Paket Pekerjaan</h3>
                                    </div>
                                    
                                    <div class="col-6 text-end">
                                        @role('admin|admin-PPTK|admin-opd')
                                        <a href="{{route('detail-rincian-kegiatan.create', ['rincian_kegiatan_id' => $rincian_kegiatan->id])}}"
                                            class="btn btn-sm btn-primary tambah-rincian"><i class="fa fa-plus"> </i>Tambah Detail Rincian
                                            Kegiatan</a>
                                        @endrole
                                    </div>
                                    
                                </div>
                                @if ($rincian_kegiatan->anggaran < $rincian_kegiatan->batas_anggaran)
                                    <div class="row">
                                        <div class="alert alert-warning my-3">
                                            <center>
                                                Sisa Pagu : Rp.{{ number_format($rincian_kegiatan->batas_anggaran-$rincian_kegiatan->anggaran) }} Silahkan Sesuaikan Paket Pekerjaan Anda Kembali!
                                            </center>
                                        </div>
                                    </div>
                                @endif
                                @if ($rincian_kegiatan->anggaran > $rincian_kegiatan->batas_anggaran)
                                    <div class="row">
                                        <div class="alert alert-danger my-3">
                                            <center>
                                                Pagu Lebih : Rp.{{ number_format($rincian_kegiatan->batas_anggaran-$rincian_kegiatan->anggaran) }} Silahkan Sesuaikan Paket Pekerjaan Anda Kembali!
                                            </center>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="table-responsive py-4">
                                <table class="table table-hover table-bordered">
                                    <thead style="background-color: rgb(225, 245, 240)">
                                        <tr>
                                            <th class="text-center" rowspan="2">
                                                <input class="form-check-input check-all-rincian" type="checkbox" value="" id="flexCheckDefault">
                                            </th>
                                            <th rowspan="2">No</th>
                                            {{-- <th rowspan="2">Kode Rekening</th> --}}

                                            <th rowspan="2">Uraian</th>
                                            
                                            <th class="text-center" colspan="3">Rincian Perhitungan</th>
                                            <th rowspan="2">Aksi</th>
                                        </tr>
                                        <tr>
                                            <th>Volume</th>
                                            <th>Satuan</th>
                                            <th>Jumlah Anggaran</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td></td>
                                            <td colspan="3">{{ $rincian_kegiatan->uraian }}</td>
                                            <td></td>
                                            {{-- <td></td> --}}
                                            <td>Rp. {{ number_format($rincian_kegiatan->pagu) }}</td>
                                            {{-- <td>100</td> --}}
                                            <td></td>
                                            {{-- <td>TES</td> --}}
                                        </tr>
                                        @php $num = 1; @endphp
                                        @foreach($rincian_kegiatan->detailrincianKegiatan->chunk(30) as $chunk)
                                            @foreach($chunk as $data)
                                            <tr>
                                                <td class="text-center">
                                                    <input class="form-check-input check-rincian" type="checkbox" data-id="{{ $data->id }}" id="flexCheckDefault">
                                                </td>
                                                {{-- <td>{{$num++}}</td> --}}
                                                <td>{{$data->id}}</td>
                                                {{-- <td>{{$data->kode_rekening}}</td> --}}
                                                <td>{{$data->uraian}}</td>
                                                <td>{{$data->volume}}</td>
                                                <td>{{$data->satuan}}</td>
                                                <td class="text-nowrap">Rp. {{number_format($data->pagu)}}</td>
                                                {{-- <td>{{ \Helper::hitungPersen($data->pagu, $proker_sub_kegiatan->anggaran) }}
                                                </td> --}}
                                                <td>
                                                    @role('admin|admin-PPTK|admin-opd')
                                                    <form method="POST"
                                                        action="{{route('detail-rincian-kegiatan.destroy', $data['id'])}}">
                                                        {{csrf_field()}}
                                                        <input type="hidden" name="_method" value="DELETE">
                                                        
                                                        {{-- <a href="{{route('rincian-kegiatan.edit', $data['id'])}}"
                                                            class="btn btn-sm btn-warning m-1"><i class="fa fa-pen">
                                                            </i>Edit</a> --}}
                                                        
                                                        <button type="submit" class="btn btn-sm btn-danger sweetalert-hapus"
                                                        onclick="return hapus()"><i class="fa fa-trash"></i>
                                                        Hapus</button>

                                                    </form>
                                                    @endrole
                                                </td>
                                            </tr>
                                            @endforeach
                                        @endforeach
                                    </tbody>                                                                            
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
    <script>

        $(document).ready(function() {
            // Ambil elemen tombol dan checkbox
            const $restoreButton = $('#restore-all');
            const $checkboxes = $('.check-histori');
            const selectedIds = [];

            // Fungsi untuk mengubah teks tombol
            function updateRestoreButtonText() {
                const count = $checkboxes.filter(':checked').length;
                const buttonText = count > 0 ? `[${count}]` : '[ ]';
                $('#restore-count').text(buttonText);
                $('#delete-count').text(buttonText);
            }
            updateRestoreButtonText();
            $checkboxes.on('change', updateRestoreButtonText);
            
            // Function to check all checkboxes
            function checkAllCheckboxes() {
                // Get all checkboxes using querySelectorAll
                const checkboxes = document.querySelectorAll('.check-histori');
                
                // Set the checked property to true for each checkbox
                checkboxes.forEach(checkbox => {

                    if (!checkbox.checked) {
                        checkbox.checked = true;
                        const id = $(checkbox).data('id');
                        selectedIds.push(id);
                    }
                });
            }

            $('.check-histori').on('change', function(){
                let count = $('.check-histori').length;
                const id = $(this).data('id');

                if ($(this).prop('checked')) {
                selectedIds.push(id);
                } else {
                    const index = selectedIds.indexOf(id);
                    if (index !== -1) {
                        selectedIds.splice(index, 1);
                    }
                }

                if ($('.check-histori').filter(':checked').length === count) {
                    $('.check-all').prop('checked', true);
                }else{
                    $('.check-all').prop('checked', false);
                }

                console.log(selectedIds);
            });

            $('.check-all').on('change', function() {
                if (this.checked) {
                    checkAllCheckboxes();
                    updateRestoreButtonText();
                    console.log(selectedIds);
                } else {
                    // If the "Select All" checkbox is unchecked, uncheck all checkboxes
                    $('.check-histori').prop('checked', false);
                    updateRestoreButtonText();
                    selectedIds.length = 0;
                    console.log(selectedIds);
                }
            });
            
            $("#restore-all").click(function () {
                if (!selectedIds.length) {
                    event.preventDefault();
                }else{
                    // Mengisi input dengan class rincianIds dengan nilai array selectedIds
                    event.preventDefault();
                    $(".rincianIds").val(JSON.stringify(selectedIds));
                    Swal.fire({
                        title: 'Warning',
                        html: 'Paket Pekerjaan yang dipilih[' + selectedIds.length + '] akan dikembalikan!',
                        icon: 'warning',
                        confirmButtonText: 'Lanjutkan',
                        showCancelButton: true,
                        allowOutsideClick: false,
                        showConfirmButton: true,
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $(this).closest('form').submit(); // Jika pengguna mengklik "Lanjutkan", submit formulir
                        }
                    });
                }

            });

            $("#delete-all").click(function () {

                if (!selectedIds.length) {
                    event.preventDefault();
                    $(".deletedrincianIds").val(JSON.stringify(selectedIds));
                }else{
                    // Mengisi input dengan class rincianIds dengan nilai array selectedIds
                    event.preventDefault();
                    $(".deletedrincianIds").val(JSON.stringify(selectedIds));
                    Swal.fire({
                        title: 'Warning',
                        html: 'Paket Pekerjaan yang dipilih[' + selectedIds.length + '] akan dihapus permanen!',
                        icon: 'warning',
                        confirmButtonText: 'Lanjutkan',
                        showCancelButton: true,
                        allowOutsideClick: false,
                        showConfirmButton: true,
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $(this).closest('form').submit(); // Jika pengguna mengklik "Lanjutkan", submit formulir
                        }
                    });
                }

            });
        });

        $('.tambah-rincian').click(function (event) {
            
            let anggaran = {{ $rincian_kegiatan->anggaran }};
            let batas_anggaran = {{ $rincian_kegiatan->batas_anggaran }};
            
            if (anggaran >= batas_anggaran ) {
                event.preventDefault();
                Swal.fire({
                    title: 'Warning',
                    html: 'Anggaran Telah Mencapai Batas Anggaran <br> Silahkan Sesuaikan Paket Pekerjaan Kembali!',
                    icon: 'warning',
                    // confirmButtonText: 'Lanjutkan',
                    showCancelButton: true,
                    allowOutsideClick: false, // Tidak mengizinkan klik di luar kotak dialog
                    showConfirmButton: false, // Tombol "Save/OK" tidak ditampilkan
                });
            }
            
        });
    </script>


<script>

    $(document).ready(function() {
        // Ambil elemen tombol dan checkbox
        const $checkboxes = $('.check-rincian');
        const selectedRincian = [];

        // Fungsi untuk mengubah teks tombol
        function updateDeleteButtonText() {
            const count = $checkboxes.filter(':checked').length;
            const buttonText = count > 0 ? `[${count}]` : '[ ]';
            $('#delete-rincian-count').text(buttonText);
        }
        updateDeleteButtonText();
        $checkboxes.on('change', updateDeleteButtonText);
        
        // Function to check all checkboxes
        function checkAllCheckboxes() {
            // Get all checkboxes using querySelectorAll
            const checkboxes = document.querySelectorAll('.check-rincian');
            
            // Set the checked property to true for each checkbox
            checkboxes.forEach(checkbox => {

                if (!checkbox.checked) {
                    checkbox.checked = true;
                    const id = $(checkbox).data('id');
                    selectedRincian.push(id);
                }
            });
        }

        $('.check-rincian').on('change', function(){
            let count = $('.check-rincian').length;
            const id = $(this).data('id');

            if ($(this).prop('checked')) {
            selectedRincian.push(id);
            } else {
                const index = selectedRincian.indexOf(id);
                if (index !== -1) {
                    selectedRincian.splice(index, 1);
                }
            }

            if ($('.check-rincian').filter(':checked').length === count) {
                $('.check-all-rincian').prop('checked', true);
            }else{
                $('.check-all-rincian').prop('checked', false);
            }

            console.log(selectedRincian);
        });

        $('.check-all-rincian').on('change', function() {
            if (this.checked) {
                checkAllCheckboxes();
                updateDeleteButtonText();
                console.log(selectedRincian);
            } else {
                // If the "Select All" checkbox is unchecked, uncheck all checkboxes
                $('.check-rincian').prop('checked', false);
                updateDeleteButtonText();
                selectedRincian.length = 0;
                console.log(selectedRincian);
            }
        });

        $("#delete-all-rincian").click(function () {

            if (!selectedRincian.length) {
                event.preventDefault();
                $(".idrincians").val(JSON.stringify(selectedRincian));
            }else{
                event.preventDefault(); // Mencegah pengiriman formulir otomatis
                // Mengisi input dengan class idrincians dengan nilai array selectedIds
                $(".idrincians").val(JSON.stringify(selectedRincian));
                Swal.fire({
                    title: 'Warning',
                    html: 'Paket Pekerjaan yang dipilih[' + selectedRincian.length + '] akan dihapus!',
                    icon: 'warning',
                    confirmButtonText: 'Lanjutkan',
                    showCancelButton: true,
                    allowOutsideClick: false,
                    showConfirmButton: true,
                }).then((result) => {
                    if (result.isConfirmed) {
                        $(this).closest('form').submit(); // Jika pengguna mengklik "Lanjutkan", submit formulir
                    }
                });
            }

        });
    });

</script>
@endpush