@extends('layouts.app')

@section('title', 'Invoice Details')

@section('content')
<nav aria-label="breadcrumb" class="d-print-none">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('invoices.index') }}">Invoices</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ $invoice->invoice_number }}</li>
  </ol>
</nav>

<div class="d-flex justify-content-between align-items-center mb-4 d-print-none">
    <div class="col-6 text-end d-print-none">
        <div class="btn-group shadow-sm">
            @if($invoice->status !== 'paid')
            <button class="btn btn-primary px-4" data-bs-toggle="modal" data-bs-target="#paymentModal">
                <i class="fas fa-money-check-alt me-2"></i>Record Payment
            </button>
            @endif
            <a href="{{ route('credit-notes.create', ['invoice_id' => $invoice->id]) }}" class="btn btn-outline-danger px-4">
                <i class="fas fa-file-invoice-dollar me-2"></i>Apply Credit
            </a>
            <button onclick="window.print()" class="btn btn-outline-secondary">
                <i class="fas fa-print me-2"></i>Print
            </button>
        </div>
        <div class="dropdown d-inline-block ms-2">
            <button class="btn btn-light rounded-circle shadow-sm" type="button" data-bs-toggle="dropdown">
                <i class="fas fa-ellipsis-v"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow border-0">
                <li><a class="dropdown-item" href="{{ route('invoices.pdf', $invoice) }}"><i class="fas fa-file-pdf me-2 text-muted"></i>Download PDF</a></li>
                <li><a class="dropdown-item" href="{{ route('invoices.edit', $invoice) }}"><i class="fas fa-edit me-2 text-muted"></i>Edit Invoice</a></li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <form action="{{ route('invoices.destroy', $invoice) }}" method="POST" onsubmit="return confirm('Delete this invoice?')">
                        @csrf @method('DELETE')
                        <button class="dropdown-item text-danger"><i class="fas fa-trash-alt me-2"></i>Delete</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</div>

@if($invoice->quote || $invoice->salesOrder)
<div class="alert alert-light border shadow-sm rounded-4 mb-4 d-flex align-items-center py-2 px-3">
    <i class="fas fa-link text-muted me-3"></i>
    <span class="small text-muted me-2">Generated from:</span>
    @if($invoice->salesOrder)
        <a href="{{ route('sales-orders.show', $invoice->salesOrder->id) }}" class="badge bg-info text-dark rounded-pill text-decoration-none me-2">
            <i class="fas fa-shopping-cart me-1"></i>{{ $invoice->salesOrder->order_number }}
        </a>
    @endif
    @if($invoice->quote)
        <a href="{{ route('quotes.show', $invoice->quote->id) }}" class="badge bg-secondary rounded-pill text-decoration-none">
            <i class="fas fa-file-contract me-1"></i>{{ $invoice->quote->quote_number }}
        </a>
    @endif
</div>
@endif

