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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    @if ($authorize->add == '1')
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'">
                                            <i class="fas fa-plus me-1"> </i>
                                            <span class="font-weight-bold">Tambah</span>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center px-4">
                            <div class="d-flex gap-2">
                        <!-- Tombol Excel -->
                        <form action="{{ route('trs_kas.excel') }}" method="POST" target="_blank" style="display: inline;">
                            @csrf
                            <button type="button" class="btn btn-secondary btn-md" onclick="downloadExcel()">
                                <i class="fas fa-file-excel text-success"></i> Excel
                            </button>
                        </form>
                        <!-- Tombol PDF -->
                        <form action="{{ route('trs_kas.pdf') }}" method="POST" target="_blank" style="display: inline;">
                            @csrf
                            <button type="button" class="btn btn-secondary btn-md" onclick="downloadPDF()">
                                <i class="fas fa-file-pdf text-danger"></i> PDF
                            </button>
                        </form>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                             
                                <table id="list_{{ $dmenu }}" class="table table-striped table-bordered" style="width:100%">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th class="d-none">ID</th>
                                                <th>No</th>
                                                <th>Action</th>
                                                <th>Tanggal</th> 
                                                <th>Uraian</th>
                                                <th>Kepada</th>
                                                <th>Kategori</th>
                                                <th>Sub Kategori</th>
                                                <th>Nominal</th>
                                                <th class="d-none">Created_at</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        @php $no = 1; @endphp
                                            @foreach ($trs_kas as $transaksi)
                                            <tr>
                                                <td class="d-none">{{ $transaksi->id }}</td>
                                                <td>{{ $no++ }}</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Data"
                                                            onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($transaksi->id)) }}'">
                                                            <i class="fas fa-eye"> </i> View
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            @if ($authorize->edit == '1')
                                                            <li class="mb-2">
                                                                <button type="button"
                                                                    class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                    title="Edit Data"
                                                                    onclick="window.location='{{ url('/trskas/edit/' . encrypt($transaksi->id)) }}'">
                                                                    <i class="fas fa-edit"></i>
                                                                    <span class="font-weight-bold"> Edit</span>
                                                                </button>
                                                            </li>
                                                            @endif
                                                            @if ($authorize->delete == '1')
                                                            <li>
                                                                <button type="button" class="btn btn-sm btn-danger mx-2 mb-0 w-90 btn-delete"
                                                                    data-url="{{ route('trs_kas.destroy', encrypt($transaksi->id)) }}">
                                                                    <i class="fas fa-trash"></i>
                                                                    <span class="font-weight-bold"> Hapus</span>
                                                                </button>
                                                            </li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td>{{ \Carbon\Carbon::parse($transaksi->tanggal)->format('d-m-Y') }}</td>
                                                <td>{{ $transaksi->uraian }}</td>
                                                <td>{{ $transaksi->kepada }}</td>
                                                <td>{{ $transaksi->kategori }}</td>
                                                <td>{{ $transaksi->subkategori }}</td>
                                                <td style="text-align: right">Rp{{ number_format($transaksi->nominal, 0, ',', '.') }}</td>
                                                <td class="d-none" data-order="{{ $transaksi->created_at }}"></td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                                </div>
                            </div>
                        </div>

                    </div> {{-- End Card --}}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
<style>

    table.table {
        width: 100% !important;
        table-layout: fixed !important; 
    }

    table.table th, table.table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
    }

    .table-responsive {
        overflow-x: auto;
    }
    table.dataTable thead th, table.dataTable tbody td {
  white-space: nowrap;
}

</style>

@endpush


@push('js')
<script>
$(document).ready(function() {
    const tableId = '#list_{{ $dmenu }}';
    
    // Hapus instance DataTable jika sudah ada
    if ($.fn.DataTable.isDataTable(tableId)) {
        $(tableId).DataTable().destroy();
    }

    // Inisialisasi DataTable
    const dataTable = $(tableId).DataTable({
        order: [[9, "desc"]],
        autoWidth: false,
        scrollX: true,
        responsive: true,
        fixedHeader: true,
        language: {
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ baris",
            zeroRecords: "Maaf - Data tidak ada",
            info: "Data _START_ - _END_ dari _TOTAL_",
            infoEmpty: "Tidak ada data",
            infoFiltered: "(pencarian dari _MAX_ data)"
        }
    });

    // Setelah load total
    $(window).on('load', function() {
        dataTable.columns.adjust().draw(false);
        dataTable.fixedHeader.adjust(); // tambahan!
    });

    // Saat window resize / zoom berubah
    $(window).on('resize', function() {
        dataTable.columns.adjust().draw(false);
        dataTable.fixedHeader.adjust(); // supaya header sinkron lagi
    });
});

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.btn-delete').forEach(button => {
        button.addEventListener('click', function () {
            var url = this.getAttribute('data-url');

            Swal.fire({
                title: "Yakin hapus data?",
                text: "Data yang sudah dihapus tidak bisa dikembalikan!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Ya",
                cancelButtonText: "Batal",
                customClass: {
                    title: 'fs-5',
                    popup: 'rounded-3 shadow',
                    confirmButton: 'px-4 py-2 swal2-no-outline',
                    cancelButton: 'px-4 py-2 swal2-no-outline'
                },
                didOpen: () => {
                    document.querySelectorAll('.swal2-no-outline').forEach(btn => {
                        btn.style.outline = 'none';
                        btn.style.boxShadow = 'none';
                    });
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    var form = document.createElement("form");
                    form.method = "POST";
                    form.action = url;

                    var csrf = document.createElement("input");
                    csrf.type = "hidden";
                    csrf.name = "_token";
                    csrf.value = "{{ csrf_token() }}";

                    var method = document.createElement("input");
                    method.type = "hidden";
                    method.name = "_method";
                    method.value = "DELETE";

                    form.appendChild(csrf);
                    form.appendChild(method);
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    });
});
</script>

<script>
    function downloadExcel() {
        fetch("{{ route('trs_kas.excel') }}", {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            }
        })
        .then(response => {
            if (!response.ok) throw new Error('Network response was not OK');
            return response.blob();
        })
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = "transaksi_kas.xlsx";
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        })
        .catch(error => {
            alert("Gagal mengunduh file.");
            console.error(error);
        });
    }
</script>
<script>
    function downloadPDF() {
        fetch("{{ route('trs_kas.pdf') }}", {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            }
        })
        .then(response => {
            if (!response.ok) throw new Error('Network response was not OK');
            return response.blob();
        })
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = "transaksi_kas.pdf";
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        })
        .catch(error => {
            alert("Gagal mengunduh file PDF.");
            console.error(error);
        });
    }
</script>
@endpush