@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    @if ($authorize->add == '1')
                        <button class="btn btn-primary mb-0"
                            onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                            <i class="fas fa-bolt me-1"></i>
                            <span class="font-weight-bold">Execute</span>
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-5">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            {{-- Date Filter --}}
                            <div class="mb-3 row">
                                <label class="col-lg-3 col-form-label">Date</label>
                                <div class="col-lg-9 row gx-2">
                                    <div class="col-lg-6">
                                        <input type="date" class="form-control" name="rpureq_date_from" required>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="date" class="form-control" name="rpureq_date_to" required>
                                    </div>
                                </div>
                            </div>

                            {{-- Kategori Filter --}}
                            <div class="mb-3 row">
                                <label class="col-lg-3 col-form-label">Kategori</label>
                                <div class="col-lg-9 row gx-2">
                                    <div class="col-10">
                                        <select class="form-control select2-display-only" name="rp_kategori[]" multiple="multiple" id="rp_kategori" readonly>
                                            @foreach ($kategori as $kat)
                                                <option value="{{ $kat->sub_kategori_kas }}">{{ $kat->sub_kategori_kas }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="rp_kategori_name" id="rp_kategori_name">
                                    </div>
                                    <div class="col-2 text-end">
                                        <button type="button" class="btn btn-primary w-100" id="rp-filter-Kategori" data-bs-toggle="modal" data-bs-target="#modalKategori">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {{-- User Create Filter --}}
                            <div class="mb-3 row">
                                <label class="col-lg-3 col-form-label">User Create</label>
                                <div class="col-lg-9 row gx-2">
                                    <div class="col-10">
                                        <select class="form-control select2-multiple" name="user_create[]" multiple="multiple" id="user_create" readonly>
                                            @foreach ($users as $user)
                                                <option value="{{ $user->username }}">{{ $user->username }} - {{ $user->firstname }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="user_create_name" id="user_create_name">
                                    </div>
                                    <div class="col-2 text-end">
                                        <button type="button" class="btn btn-primary w-100" id="rp-filter-UserCreate" data-bs-toggle="modal" data-bs-target="#modalUserCreate">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            {{-- User Update Filter --}}
                            <div class="mb-3 row">
                                <label class="col-lg-3 col-form-label">User Update</label>
                                <div class="col-lg-9 row gx-2">
                                    <div class="col-10">
                                        <select class="form-control select2-multiple" name="user_update[]" multiple="multiple" id="user_update" readonly>
                                            @foreach ($users as $user)
                                                <option value="{{ $user->username }}">{{ $user->username }} - {{ $user->firstname }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="user_update_name" id="user_update_name">
                                    </div>
                                    <div class="col-2 text-end">
                                        <button type="button" class="btn btn-primary w-100" id="rp-filter-Userupdate" data-bs-toggle="modal" data-bs-target="#modalUserUpdate">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {{-- Kepada Filter --}}
                            <div class="mb-3 row">
                                <label class="col-lg-3 col-form-label">Kepada</label>
                                <div class="col-lg-9 row gx-2">
                                    <div class="col-10">
                                        <select class="form-control select2-multiple" name="kepada[]" multiple="multiple" id="kepada" readonly>
                                            @foreach ($daftar_kepada as $item)
                                                <option value="{{ $item->kepada }}">{{ $item->kepada }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="kepada_name" id="kepada_name">
                                    </div>
                                    <div class="col-2 text-end">
                                        <button type="button" class="btn btn-primary w-100" id="rp-filter-Kepada" data-bs-toggle="modal" data-bs-target="#modalKepada">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>


                            <code>*) Kosongi Filter Untuk Menampilkan Semua Transaksi</code>
                            <hr class="horizontal dark">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Pilih Kategori --}}
    <div class="modal fade" id="modalKategori" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header text-black">
                    <h5 class="modal-title mb-0">Pilih Kategori</h5>
                    <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="tableKategori">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th scope="col" style="width: 5%; text-align:center;">Check Box</th>
                                    <th scope="col" style="text-align:center;">Kategori</th>
                                    <th scope="col" style="text-align:center;">Sub Kategori</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($kategori as $kat)
                                    <tr>
                                        <td style="text-align:center">
                                            <div class="row_checkbox">
                                                <input class="form-check-input kategori-checkbox" type="checkbox"
                                                    value="{{ $kat->sub_kategori_kas }}"
                                                    id="kategori_{{ $kat->id_kt_kas }}">
                                            </div>
                                        </td>
                                        <td>{{ $kat->nama_kategori_kas }}</td>
                                        <td>{{ $kat->sub_kategori_kas }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Tutup
                    </button>
                    <button type="button" class="btn btn-primary" onclick="applySelectedKategori()">
                        <i class="fas fa-check me-1"></i> Terapkan
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Pilih User Create --}}
    <div class="modal fade" id="modalUserCreate" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header text-black">
                    <h5 class="modal-title mb-0">Pilih User Create</h5>
                    <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="tableUserCreate">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th scope="col" style="width: 5%; text-align:center;">Check Box</th>
                                    <th scope="col" style="text-align:center;">Username</th>
                                    <th scope="col" style="text-align:center;">Firstname</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    <tr>
                                        <td style="text-align:center">
                                            <div class="row_checkbox">
                                                <input class="form-check-input user-create-checkbox" type="checkbox"
                                                    value="{{ $user->username }}"
                                                    data-name="{{ $user->username }} - {{ $user->firstname }}"
                                                    id="user_create_{{ $user->id }}">
                                            </div>
                                        </td>
                                        <td>{{ $user->username }}</td>
                                        <td>{{ $user->firstname }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Tutup
                    </button>
                    <button type="button" class="btn btn-primary" onclick="applySelectedUserCreate()">
                        <i class="fas fa-check me-1"></i> Terapkan
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Pilih User Update --}}
    <div class="modal fade" id="modalUserUpdate" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header text-black">
                    <h5 class="modal-title mb-0">Pilih User Update</h5>
                    <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="tableUserUpdate">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th scope="col" style="width: 5%; text-align:center;">Check Box</th>
                                    <th scope="col" style="text-align:center;">Username</th>
                                    <th scope="col" style="text-align:center;">Firstname</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    <tr>
                                        <td style="text-align:center">
                                            <div class="row_checkbox">
                                                <input class="form-check-input user-update-checkbox" type="checkbox"
                                                    value="{{ $user->username }}"
                                                    data-name="{{ $user->username }} - {{ $user->firstname }}"
                                                    id="user_update_{{ $user->id }}">
                                            </div>
                                        </td>
                                        <td>{{ $user->username }}</td>
                                        <td>{{ $user->firstname }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Tutup
                    </button>
                    <button type="button" class="btn btn-primary" onclick="applySelectedUserUpdate()">
                        <i class="fas fa-check me-1"></i> Terapkan
                    </button>
                </div>
            </div>
        </div>
    </div>

{{-- Modal Pilih Kepada --}}
<div class="modal fade" id="modalKepada" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header text-black">
                <h5 class="modal-title mb-0">Pilih Kepada</h5>
                <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="tableKepada">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th style="width: 5%; text-align:center;">Check Box</th>
                                <th style="text-align:center;">Nama</th>
                            </tr>
                        </thead>
                        <tbody>
                                @foreach ($daftar_kepada as $item)
                                    <tr>
                                        <td style="text-align:center">
                                            <input class="form-check-input kepada-checkbox" type="checkbox"
                                                value="{{ $item->kepada }}"
                                                data-name="{{ $item->kepada }}"
                                                id="kepada_{{ $loop->index }}">
                                        </td>
                                        <td>{{ $item->kepada }}</td>
                                    </tr>
                                @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i> Tutup
                </button>
                <button type="button" class="btn btn-primary" onclick="applySelectedKepada()">
                    <i class="fas fa-check me-1"></i> Terapkan
                </button>
            </div>
        </div>
    </div>
</div>



    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include("js.{$dmenu}")
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2-display-only, .select2-multiple').select2({
        placeholder: "Pilih melalui tombol",
        allowClear: false
    }).on('select2:opening', function(e) {
        e.preventDefault();
        if ($(this).attr('id') === 'rp_kategori') {
            $('#modalKategori').modal('show');
        } else if ($(this).attr('id') === 'user_create') {
            $('#modalUserCreate').modal('show');
        } else if ($(this).attr('id') === 'user_update') {
            $('#modalUserUpdate').modal('show');
        } else if (id === 'kepada') {
           $('#modalKepada').modal('show');
        }
    });

    // Make select2 display-only
    $('.select2-display-only, .select2-multiple').next('.select2-container').css({
        'pointer-events': 'none',
        'cursor': 'default'
    });

    // Fungsi untuk menghapus tombol "×" di Select2
    function removeSelect2RemoveButton() {
        $('.select2-selection__choice__remove').remove();
    }

    // Panggil saat awal load
    removeSelect2RemoveButton();

    // Panggil lagi setiap kali select2 berubah
    $('select').on('change', function() {
        removeSelect2RemoveButton();
    });

    // Initialize DataTables