<div class="card stat-card border-0 invoice-container">
    <div class="card-body p-5">
        <!-- Invoice Header -->
        <div class="row mb-5">
            <div class="col-6">
                <h1 class="text-primary mb-0"><i class="fas fa-calculator me-2"></i> ACCOUNTIFY</h1>
                <p class="text-muted small mt-1">Your Trusted Accounting Partner</p>
            </div>
            <div class="col-6 text-end">
                <h2 class="text-muted fw-light">INVOICE</h2>
                <h5 class="fw-bold">{{ $invoice->invoice_number }}</h5>
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-4">
                <p class="text-muted small fw-bold mb-1">BILL TO</p>
                <h6 class="mb-1 text-primary">{{ $invoice->customer->name }}</h6>
                @if($invoice->customer->company_name)
                    <p class="mb-1 small">{{ $invoice->customer->company_name }}</p>
                @endif
                <address class="text-muted small mb-0">
                    {!! nl2br(e($invoice->customer->billing_address)) !!}
                </address>
                @if($invoice->customer->phone)
                    <p class="small mb-0">Phone: {{ $invoice->customer->phone }}</p>
                @endif
            </div>
            <div class="col-4"></div>
            <div class="col-4 text-end">
                <div class="mb-2">
                    <span class="text-muted small fw-bold">INVOICE DATE:</span>
                    <span class="small ms-2">{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('d M Y') }}</span>
                </div>
                <div class="mb-2">
                    <span class="text-muted small fw-bold">DUE DATE:</span>
                    <span class="small ms-2">{{ \Carbon\Carbon::parse($invoice->due_date)->format('d M Y') }}</span>
                </div>
                <div class="mb-0">
                    <span class="text-muted small fw-bold">STATUS:</span>
                    @php
                        $statusClass = [
                            'unpaid' => 'bg-danger text-white',
                            'partial' => 'bg-warning text-dark',
                            'paid' => 'bg-success text-white',
                            'void' => 'bg-secondary text-white',
                        ][$invoice->status] ?? 'bg-light text-muted';
                    @endphp
                    <span class="badge {{ $statusClass }} rounded-pill px-3 ms-2 text-uppercase small">
                        {{ $invoice->status }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Items Table -->
        <div class="table-responsive mb-5">
            <table class="table table-borderless border-bottom">
                <thead class="bg-primary text-white">
                    <tr>
                        <th class="ps-3 py-3 rounded-start">Item & Description</th>
                        <th class="text-end py-3">Qty</th>
                        <th class="text-end py-3">Rate</th>
                        <th class="text-end pe-3 py-3 rounded-end">Amount</th>
                    </tr>
                </thead>
                <tbody class="text-muted">
                    @foreach($invoice->items as $item)
                        <tr class="border-bottom">
                            <td class="ps-3 py-3">
                                <span class="text-dark fw-semibold">{{ $item->item_name }}</span>
                            </td>
                            <td class="text-end py-3">{{ number_format($item->quantity, 2) }}</td>
                            <td class="text-end py-3">{{ formatCurrency($item->rate) }}</td>
                            <td class="text-end pe-3 py-3">{{ formatCurrency($item->amount) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Totals -->
        <div class="row mt-4">
            <div class="col-7">
                @if($invoice->notes)
                    <div class="bg-light p-4 rounded">
                        <h6 class="text-muted small fw-bold mb-2">NOTES</h6>
                        <p class="small mb-0 text-muted">{!! nl2br(e($invoice->notes)) !!}</p>
                    </div>
                @endif
            </div>
            <div class="col-5">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted small fw-bold">SUB TOTAL</span>
                    <span class="small">{{ formatCurrency($invoice->subtotal) }}</span>
                </div>
                @if($invoice->tax_id && $invoice->taxDetails)
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted small fw-bold text-uppercase">{{ $invoice->taxDetails->name }} ({{ $invoice->taxDetails->rate }}%)</span>
                        <span class="small">{{ formatCurrency($invoice->tax_amount) }}</span>
                    </div>
                @elseif($invoice->tax_amount > 0)
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted small fw-bold">TAX</span>
                        <span class="small">{{ formatCurrency($invoice->tax_amount) }}</span>
                    </div>
                @endif
                <div class="d-flex justify-content-between border-top pt-3 h5 fw-bold text-primary">
                    <span>TOTAL</span>
                    <span>{{ formatCurrency($invoice->total_amount) }}</span>
                </div>
            </div>
        </div>

        <div class="mt-5 pt-5 text-center border-top text-muted small">
            <p>Thank you for choosing Accountify. Please process your payment by the due date.</p>
        </div>
    </div>
</div>

{{-- Payment History --}}
@if($invoice->payments->count())
<div class="card border-0 shadow-sm rounded-4 mt-4 d-print-none">
    <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold text-primary"><i class="fas fa-history me-2"></i>Payment History</h6>
        <span class="badge bg-success rounded-pill">{{ $invoice->payments->count() }} payment(s)</span>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr>
                    <th class="ps-4 py-3">Payment #</th>
                    <th class="py-3">Date</th>
                    <th class="py-3">Mode</th>
                    <th class="py-3">Reference</th>
                    <th class="py-3 text-end pe-4">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->payments as $payment)
                <tr>
                    <td class="ps-4 py-3 fw-semibold">{{ $payment->payment_number }}</td>
                    <td class="py-3">{{ \Carbon\Carbon::parse($payment->payment_date)->format('d M Y') }}</td>
                    <td class="py-3"><span class="badge bg-light text-dark border text-capitalize">{{ $payment->payment_mode }}</span></td>
                    <td class="py-3 text-muted">{{ $payment->reference_number ?? '—' }}</td>
                    <td class="py-3 text-end pe-4 fw-bold text-success">{{ formatCurrency($payment->amount) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="border-top">
                <tr>
                    <td colspan="4" class="ps-4 py-3 text-end fw-bold text-muted">Total Paid:</td>
                    <td class="py-3 text-end pe-4 fw-bold text-success">{{ formatCurrency($invoice->paid_amount) }}</td>
                </tr>
                @if($invoice->pending_amount > 0)
                <tr>
                    <td colspan="4" class="ps-4 py-2 text-end fw-bold text-muted">Pending Balance:</td>
                    <td class="py-2 text-end pe-4 fw-bold text-danger">{{ formatCurrency($invoice->pending_amount) }}</td>
                </tr>
                @endif
            </tfoot>
        </table>
    </div>
</div>
@endif

{{-- Record Payment Modal --}}
@if($invoice->status !== 'paid')
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header bg-primary text-white rounded-top-4 px-4">
                <h5 class="modal-title fw-bold" id="paymentModalLabel">
                    <i class="fas fa-money-check-alt me-2"></i>Record Payment
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('payments.store') }}" method="POST" id="quickPaymentForm">
                @csrf
                {{-- Pre-filled hidden fields --}}
                <input type="hidden" name="customer_id" value="{{ $invoice->customer_id }}">
                <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
                <input type="hidden" name="payment_number" id="modalPaymentNumber" value="{{ $nextPaymentNumber }}">

                <div class="modal-body px-4 py-4">

                    {{-- Invoice Summary Banner --}}
                    <div class="alert alert-light border rounded-3 mb-4 d-flex justify-content-between align-items-center py-3">
                        <div>
                            <span class="text-muted small fw-bold">INVOICE</span>
                            <div class="fw-bold text-primary">{{ $invoice->invoice_number }} &mdash; {{ $invoice->customer->name }}</div>
                        </div>
                        <div class="text-end">
                            <div class="text-muted small">Invoice Total: <strong>{{ formatCurrency($invoice->total_amount) }}</strong></div>
                            <div class="text-danger small fw-bold">Pending: {{ formatCurrency($invoice->pending_amount) }}</div>
                        </div>
                    </div>

                    <div class="row g-3">
                        {{-- Amount --}}
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Amount Received <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-white">{{ getCurrencySymbol() }}</span>
                                <input type="number" step="0.01" min="0.01"
                                       max="{{ $invoice->pending_amount }}"
                                       name="amount" id="modalAmount"
                                       class="form-control"
                                       value="{{ number_format($invoice->pending_amount, 2, '.', '') }}"
                                       required>
                            </div>
                            <div class="form-text text-muted">Max: {{ formatCurrency($invoice->pending_amount) }}</div>
                        </div>

                        {{-- Payment Date --}}
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Payment Date <span class="text-danger">*</span></label>
                            <input type="date" name="payment_date" class="form-control"
                                   value="{{ date('Y-m-d') }}" required>
                        </div>

                        {{-- Payment Mode --}}
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Payment Mode <span class="text-danger">*</span></label>
                            <select name="payment_mode" class="form-select" required>
                                <option value="bank">Bank Transfer</option>
                                <option value="cash">Cash</option>
                                <option value="upi">UPI / Digital</option>
                                <option value="check">Cheque</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Deposit To <span class="text-danger">*</span></label>
                            <select name="bank_account_id" class="form-select @error('bank_account_id') is-invalid @enderror" required>
                                <option value="">— Select Account —</option>
                                @foreach($bankAccounts as $bankAccount)
                                    <option value="{{ $bankAccount->id }}">
                                        {{ $bankAccount->name }} ({{ ucfirst($bankAccount->account_type) }})
                                    </option>
                                @endforeach
                            </select>
                            @error('bank_account_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Reference --}}
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Reference #</label>
                            <input type="text" name="reference_number" class="form-control"
                                   placeholder="TRN-XXXXXXX">
                        </div>

                        {{-- Notes --}}
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Notes</label>
                            <textarea name="notes" class="form-control" rows="2"
                                      placeholder="Optional note..."></textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-footer px-4 py-3 border-top bg-light rounded-bottom-4">
                    <button type="button" class="btn btn-light border px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-5">
                        <i class="fas fa-check me-2"></i>Save Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

<style>
@media print {
    body { background: white; }
    .stat-card { box-shadow: none !important; }
    .container-fluid { width: 100% !important; max-width: 100% !important; }
    #sidebar-wrapper, .d-print-none, .navbar { display: none !important; }
    #page-content-wrapper { padding-left: 0 !important; }
    .card-body { padding: 0 !important; }
    .bg-primary { background-color: #0d6efd !important; -webkit-print-color-adjust: exact; }
    .text-primary { color: #0d6efd !important; -webkit-print-color-adjust: exact; }
}
</style>
@endsection