@push('styles')
<style>
    .modal-xl {
        max-width: 95%;
    }

    .modal-content {
        border: none;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    .modal-header {
        border-radius: 15px 15px 0 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-bottom: none;
    }

    .modal-header .btn-close {
        filter: brightness(0) invert(1);
    }

    .card {
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    }

    .card-header {
        border-radius: 10px 10px 0 0;
        font-weight: 600;
    }

    .table-hover tbody tr:hover {
        background-color: rgba(0,123,255,0.05);
        transform: scale(1.01);
        transition: all 0.2s ease;
    }

    .badge {
        font-size: 0.8em;
        padding: 0.5em 0.8em;
        animation: pulse 2s infinite;
    }

    .btn-group .btn {
        border-radius: 5px;
        margin: 0 2px;
        transition: all 0.3s ease;
    }

    .btn-group .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    }

    .modal-backdrop {
        background-color: rgba(0,0,0,0.6);
    }

    .text-success {
        color: #28a745 !important;
    }

    .text-danger {
        color: #dc3545 !important;
    }

    .text-warning {
        color: #ffc107 !important;
    }

    .bg-gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .table-info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
    }

    .table-success {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
    }

    .border-primary {
        border-color: #007bff !important;
    }

    .border-success {
        border-color: #28a745 !important;
    }

    .border-info {
        border-color: #17a2b8 !important;
    }

    .border-warning {
        border-color: #ffc107 !important;
    }

    .border-danger {
        border-color: #dc3545 !important;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .modal.show .modal-content {
        animation: fadeIn 0.3s ease-out;
    }

    .card-body h4 {
        font-weight: 700;
        margin-bottom: 0;
    }

    .table-borderless td {
        padding: 0.5rem 0;
        border: none;
    }

    .table-borderless strong {
        color: #495057;
    }

    .modal-footer {
        border-top: 1px solid #dee2e6;
        border-radius: 0 0 15px 15px;
    }

    .modal-footer .btn {
        border-radius: 8px;
        padding: 0.5rem 1.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .modal-footer .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .btn-info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        border: none;
    }

    .btn-info:hover {
        background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
    }

    .btn-primary {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        border: none;
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    }

    .btn-secondary {
        background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
        border: none;
    }

    .btn-secondary:hover {
        background: linear-gradient(135deg, #545b62 0%, #3d4449 100%);
    }

    /* Custom styles untuk tombol detail */
    .btn-detail {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        border: none;
        color: white;
        font-weight: 500;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .btn-detail:hover {
        background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        color: white;
    }

    .btn-detail:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Perbaikan tampilan tabel */
    .table-striped > tbody > tr:nth-of-type(odd) > td {
        background-color: rgba(0,0,0,.02);
    }

    .table-hover > tbody > tr:hover > td {
        background-color: rgba(0,123,255,.075);
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    /* Perbaikan untuk modal backdrop */
    .modal-backdrop.show {
        opacity: 0.6;
    }

    /* Responsive improvements */
    @media (max-width: 768px) {
        .modal-xl {
            max-width: 100%;
            margin: 0.5rem;
        }

        .btn-group {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .btn-group .btn {
            margin: 0;
        }
    }

    /* Perbaikan untuk tabel detail barang */
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
        padding: 0.75rem;
        vertical-align: middle;
    }

    .table-info th {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
        font-weight: 600;
        text-align: center;
    }

    .table-success th {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        font-weight: 600;
    }

    .table-success td {
        background-color: rgba(40, 167, 69, 0.1);
        font-weight: 600;
    }

    /* Perbaikan untuk badge jumlah */
    .badge.bg-primary {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
        font-size: 0.85em;
        padding: 0.5em 0.8em;
        border-radius: 6px;
    }
</style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('livewire:initialized', () => {
            @this.on('openNewTab', (event) => {
                const url = event[0];
                if (url) {
                    window.open(url, '_blank');
                }
            });

            // Menutup modal dengan escape key
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape') {
                    @this.call('closeDetailModal');
                }
            });

            // Menutup modal dengan klik backdrop
            document.addEventListener('click', function(event) {
                if (event.target.classList.contains('modal-backdrop')) {
                    @this.call('closeDetailModal');
                }
            });
        });
    </script>
