@extends('layouts.index')

@section('content')

@include('layouts.include._breadcrumb')

<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">Data {{ $title }}</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="card-title">
                                <div class="row">
                                    <div class="col-6">
                                        <h3 class="mb-0">Data {{$title}}</h3>
                                    </div>
                                   
                                    <div class="col-6 text-end">
                                        <a href="{{route($url.'.create')}}" class="btn btn-sm btn-primary"><i
                                                class="fa fa-plus"> </i>Tambah Data</a>
                                    </div>
                                   
                                </div>
                            </div>
                            <div class="table-responsive py-4">
                                {{-- <form method="POST"
                                    action="{{route('rincian-sub-bidang.destroy-selected')}}">
                                    {{csrf_field()}}
                                    <input type="hidden" name="_method" value="DELETE">
                                    <input type="hidden" class="idrincians" name="rincianIds">
                                    <button type="submit" class="btn btn-sm btn-danger" id="delete-all-rincian"
                                    onclick="return hapus()"><i class="fa fa-trash"></i>
                                    Hapus<span id="delete-rincian-count">[ ]</span></button>
                                </form> --}}
                                <table class="table table-hover" id="example">
                                    <thead class="table-primary">
                                        <tr>
                                            {{-- <th>
                                                <input class="form-check-input check-all-rincian" type="checkbox" value="" id="flexCheckDefault">
                                            </th> --}}
                                            <th class="text-center">Nomor</th>
                                            <th>Nama {{ $title }}</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($programUnggulans as $programUnggulan)
                                            <tr>
                                                {{-- <td class="text-center">
                                                    <input class="form-check-input check-rincian" type="checkbox" data-id="{{ $rincianSubBidang->id }}" id="flexCheckDefault">
                                                </td> --}}
                                                <td class="text-center">{{ $programUnggulan->nomor }}</td>
                                                <td>{{ $programUnggulan->nama }}</td>
                                                <td>
                                                    <form method="POST" action="{{route($url.'.destroy', $programUnggulan['id'])}}">
                                                        {{csrf_field()}}
                                                        <input type="hidden" name="_method" value="DELETE">
                                                        
                                                        <a href="{{route($url.'.edit', $programUnggulan['id'])}}"
                                                            class="btn btn-sm btn-warning"><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>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center">Tidak ada Data</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('js')
<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(selectedRincian.join(',')); // Convert array to comma-separated string

            }else{
                event.preventDefault(); // Mencegah pengiriman formulir otomatis
                // Mengisi input dengan class idrincians dengan nilai array selectedIds
                $(".idrincians").val(selectedRincian.join(',')); // Convert array to comma-separated string

                Swal.fire({
                    title: 'Warning',
                    html: 'Rincian Sub Bidang 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