@extends('admin.layouts.master')
@section('title', 'المرتجعات')

@section('content')
<div class="page-content-wrapper">
    <div class="content-container">
        <div class="page-content">

            {{-- ===== HEADER ===== --}}
            <div class="content-header d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
                <div>
                    <h4 class="mb-1">
                        <i class="ti ti-arrow-back-up me-1 text-danger"></i>إدارة المرتجعات
                    </h4>
                    <p class="text-muted mb-0">تتبع جميع مرتجعات المبيعات، الكميات، والمبالغ المستردة لحظة بلحظة.</p>
                </div>
                @can('returns.create')
                <a href="{{ route('admin.sale-returns.create') }}" class="btn btn-danger">
                    <i class="ti ti-plus me-1"></i>مرتجع جديد
                </a>
                @endcan
            </div>

            {{-- ===== STATS CARDS ===== --}}
            <div class="row g-3 mb-4">
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-danger bg-opacity-10 p-3 flex-shrink-0">
                                <i class="ti ti-arrows-exchange fs-4 text-danger"></i>
                            </div>
                            <div>
                                <p class="text-muted mb-1 small">إجمالي المرتجعات</p>
                                <h4 class="mb-0 fw-bold">{{ number_format($stats['count']) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-primary bg-opacity-10 p-3 flex-shrink-0">
                                <i class="ti ti-calendar-today fs-4 text-primary"></i>
                            </div>
                            <div>
                                <p class="text-muted mb-1 small">مرتجعات اليوم</p>
                                <h4 class="mb-0 fw-bold">{{ number_format($stats['today_count']) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-warning bg-opacity-10 p-3 flex-shrink-0">
                                <i class="ti ti-coin fs-4 text-warning"></i>
                            </div>
                            <div>
                                <p class="text-muted mb-1 small">قيمة مرتجعات اليوم</p>
                                <h4 class="mb-0 fw-bold">{{ number_format((float) $stats['today_total'], 2) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-success bg-opacity-10 p-3 flex-shrink-0">
                                <i class="ti ti-chart-bar fs-4 text-success"></i>
                            </div>
                            <div>
                                <p class="text-muted mb-1 small">قيمة مرتجعات الشهر</p>
                                <h4 class="mb-0 fw-bold">{{ number_format((float) $stats['month_total'], 2) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===== FILTER BAR ===== --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">من تاريخ</label>
                            <input type="date" id="filter-date-from" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">إلى تاريخ</label>
                            <input type="date" id="filter-date-to" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">الحالة</label>
                            <select id="filter-status" class="form-select">
                                <option value="">جميع الحالات</option>
                                <option value="draft">مسودة</option>
                                <option value="completed">مكتمل</option>
                                <option value="cancelled">ملغى</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex gap-2">
                            <button type="button" class="btn btn-primary flex-fill" id="btn-apply-filters">
                                <i class="ti ti-filter me-1"></i>تطبيق
                            </button>
                            <button type="button" class="btn btn-outline-secondary flex-fill" id="btn-reset-filters">
                                <i class="ti ti-refresh me-1"></i>إعادة
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===== TABLE ===== --}}
            <div class="card border-0 shadow-sm">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="returns-table" class="table table-hover align-middle w-100 mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:50px">م</th>
                                    <th>رقم المرتجع</th>
                                    <th>رقم الفاتورة</th>
                                    <th>العميل</th>
                                    <th>المخزن</th>
                                    <th>الكاشير</th>
                                    <th class="text-center">الحالة</th>
                                    <th class="text-end">الإجمالي</th>
                                    <th class="text-end">المسترد</th>
                                    <th>تاريخ الإرجاع</th>
                                    <th class="text-center" style="width:100px">إجراءات</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    const table = $('#returns-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        order: [[0, 'desc']],
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        ajax: {
            url: '{{ route('admin.sale-returns.index') }}',
            data: function (d) {
                d.date_from = $('#filter-date-from').val();
                d.date_to   = $('#filter-date-to').val();
                d.status    = $('#filter-status').val();
            }
        },
        columns: [
            { data: 'id',             name: 'id',             className: 'text-center' },
            { data: 'return_number',  name: 'return_number' },
            { data: 'invoice_number', name: 'invoice_number' },
            { data: 'customer',       name: 'customer' },
            { data: 'warehouse',      name: 'warehouse' },
            { data: 'cashier',        name: 'cashier' },
            { data: 'status',         name: 'status',        orderable: false, searchable: false, className: 'text-center' },
            { data: 'total',          name: 'total',         className: 'text-end fw-semibold' },
            { data: 'refund_amount',  name: 'refund_amount', className: 'text-end text-success fw-semibold', orderable: false, searchable: false },
            { data: 'return_date',    name: 'return_date' },
            { data: 'actions',        name: 'actions',       orderable: false, searchable: false, className: 'text-center' }
        ]
    });

    $('#btn-apply-filters').on('click', function () { table.ajax.reload(); });

    $('#btn-reset-filters').on('click', function () {
        $('#filter-date-from, #filter-date-to, #filter-status').val('');
        table.search('').ajax.reload();
    });

    $('#filter-date-from, #filter-date-to, #filter-status').on('change', function () {
        table.ajax.reload();
    });
});
</script>
@endpush