@extends('admin.layouts.app')

@section('title', 'Detail Anggaran')

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h2 class="mb-0">Detail Data Anggaran</h2>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.anggaran.edit', $anggaran) }}" class="btn btn-warning">
                    <i class="fas fa-edit me-2"></i>Edit
                </a>
                <a href="{{ route('admin.anggaran.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Kembali
                </a>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-calculator text-primary me-2"></i>
                            <h5 class="mb-0">{{ $anggaran->jenis }} Tahun {{ $anggaran->tahun }}</h5>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            @if($anggaran->is_active ?? true)
                                <span class="badge bg-success">
                                    <i class="fas fa-check-circle me-1"></i>Aktif
                                </span>
                            @else
                                <span class="badge bg-danger">
                                    <i class="fas fa-times-circle me-1"></i>Tidak Aktif
                                </span>
                            @endif
                            <span class="badge bg-primary">{{ $anggaran->jenis }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Financial Overview -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h6 class="card-title mb-1">Total Anggaran</h6>
                                            <h4 class="mb-0">Rp {{ number_format($anggaran->total_anggaran, 0, ',', '.') }}</h4>
                                        </div>
                                        <div class="ms-3">
                                            <i class="fas fa-wallet fa-2x opacity-75"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h6 class="card-title mb-1">Realisasi</h6>
                                            <h4 class="mb-0">Rp {{ number_format($anggaran->realisasi ?? 0, 0, ',', '.') }}</h4>
                                        </div>
                                        <div class="ms-3">
                                            <i class="fas fa-chart-line fa-2x opacity-75"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Progress and Percentage -->
                    @if($anggaran->total_anggaran > 0)
                        @php
                            $percentage = $anggaran->realisasi ? ($anggaran->realisasi / $anggaran->total_anggaran) * 100 : 0;
                            $remaining = $anggaran->total_anggaran - ($anggaran->realisasi ?? 0);
                        @endphp
                        <div class="card bg-light mb-4">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">Progress Realisasi</h6>
                                    <span class="badge {{ $percentage > 100 ? 'bg-warning' : ($percentage > 80 ? 'bg-success' : 'bg-primary') }} fs-6">
                                        {{ number_format($percentage, 2) }}%
                                    </span>
                                </div>
                                <div class="progress mb-3" style="height: 15px;">
                                    <div class="progress-bar {{ $percentage > 100 ? 'bg-warning' : ($percentage > 80 ? 'bg-success' : 'bg-primary') }}" 
                                         role="progressbar" 
                                         style="width: {{ min($percentage, 100) }}%"
                                         aria-valuenow="{{ $percentage }}" 
                                         aria-valuemin="0" 
                                         aria-valuemax="100">
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="col-4">
                                        <div class="border-end">
                                            <small class="text-muted d-block">Sisa Anggaran</small>
                                            <strong class="{{ $remaining < 0 ? 'text-danger' : 'text-success' }}">
                                                Rp {{ number_format(abs($remaining), 0, ',', '.') }}
                                            </strong>
                                            @if($remaining < 0)
                                                <small class="text-danger d-block">(Over Budget)</small>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="border-end">
                                            <small class="text-muted d-block">Status</small>
                                            <strong class="{{ $percentage > 100 ? 'text-warning' : ($percentage > 80 ? 'text-success' : 'text-primary') }}">
                                                @if($percentage > 100)
                                                    Over Budget
                                                @elseif($percentage > 80)
                                                    Almost Complete
                                                @elseif($percentage > 50)
                                                    On Progress
                                                @else
                                                    Just Started
                                                @endif
                                            </strong>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <small class="text-muted d-block">Efisiensi</small>
                                        <strong class="{{ $percentage <= 100 ? 'text-success' : 'text-danger' }}">
                                            {{ $percentage <= 100 ? 'Efisien' : 'Berlebih' }}
                                        </strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Description -->
                    @if($anggaran->keterangan)
                        <div class="mb-4">
                            <h6 class="fw-bold">Keterangan:</h6>
                            <div class="bg-light p-3 rounded">
                                <p class="mb-0">{{ $anggaran->keterangan }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Informasi Detail
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>ID:</strong>
                        </div>
                        <div class="col-7">
                            #{{ $anggaran->id }}
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Tahun:</strong>
                        </div>
                        <div class="col-7">
                            <span class="badge bg-info">{{ $anggaran->tahun }}</span>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Jenis:</strong>
                        </div>
                        <div class="col-7">
                            <span class="badge bg-primary">{{ $anggaran->jenis }}</span>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Status:</strong>
                        </div>
                        <div class="col-7">
                            @if($anggaran->is_active ?? true)
                                <span class="badge bg-success">Aktif</span>
                            @else
                                <span class="badge bg-danger">Tidak Aktif</span>
                            @endif
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Dibuat:</strong>
                        </div>
                        <div class="col-7">
                            <small>{{ $anggaran->created_at->format('d/m/Y H:i') }}</small>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Diupdate:</strong>
                        </div>
                        <div class="col-7">
                            <small>{{ $anggaran->updated_at->format('d/m/Y H:i') }}</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-cogs me-2"></i>Aksi
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.anggaran.edit', $anggaran) }}" class="btn btn-warning">
                            <i class="fas fa-edit me-2"></i>Edit Anggaran
                        </a>
                        
                        <button class="btn btn-info" onclick="window.print()">
                            <i class="fas fa-print me-2"></i>Cetak Detail
                        </button>
                        
                        <button class="btn btn-secondary" onclick="exportToExcel()">
                            <i class="fas fa-file-excel me-2"></i>Export Excel
                        </button>
                        
                        <form action="{{ route('admin.anggaran.destroy', $anggaran) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus anggaran ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="fas fa-trash me-2"></i>Hapus Anggaran
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-chart-pie me-2"></i>Statistik Cepat
                    </h6>
                </div>
                <div class="card-body">
                    @if($anggaran->total_anggaran > 0)
                        @php
                            $dailyBudget = $anggaran->total_anggaran / 365;
                            $monthlyBudget = $anggaran->total_anggaran / 12;
                        @endphp
                        <div class="small">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Per Bulan:</span>
                                <strong>Rp {{ number_format($monthlyBudget, 0, ',', '.') }}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Per Hari:</span>
                                <strong>Rp {{ number_format($dailyBudget, 0, ',', '.') }}</strong>
                            </div>
                            @if($anggaran->realisasi)
                                <div class="d-flex justify-content-between">
                                    <span class="text-muted">Efisiensi:</span>
                                    <strong class="{{ $percentage <= 100 ? 'text-success' : 'text-danger' }}">
                                        {{ $percentage <= 100 ? number_format(100 - $percentage, 1) . '% hemat' : number_format($percentage - 100, 1) . '% lebih' }}
                                    </strong>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function exportToExcel() {
    const data = {
        tahun: '{{ $anggaran->tahun }}',
        jenis: '{{ $anggaran->jenis }}',
        total_anggaran: {{ $anggaran->total_anggaran }},
        realisasi: {{ $anggaran->realisasi ?? 0 }},
        keterangan: '{{ addslashes($anggaran->keterangan ?? '') }}'
    };
    
    // Simple CSV export
    const csvContent = "data:text/csv;charset=utf-8," 
        + "Tahun,Jenis,Total Anggaran,Realisasi,Keterangan\n"
        + `${data.tahun},${data.jenis},${data.total_anggaran},${data.realisasi},"${data.keterangan}"`;
    
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", `anggaran-${data.tahun}-${data.jenis}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// Print styles
window.addEventListener('beforeprint', function() {
    document.body.classList.add('print-mode');
});

window.addEventListener('afterprint', function() {
    document.body.classList.remove('print-mode');
});
</script>

<style>
@media print {
    .btn, .card-header .badge, nav, .sidebar {
        display: none !important;
    }
    
    .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .card-body {
        padding: 15px !important;
    }
    
    .text-primary, .text-success, .text-warning, .text-danger {
        color: #000 !important;
    }
    
    .bg-light, .bg-primary, .bg-success {
        background-color: #f8f9fa !important;
        color: #000 !important;
    }
    
    .badge {
        border: 1px solid #000 !important;
        background-color: transparent !important;
        color: #000 !important;
    }
}

.progress {
    background-color: #e9ecef;
}

.card-body .row.text-center .col-4 {
    padding: 10px 0;
}
</style>
@endsection