$('#tableKategori, #tableUserCreate, #tableUserUpdate, #tableKepada').DataTable({
        language: {
            search: "Cari :",
            lengthMenu: "Tampilkan _MENU_ baris",
            zeroRecords: "Maaf - Data tidak ada",
            info: "Halaman _PAGE_ dari _PAGES_",
            infoEmpty: "Tidak ada data",
            infoFiltered: "(pencarian dari _MAX_ data)"
        },
        destroy: true,
        responsive: true,
    });

    // Pre-select checkboxes when modal opens
    $('#modalKategori').on('show.bs.modal', function() {
        const currentValues = $('#rp_kategori').val() || [];
        $('.kategori-checkbox').prop('checked', false);
        currentValues.forEach(value => {
            $(`.kategori-checkbox[value="${value}"]`).prop('checked', true);
        });
    });

    $('#modalUserCreate').on('show.bs.modal', function() {
        const currentValues = $('#user_create').val() || [];
        $('.user-create-checkbox').prop('checked', false);
        currentValues.forEach(value => {
            $(`.user-create-checkbox[value="${value}"]`).prop('checked', true);
        });
    });

    $('#modalUserUpdate').on('show.bs.modal', function() {
        const currentValues = $('#user_update').val() || [];
        $('.user-update-checkbox').prop('checked', false);
        currentValues.forEach(value => {
            $(`.user-update-checkbox[value="${value}"]`).prop('checked', true);
        });
    });

    $('#modalKepada').on('show.bs.modal', function() {
        const currentValues = $('#kepada').val() || [];
        $('.kepada-checkbox').prop('checked', false);
        currentValues.forEach(value => {
            $(`.kepada-checkbox[value="${value}"]`).prop('checked', true);
        });
    });



    // Handle form submission to ensure values are set
    $('#{{ $dmenu }}-form').on('submit', function(e) {
        const kategoriValues = $('.kategori-checkbox:checked').map(function() {
            return $(this).val();
        }).get();
        $('#rp_kategori').val(kategoriValues).trigger('change');

        const userCreateValues = $('.user-create-checkbox:checked').map(function() {
            return $(this).val();
        }).get();
        $('#user_create').val(userCreateValues).trigger('change');

        const userUpdateValues = $('.user-update-checkbox:checked').map(function() {
            return $(this).val();
        }).get();
        $('#user_update').val(userUpdateValues).trigger('change');

        const kepadaValues = $('.kepada-checkbox:checked').map(function() {
            return $(this).val();
        }).get();
        $('#kepada').val(kepadaValues).trigger('change');


        // Panggil fungsi hapus tombol "×" lagi!
        removeSelect2RemoveButton();

        console.log('Submitting with values:', {
            rp_kategori: $('#rp_kategori').val(),
            user_create: $('#user_create').val(),
            user_update: $('#user_update').val(),
            kepada: $('#kepada').val()
        });
    });
});

