@extends('layouts.app')

@section('title', 'Returns & Refunds')
@section('page_title', 'Returns & Reversals Registry')

@section('content')
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                <i class="bi bi-hourglass-split"></i>
            </div>
            <h6 class="text-secondary small fw-bold">PENDING RETURNS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $refunds->where('status', 'pending')->count() }}</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-success bg-opacity-10 text-success">
                <i class="bi bi-arrow-counterclockwise"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TOTAL REFUNDED</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($refunds->where('status', 'approved')->sum('refund_amount')) }} <small class="fs-6 text-muted">UGX</small></h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                <i class="bi bi-x-octagon"></i>
            </div>
            <h6 class="text-secondary small fw-bold">REJECTED RETURNS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $refunds->where('status', 'rejected')->count() }}</h3>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm p-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h5 class="fw-bold mb-0 text-dark">Returns Register</h5>
        <button class="btn btn-primary d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#createRefundModal">
            <i class="bi bi-plus-circle"></i> Initiate Return / Refund
        </button>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Refund #</th>
                    <th>Invoice #</th>
                    <th>Customer</th>
                    <th>Type</th>
                    <th class="text-end">Refund Amount</th>
                    <th>Claimed By</th>
                    <th>Status</th>
                    <th class="text-end no-print">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($refunds as $ref)
                    <tr>
                        <td class="fw-bold">{{ $ref->refund_number }}</td>
                        <td><code class="small">{{ $ref->invoice->invoice_number }}</code></td>
                        <td>{{ $ref->client->full_name }}</td>
                        <td>
                            <span class="badge bg-secondary-subtle text-secondary">
                                {{ ucfirst(str_replace('_', ' ', $ref->refund_type)) }}
                            </span>
                        </td>
                        <td class="text-end fw-bold text-dark">{{ number_format($ref->refund_amount) }} UGX</td>
                        <td>
                            <div class="small">{{ $ref->requestedBy->full_name }}</div>
                            <small class="text-secondary small">{{ $ref->created_at->format('M d, Y') }}</small>
                        </td>
                        <td>
                            <span class="badge bg-{{ $ref->status === 'approved' ? 'success' : ($ref->status === 'rejected' ? 'danger' : 'warning') }}">
                                {{ ucfirst($ref->status) }}
                            </span>
                        </td>
                        <td class="text-end no-print">
                            @if($ref->status === 'pending' && (auth()->user()->isManager() || auth()->user()->isSuperAdmin()))
                                <form action="{{ route('refunds.approve', $ref->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-success me-1" title="Approve"><i class="bi bi-check-lg"></i> Approve</button>
                                </form>
                                <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#rejectRefundModal" data-id="{{ $ref->id }}" title="Reject">
                                    <i class="bi bi-x-lg"></i> Reject
                                </button>
                            @else
                                -
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5 text-muted">No refund entries logged yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Create Refund Modal -->
<div class="modal fade" id="createRefundModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Initiate Return / Refund Request</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('refunds.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row g-2 mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">SELECT PAID INVOICE *</label>
                            <select class="form-select" id="refundInvoiceSelect" name="invoice_id" required onchange="loadInvoiceItems()">
                                <option value="">-- Select Invoice --</option>
                                @foreach($invoices as $inv)
                                    <option value="{{ $inv->id }}">{{ $inv->invoice_number }} - {{ $inv->client->full_name }} ({{ number_format($inv->total_amount) }} UGX)</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">REFUND TYPE *</label>
                            <select class="form-select" name="refund_type" required>
                                <option value="product_return">Product Return (Restores Stock)</option>
                                <option value="service_refund">Service Refund</option>
                                <option value="invoice_reversal">Full Invoice Reversal</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">REASON FOR REFUND *</label>
                        <input type="text" class="form-control" name="reason" required placeholder="e.g. Defective notebook returned, double-billed installation">
                    </div>

                    <h6 class="fw-bold mt-4 mb-2 text-primary">Invoice Line Items Selection</h6>
                    <div class="table-responsive border rounded p-2 bg-light mb-3" style="max-height: 250px; overflow-y: auto;">
                        <table class="table table-sm align-middle table-borderless mb-0">
                            <thead>
                                <tr class="border-bottom">
                                    <th style="width: 5%;">Select</th>
                                    <th style="width: 45%;">Item / Code</th>
                                    <th style="width: 15%;" class="text-center">Qty Bought</th>
                                    <th style="width: 15%;" class="text-center">Qty to Return</th>
                                    <th style="width: 20%;" class="text-end">Total Price</th>
                                </tr>
                            </thead>
                            <tbody id="refundInvoiceItems">
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">Please select an invoice above to view items.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Submit Claim</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Reject Refund Modal -->
<div class="modal fade" id="rejectRefundModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold text-danger">Reject Refund Request</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="" method="POST" id="rejectRefundForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">REASON FOR REJECTION *</label>
                        <input type="text" class="form-control" name="rejection_reason" required placeholder="e.g. Receipt missing, items passed return period">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Confirm Reject</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Invoices list embedded as JSON for interactive item loading
    const invoicesData = {!! json_encode($invoices->keyBy('id')->toArray()) !!};

    function loadInvoiceItems() {
        const select = document.getElementById('refundInvoiceSelect');
        const tbody = document.getElementById('refundInvoiceItems');
        const invId = select.value;
        
        tbody.innerHTML = '';

        if (!invId || !invoicesData[invId]) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted">Please select an invoice above to view items.</td></tr>';
            return;
        }

        const items = invoicesData[invId].items;
        if (!items || items.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted">No items in this invoice.</td></tr>';
            return;
        }

        items.forEach((item, index) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>
                    <input type="checkbox" name="items[${index}][selected]" value="1" onchange="toggleItemInputs(this, ${index})">
                    <input type="hidden" name="items[${index}][item_type]" value="${item.item_type}" disabled>
                    <input type="hidden" name="items[${index}][item_id]" value="${item.item_id}" disabled>
                    <input type="hidden" name="items[${index}][item_name]" value="${item.item_name}" disabled>
                    <input type="hidden" name="items[${index}][unit_price]" value="${item.unit_price}" disabled>
                    <input type="hidden" name="items[${index}][stock_restored]" value="1" disabled>
                </td>
                <td>
                    <div class="fw-semibold">${item.item_name}</div>
                    <small class="text-secondary">${item.item_code}</small>
                </td>
                <td class="text-center">${item.quantity}</td>
                <td class="text-center">
                    <input type="number" class="form-control form-control-sm text-center" 
                           name="items[${index}][quantity]" value="${item.quantity}" min="1" max="${item.quantity}" 
                           disabled oninput="recalcItemTotal(this, ${index}, ${item.unit_price})">
                </td>
                <td class="text-end">
                    <input type="number" class="form-control form-control-sm text-end border-0 bg-transparent fw-bold" 
                           name="items[${index}][total_price]" value="${item.total_price}" readonly disabled>
                </td>
            `;
            tbody.appendChild(tr);
        });
    }

    function toggleItemInputs(checkbox, index) {
        const row = checkbox.closest('tr');
        const inputs = row.querySelectorAll('input:not([type="checkbox"])');
        
        inputs.forEach(input => {
            input.disabled = !checkbox.checked;
        });
    }

    function recalcItemTotal(qtyInput, index, price) {
        const row = qtyInput.closest('tr');
        const totalInput = row.querySelector(`input[name="items[${index}][total_price]"]`);
        const qty = parseInt(qtyInput.value) || 0;
        
        totalInput.value = (qty * price).toFixed(2);
    }

    // Set reject action URL on modal show
    const rejectModal = document.getElementById('rejectRefundModal');
    rejectModal.addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;
        const id = btn.getAttribute('data-id');
        
        const form = document.getElementById('rejectRefundForm');
        form.action = "{{ route('refunds.reject', ':id') }}".replace(':id', id);
    });
</script>
@endsection