@extends('layouts.app')

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

@section('content')
<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1 small text-uppercase">
                <li class="breadcrumb-item"><a href="{{ route('vendor-credits.index') }}" class="text-decoration-none">Vendor Credits</a></li>
                <li class="breadcrumb-item active">Credit Details</li>
            </ol>
        </nav>
        <h2 class="h4 mb-0 text-dark fw-bold">{{ $vendorCredit->credit_number }}</h2>
    </div>
    <div class="d-flex gap-2">
        @if($vendorCredit->status == 'open')
            <button class="btn btn-primary shadow-sm px-4 fw-bold" data-bs-toggle="modal" data-bs-target="#applyCreditModal">Apply to Bill</button>
            <button class="btn btn-outline-success shadow-sm px-4 fw-bold" data-bs-toggle="modal" data-bs-target="#refundModal">Refund</button>
        @endif
        <a href="{{ route('vendor-credits.edit', $vendorCredit) }}" class="btn btn-white border shadow-sm px-4 fw-bold">Edit</a>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4 text-center border-bottom bg-light bg-opacity-50">
                <div class="row">
                    <div class="col-4 border-end">
                        <label class="small text-muted text-uppercase fw-bold d-block mb-1">Total Credit</label>
                        <h4 class="fw-bold text-dark mb-0">{{ formatCurrency($vendorCredit->total) }}</h4>
                    </div>
                    <div class="col-4 border-end">
                        <label class="small text-muted text-uppercase fw-bold d-block mb-1">Used Amount</label>
                        <h4 class="fw-bold text-secondary mb-0">{{ formatCurrency($vendorCredit->used_amount) }}</h4>
                    </div>
                    <div class="col-4">
                        <label class="small text-muted text-uppercase fw-bold d-block mb-1">Remaining</label>
                        <h4 class="fw-bold text-primary mb-0">{{ formatCurrency($vendorCredit->remaining_amount) }}</h4>
                    </div>
                </div>
            </div>
            <div class="card-body p-4">
                <div class="row mb-5">
                    <div class="col-6">
                        <label class="small text-muted text-uppercase fw-bold d-block mb-1">Vendor Details</label>
                        <h6 class="text-dark fw-bold mb-0">{{ $vendorCredit->vendor->name }}</h6>
                    </div>
                    <div class="col-3 text-center border-start">
                        <label class="small text-muted text-uppercase fw-bold d-block mb-1">Date</label>
                        <h6 class="text-dark fw-bold mb-0">{{ $vendorCredit->date->format('d M Y') }}</h6>
                    </div>
                    <div class="col-3 text-end border-start">
                        <label class="small text-muted text-uppercase fw-bold d-block mb-1">Status</label>
                        <span class="badge {{ $vendorCredit->status == 'open' ? 'bg-success' : 'bg-secondary' }} rounded-pill px-3">
                            {{ ucfirst($vendorCredit->status) }}
                        </span>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead class="bg-light text-muted small text-uppercase fw-bold">
                            <tr>
                                <th class="ps-0">Item Description</th>
                                <th class="text-center">Qty</th>
                                <th class="text-end">Rate</th>
                                <th class="text-end pe-0">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($vendorCredit->items as $item)
                            <tr>
                                <td class="ps-0 fw-bold text-dark">{{ $item->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 pe-0 fw-bold">{{ formatCurrency($item->amount) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="row justify-content-end mt-4">
                    <div class="col-md-5">
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted fw-bold text-uppercase">Sub Total</span>
                            <span class="fw-bold text-dark">{{ formatCurrency($vendorCredit->subtotal) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted fw-bold text-uppercase">Tax ({{ optional($vendorCredit->taxDetails)->rate ?? 0 }}%)</span>
                            <span class="fw-bold text-dark">{{ formatCurrency($vendorCredit->tax_amount) }}</span>
                        </div>
                        <div class="d-flex justify-content-between border-top pt-2 mt-2">
                            <span class="fw-bold text-dark h5 mb-0">TOTAL</span>
                            <span class="fw-bold text-primary h5 mb-0">{{ formatCurrency($vendorCredit->total) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        @if($vendorCredit->notes)
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark text-uppercase small mb-3">Notes</h6>
                <p class="text-muted small mb-0">{{ $vendorCredit->notes }}</p>
            </div>
        </div>
        @endif

        @if($vendorCredit->bill_id)
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark text-uppercase small mb-3">Linked Bill</h6>
                <div class="d-flex justify-content-between align-items-center mb-0">
                    <div>
                        <div class="fw-bold text-dark">Bill #{{ $vendorCredit->bill->bill_number }}</div>
                        <div class="small text-muted">{{ $vendorCredit->bill->bill_date->format('d M Y') }}</div>
                    </div>
                    <a href="{{ route('bills.show', $vendorCredit->bill_id) }}" class="btn btn-sm btn-light border"><i class="fas fa-external-link-alt"></i></a>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Apply Credit Modal -->
<div class="modal fade" id="applyCreditModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-bottom p-4">
                <h5 class="modal-title fw-bold">Apply Credit to Bill</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('vendor-credits.apply', $vendorCredit) }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-4 text-center">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Available Balance</div>
                        <h4 class="fw-bold text-primary">{{ formatCurrency($vendorCredit->remaining_amount) }}</h4>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small text-muted fw-bold text-uppercase">Select Bill *</label>
                        <select name="bill_id" class="form-select" required>
                            <option value="">Choose a bill...</option>
                            @foreach($availableBills as $bill)
                                @php $remaining = $bill->total - $bill->paid_amount; @endphp
                                <option value="{{ $bill->id }}">{{ $bill->bill_number }} (Remaining: {{ formatCurrency($remaining) }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-0">
                        <label class="form-label small text-muted fw-bold text-uppercase">Amount to Apply *</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white">{{ getCurrencySymbol() }}</span>
                            <input type="number" name="amount" class="form-control" step="0.01" max="{{ $vendorCredit->remaining_amount }}" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top p-4">
                    <button type="submit" class="btn btn-primary w-100 fw-bold py-2">Apply Credit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Refund Modal -->
<div class="modal fade" id="refundModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-bottom p-4">
                <h5 class="modal-title fw-bold">Record Refund</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('vendor-credits.refund', $vendorCredit) }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-4 text-center">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Available for Refund</div>
                        <h4 class="fw-bold text-success">{{ formatCurrency($vendorCredit->remaining_amount) }}</h4>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small text-muted fw-bold text-uppercase">Refund Amount *</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white">{{ getCurrencySymbol() }}</span>
                            <input type="number" name="amount" class="form-control" step="0.01" value="{{ $vendorCredit->remaining_amount }}" max="{{ $vendorCredit->remaining_amount }}" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small text-muted fw-bold text-uppercase">Refund Date *</label>
                        <input type="date" name="refund_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="mb-0">
                        <label class="form-label small text-muted fw-bold text-uppercase">Payment Account *</label>
                        <select name="payment_mode" class="form-select" required>
                            <option value="Cash">Cash</option>
                            <option value="Bank">Bank Transfer</option>
                            <option value="Card">Credit Card</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer border-top p-4">
                    <button type="submit" class="btn btn-success w-100 fw-bold py-2">Save Refund</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection