@extends('master.app')
@section('title', 'Supplier Payments')

@section('body')
    <main class="app-content">
        <section>
            <div class="card shadow-sm border-0" style="border-radius:18px; overflow:hidden;">

                {{-- TOP BAR --}}
                <div class="p-3 p-md-4 border-bottom"
                    style="background:linear-gradient(135deg, rgba(25,135,84,.10), rgba(13,110,253,.06));">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                        <div>
                            <h5 class="mb-0 fw-bold">
                                <i class="fa fa-hand-holding-usd me-1"></i> Supplier Payments
                            </h5>
                            <small class="text-muted">Track payments, filter, print receipts</small>
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ route('msupplier_payment.create') }}" class="btn btn-sm btn-success"
                                style="border-radius:10px;">
                                <i class="fa fa-plus me-1"></i> Add Payment
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-body p-3 p-md-4">
                    @include('general.valert')

                    {{-- SIMPLE FILTER (TOP OF PAGE) --}}
                    <form method="GET" action="{{ route('msupplier_payment.index') }}" class="mb-3">
                        <div class="border bg-white p-3" style="border-radius:14px;">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-2">
                                    <label class="form-label">Invoice #</label>
                                    <input type="text" name="invoice_number" value="{{ request('invoice_number') }}"
                                        class="form-control form-control-sm" placeholder="e.g 1001">
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label">Title</label>
                                    <input type="text" name="title" value="{{ request('title') }}"
                                        class="form-control form-control-sm" placeholder="payment title">
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label">Supplier</label>
                                    <select name="supplier_id" class="form-select form-select-sm select2">
                                        <option value="all">All</option>
                                        @foreach ($suppliers as $s)
                                            <option value="{{ $s->id }}"
                                                {{ (string) request('supplier_id') === (string) $s->id ? 'selected' : '' }}>
                                                {{ $s->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label">Currency</label>
                                    <select name="currency_id" class="form-select form-select-sm select2">
                                        <option value="all">All</option>
                                        @foreach ($currencies as $c)
                                            <option value="{{ $c->id }}"
                                                {{ (string) request('currency_id') === (string) $c->id ? 'selected' : '' }}>
                                                {{ $c->title_en ?? ($c->title_ps ?? $c->title_dr) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

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

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

                                <div class="col-12 d-flex gap-2 justify-content-end">
                                    <a href="{{ route('msupplier_payment.index') }}" class="btn btn-sm btn-light border"
                                        style="border-radius:10px;">
                                        <i class="fa fa-eraser me-1"></i> Reset
                                    </a>
                                    <button type="submit" class="btn btn-sm btn-primary" style="border-radius:10px;">
                                        <i class="fa fa-search me-1"></i> Apply
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    {{-- Quick stats --}}
                    @php
                        $sumAmount = $payments->sum('amount');
                    @endphp

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <div class="border bg-white p-3" style="border-radius:14px;">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <div class="text-muted small">Records</div>
                                        <div class="fw-bold">{{ $payments->total() }}</div>
                                    </div>
                                    <div class="text-primary"><i class="fa fa-list fa-lg"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="border bg-white p-3" style="border-radius:14px;">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <div class="text-muted small">This Page Total</div>
                                        <div class="fw-bold">{{ number_format((float) $sumAmount, 2) }}</div>
                                    </div>
                                    <div class="text-success"><i class="fa fa-coins fa-lg"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="border bg-white p-3" style="border-radius:14px;">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <div class="text-muted small">Quick Filter</div>
                                        <div class="fw-bold">Invoice / Supplier / Date</div>
                                    </div>
                                    <div class="text-dark"><i class="fa fa-filter fa-lg"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- TABLE --}}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="bg-light">
                                <tr>
                                    <th style="width:60px;">#</th>
                                    <th style="width:140px;"><i class="fa fa-hashtag me-1"></i>Number</th>
                                    <th><i class="fa fa-user-tie me-1"></i>Supplier</th>
                                    <th><i class="fa fa-receipt me-1"></i>Title</th>
                                    <th style="width:140px;"><i class="fa fa-calendar me-1"></i>Date</th>
                                    <th style="width:170px;" class="text-end"><i class="fa fa-money-bill me-1"></i>Payment</th>
                                    <th style="width:140px;" class="text-center"><i class="fa fa-cog me-1"></i>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($payments as $row)
                                    <tr>
                                        <td class="fw-bold">{{ $loop->iteration }}</td>
                                        <td>
                                            <span class="badge bg-dark">#{{ $row->invoice_number }}</span>
                                        </td>
                                        <td class="fw-bold">{{ $row->supplier->name ?? 'N/A' }}</td>
                                        <td>{{ $row->title ?? '-' }}</td>
                                        <td>{{ $row->date }}</td>
                                        <td class="text-end fw-bold">
                                            {{ number_format((float) $row->amount, 2) }}
                                            <span class="text-muted">{{ $row->currency->title_en ?? '' }}</span>
                                        </td>
                                        <td class="text-center">
                                            <a class="btn btn-sm btn-light border" style="border-radius:10px;"
                                                href="{{ route('msupplier_payment.show', $row->id) }}" title="View">
                                                <i class="fa fa-eye text-primary"></i>
                                            </a>

                                            <a class="btn btn-sm btn-light border" style="border-radius:10px;"
                                                href="{{ route('msupplier_payment.edit', $row->id) }}" title="Edit">
                                                <i class="fa fa-pencil text-success"></i>
                                            </a>

                                            <a class="btn btn-sm btn-light border" style="border-radius:10px;"
                                                href="{{ route('msupplier_payment.delete', $row->id) }}"
                                                onclick="return confirm('Are you sure you want to delete this payment?')"
                                                title="Delete">
                                                <i class="fa fa-trash text-danger"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-4">
                                            <i class="fa fa-info-circle me-1"></i> No payments found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination --}}
                    <div class="d-flex justify-content-end">
                        {{ $payments->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

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