@extends('master.app')
@section('title','Purchase Returns')

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

            <div class="p-3 p-md-4 border-bottom"
                 style="background:linear-gradient(135deg, rgba(220,53,69,.10), rgba(13,110,253,.06));">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div>
                        <h5 class="mb-1 fw-bold">
                            <i class="fa fa-undo me-1"></i> Purchase Return Report
                        </h5>
                        <div class="text-muted small">
                            <i class="fa fa-info-circle me-1"></i>
                            This report will work fully after creating return tables.
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('msupplier_bill.index') }}" class="btn btn-sm btn-light border" style="border-radius:10px;">
                            <i class="fa fa-arrow-left me-1"></i> Back
                        </a>
                        <button onclick="window.print()" class="btn btn-sm btn-dark" style="border-radius:10px;">
                            <i class="fa fa-print me-1"></i> Print
                        </button>
                    </div>
                </div>
            </div>

            <div class="card-body p-3 p-md-4">

                @if(!$hasReturnTable)
                    <div class="alert alert-warning border" style="border-radius:14px;">
                        <div class="fw-bold mb-1"><i class="fa fa-exclamation-triangle me-1"></i> Setup Needed</div>
                        <div class="small">
                            Please create tables:
                            <span class="badge bg-dark">purchase_returns</span> and
                            <span class="badge bg-dark">purchase_return_items</span>.
                            After that, this report will show real data.
                        </div>
                    </div>
                @endif

                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="bg-light">
                            <tr>
                                <th style="width:60px;">#</th>
                                <th>Return #</th>
                                <th>Date</th>
                                <th>Supplier</th>
                                <th class="text-end">Total</th>
                                <th>Currency</th>
                                <th>Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($rows as $i=>$r)
                                <tr>
                                    <td class="fw-bold">{{ $i+1 }}</td>
                                    <td class="fw-bold">{{ $r->return_number }}</td>
                                    <td>{{ $r->return_date }}</td>
                                    <td>{{ $r->supplier_name }}</td>
                                    <td class="text-end fw-bold">{{ number_format((float)$r->total,2) }}</td>
                                    <td><span class="badge bg-secondary">{{ $r->currency_title }}</span></td>
                                    <td class="text-muted">{{ $r->details }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        <i class="fa fa-info-circle me-1"></i> No returns found.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

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

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

<style>
@media print{
    .app-header, .app-sidebar, .app-nav, .btn, form, .select2, .modal { display:none !important; }
    main.app-content{ margin:0 !important; padding:0 !important; }
    .card{ box-shadow:none !important; border:1px solid #ddd !important; }
}
</style>
@endsection