@extends('master.app')
@section('title', 'Invoices')

@section('pageCSS')
    <style>
        .page-wrap {
            animation: fadeIn .25s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: .0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card-soft {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 10px 28px rgba(2, 6, 23, .06);
            background: #fff;
        }

        .kpi {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(2, 6, 23, .06);
            transition: .15s ease;
            background: #fff;
            height: 100%;
        }

        .kpi:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 40px rgba(2, 6, 23, .10);
        }

        .kpi .t {
            font-size: 12px;
            color: #64748b;
        }

        .kpi .v {
            font-size: 18px;
            font-weight: 800;
            color: #0f172a;
        }

        .filter-box {
            background: rgba(13, 110, 253, .05);
            border: 1px solid rgba(13, 110, 253, .15);
            border-radius: 16px;
            padding: 14px;
        }

        .badge-soft {
            background: rgba(15, 23, 42, .06);
            color: #0f172a;
            border-radius: 999px;
            padding: .35rem .6rem;
            font-weight: 700;
            font-size: 12px;
        }

        .action-btn {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            transition: .15s ease;
            margin: 0 2px;
        }

        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 18px rgba(2, 6, 23, .08);
        }

        .action-btn.danger {
            border-color: rgba(220, 53, 69, .25);
        }

        .action-btn.danger:hover {
            background: rgba(220, 53, 69, .06);
        }

        .table thead th {
            white-space: nowrap;
        }

        .text-muted-2 {
            color: #94a3b8;
        }
    </style>
@endsection