// Fungsi applySelectedKategori
function applySelectedKategori() {
    var table = $('#tableKategori').DataTable();
    var selectedKategori = [];
    var selectedKategoriText = [];

    table.rows().every(function () {
        var $row = $(this.node());
        var checkbox = $row.find('.kategori-checkbox');

        if (checkbox.prop('checked')) {
            selectedKategori.push(checkbox.val());
            selectedKategoriText.push($row.find('td:eq(2)').text());
        }
    });

    $('#rp_kategori').val(selectedKategori).trigger('change');
    $('#rp_kategori_name').val(selectedKategoriText.join(', '));
    $('#modalKategori').modal('hide');
}

// Fungsi applySelectedUserCreate 
function applySelectedUserCreate() {
    var table = $('#tableUserCreate').DataTable();
    var selectedUsers = [];
    var selectedNames = [];

    table.rows().every(function () {
        var $row = $(this.node());
        var checkbox = $row.find('.user-create-checkbox');

        if (checkbox.prop('checked')) {
            selectedUsers.push(checkbox.val());
            selectedNames.push($row.find('td:eq(2)').text());
        }
    });

    $('#user_create').val(selectedUsers).trigger('change');
    $('#user_create_name').val(selectedNames.join(', '));
    $('#modalUserCreate').modal('hide');
}

// Fungsi applySelectedUserUpdate 
function applySelectedUserUpdate() {
    var table = $('#tableUserUpdate').DataTable();
    var selectedUsers = [];
    var selectedNames = [];

    table.rows().every(function () {
        var $row = $(this.node());
        var checkbox = $row.find('.user-update-checkbox');

        if (checkbox.prop('checked')) {
            selectedUsers.push(checkbox.val());
            selectedNames.push($row.find('td:eq(2)').text());
        }
    });

    $('#user_update').val(selectedUsers).trigger('change');
    $('#user_update_name').val(selectedNames.join(', '));
    $('#modalUserUpdate').modal('hide');
}

function applySelectedKepada() {
    const table = $('#tableKepada').DataTable();
    const selectedValues = [];
    const selectedNames = [];

    table.rows().every(function () {
        const $row = $(this.node());
        const checkbox = $row.find('.kepada-checkbox');

        if (checkbox.prop('checked')) {
            selectedValues.push(checkbox.val());
            selectedNames.push($row.find('td:eq(1)').text());
        }
    });

    $('#kepada').val(selectedValues).trigger('change');
    $('#kepada_name').val(selectedNames.join(', '));
    $('#modalKepada').modal('hide');
}

</script>
@endpush
@push('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>

    .select2-display-only + .select2-container .select2-selection--multiple {
        background-color: #f8f9fa !important;
        cursor: default !important;
        border: 1px solid #ced4da !important;
    }

    #rp_kategori + .select2-container .select2-selection__choice__remove {
        display: none !important;
    }


    .select2-display-only + .select2-container .select2-selection--multiple .select2-selection__choice {
        background-color: #e9ecef !important;
        border: 1px solid #ced4da !important;
        color: #495057 !important;
        padding-right: 5px !important;
    }

    .select2-container--default .select2-selection--multiple {
        min-height: 38px;
        padding: 5px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff;
        border-color: #006fe6;
        color: white;
    }

    .input-group .form-control,
    .input-group .btn {
        height: calc(2.25rem + 2px);
    }

    .no-click {
        pointer-events: none;
        background-color: #e9ecef;
    }
</style>
@endpush