@extends('layout.app')

@section('title', 'Data Pembayaran - Sistem Manajemen ISP')

@section('content')
@php
    use App\Models\Pembayaran;
    $totalPembayaran = Pembayaran::count();
    $menunggu = Pembayaran::where('status_konfirmasi', 'Menunggu')->count();
    $disetujui = Pembayaran::where('status_konfirmasi', 'Disetujui')->count();
    $ditolak = Pembayaran::where('status_konfirmasi', 'Ditolak')->count();
    $totalRevenue = Pembayaran::where('status_konfirmasi', 'Disetujui')->sum('jumlah_pembayaran');
@endphp

<x-material-page-header 
    title="Data Pembayaran" 
    :action="route('pembayaran.create')" 
    actionLabel="Tambah Pembayaran" 
    actionIcon="add"
/>

<!-- Statistics Cards -->
<div class="row mb-4">
    <x-material-card-stat 
        title="Total Pembayaran" 
        :value="$totalPembayaran" 
        icon="payments" 
        color="primary" 
        growth="0" 
        period="Semua transaksi"
    />
    <x-material-card-stat 
        title="Menunggu" 
        :value="$menunggu" 
        icon="schedule" 
        color="warning" 
        growth="0" 
        period="Perlu konfirmasi"
    />
    <x-material-card-stat 
        title="Disetujui" 
        :value="$disetujui" 
        icon="check_circle" 
        color="success" 
        growth="0" 
        :period="'Rp ' . number_format($totalRevenue, 0, ',', '.')"
    />
    <x-material-card-stat 
        title="Ditolak" 
        :value="$ditolak" 
        icon="cancel" 
        color="danger" 
        growth="0" 
        period="Pembayaran ditolak"
    />
</div>

<!-- Pembayaran Table Card -->
<div class="row">
    <div class="col-12">
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Daftar Pembayaran</h6>
            </div>
            
            <!-- Filter Section -->
            <div class="card-body pt-0">
                <form method="GET" action="{{ route('pembayaran.index') }}">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Cari Pembayaran</label>
                                <input type="text" name="search" id="search" class="form-control" 
                                       value="{{ request('search') }}" placeholder="Kode atau No. Invoice">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Status</label>
                                <select name="status_konfirmasi" id="status_konfirmasi" class="form-control">
                                    <option value="">Semua Status</option>
                                    <option value="Menunggu" {{ request('status_konfirmasi') == 'Menunggu' ? 'selected' : '' }}>Menunggu</option>
                                    <option value="Disetujui" {{ request('status_konfirmasi') == 'Disetujui' ? 'selected' : '' }}>Disetujui</option>
                                    <option value="Ditolak" {{ request('status_konfirmasi') == 'Ditolak' ? 'selected' : '' }}>Ditolak</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Metode</label>
                                <select name="metode_pembayaran" id="metode_pembayaran" class="form-control">
                                    <option value="">Semua Metode</option>
                                    <option value="Manual" {{ request('metode_pembayaran') == 'Manual' ? 'selected' : '' }}>Manual</option>
                                    <option value="Transfer" {{ request('metode_pembayaran') == 'Transfer' ? 'selected' : '' }}>Transfer</option>
                                    <option value="Payment Gateway" {{ request('metode_pembayaran') == 'Payment Gateway' ? 'selected' : '' }}>Payment Gateway</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tanggal Awal</label>
                                <input type="date" name="tanggal_awal" id="tanggal_awal" class="form-control" 
                                       value="{{ request('tanggal_awal') }}">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tanggal Akhir</label>
                                <input type="date" name="tanggal_akhir" id="tanggal_akhir" class="form-control" 
                                       value="{{ request('tanggal_akhir') }}">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <button type="submit" class="btn bg-gradient-primary mb-0" title="Filter">
                                <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">search</i>
                            </button>
                        </div>
                    </div>
                    @if(request()->anyFilled(['search', 'status_konfirmasi', 'metode_pembayaran', 'tanggal_awal', 'tanggal_akhir']))
                    <div class="row">
                        <div class="col-12">
                            <a href="{{ route('pembayaran.index') }}" class="btn btn-sm btn-outline-secondary mb-0">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">refresh</i> Reset Filter
                            </a>
                        </div>
                    </div>
                    @endif
                </form>
            </div>

            <!-- Table -->
            <div class="card-body px-0 pt-0 pb-2">
                <div class="table-responsive p-0">
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 5%;">No</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" style="width: 15%;">Tanggal</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">No. Invoice</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" style="width: 20%;">Pelanggan</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 15%;">Jumlah</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">Metode</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 11%;">Status</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 10%;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pembayaran as $index => $p)
                            @php
                                $tagihan = $p->tagihan;
                                $pelanggan = $tagihan ? $tagihan->pelanggan : null;
                                $nomorInvoice = $tagihan ? $tagihan->nomor_invoice : null;
                            @endphp
                            <tr>
                                <td>
                                    <p class="text-xs font-weight-bold mb-0">{{ $pembayaran->firstItem() + $index }}</p>
                                </td>
                                <td>
                                    <p class="text-xs font-weight-bold mb-0">{{ $p->tanggal_pembayaran->format('d/m/Y') }}</p>
                                    <p class="text-xs text-secondary mb-0">{{ $p->tanggal_pembayaran->format('H:i') }}</p>
                                </td>
                                <td>
                                    <div class="d-flex px-2 py-1">
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="mb-0 text-sm">{{ $nomorInvoice ?? 'Tidak ada tagihan' }}</h6>
                                            @if($p->kode_pembayaran)
                                                <p class="text-xs text-secondary mb-0">{{ $p->kode_pembayaran }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($pelanggan)
                                    <p class="text-xs font-weight-bold mb-0">{{ $pelanggan->nama }}</p>
                                    <p class="text-xs text-secondary mb-0">{{ $pelanggan->nomor_telepon }}</p>
                                    @if($pelanggan->nomor_pelanggan)
                                        <span class="badge badge-sm bg-gradient-primary">{{ $pelanggan->nomor_pelanggan }}</span>
                                    @endif
                                    @else
                                    <p class="text-xs text-secondary mb-0">Pelanggan tidak tersedia</p>
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    <span class="text-xs font-weight-bold text-success">Rp {{ number_format($p->jumlah_pembayaran, 0, ',', '.') }}</span>
                                </td>
                                <td class="align-middle text-center text-sm">
                                    <span class="badge badge-sm bg-gradient-info">
                                        <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">credit_card</i> {{ $p->metode_pembayaran }}
                                    </span>
                                    @php
                                        $gateway = $p->paymentGateway;
                                    @endphp
                                    @if($p->metode_pembayaran === 'Payment Gateway' && $gateway)
                                        <br><span class="text-xs text-secondary">
                                            <i class="material-symbols-rounded" style="font-size: 12px; vertical-align: middle;">link</i> {{ $gateway->name ?? '-' }}
                                        </span>
                                    @endif
                                </td>
                                <td class="align-middle text-center text-sm">
                                    @if($p->status_konfirmasi == 'Disetujui')
                                        <span class="badge badge-sm bg-gradient-success">
                                            <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">check_circle</i> Disetujui
                                        </span>
                                    @elseif($p->status_konfirmasi == 'Ditolak')
                                        <span class="badge badge-sm bg-gradient-danger">
                                            <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">cancel</i> Ditolak
                                        </span>
                                    @else
                                        <span class="badge badge-sm bg-gradient-warning">
                                            <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">schedule</i> Menunggu
                                        </span>
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    <div class="dropdown">
                                        <a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">more_vert</i>
                                        </a>
                                        <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownMenuButton">
                                            <li><a class="dropdown-item border-radius-md" href="{{ route('pembayaran.show', $p) }}">
                                                <i class="material-symbols-rounded text-info me-2" style="font-size: 18px; vertical-align: middle;">visibility</i> Detail
                                            </a></li>
                                            @if($p->status_konfirmasi === 'Menunggu')
                                            <li><a class="dropdown-item border-radius-md" href="{{ route('pembayaran.edit', $p) }}">
                                                <i class="material-symbols-rounded text-warning me-2" style="font-size: 18px; vertical-align: middle;">edit</i> Edit
                                            </a></li>
                                            @endif
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item border-radius-md text-danger" href="#" onclick="confirmDelete('{{ route('pembayaran.destroy', $p) }}', '{{ $p->kode_pembayaran ?? ($nomorInvoice ?? 'pembayaran ini') }}')">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">delete</i> Hapus
                                            </a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center py-5">
                                    <i class="material-symbols-rounded" style="font-size: 48px; opacity: 0.3;">payments</i>
                                    <h6 class="text-muted mt-3">Belum ada pembayaran</h6>
                                    <p class="text-muted mb-4">Mulai dengan mencatat pembayaran pertama</p>
                                    <a href="{{ route('pembayaran.create') }}" class="btn bg-gradient-primary mb-0">
                                        <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">add</i> Catat Pembayaran Pertama
                                    </a>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($pembayaran->hasPages())
                <div class="card-footer py-4">
                    <nav aria-label="...">
                        {{ $pembayaran->links() }}
                    </nav>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="material-symbols-rounded text-danger me-2" style="font-size: 20px; vertical-align: middle;">delete</i> Konfirmasi Hapus Pembayaran
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">warning</i> 
                    <strong>Peringatan!</strong> Tindakan ini tidak dapat dibatalkan.
                </div>
                <p>Apakah Anda yakin ingin menghapus pembayaran <strong id="pembayaranCodeToDelete"></strong>?</p>
                <p class="text-muted small mb-0">
                    <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i> Data tagihan terkait tidak akan terpengaruh.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">
                    <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">close</i> Batal
                </button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn bg-gradient-danger mb-0">
                        <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">delete</i> Ya, Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function confirmDelete(url, code) {
    document.getElementById('pembayaranCodeToDelete').textContent = code || 'Pembayaran ini';
    document.getElementById('deleteForm').action = url;
    var modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

// Fix dropdown positioning
document.addEventListener('DOMContentLoaded', function() {
    $('[data-bs-toggle="dropdown"]').attr('aria-expanded', 'false');
});
</script>
@endsection