@extends('layouts.app')

@section('title', 'Riwayat Transfer & Realisasi')

@section('admin-content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="fw-bold text-dark">Log Riwayat Budget & Transaksi</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('budget_control') }}">Budget Control</a></li>
                    <li class="breadcrumb-item active">Riwayat</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">

        {{-- --- BAGIAN BARU: PANEL FILTER --- --}}
        <div class="card shadow-sm mb-4" style="border-radius: 15px; border-top: 3px solid #17a2b8;">
            <div class="card-body py-3">
                <form action="{{ route('budget_control.log') }}" method="GET" id="filter-form">
                    <div class="row align-items-end">
                        <div class="col-md-3 mb-2 mb-md-0">
                            <label class="small font-weight-bold text-muted text-uppercase">Region</label>
                            <select name="region_id" class="form-control form-control-sm select2" onchange="this.form.submit()">
                                <option value="">Semua Region</option>
                                @foreach($regions as $reg)
                                    <option value="{{ $reg->id }}" {{ request('region_id') == $reg->id ? 'selected' : '' }}>{{ $reg->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 mb-2 mb-md-0">
                            <label class="small font-weight-bold text-muted text-uppercase">Cabang</label>
                            <select name="cabang_id" class="form-control form-control-sm select2" onchange="this.form.submit()">
                                <option value="">Semua Cabang</option>
                                @foreach($cabangOptions as $cab)
                                    <option value="{{ $cab->id }}" {{ request('cabang_id') == $cab->id ? 'selected' : '' }}>{{ $cab->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mb-2 mb-md-0">
                            <label class="small font-weight-bold text-muted text-uppercase">Bulan</label>
                            <select name="month" class="form-control form-control-sm" onchange="this.form.submit()">
                                <option value="">Semua Bulan</option>
                                @foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $m)
                                    <option value="{{ $m }}" {{ request('month') == $m ? 'selected' : '' }}>{{ $m }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mb-2 mb-md-0">
                            <label class="small font-weight-bold text-muted text-uppercase">Tahun</label>
                            <select name="year" class="form-control form-control-sm" onchange="this.form.submit()">
                                @for($y = date('Y'); $y >= 2024; $y--)
                                    <option value="{{ $y }}" {{ request('year', date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-2">
                            <div class="btn-group w-100">
                                <button type="submit" class="btn btn-sm btn-primary px-3 shadow-sm">
                                    <i class="fas fa-filter"></i>
                                </button>
                                <a href="{{ route('budget_control.log') }}" class="btn btn-sm btn-secondary shadow-sm" title="Reset Filter">
                                    <i class="fas fa-sync-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        {{-- --- BAGIAN GRAFIK PERBANDINGAN (TETAP ADA) --- --}}
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm mb-4" style="border-radius: 15px; border-left: 5px solid #007bff;">
                    <div class="card-header bg-white border-0 pt-3">
                        <h3 class="card-title fw-bold text-primary">
                            <i class="fas fa-chart-bar mr-2"></i> Perbandingan Petty Cash vs Realisasi (Halaman Ini)
                        </h3>
                    </div>
                    <div class="card-body">
                        <div style="height: 280px;">
                            <canvas id="logComparisonChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- --- TABEL DATA --- --}}
        <div class="card card-primary card-outline shadow-sm" style="border-radius: 15px;">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="text-muted font-weight-bold m-0 text-uppercase small">Detail Transaksi Riwayat</h6>
                    <div id="dt-buttons-container"></div>
                </div>

                <div class="table-responsive">
                    <table id="logTable" class="table table-bordered table-striped table-hover w-100">
                        <thead class="bg-light text-center text-uppercase small font-weight-bold">
                            <tr>
                                <th width="3%">#</th>
                                <th class="text-left">Cabang / Region</th>
                                <th>Periode</th>
                                <th>Total Budget (Petty Cash)</th>
                                <th>Total Debet (Masuk)</th>
                                <th>Total Kredit (Keluar)</th>
                                <th class="text-success">Realisasi (Sisa)</th>
                                <th>Waktu Assign</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            @forelse ($data as $item)
                                <tr>
                                    <td>{{ ($data->currentPage() - 1) * $data->perPage() + $loop->iteration }}</td>
                                    <td class="text-left align-middle">
                                        <div class="fw-bold text-dark">{{ $item->cabang->name ?? '-' }}</div>
                                        <small class="text-muted">{{ $item->cabang->region->name ?? '-' }}</small>
                                    </td>
                                    <td class="align-middle">
                                        <span class="badge badge-light border shadow-sm px-2 py-1">
                                            {{ strtoupper($item->periode_month) }} {{ $item->periode_year }}
                                        </span>
                                    </td>
                                    
                                    <td class="align-middle fw-bold text-dark">
                                        Rp {{ number_format($item->total_budget, 0, ',', '.') }}
                                    </td>
                                    <td class="align-middle text-primary">
                                        Rp {{ number_format($item->total_debet, 0, ',', '.') }}
                                    </td>
                                    <td class="align-middle text-danger">
                                        Rp {{ number_format($item->total_credit, 0, ',', '.') }}
                                    </td>
                                    <td class="align-middle fw-bold text-success" style="font-size: 15px;">
                                        Rp {{ number_format($item->realisasi, 0, ',', '.') }}
                                    </td>
                                    
                                    <td class="align-middle">
                                        <small class="text-muted d-block">
                                            <i class="fas fa-calendar-alt mr-1"></i>{{ $item->created_at->format('d M Y') }}
                                        </small>
                                        <small class="text-muted d-block">
                                            <i class="fas fa-clock mr-1"></i>{{ $item->created_at->format('H:i') }} WIB
                                        </small>
                                    </td>

                                    <td class="align-middle">
                                        <span class="badge {{ $item->status == 'Assigned' ? 'badge-success' : 'badge-secondary' }} px-2 py-1 shadow-sm">
                                            {{ $item->status }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-5 text-muted">
                                        <i class="fas fa-folder-open fa-2x mb-2"></i><br>
                                        Belum ada riwayat budget yang tercatat.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- --- PAGINATION LARAVEL (TETAP ADA) --- --}}
                <div class="mt-4 d-flex justify-content-between align-items-center">
                    <div class="small text-muted">
                        Menampilkan {{ $data->firstItem() }} sampai {{ $data->lastItem() }} dari {{ $data->total() }} data
                    </div>
                    <div>
                        {{ $data->appends(request()->query())->links('pagination::bootstrap-4') }}
                    </div>
                </div>

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

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    $(document).ready(function () {
        
        // 1. INISIALISASI GRAFIK PERBANDINGAN
        const ctx = document.getElementById('logComparisonChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($chartData['labels'] ?? []) !!},
                datasets: [
                    {
                        label: 'Petty Cash (Budget)',
                        data: {!! json_encode($chartData['budget'] ?? []) !!},
                        backgroundColor: 'rgba(54, 162, 235, 0.7)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                        borderRadius: 5
                    },
                    {
                        label: 'Sisa Realisasi',
                        data: {!! json_encode($chartData['realisasi'] ?? []) !!},
                        backgroundColor: 'rgba(40, 167, 69, 0.7)',
                        borderColor: 'rgba(40, 167, 69, 1)',
                        borderWidth: 1,
                        borderRadius: 5
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top' }
                },
                scales: {
                    y: { 
                        beginAtZero: true,
                        ticks: { 
                            callback: function(value) { return 'Rp ' + value.toLocaleString('id-ID'); }
                        }
                    }
                }
            }
        });

        // 2. DATATABLES OPTIMIZATION
        if ($('#logTable').length) {
            var table = $('#logTable').DataTable({
                paging: false, 
                info: false,
                searching: true, 
                responsive: false,
                dom: 'Bfrtip',
                buttons: [
                    { 
                        extend: 'excelHtml5', 
                        className: 'btn-sm btn-success shadow-sm', 
                        text: '<i class="fas fa-file-excel mr-1"></i> Export Excel',
                        title: 'Laporan Riwayat Budget - ' + new Date().toLocaleDateString('id-ID'),
                        exportOptions: { columns: ':visible' }
                    },
                    { 
                        extend: 'pdfHtml5', 
                        className: 'btn-sm btn-danger shadow-sm',
                        text: '<i class="fas fa-file-pdf mr-1"></i> Export PDF',
                        orientation: 'landscape',
                        pageSize: 'A4'
                    }
                ]
            });

            table.buttons().container().appendTo('#dt-buttons-container');
        }
    });
</script>
@endsection