@extends('layout.app')

@section('title', 'Detail Pembayaran - 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 Pembayaran</h6>
                        </div>
                        <div>
                            @if($pembayaran->status_konfirmasi === 'Menunggu')
                            <a href="{{ route('pembayaran.edit', $pembayaran) }}" 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>
                            @endif
                            <a href="{{ route('pembayaran.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 Pembayaran -->
        <div class="card mb-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Informasi Pembayaran</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Tanggal Pembayaran:</strong>
                            <div class="text-muted">{{ $pembayaran->tanggal_pembayaran->format('d/m/Y H:i') }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Jumlah Pembayaran:</strong>
                            <div class="text-success h5">
                                Rp {{ number_format($pembayaran->jumlah_pembayaran, 0, ',', '.') }}
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Metode Pembayaran:</strong>
                            <div>
                                <span class="badge badge-sm bg-gradient-info">{{ $pembayaran->metode_pembayaran }}</span>
                                @php
                                    $gateway = $pembayaran->paymentGateway;
                                @endphp
                                @if($pembayaran->metode_pembayaran === 'Payment Gateway' && $gateway)
                                    <br><small class="text-muted mt-1">
                                        <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">link</i> Gateway: {{ $gateway->name ?? '-' }}
                                        ({{ strtoupper($gateway->gateway_type ?? '') }})
                                    </small>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Status Konfirmasi:</strong>
                            <div>
                                <span class="badge badge-sm bg-gradient-{{ $pembayaran->status_badge_class }}">
                                    {{ $pembayaran->status_konfirmasi }}
                                </span>
                            </div>
                        </div>
                        @if($pembayaran->kode_pembayaran)
                        <div class="mb-3">
                            <strong>Kode Pembayaran:</strong>
                            <div class="text-muted">{{ $pembayaran->kode_pembayaran }}</div>
                        </div>
                        @endif
                        <div class="mb-3">
                            <strong>Dicatat Pada:</strong>
                            <div class="text-muted">{{ $pembayaran->created_at->format('d/m/Y H:i') }}</div>
                        </div>
                    </div>
                </div>
                
                @if($pembayaran->keterangan)
                <div class="mb-3">
                    <strong>Keterangan:</strong>
                    <div class="text-muted">{{ $pembayaran->keterangan }}</div>
                </div>
                @endif
                
                @if($pembayaran->bukti_pembayaran)
                <div class="mb-3">
                    <strong>Bukti Pembayaran:</strong>
                    <div class="mt-2">
                        @if(in_array(pathinfo($pembayaran->bukti_pembayaran, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif']))
                        <a href="{{ asset('uploads/bukti_pembayaran/' . $pembayaran->bukti_pembayaran) }}" target="_blank">
                            <img src="{{ asset('uploads/bukti_pembayaran/' . $pembayaran->bukti_pembayaran) }}" 
                                 alt="Bukti Pembayaran" 
                                 class="img-thumbnail" 
                                 style="max-width: 300px;">
                        </a>
                        @else
                        <a href="{{ asset('uploads/bukti_pembayaran/' . $pembayaran->bukti_pembayaran) }}" 
                           target="_blank" 
                           class="btn btn-sm btn-outline-primary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 16px; vertical-align: middle;">description</i>Lihat Bukti Pembayaran
                        </a>
                        @endif
                    </div>
                </div>
                @endif
            </div>
        </div>
        
        <!-- Info Tagihan -->
        <div class="card">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">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">{{ $pembayaran->tagihan->nomor_invoice }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Pelanggan:</strong>
                            <div class="text-muted">
                                {{ $pembayaran->tagihan->pelanggan->nama }}<br>
                                <small>{{ $pembayaran->tagihan->pelanggan->nomor_telepon }}</small>
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Paket:</strong>
                            <div class="text-muted">{{ $pembayaran->tagihan->pelanggan->paket->nama_paket }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Total Tagihan:</strong>
                            <div class="text-muted">
                                Rp {{ number_format($pembayaran->tagihan->total_tagihan, 0, ',', '.') }}
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Status Tagihan:</strong>
                            <div>
                                <span class="badge badge-sm bg-gradient-{{ $pembayaran->tagihan->status_badge_class }}">
                                    {{ $pembayaran->tagihan->status_tagihan }}
                                </span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Periode:</strong>
                            <div class="text-muted">
                                {{ $pembayaran->tagihan->periode_awal->format('d/m/Y') }} - 
                                {{ $pembayaran->tagihan->periode_akhir->format('d/m/Y') }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-3">
                    <a href="{{ route('tagihan.show', $pembayaran->tagihan) }}" class="btn btn-sm btn-outline-primary mb-0">
                        <i class="fas fa-file-invoice me-2"></i>Lihat Detail Tagihan
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Aksi -->
        @if($pembayaran->status_konfirmasi === 'Menunggu' && Auth::user()->isAdmin())
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Konfirmasi Pembayaran</h6>
            </div>
            <div class="card-body">
                <p class="text-muted">Pembayaran ini menunggu konfirmasi dari admin.</p>
                
                <form method="POST" action="{{ route('pembayaran.confirm', $pembayaran) }}" class="mb-2">
                    @csrf
                    <button type="submit" class="btn btn-success w-100" 
                            onclick="return confirm('Setujui pembayaran ini?')">
                        <i class="fas fa-check me-2"></i>Setujui Pembayaran
                    </button>
                </form>
                
                <button type="button" class="btn btn-danger w-100" data-bs-toggle="modal" data-bs-target="#rejectModal">
                    <i class="fas fa-times me-2"></i>Tolak Pembayaran
                </button>
            </div>
        </div>
        @endif
        
        @if($pembayaran->status_konfirmasi === 'Disetujui')
        <div class="card shadow mb-4 border-success">
            <div class="card-header bg-success text-white">
                <h6 class="m-0 font-weight-bold">Status: Disetujui</h6>
            </div>
            <div class="card-body">
                <p class="mb-0">
                    <i class="fas fa-check-circle text-success me-2"></i>
                    Pembayaran ini sudah disetujui dan tagihan sudah diperbarui.
                </p>
            </div>
        </div>
        @endif
        
        @if($pembayaran->status_konfirmasi === 'Ditolak')
        <div class="card shadow mb-4 border-danger">
            <div class="card-header bg-danger text-white">
                <h6 class="m-0 font-weight-bold">Status: Ditolak</h6>
            </div>
            <div class="card-body">
                <p>
                    <i class="fas fa-times-circle text-danger me-2"></i>
                    Pembayaran ini telah ditolak.
                </p>
                @if($pembayaran->keterangan)
                <div class="alert alert-warning">
                    <strong>Alasan:</strong><br>
                    {{ $pembayaran->keterangan }}
                </div>
                @endif
            </div>
        </div>
        @endif
        
        <!-- Info Tambahan -->
        <div class="card">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Informasi Tambahan</h6>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <strong>Area:</strong>
                    <div class="text-muted">{{ $pembayaran->tagihan->pelanggan->area ? $pembayaran->tagihan->pelanggan->area->full_address : '-' }}</div>
                </div>
                <div class="mb-2">
                    <strong>Email:</strong>
                    <div class="text-muted">{{ $pembayaran->tagihan->pelanggan->email ?? '-' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('pembayaran.reject', $pembayaran) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Tolak Pembayaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="keterangan">Alasan Penolakan <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="keterangan" name="keterangan" rows="4" required 
                                  placeholder="Masukkan alasan penolakan..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger">Tolak Pembayaran</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection