@push('title')
    View GRN: {{ $grn->grn_no }}
@endpush

<style>
    .view-section {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }
    .view-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }
    .view-value {
        font-size: 0.95rem;
        color: #212529;
        font-weight: 500;
    }
    .section-title {
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #f8f9fa;
        color: #495057;
    }
    .bg-light-primary { 
        background-color: #f5f5ff !important; 
        border-left: 3px solid #696cff !important;
    }
</style>

<x-app-layout>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold py-3 mb-0">
            <span class="text-muted fw-light">GRN /</span> View Details
        </h4>
        <div>
            <a href="{{ route('grns') }}" class="btn btn-icon btn-secondary mb-1">
                <i class='bx bx-arrow-back'></i>
            </a>
            <a href="{{ route('grns.pdf', $grn->id) }}" target="_blank" class="btn btn-icon btn-primary mb-1">
                <i class='bx bxs-file-pdf'></i>
            </a>
            @if($grn->status == 'approved' && $grn->payment_status != 'paid')
                <button type="button" class="btn btn-icon btn-warning mb-1" data-bs-toggle="modal" data-bs-target="#payGrn">
                    <i class="bx bx-dollar"></i>
                </button>
            @endif
            @if($grn->status == 'approved')
                <button class="btn btn-icon btn-success mb-1" disabled title="Approved">
                    <i class="bx bx-check-double"></i>
                </button>
            @endif
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            {{-- General Information --}}
            <div class="view-section">
                <h5 class="section-title">General Information</h5>
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="view-label">GRN Code</div>
                        <div class="view-value fw-bold text-primary">{{ $grn->grn_no }}</div>
                    </div>
                    <div class="col-md-4">
                        <div class="view-label">Receipt Date</div>
                        <div class="view-value">{{ date('Y-M-d', strtotime($grn->date)) }}</div>
                    </div>
                    <div class="col-md-4">
                        <div class="view-label">Status</div>
                        <div class="view-value">
                            @if($grn->status == 'approved')
                                <span class="badge bg-label-success">Received & Approved</span>
                            @else
                                <span class="badge bg-label-warning text-warning">Draft Receipt</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="view-label">Supplier</div>
                        <div class="view-value fw-bold text-dark">{{ $grn->supplier->name ?? 'N/A' }}</div>
                        @if($grn->supplier && $grn->supplier->reps->count() > 0)
                            <div class="mt-1 small">
                                <span class="text-muted">Rep:</span> {{ $grn->supplier->reps->first()->name }} 
                                <span class="mx-1">|</span> 
                                <a href="tel:{{ $grn->supplier->reps->first()->phone ?? '' }}" class="text-primary fw-bold">
                                    {{ $grn->supplier->reps->first()->phone ?? 'No Phone' }}
                                </a>
                            </div>
                        @endif
                    </div>
                    <div class="col-md-4">
                        <div class="view-label">Warehouse</div>
                        <div class="view-value">{{ $grn->warehouse->name ?? 'N/A' }}</div>
                    </div>
                    <div class="col-md-4">
                        <div class="view-label">PO Reference</div>
                        <div class="view-value">
                            <a href="{{ route('purchase_orders.show', $grn->purchase_order_id) }}">
                                {{ $grn->purchaseOrder->po_code ?? 'N/A' }}
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="view-label">Payment Status</div>
                        <div class="view-value">
                            @if($grn->payment_status == 'paid')
                                <span class="badge bg-label-success">Fully Paid</span>
                            @elseif($grn->payment_status == 'partial')
                                <span class="badge bg-label-info">Partially Paid</span>
                            @else
                                <span class="badge bg-label-danger">Pending</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="view-label">Invoice Number</div>
                        <div class="view-value fw-bold text-dark">{{ $grn->invoice_no ?? 'N/A' }}</div>
                    </div>
                </div>
            </div>

            {{-- Items Table --}}
            <div class="view-section">
                <h5 class="section-title">Received Items</h5>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="bg-light">
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th>Item Details</th>
                                <th class="text-center">Paid Qty</th>
                                <th class="text-center text-success">Free Qty</th>
                                <th class="text-end">Cost</th>
                                <th class="text-end">Retail</th>
                                <th class="text-end">Discount</th>
                                <th class="text-end">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $items_subtotal = 0; @endphp
                            @foreach($grn->items as $index => $item)
                                @php 
                                    $line_total = ($item->received_qty * $item->unit_cost) - $item->discount_amount;
                                    $items_subtotal += $line_total;
                                @endphp
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        <div class="fw-bold">{{ $item->product->name }}</div>
                                        <span class="badge bg-label-primary font-size-xs">
                                            {{ $item->productVariation->variation_id ? ($item->productVariation->variationType->name ?? 'N/A') : 'Default' }}
                                        </span>
                                    </td>
                                    <td class="text-center fw-bold text-dark">{{ floatval($item->received_qty) }}</td>
                                    <td class="text-center fw-bold text-success">{{ floatval($item->free_qty) }}</td>
                                    <td class="text-end">{{ number_format($item->unit_cost, 2) }}</td>
                                    <td class="text-end">{{ number_format($item->price_retail, 2) }}</td>
                                    <td class="text-end text-danger small">
                                        -{{ number_format($item->discount_amount, 2) }}
                                        @if($item->discount_type == 'percentage')
                                            <div class="text-muted" style="font-size: 10px;">({{ floatval($item->discount_value) }}%)</div>
                                        @endif
                                    </td>
                                    <td class="text-end fw-bold text-dark">{{ number_format($line_total, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @if($grn->notes)
                <div class="view-section">
                    <h5 class="section-title">Internal Notes</h5>
                    <p class="mb-0 text-muted italic" style="white-space: pre-line;">{{ $grn->notes }}</p>
                </div>
            @endif

            {{-- Linked Returns --}}
            @php 
                $linkedReturns = \App\Models\PurchaseReturn::where('grn_id', $grn->id)->get();
            @endphp
            @if($linkedReturns->count() > 0)
                <div class="view-section border-warning border-opacity-25 bg-warning bg-opacity-10">
                    <h5 class="section-title text-warning-emphasis">
                        <i class="bx bx-error-circle me-1"></i> Returns Adjusted in this GRN
                    </h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-borderless align-middle mb-0">
                            <thead>
                                <tr class="text-muted small uppercase">
                                    <th>Reference</th>
                                    <th>Date</th>
                                    <th class="text-end">Adjustment Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($linkedReturns as $ret)
                                    <tr>
                                        <td>
                                            <a href="{{ route('purchase_returns.show', $ret->id) }}" class="fw-bold">
                                                <code>{{ $ret->pr_code }}</code>
                                            </a>
                                        </td>
                                        <td class="small">{{ $ret->return_date }}</td>
                                        <td class="text-end fw-bold text-danger">- Rs {{ number_format($ret->total_amount, 2) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            {{-- Payment History --}}
            @if($grn->status == 'approved')
                <div class="view-section">
                    <h5 class="section-title">Payment History</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>Date</th>
                                    <th>Method</th>
                                    <th>Notes</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($grn->payments as $payment)
                                    <tr>
                                        <td>{{ \Carbon\Carbon::parse($payment->payment_date)->format('d M Y') }}</td>
                                        <td><span class="badge bg-label-secondary small">{{ $payment->payment_method }}</span></td>
                                        <td class="text-muted small">{{ $payment->notes ?? '-' }}</td>
                                        <td class="text-end fw-bold">Rs {{ number_format($payment->amount, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-3 text-muted">No payments recorded for this GRN.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        <div class="col-md-4">
            {{-- Financial Summary --}}
            <div class="view-section">
                <h5 class="section-title text-center text-uppercase small">Financial Summary</h5>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted small uppercase">Items Subtotal:</span>
                    <span class="fw-bold">Rs {{ number_format($items_subtotal, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted small uppercase">Order Discount:</span>
                    <span class="text-danger fw-bold">
                        -Rs {{ number_format($grn->order_discount, 2) }}
                        @if($grn->order_discount_type == 'percentage')
                            <small class="text-muted fw-normal">({{ floatval($grn->order_discount_value) }}%)</small>
                        @endif
                    </span>
                </div>
                @if($grn->return_adjustment > 0)
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted small uppercase">Returns Offset:</span>
                        <span class="text-danger fw-bold">-Rs {{ number_format($grn->return_adjustment, 2) }}</span>
                    </div>
                @endif
                <hr class="my-3">
                <div class="d-flex justify-content-between mb-2">
                    <span class="view-label">Grand Total</span>
                    <span class="fw-bold text-dark">Rs {{ number_format($grn->grand_total, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="view-label">Total Paid</span>
                    <span class="fw-bold text-success">Rs {{ number_format($grn->paid_amount, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <span class="view-label">Pending Balance</span>
                    <span class="fw-bold text-danger">Rs {{ number_format($grn->grand_total - $grn->paid_amount, 2) }}</span>
                </div>

                <div class="text-center py-2 border rounded bg-light mb-3">
                    <div class="view-label mb-1">Payment Status</div>
                    <h5 class="fw-bold mb-0 text-uppercase">
                        @if($grn->payment_status == 'paid')
                            <span class="text-success">Fully Paid</span>
                        @elseif($grn->payment_status == 'partial')
                            <span class="text-info">Partially Paid</span>
                        @else
                            <span class="text-danger">Payment Pending</span>
                        @endif
                    </h5>
                </div>

                @if($grn->status == 'approved' && $grn->payment_status != 'paid')
                    <button type="button" class="btn btn-warning w-100" data-bs-toggle="modal" data-bs-target="#payGrn">
                        <i class="bx bx-dollar me-1"></i> Make Payment
                    </button>
                    
                    <!-- Payment Modal -->
                    <div class="modal fade" id="payGrn" 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 for {{ $grn->grn_no }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <form action="{{ route('suppliers.store_payment') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="grn_id" value="{{ $grn->id }}">
                                    <input type="hidden" name="supplier_id" value="{{ $grn->supplier_id }}">
                                    <div class="modal-body text-start">
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label text-muted small text-uppercase fw-bold">Total Amount</label>
                                                <div class="fw-bold">Rs {{ number_format($grn->grand_total, 2) }}</div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label text-muted small text-uppercase fw-bold">Remaining</label>
                                                <div class="fw-bold text-danger">Rs {{ number_format($grn->grand_total - $grn->paid_amount, 2) }}</div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Payment Amount (Rs)</label>
                                            <input type="number" name="amount" class="form-control" step="0.01" 
                                                max="{{ $grn->grand_total - $grn->paid_amount }}" 
                                                value="{{ $grn->grand_total - $grn->paid_amount }}" required>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">Payment Date</label>
                                                <input type="date" name="payment_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Payment Method</label>
                                                <select name="payment_method" class="form-control">
                                                    <option value="Cash">Cash</option>
                                                    <option value="Cheque">Cheque</option>
                                                    <option value="Bank Transfer">Bank Transfer</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="mb-0">
                                            <label class="form-label">Notes</label>
                                            <textarea name="notes" class="form-control" rows="2" placeholder="Reference number etc."></textarea>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-primary">Record Payment & Notify</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endif

                @if($grn->status == 'draft')
                    <div class="mt-4 pt-2 border-top">
                        @can(['update_grn_management'])
                            <button type="button" class="btn btn-success w-100 mb-2" data-bs-toggle="modal" data-bs-target="#approveModal">
                                <i class="bx bx-check-circle me-1"></i> Approve Receipt
                            </button>
                        @endcan
                        @can(['delete_grn_management'])
                            <button type="button" class="btn btn-label-danger w-100" data-bs-toggle="modal" data-bs-target="#discardModal">
                                <i class="bx bx-trash me-1"></i> Discard Draft
                            </button>
                        @endcan
                    </div>
                @endif
            </div>

            {{-- Audit Details --}}
            <div class="view-section">
                <h5 class="section-title text-center text-uppercase small">Metadata</h5>
                <div class="small">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Recorded By:</span>
                        <span class="fw-bold text-dark">{{ $grn->creator->name ?? 'System' }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Recorded At:</span>
                        <span>{{ $grn->created_at->format('Y-M-d H:i') }}</span>
                    </div>
                    @if($grn->approved_by)
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Approved By:</span>
                            <span class="text-success fw-bold">{{ $grn->approver->name ?? 'N/A' }}</span>
                        </div>
                    @endif
                    @if($grn->updated_at > $grn->created_at)
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">Last Updated:</span>
                            <span>{{ $grn->updated_at->format('Y-M-d H:i') }}</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Modals --}}
    @if($grn->status == 'draft')
    <!-- Approve Modal -->
    <div class="modal fade" id="approveModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-4">
                    <h5 class="mb-3 fw-bold">Approve This GRN?</h5>
                    <p class="text-muted small mb-4">Stock levels will be updated for warehouse: <strong>{{ $grn->warehouse->name ?? 'N/A' }}</strong>. This action cannot be reversed.</p>
                    <div class="d-flex justify-content-center align-items-center gap-2">
                        <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                        <form action="{{ route('grns.approve', $grn->id) }}" method="POST" class="m-0">
                            @csrf
                            <button type="submit" class="btn btn-success px-4">Confirm Approval</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Discard Modal -->
    <div class="modal fade" id="discardModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-body text-center p-4">
                    <h6 class="mb-3 fw-bold">Discard Draft?</h6>
                    <p class="text-muted small mb-4">Are you sure you want to delete this draft receipt permanently?</p>
                    <div class="d-flex justify-content-center align-items-center gap-2">
                        <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">No</button>
                        <form action="{{ route('grns.destroy', $grn->id) }}" method="POST"class="m-0">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm px-3">Yes, Discard</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</x-app-layout>