@extends('layout.app')

@section('title', 'Detail Tagihan - Sistem Manajemen ISP')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card my-4">
            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3">
                    <div class="d-flex justify-content-between align-items-center px-3">
                        <div>
                            <h6 class="text-white text-capitalize ps-3 mb-0">Detail Tagihan</h6>
                        </div>
                        <div>
                            <a href="{{ route('tagihan.print', $tagihan) }}" class="btn btn-sm bg-gradient-success mb-0 me-2" target="_blank">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">print</i> Print
                            </a>
                            <a href="{{ route('tagihan.edit', $tagihan) }}" class="btn btn-sm bg-gradient-warning mb-0 me-2">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i> Edit
                            </a>
                            <a href="{{ route('tagihan.index') }}" class="btn btn-sm bg-gradient-secondary mb-0">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">arrow_back</i> Kembali
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-4">

<div class="row">
    <div class="col-lg-8">
        <!-- Info Tagihan -->
        <div class="card mb-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Informasi Tagihan</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>No. Invoice:</strong>
                            <div class="text-muted h5">{{ $tagihan->nomor_invoice }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Tanggal Tagihan:</strong>
                            <div class="text-muted">{{ $tagihan->tanggal_tagihan->format('d/m/Y') }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Tanggal Jatuh Tempo:</strong>
                            <div class="text-muted">{{ $tagihan->tanggal_jatuh_tempo->format('d/m/Y') }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Periode Tagihan:</strong>
                            <div class="text-muted">
                                {{ $tagihan->periode_awal->format('d/m/Y') }} - 
                                {{ $tagihan->periode_akhir->format('d/m/Y') }}
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Status:</strong>
                            <div>
                                <span class="badge badge-sm bg-gradient-{{ $tagihan->status_badge_class }}">
                                    {{ $tagihan->status_tagihan }}
                                </span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Dibuat:</strong>
                            <div class="text-muted">{{ $tagihan->created_at->format('d/m/Y H:i') }}</div>
                        </div>
                    </div>
                </div>
                
                @if($tagihan->keterangan)
                <div class="mb-3">
                    <strong>Keterangan:</strong>
                    <div class="text-muted">{{ $tagihan->keterangan }}</div>
                </div>
                @endif
                
                <hr>
                
                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-2">
                            <strong>Jumlah Tagihan:</strong>
                        </div>
                        @if($tagihan->denda > 0)
                        <div class="mb-2">
                            <strong>Denda:</strong>
                        </div>
                        @endif
                        <div class="mb-2">
                            <strong>Subtotal:</strong>
                        </div>
                        @if($tagihan->ppn_enabled && $tagihan->ppn_amount > 0)
                        <div class="mb-2">
                            <strong>PPN ({{ number_format($tagihan->ppn_percentage, 0) }}%):</strong>
                        </div>
                        @endif
                        <div class="mb-2">
                            <strong class="h5">Total Tagihan:</strong>
                        </div>
                    </div>
                    <div class="col-md-4 text-end">
                        <div class="mb-2">
                            Rp {{ number_format($tagihan->jumlah_tagihan, 0, ',', '.') }}
                        </div>
                        @if($tagihan->denda > 0)
                        <div class="mb-2">
                            Rp {{ number_format($tagihan->denda, 0, ',', '.') }}
                        </div>
                        @endif
                        <div class="mb-2">
                            <strong>Rp {{ number_format($tagihan->subtotal, 0, ',', '.') }}</strong>
                        </div>
                        @if($tagihan->ppn_enabled && $tagihan->ppn_amount > 0)
                        <div class="mb-2">
                            Rp {{ number_format($tagihan->ppn_amount, 0, ',', '.') }}
                        </div>
                        @endif
                        <div class="mb-2">
                            <strong class="h5 text-success">
                                Rp {{ number_format($tagihan->total_tagihan, 0, ',', '.') }}
                            </strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Info Pelanggan -->
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Informasi Pelanggan</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Nama:</strong>
                            <div class="text-muted">{{ $tagihan->pelanggan->nama }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Email:</strong>
                            <div class="text-muted">{{ $tagihan->pelanggan->email ?? '-' }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Telepon:</strong>
                            <div class="text-muted">{{ $tagihan->pelanggan->nomor_telepon }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Alamat:</strong>
                            <div class="text-muted">{{ $tagihan->pelanggan->alamat }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Area:</strong>
                            <div class="text-muted">{{ $tagihan->pelanggan->area ? $tagihan->pelanggan->area->full_address : '-' }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Paket:</strong>
                            <div class="text-muted">{{ $tagihan->pelanggan->paket->nama_paket }}</div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-3">
                    <a href="{{ route('pelanggan.show', $tagihan->pelanggan) }}" class="btn btn-sm btn-outline-primary mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 16px; vertical-align: middle;">person</i>Lihat Detail Pelanggan
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Riwayat Pembayaran -->
        <div class="card">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Riwayat Pembayaran</h6>
            </div>
            <div class="card-body">
                @if($tagihan->pembayaran->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Jumlah</th>
                                    <th>Metode</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $totalPaid = 0;
                                @endphp
                                @foreach($tagihan->pembayaran as $p)
                                <tr>
                                    <td>{{ $p->tanggal_pembayaran->format('d/m/Y H:i') }}</td>
                                    <td>Rp {{ number_format($p->jumlah_pembayaran, 0, ',', '.') }}</td>
                                    <td><span class="badge badge-sm bg-gradient-info">{{ $p->metode_pembayaran }}</span></td>
                                    <td><span class="badge badge-sm bg-gradient-{{ $p->status_badge_class }}">{{ $p->status_konfirmasi }}</span></td>
                                    <td>
                                        <a href="{{ route('pembayaran.show', $p) }}" class="btn btn-sm bg-gradient-info mb-0">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @if($p->status_konfirmasi === 'Disetujui')
                                    @php $totalPaid += $p->jumlah_pembayaran; @endphp
                                @endif
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="table-active">
                                    <th colspan="1">Total Dibayar:</th>
                                    <th colspan="4" class="text-success">
                                        Rp {{ number_format($totalPaid, 0, ',', '.') }}
                                    </th>
                                </tr>
                                <tr class="table-active">
                                    <th colspan="1">Sisa Tagihan:</th>
                                    <th colspan="4" class="text-danger">
                                        Rp {{ number_format($tagihan->total_tagihan - $totalPaid, 0, ',', '.') }}
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @else
                    <p class="text-muted text-center py-3">Belum ada pembayaran untuk tagihan ini</p>
                    <div class="text-center">
                        <a href="{{ route('pembayaran.create', ['tagihan_id' => $tagihan->id]) }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>Catat Pembayaran
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Quick Actions -->
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Aksi Cepat</h6>
            </div>
            <div class="card-body">
                @if($tagihan->status_tagihan !== 'Lunas')
                <a href="{{ route('pembayaran.create', ['tagihan_id' => $tagihan->id]) }}" class="btn btn-success w-100 mb-2">
                    <i class="fas fa-credit-card me-2"></i>Catat Pembayaran
                </a>
                @endif
                
                <a href="{{ route('tagihan.print', $tagihan) }}" class="btn btn-primary w-100 mb-2" target="_blank">
                    <i class="fas fa-print me-2"></i>Print Invoice
                </a>
                
                <a href="{{ route('tagihan.edit', $tagihan) }}" class="btn btn-warning w-100 mb-2">
                    <i class="fas fa-edit me-2"></i>Edit Tagihan
                </a>
                
                <button type="button" class="btn btn-danger w-100" onclick="confirmDelete()">
                    <i class="fas fa-trash me-2"></i>Hapus Tagihan
                </button>
                
                <form id="delete-form" method="POST" action="{{ route('tagihan.destroy', $tagihan) }}" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>
            </div>
        </div>
        
        <!-- Status Info -->
        @if($tagihan->status_tagihan === 'Jatuh Tempo')
        <div class="card shadow mb-4 border-danger">
            <div class="card-header bg-danger text-white">
                <h6 class="m-0 font-weight-bold">Tagihan Jatuh Tempo!</h6>
            </div>
            <div class="card-body">
                <p class="mb-0">
                    <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                    Tagihan ini sudah melewati tanggal jatuh tempo.
                </p>
            </div>
        </div>
        @elseif($tagihan->status_tagihan === 'Lunas')
        <div class="card shadow mb-4 border-success">
            <div class="card-header bg-success text-white">
                <h6 class="m-0 font-weight-bold">Tagihan Lunas</h6>
            </div>
            <div class="card-body">
                <p class="mb-0">
                    <i class="fas fa-check-circle text-success me-2"></i>
                    Tagihan ini sudah dibayar lunas.
                </p>
            </div>
        </div>
        @endif
        
        <!-- Statistics -->
        <div class="card">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Statistik</h6>
            </div>
            <div class="card-body">
                @php
                    $totalPaid = $tagihan->pembayaran->where('status_konfirmasi', 'Disetujui')->sum('jumlah_pembayaran');
                    $percentage = $tagihan->total_tagihan > 0 ? ($totalPaid / $tagihan->total_tagihan) * 100 : 0;
                @endphp
                
                <div class="mb-3">
                    <strong>Progress Pembayaran:</strong>
                    <div class="progress mt-2" style="height: 25px;">
                        <div class="progress-bar bg-{{ $percentage >= 100 ? 'success' : ($percentage > 0 ? 'warning' : 'danger') }}" 
                             role="progressbar" 
                             style="width: {{ min($percentage, 100) }}%"
                             aria-valuenow="{{ $percentage }}" 
                             aria-valuemin="0" 
                             aria-valuemax="100">
                            {{ number_format($percentage, 0) }}%
                        </div>
                    </div>
                </div>
                
                <div class="mb-2">
                    <strong>Total Pembayaran:</strong>
                    <div class="text-muted">{{ $tagihan->pembayaran->count() }} transaksi</div>
                </div>
                
                <div class="mb-2">
                    <strong>Menunggu Konfirmasi:</strong>
                    <div class="text-muted">{{ $tagihan->pembayaran->where('status_konfirmasi', 'Menunggu')->count() }} transaksi</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function confirmDelete() {
    if (confirm('Apakah Anda yakin ingin menghapus tagihan "{{ $tagihan->nomor_invoice }}"?')) {
        document.getElementById('delete-form').submit();
    }
}
</script>
@endsection