@extends('master.app')
@section('title', 'Customer Invoice')

@section('pageCSS')
<style>
    :root{
        --radius: 16px;
        --shadow: 0 12px 30px rgba(2, 6, 23, .08);
        --muted: #6b7280;
        --line: #e5e7eb;
    }
    .card-soft{ border:0; border-radius: var(--radius); box-shadow: var(--shadow); }
    .page-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .page-title{ display:flex; align-items:center; gap:10px; }
    .page-title h4{ margin:0; font-weight:800; }
    .page-title small{ color:var(--muted); }
    .action-bar{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .btn-rounded{ border-radius:999px; }
    .badge-soft{
        background: rgba(15, 23, 42, .06);
        color:#0f172a;
        border-radius:999px;
        padding:.35rem .7rem;
        font-weight:600;
        display:inline-flex;
        align-items:center;
        gap:.45rem;
    }
    .summary-grid{ display:grid; grid-template-columns: 1fr; gap:14px; }
    @media (min-width: 992px){ .summary-grid{ grid-template-columns: 1fr 1fr; align-items:start; } }

    .kv{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:.65rem 0; border-bottom:1px dashed var(--line); }
    .kv:last-child{ border-bottom:0; padding-bottom:0; }
    .kv .k{ color:#111827; font-weight:600; display:flex; align-items:center; gap:8px; }
    .kv .v{ color:#0f172a; font-weight:600; text-align:right; word-break:break-word; }
    .muted{ color:var(--muted); font-weight:500; }

    .totals{
        background: linear-gradient(135deg, rgba(2,132,199,.08), rgba(79,70,229,.06));
        border-radius: 14px;
        padding: 14px;
        border:1px solid rgba(2,6,23,.06);
    }
    .totals .rowline{ display:flex; justify-content:space-between; align-items:center; padding:.45rem 0; }
    .totals .rowline strong{ font-weight:800; }
    .totals .grand{ border-top:1px solid rgba(2,6,23,.08); margin-top:.35rem; padding-top:.6rem; font-size:1.05rem; }

    .table thead th{
        position: sticky; top: 0; background: #fff; z-index: 2;
        white-space:nowrap; border-bottom:1px solid var(--line);
    }
    .table td{ vertical-align: middle; }
    .table-wrap{ border:1px solid rgba(2,6,23,.06); border-radius: 14px; overflow:hidden; }
</style>
@endsection

@section('body')
<main class="app-content">
    <section>
        <div class="card card-soft">
            <div class="card-body p-3 p-md-4">

                {{-- Header --}}
                <div class="page-head mb-3">
                    <div class="page-title">
                        <div class="badge-soft">
                            <i class="fas fa-file-invoice"></i>
                            Invoice #{{ $bill->invoice_number }}
                        </div>
                        <div>
                            <h4>Invoice Summary</h4>
                            <small class="muted">
                                <i class="fas fa-calendar-alt me-1"></i>
                                {{ $bill->invoice_date ?? $bill->date ?? '' }}
                                • <i class="fas fa-user ms-2 me-1"></i> {{ $bill->customer->name ?? '-' }}
                            </small>
                        </div>
                    </div>

                    <div class="action-bar">
                        <a href="{{ route('customer_bill.index') }}" class="btn btn-sm btn-outline-dark btn-rounded">
                            <i class="fas fa-list me-1"></i> Back
                        </a>
                        <a href="{{ route('customer_bill.edit',$bill->id) }}" class="btn btn-sm btn-outline-primary btn-rounded">
                            <i class="fas fa-pen me-1"></i> Edit
                        </a>
                        <a href="{{ route('customer_bill.print_pro',$bill->id) }}" class="btn btn-sm btn-primary btn-rounded">
                            <i class="fas fa-print me-1"></i> Print
                        </a>
                    </div>
                </div>

                @include('general.valert')

                {{-- Summary Grid --}}
                <div class="summary-grid">

                    {{-- Left --}}
                    <div class="card card-soft" style="box-shadow:none;border:1px solid rgba(2,6,23,.06);">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <h5 class="mb-0 fw-bold"><i class="fas fa-circle-info me-1"></i> Details</h5>
                                <span class="badge-soft">
                                    <i class="fas fa-coins"></i>
                                    {{ $bill->currency->title_en ?? $bill->currency->title ?? '' }}
                                </span>
                            </div>

                            <div class="kv">
                                <div class="k"><i class="fas fa-user"></i> Customer Name</div>
                                <div class="v">{{ $bill->customer->name ?? '-' }}</div>
                            </div>

                            <div class="kv">
                                <div class="k"><i class="fas fa-phone"></i> Customer Phone</div>
                                <div class="v">{{ $bill->customer->phone ?? '-' }}</div>
                            </div>

                            <div class="kv">
                                <div class="k"><i class="fas fa-location-dot"></i> Customer Address</div>
                                <div class="v">{{ $bill->customer->address ?? '-' }}</div>
                            </div>

                            <div class="kv">
                                <div class="k"><i class="fas fa-hashtag"></i> Invoice Number</div>
                                <div class="v">{{ $bill->invoice_number ?? '-' }}</div>
                            </div>

                            <div class="kv">
                                <div class="k"><i class="fas fa-user-check"></i> Received By</div>
                                <div class="v">{{ $bill->received_by ?? '-' }}</div>
                            </div>

                            <div class="kv">
                                <div class="k"><i class="fas fa-money-bill-transfer"></i> Payment Type</div>
                                <div class="v">
                                    @if ($bill->transaction_id == 1)
                                        By Cash
                                    @elseif ($bill->transaction_id == 2)
                                        By Bank
                                    @elseif ($bill->transaction_id == 3)
                                        By Sarafi
                                    @else
                                        Other
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Right --}}
                    <div class="card card-soft" style="box-shadow:none;border:1px solid rgba(2,6,23,.06);">
                        <div class="card-body">
                            <h5 class="mb-2 fw-bold"><i class="fas fa-calculator me-1"></i> Statement</h5>

                            @php
                                $cur = $bill->currency->title_en ?? $bill->currency->title ?? '';
                                $grand = (float)($bill->grand_total ?? 0);
                                $disc  = (float)($bill->discount ?? 0);
                                $final = (float)($bill->final_amount ?? ($grand - $disc));
                                $recv  = (float)($bill->received ?? 0);
                                $bal   = max($final - $recv, 0);
                            @endphp

                            <div class="totals">
                                <div class="rowline">
                                    <span class="muted"><i class="fas fa-sack-dollar me-1"></i> Grand Total</span>
                                    <strong>{{ $cur }} {{ number_format($grand, 2) }}</strong>
                                </div>
                                <div class="rowline">
                                    <span class="muted"><i class="fas fa-percent me-1"></i> Discount</span>
                                    <strong>{{ $cur }} {{ number_format($disc, 2) }}</strong>
                                </div>
                                <div class="rowline">
                                    <span class="muted"><i class="fas fa-receipt me-1"></i> Total</span>
                                    <strong>{{ $cur }} {{ number_format($final, 2) }}</strong>
                                </div>
                                <div class="rowline">
                                    <span class="muted"><i class="fas fa-hand-holding-dollar me-1"></i> Received</span>
                                    <strong>{{ $cur }} {{ number_format($recv, 2) }}</strong>
                                </div>

                                <div class="rowline grand">
                                    <span class="muted"><i class="fas fa-wallet me-1"></i> Balance</span>
                                    <strong>{{ $cur }} {{ number_format($bal, 2) }}</strong>
                                </div>
                            </div>

                            <div class="mt-2 muted">
                                <i class="fas fa-shield-alt me-1"></i>
                                Totals are calculated safely (Balance never negative).
                            </div>
                        </div>
                    </div>

                </div>

                {{-- Items --}}
                <div class="mt-4">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-2">
                        <h5 class="mb-0 fw-bold"><i class="fas fa-boxes-stacked me-1"></i> Items</h5>
                        <span class="badge-soft">
                            <i class="fas fa-layer-group"></i>
                            {{ $bill_items->count() }} items
                        </span>
                    </div>

                    <div class="table-wrap">
                        <div class="table-responsive" style="max-height: 520px;">
                            <table class="table table-striped table-hover mb-0">
                                <thead>
                                <tr>
                                    <th style="width:60px;">#</th>
                                    <th>Cat</th>
                                    @if($bill->type_id==1)
                                        <th>Sub/Cat</th>
                                        <th>Weight</th>
                                    @endif
                                    <th>Unit</th>
                                    <th style="width:110px;">QTY</th>
                                    <th style="width:140px;">Price</th>
                                    <th style="width:140px;">Total</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse ($bill_items as $row)
                                    <tr>
                                        <td class="fw-bold">{{ $loop->iteration }}</td>

                                        <td>{{ $row->category->title_en ?? $row->category->title_ps ?? '-' }}</td>

                                        @if($bill->type_id==1)
                                            <td>{{ $row->sub_category->title_en ?? $row->sub_category->title_ps ?? '-' }}</td>
                                            <td>{{ $row->weight->title_en ?? $row->weight->title_ps ?? '-' }}</td>
                                        @endif

                                        <td>{{ $row->unit->title_en ?? $row->unit->title_ps ?? '-' }}</td>

                                        <td class="fw-semibold">{{ $row->qty ?? 0 }}</td>

                                        <td>
                                            {{ $cur }} {{ number_format((float)($row->sale_price ?? 0), 2) }}
                                        </td>

                                        <td class="fw-bold">
                                            {{ $cur }} {{ number_format((float)($row->total ?? 0), 2) }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-muted py-4">
                                            <i class="fas fa-box-open me-1"></i> No items found
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</main>

@include('sale.bills.bill-modal')
@endsection

@section('pageJs')
<script>
    $(".app-menu").removeClass("active");
    $("#nav_salei").addClass("active");
    $("#salei").addClass("is-expanded");
    $("#customer_bill").addClass("active");
</script>
@endsection