@endpush

<div>
    {{-- CARD KEUANGAN --}}
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Laporan Laba Rugi</h5>
        </div>
        <div class="card-body">
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <div class="d-flex justify-content-between align-content-center">
                                <h6 class="mb-0 d-flex align-items-center">Filter Laporan</h6>
                                <button class="btn btn-light btn-sm" wire:click="cetakLaporan">
                                    <i class="fas fa-print me-1"></i> Cetak Laporan
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- Info Filter Aktif -->
                            <div class="alert alert-info mb-3">
                                <i class="fas fa-filter me-2"></i>
                                <strong>Filter Aktif:</strong> {{ $keteranganFilter }}
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="filterType">Tipe Filter</label>
                                        <select class="form-select" wire:model.live="filterType">
                                            <option value="all">Semua Data</option>
                                            <option value="date">Filter Tanggal</option>
                                            <option value="month">Filter Bulan</option>
                                            <option value="year">Filter Tahun</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                @if ($filterType == 'date')
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="tanggalAwal">Tanggal Awal</label>
                                            <input type="date" class="form-control" wire:model.live="tanggalAwal">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="tanggalAkhir">Tanggal Akhir</label>
                                            <input type="date" class="form-control" wire:model.live="tanggalAkhir">
                                        </div>
                                    </div>
                                @endif

                                @if ($filterType == 'month')
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="bulan">Bulan</label>
                                            <select class="form-select" wire:model.live="bulan">
                                                <option value="">Pilih Bulan</option>
                                                <option value="1">Januari</option>
                                                <option value="2">Februari</option>
                                                <option value="3">Maret</option>
                                                <option value="4">April</option>
                                                <option value="5">Mei</option>
                                                <option value="6">Juni</option>
                                                <option value="7">Juli</option>
                                                <option value="8">Agustus</option>
                                                <option value="9">September</option>
                                                <option value="10">Oktober</option>
                                                <option value="11">November</option>
                                                <option value="12">Desember</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="tahunBulan">Tahun</label>
                                            <select class="form-select" wire:model.live="tahunBulan">
                                                @for ($i = date('Y'); $i >= date('Y') - 5; $i--)
                                                    <option value="{{ $i }}">{{ $i }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                                @endif

                                @if ($filterType == 'year')
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="tahun">Tahun</label>
                                            <select class="form-select" wire:model.live="tahun">
                                                @for ($i = date('Y'); $i >= date('Y') - 5; $i--)
                                                    <option value="{{ $i }}">{{ $i }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Rekapitulasi Per Akun -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-success text-white">
                            <h6 class="mb-0">Rekapitulasi Pemasukan per Akun</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Akun</th>
                                            <th class="text-end">Jumlah</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($pemasukan as $item)
                                            @if(isset($item->akun) && $item->akun && $item->akun->kategori == 1)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>
                                                    {{ $item->akun->nama_akun }}
                                                </td>
                                                <td class="text-end">Rp {{ number_format($item->debit, 0, ',', '.') }}</td>
                                            </tr>
                                            @endif
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center">Tidak ada data pemasukan</td>
                                            </tr>
                                        @endforelse
                                        <tr class="table-success">
                                            <th colspan="2">Total Pemasukan</th>
                                            <th class="text-end">Rp {{ number_format($totalPemasukan, 0, ',', '.') }}</th>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-danger text-white">
                            <h6 class="mb-0">Rekapitulasi Pengeluaran per Akun</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Akun</th>
                                            <th class="text-end">Jumlah</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($pengeluaran as $item)
                                            @if(isset($item->akun) && $item->akun && $item->akun->kategori == 2)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>
                                                    {{ $item->akun->nama_akun }}
                                                </td>
                                                <td class="text-end">Rp {{ number_format($item->kredit, 0, ',', '.') }}</td>
                                            </tr>
                                            @endif
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center">Tidak ada data pengeluaran</td>
                                            </tr>
                                        @endforelse
                                        <tr class="table-danger">
                                            <th colspan="2">Total Pengeluaran</th>
                                            <th class="text-end">Rp {{ number_format($totalPengeluaran, 0, ',', '.') }}</th>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Summary Laba Rugi -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header {{ $labaRugi >= 0 ? 'bg-success' : 'bg-danger' }} text-white">
                            <h6 class="mb-0">Ringkasan Laba Rugi</h6>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-4">
                                    <h5>Total Pemasukan</h5>
                                    <h3 class="text-success">Rp {{ number_format($totalPemasukan, 0, ',', '.') }}</h3>
                                </div>
                                <div class="col-md-4">
                                    <h5>Total Pengeluaran</h5>
                                    <h3 class="text-danger">Rp {{ number_format($totalPengeluaran, 0, ',', '.') }}</h3>
                                </div>
                                <div class="col-md-4">
                                    <h5>{{ $labaRugi >= 0 ? 'Laba' : 'Rugi' }}</h5>
                                    <h3 class="{{ $labaRugi >= 0 ? 'text-success' : 'text-danger' }}">
                                        Rp {{ number_format(abs($labaRugi), 0, ',', '.') }}
                                    </h3>
                                </div>
                            </div>

                            <hr>

                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <h6>Periode: {{ $keteranganFilter }}</h6>
                                    @if ($labaRugi >= 0)
                                        <div class="alert alert-success">
                                            <i class="fas fa-check-circle me-2"></i>
                                            Perusahaan mengalami <strong>KEUNTUNGAN</strong> sebesar Rp {{ number_format($labaRugi, 0, ',', '.') }}
                                        </div>
                                    @else
                                        <div class="alert alert-danger">
                                            <i class="fas fa-exclamation-triangle me-2"></i>
                                            Perusahaan mengalami <strong>KERUGIAN</strong> sebesar Rp {{ number_format(abs($labaRugi), 0, ',', '.') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- CARD LAPORAN --}}
    <div class="card mt-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="m-0">Data Transaksi Penjualan (Margin)</h5>
            <button class="btn btn-primary" wire:click="cetakAllTransaksiLabaRugi">
                <i class="fas fa-print me-1"></i> Cetak Semua
            </button>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="laporanStartDate">Tanggal Mulai</label>
                    <input type="date" wire:model.live="laporanStartDate" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="laporanEndDate">Tanggal Selesai</label>
                    <input type="date" wire:model.live="laporanEndDate" class="form-control">
                </div>
                <div class="col-md-2">
                    <label for="selectedCustomer">Filter Customer</label>
                    <select wire:model.live="selectedCustomer" class="form-select">
                        <option value="">Semua Customer</option>
                        @foreach ($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="selectedCity">Filter Kota</label>
                    <select wire:model.live="selectedCity" class="form-select">
                        <option value="">Semua Kota</option>
                        @foreach ($cities as $city)
                            <option value="{{ $city->id }}">{{ $city->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="selectedSales">Filter Sales</label>
                    <select wire:model.live="selectedSales" class="form-select">
                        <option value="">Semua Sales</option>
                        @foreach ($sales as $sale)
                            <option value="{{ $sale->id }}">{{ $sale->nama }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead class="table-primary">
                        <tr>
                            <th>No</th>
                            <th>Tanggal</th>
                            <th>No Faktur</th>
                            <th>Customer</th>
                            <th>Kota</th>
                            <th>Sales</th>
                            <th class="text-end">Total</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if ($transaksi)
                            @forelse ($transaksi as $item)
                                <tr>
                                    <td>{{ $loop->iteration + $transaksi->firstItem() - 1 }}</td>
                                    <td>{{ \Carbon\Carbon::parse($item->tanggal_faktur)->format('d-m-Y') }}</td>
                                    <td>{{ $item->no_faktur }}</td>
                                    <td>{{ $item->customer->nama ?? '-' }}</td>
                                    <td>{{ $item->customer->kota->nama ?? '-' }}</td>
                                    <td>{{ $item->customer->sales->nama ?? '-' }}</td>
                                    <td class="text-end">Rp {{ number_format($item->total_harga_margin, 0, ',', '.') }}</td>
                                    <td class="text-center">
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-detail btn-sm me-1"
                                                wire:click="showDetail({{ $item->id }})"
                                                title="Detail Transaksi">
                                                <i class="fas fa-eye me-1"></i> Detail
                                            </button>
                                            <button class="btn btn-primary btn-sm"
                                                wire:click="cetakTransaksiLabaRugi('{{ $item->no_faktur }}')"
                                                title="Cetak Laporan">
                                                <i class="fas fa-print me-1"></i> Cetak
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center">Tidak ada data ditemukan</td>
                                </tr>
                            @endforelse
                        @endif
                    </tbody>
                </table>
            </div>
            @if ($transaksi?->hasPages())
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <p class="text-muted mb-0">
                            Showing {{ $transaksi->firstItem() }} to {{ $transaksi->lastItem() }} of {{ $transaksi->total() }} results
                        </p>
                    </div>
                    <div>
                        {{ $transaksi->links('vendor.livewire.custom-pagination') }}
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- MODAL DETAIL TRANSAKSI --}}
    @if($showDetailModal)
    <div class="modal fade show" style="display: block;" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header bg-gradient-primary text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-receipt me-2"></i>
                        @if($selectedTransaksi)
                            Detail Transaksi - {{ $selectedTransaksi->no_faktur }}
                        @else
                            Loading Detail Transaksi...
                        @endif
                    </h5>
                    <button type="button" class="btn-close btn-close-white" wire:click="closeDetailModal"></button>
                </div>
                <div class="modal-body">
                    @if($isLoadingDetail)
                        <div class="text-center py-5">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-3 text-muted">Memuat detail transaksi...</p>
                        </div>
                    @elseif($selectedTransaksi)
                        <!-- Informasi Transaksi -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="card border-primary">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Informasi Transaksi</h6>
                                    </div>
                                    <div class="card-body">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td width="40%"><strong>No. Faktur:</strong></td>
                                                <td>{{ $selectedTransaksi->no_faktur }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Tanggal Faktur:</strong></td>
                                                <td>{{ \Carbon\Carbon::parse($selectedTransaksi->tanggal_faktur)->format('d-m-Y') }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Jatuh Tempo:</strong></td>
                                                <td>{{ \Carbon\Carbon::parse($selectedTransaksi->jatuh_tempo)->format('d-m-Y') }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Status:</strong></td>
                                                <td>
                                                    @if($selectedTransaksi->status == 1)
                                                        <span class="badge bg-success">Lunas</span>
                                                    @else
                                                        <span class="badge bg-warning">Belum Lunas</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card border-success">
                                    <div class="card-header bg-success text-white">
                                        <h6 class="mb-0"><i class="fas fa-user me-2"></i>Informasi Customer</h6>
                                    </div>
                                    <div class="card-body">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td width="40%"><strong>Nama Customer:</strong></td>
                                                <td>{{ $selectedTransaksi->customer->nama ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Alamat:</strong></td>
                                                <td>{{ $selectedTransaksi->customer->alamat ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Kota:</strong></td>
                                                <td>{{ $selectedTransaksi->customer->kota->nama ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Sales:</strong></td>
                                                <td>{{ $selectedTransaksi->customer->sales->nama ?? '-' }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Detail Barang -->
                        <div class="card border-info">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0"><i class="fas fa-boxes me-2"></i>Detail Barang</h6>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover">
                                        <thead class="table-info">
                                            <tr>
                                                <th class="text-center">No</th>
                                                <th>Nama Barang</th>
                                                <th class="text-center">Jumlah</th>
                                                <th class="text-end">Harga Jual</th>
                                                <th class="text-end">Harga Modal</th>
                                                <th class="text-end">Margin L/R</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $total_harga_jual = 0;
                                                $total_hpp = 0;
                                                $total_margin = 0;
                                                $total_laba_rugi = 0;
                                            @endphp
                                            @forelse($detailBarangTransaksis as $index => $bt)
                                            @php
                                                $margin = $bt->harga_jual - $bt->hpp;
                                                $sub_total = $margin * $bt->jumlah;
                                            @endphp
                                            <tr>
                                                <td class="text-center">{{ $index + 1 }}</td>
                                                <td>
                                                    <strong>{{ $bt->barang->nama ?? '-' }}</strong>
                                                    @if($bt->barang)
                                                    <br>
                                                    <small class="text-muted">
                                                        Kode: {{ $bt->barang->kode ?? '-' }}
                                                    </small>
                                                    @endif
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge bg-primary">{{ $bt->jumlah }}</span>
                                                </td>
                                                <td class="text-end">Rp {{ number_format($bt->harga_jual, 0, ',', '.') }}</td>
                                                <td class="text-end">Rp {{ number_format($bt->hpp, 0, ',', '.') }}</td>
                                                <td class="text-end">
                                                    <span class="text-success">
                                                        Rp {{ number_format($margin, 0, ',', '.') }}
                                                    </span>
                                                </td>
                                            </tr>
                                            @php
                                                $total_harga_jual += $bt->harga_jual * $bt->jumlah;
                                                $total_hpp += $bt->hpp * $bt->jumlah;
                                                $total_margin += $margin * $bt->jumlah;
                                                $total_laba_rugi += $sub_total;
                                            @endphp
                                            @empty
                                            <tr>
                                                <td colspan="6" class="text-center">Tidak ada data barang</td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                        <tfoot class="table-success">
                                            <tr>
                                                <th colspan="3" class="text-end">Total</th>
                                                <th class="text-end">
                                                    <strong>Rp {{ number_format($total_harga_jual, 0, ',', '.') }}</strong>
                                                </th>
                                                <th class="text-end">
                                                    <strong>Rp {{ number_format($total_hpp, 0, ',', '.') }}</strong>
                                                </th>
                                                <th class="text-end">
                                                    <strong class="text-success">
                                                        Rp {{ number_format($total_laba_rugi, 0, ',', '.') }}
                                                    </strong>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Ringkasan Keuangan -->
                        <div class="row mt-4">
                            <div class="col-md-4">
                                <div class="card border-warning">
                                    <div class="card-header bg-warning text-dark">
                                        <h6 class="mb-0"><i class="fas fa-money-bill-wave me-2"></i>Total Penjualan</h6>
                                    </div>
                                    <div class="card-body text-center">
                                        <h4 class="text-warning">Rp {{ number_format($total_harga_jual, 0, ',', '.') }}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card border-danger">
                                    <div class="card-header bg-danger text-white">
                                        <h6 class="mb-0"><i class="fas fa-shopping-cart me-2"></i>Total Harga Modal</h6>
                                    </div>
                                    <div class="card-body text-center">
                                        <h4 class="text-danger">Rp {{ number_format($total_hpp, 0, ',', '.') }}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card border-success">
                                    <div class="card-header bg-success text-white">
                                        <h6 class="mb-0"><i class="fas fa-chart-line me-2"></i>Total Margin L/R</h6>
                                    </div>
                                    <div class="card-body text-center">
                                        <h4 class="text-success">Rp {{ number_format($total_laba_rugi, 0, ',', '.') }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-exclamation-triangle text-warning" style="font-size: 3rem;"></i>
                            <p class="mt-3 text-muted">Data transaksi tidak ditemukan</p>
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" wire:click="closeDetailModal">
                        <i class="fas fa-times me-1"></i>Tutup
                    </button>
                    @if($selectedTransaksi)
                    <button type="button" class="btn btn-primary"
                        wire:click="cetakTransaksiLabaRugi('{{ $selectedTransaksi->no_faktur }}')">
                        <i class="fas fa-print me-1"></i>Cetak Laporan
                    </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show"></div>
    @endif
</div>