@extends('layouts.app')

@section('title', 'Credit Note Details')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('credit-notes.index') }}">Credit Notes</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $creditNote->credit_note_number }}</li>
            </ol>
        </nav>
        <h2 class="h4 mb-0">{{ $creditNote->credit_note_number }}</h2>
    </div>
    <div class="d-flex gap-2">
        @if($creditNote->status == 'open')
            <button type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#refundModal">
                <i class="fas fa-money-bill-wave me-2"></i> Refund
            </button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#applyCreditModal">
                <i class="fas fa-file-invoice me-2"></i> Apply to Invoice
            </button>
        @endif
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card stat-card border-0 mb-4 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="card-title text-primary mb-0 fw-bold text-uppercase" style="letter-spacing: 1px;">Credit Note Details</h5>
                    @php
                        $badgeClass = [
                            'open' => 'bg-light-primary text-primary',
                            'applied' => 'bg-light-success text-success',
                            'refunded' => 'bg-light-info text-info',
                            'draft' => 'bg-light-secondary text-secondary'
                        ][$creditNote->status] ?? 'bg-light-secondary text-secondary';
                    @endphp
                    <span class="badge {{ $badgeClass }} px-3 py-2 text-uppercase" style="font-size: 0.75rem;">
                        {{ $creditNote->status }}
                    </span>
                </div>
                
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead class="table-light text-muted small text-uppercase">
                            <tr>
                                <th>Item Name</th>
                                <th class="text-center">Quantity</th>
                                <th class="text-end">Rate</th>
                                <th class="text-end">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($creditNote->items as $item)
                                <tr>
                                    <td>{{ $item->name }}</td>
                                    <td class="text-center">{{ number_format($item->quantity, 2) }}</td>
                                     <td class="text-end">{{ formatCurrency($item->rate) }}</td>
                                     <td class="text-end fw-semibold">{{ formatCurrency($item->amount) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="border-top">
                            <tr>
                                <td colspan="3" class="text-end text-muted">Subtotal</td>
                                 <td class="text-end">{{ formatCurrency($creditNote->subtotal) }}</td>
                            </tr>
                            @if($creditNote->tax_total > 0)
                            <tr>
                                <td colspan="3" class="text-end text-muted">Tax</td>
                                 <td class="text-end">{{ formatCurrency($creditNote->tax_total) }}</td>
                            </tr>
                            @endif
                            <tr class="fw-bold h5">
                                <td colspan="3" class="text-end border-top">Total Credit</td>
                                 <td class="text-end text-primary border-top">{{ formatCurrency($creditNote->total) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div class="card stat-card border-0 mb-4 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-0">
                    <div>
                        <span class="text-muted small text-uppercase fw-bold">Used Amount</span>
                        <div class="h5 fw-bold text-success mb-0">{{ formatCurrency($creditNote->used_amount) }}</div>
                    </div>
                    <div class="text-end">
                        <span class="text-muted small text-uppercase fw-bold">Remaining Balance</span>
                        <div class="h4 fw-bold text-primary mb-0">{{ formatCurrency($creditNote->remaining_balance) }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card stat-card border-0 mb-4 shadow-sm">
            <div class="card-body p-4">
                <h5 class="card-title text-primary mb-4 fw-bold">Customer Detail</h5>
                <div class="d-flex align-items-center mb-4">
                    <div class="avatar-sm bg-light-primary text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 45px; height: 45px;">
                        <i class="fas fa-user"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-bold">{{ $creditNote->customer->name }}</h6>
                        <span class="text-muted small">{{ $creditNote->customer->email }}</span>
                    </div>
                </div>
                <hr class="my-3 text-muted">
                <div class="small">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">CN Date:</span>
                        <span class="fw-bold">{{ \Carbon\Carbon::parse($creditNote->date)->format('d M Y') }}</span>
                    </div>
                    @if($creditNote->invoice)
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Linked Invoice:</span>
                        <span class="fw-bold"><a href="{{ route('invoices.show', $creditNote->invoice_id) }}">{{ $creditNote->invoice->invoice_number }}</a></span>
                    </div>
                    @endif
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Reason:</span>
                        <span class="fw-bold">{{ $creditNote->reason ?? 'N/A' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Refund Modal -->
<div class="modal fade" id="refundModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('credit-notes.refund', $creditNote) }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Record Refund</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="small text-muted mb-4">Record a money refund for this credit note.</p>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Refund Amount *</label>
                        <div class="input-group">
                            <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                            <input type="number" name="amount" class="form-control" step="0.01" max="{{ $creditNote->remaining_balance }}" value="{{ $creditNote->remaining_balance }}" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Payment Mode</label>
                        <select class="form-select">
                            <option>Cash</option>
                            <option>Bank Transfer</option>
                            <option>Cheque</option>
                        </select>
                    </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">Save Refund</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Apply Credit Modal -->
<div class="modal fade" id="applyCreditModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('credit-notes.apply-to-invoice', $creditNote) }}" method="POST">
            @csrf
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Apply Credit to Invoice</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="small text-muted mb-4">Apply available credit balance to an open invoice.</p>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Select Invoice *</label>
                        <select name="invoice_id" class="form-select" required>
                            <option value="">Select an Invoice</option>
                            @foreach($invoices as $inv)
                                <option value="{{ $inv->id }}">{{ $inv->invoice_number }} (Balance: {{ formatCurrency($inv->pending_amount) }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Amount to Apply *</label>
                        <div class="input-group">
                            <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                            <input type="number" name="amount" class="form-control" step="0.01" max="{{ $creditNote->remaining_balance }}" value="{{ $creditNote->remaining_balance }}" required>
                        </div>
                    </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 px-4">Apply Credit</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection