@push('title')
    Sale Details - {{ $sale->invoice_no }}
@endpush
<x-app-layout>
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="mb-0">Sale Details: {{ $sale->invoice_no }}</h5>
                <div>
                    <a href="{{ route('sales') }}" class="btn btn-secondary pe-2">
                        <i class='bx bx-arrow-back'></i> Back
                    </a>
                    <a href="{{ route('pos.receipt', $sale->id) }}" target="_blank" class="btn btn-primary">
                        <i class='bx bx-printer me-1'></i> Print Receipt
                    </a>
                </div>
            </div>
        </div>
    </div>

    @if($sale->sale_status == \App\Models\Sale::SALE_STATUS_RETURNED)
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
                    <div class="w-100">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="alert-heading mb-1 fw-bold">This Sale has been RETURNED</h6>
                            <span class="badge bg-danger text-uppercase">Returned</span>
                        </div>
                        <p class="mb-0">This transaction was reversed on
                            <strong>{{ $sale->saleReturn->created_at->format('M d, Y h:i A') }}</strong>.
                        </p>
                        @if($sale->saleReturn->note)
                            <div class="mt-2 p-2 bg-white rounded border border-danger">
                                <span class="fw-bold">Return Note:</span>
                                <span>{{ $sale->saleReturn->note }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="row">
        <!-- Main Content (Items List) -->
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header border-bottom d-flex justify-content-between align-items-center bg-light">
                    <h6 class="mb-0 fw-bold">Product Items</h6>
                    <span class="badge bg-info">Total Items: {{ $sale->items->count() }}</span>
                </div>
                <div class="table-responsive text-nowrap">
                    <table class="table table-hover table-bordered">
                        <thead class="table-dark">
                            <tr>
                                <th>Product / Barcode</th>
                                <th>Batch</th>
                                <th class="text-center">Type</th>
                                <th class="text-center">Cost (LKR)</th>
                                <th class="text-center">Price (LKR)</th>
                                <th class="text-center">Qty</th>
                                <!-- <th class="text-center">Tax</th> -->
                                <th class="text-center">Disc (LKR)</th>
                                <th class="text-end">Total (LKR)</th>
                                <th class="text-center">Profit (LKR)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($sale->items as $item)
                                <tr>
                                    <td>
                                        <div class="fw-bold">{{ $item->product->name }}</div>
                                        <div class="small text-muted">
                                            {{ $item->variation->barcode ?? $item->product->code }}
                                        </div>
                                        @if($item->variation)
                                            <small class="text-info">Variation:
                                                {{ $item->variation->variationType->name ?? 'Default' }}</small>
                                        @endif
                                    </td>
                                    <td><span class="badge bg-label-secondary">{{ $item->batch->batch_no ?? 'N/A' }}</span>
                                    </td>
                                    <td class="text-center">
                                        @if($item->sale_type == 'wholesale')
                                            <span class="badge bg-info text-white" style="font-size: 0.75rem;">Wholesale</span>
                                        @else
                                            <span class="badge bg-primary text-white" style="font-size: 0.75rem;">Retail</span>
                                        @endif
                                    </td>
                                    <td class="text-center text-muted">
                                        {{ number_format($item->unit_cost_price, 2) }}
                                    </td>
                                    <td>
                                        @if(!$item->product->isSingle())
                                            <div>Cost :
                                                {{ $item->sale_type == 'wholesale' ? number_format($item->variation->price_wholesale, 2) : number_format($item->variation->price_retail ?? 0, 2) }}
                                            </div>
                                        @else
                                            <div>Cost :
                                                {{ $item->sale_type == 'wholesale' ? number_format($item->product->singleVariation->price_wholesale, 2) : number_format($item->product->singleVariation->price_retail ?? 0, 2) }}
                                            </div>
                                        @endif
                                        <div class="fw-bold">Billed : {{ number_format($item->net_unit_price, 2) }}</div>
                                    </td>
                                    <td class="text-center">{{ number_format($item->qty, 0) }}</td>
                                    <!-- <td class="text-center">{{ number_format($item->tax_amount, 2) }}</td> -->
                                    <td class="text-center">{{ number_format($item->discount_amount, 2) }}</td>
                                    <td class="text-end fw-bold">{{ number_format($item->total, 2) }}</td>
                                    <td class="text-center fw-semibold text-success">{{ number_format($item->profit, 2) }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card border mb-4">
                <div class="card-body">
                    <h6 class="fw-bold mb-2">Sale Notes:</h6>
                    <p class="mb-0 text-muted">{{ $sale->notes ?? 'No notes available.' }}</p>
                </div>
            </div>

            <!-- Payment History Table -->
            <div class="card mb-4">
                <div class="card-header border-bottom bg-light">
                    <h6 class="mb-0 fw-bold">Payment History</h6>
                </div>
                <div class="table-responsive text-nowrap">
                    <table class="table table-hover table-bordered">
                        <thead class="table-dark">
                            <tr>
                                <th>Date</th>
                                <th>Method</th>
                                <th>Note / Ref</th>
                                <th>Recorded By</th>
                                <th class="text-end">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($sale->payments as $payment)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}</td>
                                    <td>{{ $payment->payment_method ?? 'Cash' }}</td>
                                    <td>{{ $payment->note ?? '-' }}</td>
                                    <td>{{ $payment->creator->name ?? 'System' }}</td>
                                    <td class="text-end fw-bold text-success">LKR {{ number_format($payment->amount, 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-3 text-muted">No payments recorded yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Sidebar (Summary & Info) -->
        <div class="col-md-4">
            <!-- Payment & Transaction Info -->
            <div class="card mb-4 border">
                <div class="card-header border-bottom bg-light">
                    <h6 class="mb-0 fw-bold">Transaction Summary</h6>
                </div>
                <div class="card-body pt-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Sub Total</span>
                        <span class="fw-bold">{{ number_format($sale->sub_total, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Tax / Discount</span>
                        <span>{{ number_format($sale->order_tax - $sale->order_discount, 2) }}{{ $sale->order_discount_type == 'percent' ? ' %' : ' LKR' }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3 border-top pt-2">
                        <h6 class="mb-0 fw-bold">Grand Total</h6>
                        <h6 class="mb-0 fw-bold text-primary">LKR {{ number_format($sale->grand_total, 2) }}</h6>
                    </div>
                    <div class="p-2 border rounded bg-light mb-3">
                        @if($sale->redeemed_points > 0)
                            <div class="d-flex justify-content-between mb-1 text-danger">
                                <span class="small">Points Discount</span>
                                <span class="small fw-bold">- LKR {{ number_format($sale->redeemed_points * ($setting->loyalty_point_value ?? 0), 2) }}</span>
                            </div>
                        @endif
                        @if($sale->wallet_amount_used > 0)
                            <div class="d-flex justify-content-between mb-1 text-info">
                                <span class="small">Wallet Payment</span>
                                <span class="small fw-bold">- LKR {{ number_format($sale->wallet_amount_used, 2) }}</span>
                            </div>
                        @endif
                        <div class="d-flex justify-content-between">
                            <h5 class="mb-0 fw-bold">Bill Total</h5>
                            <h5 class="mb-0 fw-bold text-dark">LKR {{ number_format($sale->grand_total, 2) }}</h5>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mb-3 pt-2 bg-light border p-2 rounded">
                        <h6 class="mb-0 fw-bold text-success">Net Profit</h6>
                        <h6 class="mb-0 fw-bold text-success">LKR {{ number_format($sale->net_profit, 2) }}</h6>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Cash Given</span>
                        <span class="fw-bold">LKR {{ number_format($sale->cash_given, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Paid (Cash + Wallet)</span>
                        <span class="fw-bold text-success">LKR {{ number_format($sale->paid_amount, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Change Balance</span>
                        <span class="fw-bold">LKR {{ number_format($sale->balance, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Remaining Due</span>
                        <span class="fw-bold text-danger">LKR {{ number_format($sale->due_amount, 2) }}</span>
                    </div>
                </div>
            </div>

            <div class="card mb-4 border">
                <div class="card-header border-bottom bg-light">
                    <h6 class="mb-0 fw-bold">Status & Information</h6>
                </div>
                <div class="card-body pt-3">
                    <div class="mb-3">
                        <label class="text-muted small text-uppercase d-block mb-1">Payment Status</label>
                        @if($sale->payment_status == 2)
                            <span class="badge bg-success">Full Paid</span>
                        @elseif($sale->payment_status == 1)
                            <div class="d-flex gap-2 align-items-center">
                                <span class="badge bg-warning">Partial</span>
                                @can('update_sale_management')
                                    <button type="button" class="btn btn-xs btn-primary py-1 px-2" data-bs-toggle="modal"
                                        data-bs-target="#markPaidModal">Settle</button>
                                @endcan
                            </div>
                        @else
                            <div class="d-flex gap-2 align-items-center">
                                <span class="badge bg-danger">Unpaid</span>
                                @can('update_sale_management')
                                    <button type="button" class="btn btn-xs btn-primary py-1 px-2" data-bs-toggle="modal"
                                        data-bs-target="#markPaidModal">Mark Paid</button>
                                @endcan
                            </div>
                        @endif
                    </div>
                    <div class="mb-3">
                        <label class="text-muted small text-uppercase d-block">Method / Source</label>
                        <div class="fw-bold">{{ $sale->payment_type == 1 ? 'Cash Payment' : 'Credit Account' }}</div>
                        <div class="small">{{ $sale->warehouse->name }}</div>
                    </div>
                    <div class="mb-0">
                        <label class="text-muted small text-uppercase d-block">Processed By</label>
                        <div class="fw-bold">{{ $sale->creator->name ?? 'N/A' }}</div>
                        <div class="small text-muted">{{ $sale->created_at->format('M d, Y h:i A') }}</div>
                    </div>
                </div>
            </div>

            <!-- Loyalty Info -->
            @if($settings->enable_loyalty_points)
                @if($sale->earned_points > 0 || $sale->redeemed_points > 0 || $sale->wallet_amount_added > 0 || $sale->wallet_amount_used > 0)
                    <div class="card mb-4 border border-info shadow-sm">
                        <div class="card-header border-bottom bg-label-info py-2">
                            <h6 class="mb-0 fw-bold small text-info"><i class='bx bx-gift me-1'></i> Loyalty & Rewards</h6>
                        </div>
                        <div class="card-body pt-3 pb-2">
                            @if($sale->earned_points > 0)
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="small">Points Earned</span>
                                    <span class="badge bg-label-success">+{{ $sale->earned_points }} Pts</span>
                                </div>
                            @endif
                            @if($sale->wallet_amount_added > 0)
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="small">Added to Wallet</span>
                                    <span class="text-success fw-bold fw-semibold small">+ LKR {{ number_format($sale->wallet_amount_added, 2) }}</span>
                                </div>
                            @endif
                            @if($sale->redeemed_points > 0)
                                <div class="d-flex justify-content-between mb-2 text-danger">
                                    <span class="small">Points Redeemed</span>
                                    <span class="fw-semibold small">- {{ $sale->redeemed_points }} Pts</span>
                                </div>
                            @endif
                            @if($sale->wallet_amount_used > 0)
                                <div class="d-flex justify-content-between mb-2 text-info">
                                    <span class="small">Wallet Paid</span>
                                    <span class="fw-semibold small">- LKR {{ number_format($sale->wallet_amount_used, 2) }}</span>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            @endif

            <div class="card border">
                <div class="card-header border-bottom bg-light">
                    <h6 class="mb-0 fw-bold">Customer Details</h6>
                </div>
                <div class="card-body pt-3">
                    @if($sale->customer)
                        <h6 class="mb-1">{{ $sale->customer->name }}</h6>
                        <div class="small text-muted">Tel: {{ $sale->customer->phone }}</div>
                        <div class="small text-muted">Addr: {{ Str::limit($sale->customer->address, 50) }}</div>
                    @else
                        <div class="text-center py-2">
                            <i class='bx bxs-user-circle text-muted mb-1' style="font-size: 2rem;"></i>
                            <div class="fw-bold">Walk-in Customer</div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Add Payment Modal -->
    <div class="modal fade" id="markPaidModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Record Payment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('sales.add_payment', $sale->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="alert alert-info py-2 mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="fw-bold">Total Due Balance:</span>
                                <span class="h5 mb-0 fw-bold text-primary">LKR
                                    {{ number_format($sale->due_amount, 2) }}</span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Payment Amount (LKR) *</label>
                            <input type="number" step="0.01" max="{{ $sale->due_amount }}" min="0.01" name="amount"
                                class="form-control" required value="{{ $sale->due_amount }}">
                            <small class="text-muted">You can enter a partial amount.</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Payment Date *</label>
                            <input type="date" name="payment_date" class="form-control" required
                                value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Payment Method *</label>
                            <select name="payment_method" class="form-control" required>
                                <option value="Cash">Cash</option>
                                <option value="Card">Card</option>
                                <option value="Bank Transfer">Bank Transfer</option>
                                <option value="Cheque">Cheque</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Note / Reference No (Optional)</label>
                            <input type="text" name="note" class="form-control"
                                placeholder="E.g. Cheque #, Transfer ID">
                        </div>
                    </div>
                    <div class="modal-footer border-top-0">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Payment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>