@extends('layouts.app')

@section('title', 'Subscription Invoice Verifications - Admin')

@push('style')
<style>
    .invoice-thumb-card {
        width: 64px;
        height: 64px;
        border-radius: 10px;
        border: 1px solid #e0d7cb;
        overflow: hidden;
        position: relative;
        background: #fdfbf7;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .invoice-thumb-card:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    }
    .invoice-thumb-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .invoice-pdf-icon {
        color: #d9534f;
        font-size: 2rem;
    }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold py-1 mb-1">
                <span class="text-muted fw-light">Admin /</span> Invoice &amp; Transaction Details Verifications
            </h4>
            <p class="text-muted mb-0">Verify proof of purchase, invoices, and transaction details submitted by subscription owners to grant them Verified Invoice badges.</p>
        </div>

        <div class="d-flex gap-2">
            <span class="badge bg-label-warning px-3 py-2 rounded-pill fs-6">
                <i class="ti tabler-clock me-1"></i> {{ $pendingCount }} Pending Review
            </span>
        </div>
    </div>

    @if(session('status'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="ti tabler-circle-check me-2"></i> {{ session('status') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0 ps-3">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header border-bottom py-3 bg-light d-flex justify-content-between align-items-center flex-wrap gap-2">
            <ul class="nav nav-pills card-header-pills">
                <li class="nav-item">
                    <a class="nav-link {{ $status === 'all' ? 'active' : '' }}" href="{{ route('admin.subscription-invoices.index', ['status' => 'all']) }}">
                        All ({{ count(getAllSubscriptionInvoices()) }})
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $status === 'pending' ? 'active' : '' }}" href="{{ route('admin.subscription-invoices.index', ['status' => 'pending']) }}">
                        Pending <span class="badge bg-warning text-dark ms-1">{{ $pendingCount }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $status === 'approved' ? 'active bg-success text-white' : '' }}" href="{{ route('admin.subscription-invoices.index', ['status' => 'approved']) }}">
                        <i class="ti tabler-circle-check me-1"></i> Approved
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $status === 'rejected' ? 'active bg-danger text-white' : '' }}" href="{{ route('admin.subscription-invoices.index', ['status' => 'rejected']) }}">
                        <i class="ti tabler-circle-x me-1"></i> Rejected
                    </a>
                </li>
            </ul>
        </div>

        <div class="table-responsive text-nowrap">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>ID &amp; Subscription</th>
                        <th>Subscription Owner</th>
                        <th>Invoice / Proof File</th>
                        <th>Transaction Details</th>
                        <th>Status</th>
                        <th>Submitted At</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @forelse($invoices as $inv)
                        @php
                            $invId = $inv['id'];
                            $fileUrl = $inv['file_url'] ?? asset($inv['invoice_file']);
                            $isPdf = ($inv['file_type'] ?? '') === 'pdf' || str_ends_with(strtolower($inv['invoice_file'] ?? ''), '.pdf');
                            $subId = $inv['shared_subscription_id'];
                        @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="avatar avatar-sm flex-shrink-0">
                                        @if(! empty($inv['service_logo']))
                                            <img src="{{ asset($inv['service_logo']) }}" alt="{{ $inv['service_name'] }}" class="rounded-circle" style="object-fit: contain; background: #f5f5f5;">
                                        @else
                                            <span class="avatar-initial rounded-circle bg-label-primary">
                                                {{ strtoupper(substr($inv['service_name'] ?? 'SUB', 0, 2)) }}
                                            </span>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="fw-bold text-dark">{{ $inv['service_name'] }}</div>
                                        <small class="text-muted">Subscription #{{ $subId }}</small>
                                    </div>
                                </div>
                            </td>

                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="avatar avatar-xs flex-shrink-0">
                                        @if(! empty($inv['user_avatar']))
                                            <img src="{{ asset($inv['user_avatar']) }}" alt="Owner" class="rounded-circle">
                                        @else
                                            <span class="avatar-initial rounded-circle bg-label-secondary">
                                                {{ strtoupper(substr($inv['user_name'] ?? 'U', 0, 1)) }}
                                            </span>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="fw-semibold text-dark">{{ $inv['user_name'] }}</div>
                                        <small class="text-muted">{{ $inv['user_email'] }}</small>
                                    </div>
                                </div>
                            </td>

                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @if($isPdf)
                                        <a href="{{ $fileUrl }}" target="_blank" class="invoice-thumb-card" title="Open PDF file">
                                            <i class="fa-solid fa-file-pdf invoice-pdf-icon"></i>
                                        </a>
                                        <div>
                                            <a href="{{ $fileUrl }}" target="_blank" class="btn btn-xs btn-outline-danger d-block">
                                                <i class="ti tabler-file-type-pdf me-1"></i> View PDF
                                            </a>
                                            <small class="text-muted d-block text-truncate" style="max-width: 140px;">{{ $inv['file_original_name'] ?: 'invoice.pdf' }}</small>
                                        </div>
                                    @else
                                        <div class="invoice-thumb-card js-preview-trigger" data-img-url="{{ $fileUrl }}" data-title="{{ $inv['service_name'] }} - Invoice Proof" title="Click to view full image">
                                            <img src="{{ $fileUrl }}" alt="Invoice" class="invoice-thumb-img">
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-xs btn-outline-primary js-preview-trigger" data-img-url="{{ $fileUrl }}" data-title="{{ $inv['service_name'] }} - Invoice Proof">
                                                <i class="ti tabler-zoom-in me-1"></i> View Proof
                                            </button>
                                            <small class="text-muted d-block text-truncate" style="max-width: 140px;">{{ $inv['file_original_name'] ?: 'invoice_image' }}</small>
                                        </div>
                                    @endif
                                </div>
                            </td>

                            <td>
                                <div style="max-width: 250px; white-space: normal;">
                                    @if(! empty($inv['transaction_details']))
                                        <span class="text-dark small">{{ $inv['transaction_details'] }}</span>
                                    @else
                                        <span class="text-muted fst-italic small">No additional details provided.</span>
                                    @endif
                                </div>
                            </td>

                            <td>
                                @php
                                    $invStatus = strtolower(trim((string) ($inv['status'] ?? 'pending')));
                                @endphp
                                @if(in_array($invStatus, ['approved', 'approve', 'verified'], true))
                                    <span class="badge bg-success rounded-pill px-3 py-1 fw-bold">
                                        <i class="ti tabler-circle-check me-1"></i> Approved
                                    </span>
                                @elseif(in_array($invStatus, ['rejected', 'reject', 'declined'], true))
                                    <span class="badge bg-danger rounded-pill px-3 py-1 fw-bold" title="{{ $inv['admin_notes'] ?? '' }}">
                                        <i class="ti tabler-circle-x me-1"></i> Rejected
                                    </span>
                                    @if(! empty($inv['admin_notes']))
                                        <div class="small text-danger mt-1 text-truncate" style="max-width: 160px;" title="{{ $inv['admin_notes'] }}">
                                            Note: {{ $inv['admin_notes'] }}
                                        </div>
                                    @endif
                                @else
                                    <span class="badge bg-warning rounded-pill px-3 py-1 text-dark fw-bold">
                                        <i class="ti tabler-clock me-1"></i> Pending Review
                                    </span>
                                @endif
                            </td>

                            <td>
                                <div class="small text-muted">
                                    {{ \Carbon\Carbon::parse($inv['created_at'])->format('M d, Y h:i A') }}
                                </div>
                                @if(! empty($inv['reviewed_at']))
                                    <small class="text-muted d-block" style="font-size: 11px;">
                                        Reviewed: {{ \Carbon\Carbon::parse($inv['reviewed_at'])->format('M d, Y') }}
                                    </small>
                                @endif
                            </td>

                            <td class="text-end">
                                <div class="d-inline-flex gap-1">
                                    <!-- View Details Button -->
                                    <button 
                                        type="button" 
                                        class="btn btn-icon btn-sm btn-outline-info" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#viewDetailsModal{{ $invId }}"
                                        title="View Full Details"
                                    >
                                        <i class="ti tabler-eye"></i>
                                    </button>

                                    <!-- Approve Button -->
                                    @if($inv['status'] !== 'approved')
                                        <form method="POST" action="{{ route('admin.subscription-invoices.approve', $invId) }}" class="d-inline" onsubmit="return confirm('Approve this invoice? The subscription will immediately receive the Verified Invoice badge.');">
                                            @csrf
                                            <button type="submit" class="btn btn-icon btn-sm btn-outline-success" title="Approve Invoice">
                                                <i class="ti tabler-check"></i>
                                            </button>
                                        </form>
                                    @endif

                                    <!-- Reject Button -->
                                    @if($inv['status'] !== 'rejected')
                                        <button 
                                            type="button" 
                                            class="btn btn-icon btn-sm btn-outline-warning" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#rejectModal{{ $invId }}"
                                            title="Reject Invoice"
                                        >
                                            <i class="ti tabler-x"></i>
                                        </button>
                                    @endif

                                    <!-- Delete Button -->
                                    <form method="POST" action="{{ route('admin.subscription-invoices.destroy', $invId) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this invoice record?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-icon btn-sm btn-outline-danger" title="Delete Record">
                                            <i class="ti tabler-trash"></i>
                                        </button>
                                    </form>
                                </div>

                                <!-- Reject Modal for this invoice -->
                                <div class="modal fade" id="rejectModal{{ $invId }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered text-start">
                                        <div class="modal-content">
                                            <form method="POST" action="{{ route('admin.subscription-invoices.reject', $invId) }}">
                                                @csrf
                                                <div class="modal-header border-bottom">
                                                    <h5 class="modal-title text-danger">
                                                        <i class="ti tabler-alert-circle me-1"></i> Reject Invoice Verification
                                                    </h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <p class="small text-muted mb-3">
                                                        Please specify the reason for rejecting this invoice so the owner knows how to correct it.
                                                    </p>
                                                    <div class="mb-3">
                                                        <label class="form-label fw-semibold">Rejection Reason / Note to Owner</label>
                                                        <textarea 
                                                            name="admin_notes" 
                                                            class="form-control" 
                                                            rows="4" 
                                                            placeholder="e.g. The uploaded screenshot is blurry / missing billing date / amount does not match package."
                                                            required
                                                        ></textarea>
                                                    </div>
                                                </div>
                                                <div class="modal-footer border-top">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-danger">Confirm Rejection</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- View Details Modal -->
                                <div class="modal fade" id="viewDetailsModal{{ $invId }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-lg modal-dialog-centered text-start">
                                        <div class="modal-content">
                                            <div class="modal-header border-bottom">
                                                <h5 class="modal-title">
                                                    <i class="ti tabler-file-certificate text-primary me-2"></i>
                                                    Invoice Details: {{ $inv['service_name'] }} (Subscription #{{ $subId }})
                                                </h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <h6 class="fw-bold mb-2">Subscription &amp; Owner Info</h6>
                                                        <ul class="list-unstyled mb-0 small">
                                                            <li class="mb-2"><strong>Service:</strong> {{ $inv['service_name'] }}</li>
                                                            <li class="mb-2"><strong>Owner Name:</strong> {{ $inv['user_name'] }}</li>
                                                            <li class="mb-2"><strong>Owner Email:</strong> {{ $inv['user_email'] }}</li>
                                                            <li class="mb-2">
                                                                <strong>Current Status:</strong> 
                                                                <span class="badge {{ $inv['status'] === 'approved' ? 'bg-success' : ($inv['status'] === 'rejected' ? 'bg-danger' : 'bg-warning text-dark') }}">
                                                                    {{ ucfirst($inv['status']) }}
                                                                </span>
                                                            </li>
                                                            <li class="mb-2"><strong>Submitted:</strong> {{ \Carbon\Carbon::parse($inv['created_at'])->format('M d, Y h:i A') }}</li>
                                                            @if(! empty($inv['admin_notes']))
                                                                <li class="mb-2 text-danger"><strong>Admin Feedback:</strong> {{ $inv['admin_notes'] }}</li>
                                                            @endif
                                                        </ul>

                                                        <div class="mt-4">
                                                            <h6 class="fw-bold mb-2">Transaction Details Provided by Owner</h6>
                                                            <div class="p-3 bg-light rounded border small">
                                                                {{ $inv['transaction_details'] ?: 'No transaction details written.' }}
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <h6 class="fw-bold mb-2">Uploaded Document / Proof</h6>
                                                        @if($isPdf)
                                                            <div class="text-center p-4 bg-light rounded border">
                                                                <i class="fa-solid fa-file-pdf fs-1 text-danger mb-3 d-block"></i>
                                                                <div class="fw-semibold mb-2">{{ $inv['file_original_name'] ?: 'invoice.pdf' }}</div>
                                                                <a href="{{ $fileUrl }}" target="_blank" class="btn btn-sm btn-danger">
                                                                    <i class="ti tabler-download me-1"></i> Open / Download PDF
                                                                </a>
                                                            </div>
                                                        @else
                                                            <div class="text-center p-2 bg-light rounded border">
                                                                <img src="{{ $fileUrl }}" alt="Invoice" class="img-fluid rounded mb-2" style="max-height: 280px; object-fit: contain;">
                                                                <div>
                                                                    <a href="{{ $fileUrl }}" target="_blank" class="btn btn-xs btn-outline-primary">
                                                                        <i class="ti tabler-arrows-maximize me-1"></i> View Full Image in New Tab
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer border-top d-flex justify-content-between">
                                                <div>
                                                    <a href="{{ route('subscriptions.manage', $subId) }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                                                        <i class="ti tabler-external-link me-1"></i> Open Subscription Page
                                                    </a>
                                                </div>
                                                <div class="d-flex gap-2">
                                                    @if($inv['status'] !== 'approved')
                                                        <form method="POST" action="{{ route('admin.subscription-invoices.approve', $invId) }}">
                                                            @csrf
                                                            <button type="submit" class="btn btn-sm btn-success">
                                                                <i class="ti tabler-check me-1"></i> Approve
                                                            </button>
                                                        </form>
                                                    @endif
                                                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <i class="ti tabler-file-off fs-1 d-block mb-2 text-secondary"></i>
                                <strong>No invoice verifications found for this filter.</strong>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Global Lightbox Modal for Image Previews -->
<div class="modal fade" id="imageLightboxModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-bottom py-2">
                <h5 class="modal-title" id="lightboxTitle">Invoice Proof Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-2 text-center bg-dark">
                <img id="lightboxImage" src="" alt="Proof Preview" class="img-fluid rounded" style="max-height: 75vh; object-fit: contain;">
            </div>
            <div class="modal-footer py-2 border-top justify-content-between">
                <a id="lightboxOpenTab" href="#" target="_blank" class="btn btn-sm btn-outline-primary">
                    <i class="ti tabler-external-link me-1"></i> Open in New Tab
                </a>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const triggers = document.querySelectorAll('.js-preview-trigger');
        const lightboxModalEl = document.getElementById('imageLightboxModal');
        const lightboxImg = document.getElementById('lightboxImage');
        const lightboxTitle = document.getElementById('lightboxTitle');
        const lightboxOpenTab = document.getElementById('lightboxOpenTab');

        let bsModal = null;
        if (lightboxModalEl && window.bootstrap && window.bootstrap.Modal) {
            bsModal = new window.bootstrap.Modal(lightboxModalEl);
        }

        triggers.forEach(function (trigger) {
            trigger.addEventListener('click', function (e) {
                e.preventDefault();
                const url = trigger.getAttribute('data-img-url');
                const title = trigger.getAttribute('data-title') || 'Invoice Proof Preview';

                if (lightboxImg) lightboxImg.src = url;
                if (lightboxTitle) lightboxTitle.textContent = title;
                if (lightboxOpenTab) lightboxOpenTab.href = url;

                if (bsModal) {
                    bsModal.show();
                } else if (window.jQuery && typeof window.jQuery(lightboxModalEl).modal === 'function') {
                    window.jQuery(lightboxModalEl).modal('show');
                }
            });
        });
    });
</script>
@endpush
@endsection