@section('body')
    <main class="app-content page-wrap">
        <section>
            <div class="card card-soft">
                <div class="card-body">

                    {{-- Header --}}
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                        <div>
                            <h4 class="mb-0"><i class="fas fa-file-invoice"></i> Invoices</h4>
                            <small class="text-muted-2">Manage, filter, print and track customer invoices</small>
                        </div>

                        <div class="btn-group">

                            <button class="btn btn-sm btn-primary btn-rounded" type="button" data-mdb-toggle="collapse"
                                data-mdb-target="#filterCollapse">
                                <i class="fas fa-filter"></i> Filters
                            </button>
                            <a href="{{ route('customer_bill.create') }}" class="btn btn-sm btn-primary btn-rounded">
                                <i class="fas fa-plus"></i> Add
                            </a>
                        </div>
                    </div>

                    {{-- KPI totals by currency (filtered) --}}
                    <div class="row g-3 mt-1">
                        @foreach ($currencies as $cur)
                            @php
                                $t = $totalsByCurrency[$cur->id] ?? null;
                                $cnt = (int) ($t->cnt ?? 0);
                                $final = (float) ($t->final_total ?? 0);
                                $recv = (float) ($t->received_total ?? 0);
                                $bal = (float) ($t->balance_total ?? 0);
                            @endphp
                            <div class="col-md-3">
                                <div class="card kpi">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <div class="t">{{ $cur->title_en }} • Summary</div>
                                                <div class="v">{{ number_format($final, 2) }}</div>
                                            </div>
                                            <span class="badge-soft">{{ $cnt }} inv</span>
                                        </div>
                                        <div class="mt-2 small">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">Received</span>
                                                <strong>{{ number_format($recv, 2) }}</strong>
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">Balance</span>
                                                <strong>{{ number_format($bal, 2) }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Filters --}}
                    <div class="collapse mt-3" id="filterCollapse">
                        <div class="filter-box">
                            <form method="GET" action="{{ route('customer_bill.index') }}"
                                class="row g-2 align-items-end">

                                <div class="col-md-3">
                                    <label class="form-label mb-1">Search</label>
                                    <input type="text" name="q" value="{{ request('q') }}" class="form-control"
                                        placeholder="invoice #, title, customer">
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label mb-1">Type</label>
                                    <select name="type_id" class="form-control">
                                        <option value="all">All</option>
                                        <option value="1" @selected(request('type_id') == '1')>F-Goods</option>
                                        <option value="2" @selected(request('type_id') == '2')>R-Materials</option>
                                        <option value="3" @selected(request('type_id') == '3')>Printing</option>
                                        <option value="4" @selected(request('type_id') == '4')>Pressing</option>
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label mb-1">Customer</label>
                                    <select name="customer_id" class="form-control select2">
                                        <option value="all">All</option>
                                        @foreach ($customers as $c)
                                            <option value="{{ $c->id }}" @selected(request('customer_id') == $c->id)>
                                                {{ $c->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label mb-1">Currency</label>
                                    <select name="currency_id" class="form-control">
                                        <option value="all">All</option>
                                        @foreach ($currencies as $c)
                                            <option value="{{ $c->id }}" @selected(request('currency_id') == $c->id)>
                                                {{ $c->title_en }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-1">
                                    <label class="form-label mb-1">Status</label>
                                    <select name="status" class="form-control">
                                        <option value="all">All</option>
                                        <option value="0" @selected(request('status') === '0')>Open</option>
                                        <option value="1" @selected(request('status') === '1')>Paid</option>
                                        <option value="2" @selected(request('status') === '2')>Closed</option>
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label mb-1">From</label>
                                    <input type="date" name="from_date" value="{{ request('from_date') }}"
                                        class="form-control">
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label mb-1">To</label>
                                    <input type="date" name="to_date" value="{{ request('to_date') }}"
                                        class="form-control">
                                </div>

                                <div class="col-md-2 d-flex gap-2">
                                    <button class="btn btn-primary btn-rounded w-100" type="submit">
                                        <i class="fas fa-search"></i> Apply
                                    </button>
                                    <a class="btn btn-outline-dark btn-rounded w-100"
                                        href="{{ route('customer_bill.index') }}">
                                        <i class="fas fa-rotate"></i> Reset
                                    </a>
                                </div>

                            </form>
                        </div>
                    </div>

                    {{-- Table --}}
                    <div class="table-responsive mt-3">
                        <table class="table table-striped table-hover text-center align-middle">
                            <thead>
                                <tr>
                                    <th>Invoice</th>
                                    <th>Type</th>
                                    <th>Title</th>
                                    <th>Customer</th>
                                    <th>Total</th>
                                    <th>Received</th>
                                    <th>Balance</th>
                                    <th>Date</th>
                                    <th style="min-width:140px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $typeMap = [
                                        1 => 'F-Goods',
                                        2 => 'R-Materials',
                                        3 => 'Printing',
                                        4 => 'Pressing',
                                    ];
                                @endphp

                                @forelse ($bills as $row)
                                    @php
                                        $currencyTitle = optional($row->currency)->title_en ?? '-';
                                        $typeTitle = $typeMap[$row->type_id] ?? 'Other';
                                        $final = (float) ($row->final_amount ?? 0);
                                        $recv = (float) ($row->received ?? 0);
                                        $bal = (float) ($row->balance ?? $final - $recv);
                                    @endphp

                                    <tr>
                                        <td class="fw-bold">{{ $row->invoice_number }}</td>
                                        <td><span class="badge-soft">{{ $typeTitle }}</span></td>
                                        <td class="text-start">
                                            <div class="fw-bold">{{ $row->title }}</div>
                                            <small class="text-muted-2">#{{ $row->id }}</small>
                                        </td>
                                        <td>{{ optional($row->customer)->name ?? '-' }}</td>
                                        <td class="fw-bold">{{ number_format((float) ($row->grand_total ?? 0), 2) }}
                                            {{ $currencyTitle }}</td>
                                        <td>{{ number_format($recv, 2) }} {{ $currencyTitle }}</td>
                                        <td class="fw-bold">{{ number_format($bal, 2) }} {{ $currencyTitle }}</td>
                                        <td>{{ $row->invoice_date ?? '-' }}</td>

                                        <td>
                                            <a class="action-btn" href="{{ route('customer_bill.show', $row->id) }}"
                                                data-mdb-toggle="tooltip" title="Show">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a class="action-btn" href="{{ route('customer_bill.edit', $row->id) }}"
                                                data-mdb-toggle="tooltip" title="Edit">
                                                <i class="fas fa-pen"></i>
                                            </a>
                                            <a class="action-btn" href="{{ route('customer_bill.print_pro', $row->id) }}"
                                                data-mdb-toggle="tooltip" title="Print">
                                                <i class="fas fa-print"></i>
                                            </a>
                                            <form id="delForm{{ $row->id }}"
                                                action="{{ route('customer_bill.destroy', $row->id) }}" method="POST"
                                                style="display:none;">
                                                @csrf
                                                @method('DELETE')
                                            </form>

                                            <a class="action-btn danger" href="#" data-mdb-toggle="tooltip"
                                                title="Delete"
                                                onclick="if(confirm('Are you sure? This will impact Stock, Invoices, Received!')){ document.getElementById('delForm{{ $row->id }}').submit(); } return false;">
                                                <i class="fas fa-trash text-danger"></i>
                                            </a>

                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center text-muted py-4">
                                            <i class="fas fa-inbox fa-2x mb-2"></i><br>
                                            No invoices found for selected filters.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination --}}
                    <div class="mt-2">
                        {{ $bills->links('pagination::bootstrap-4') }}
                    </div>

                </div>
            </div>
        </section>
    </main>
@endsection

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