@extends('admin.layouts.master')
@section('title', 'فواتير المبيعات')

@section('content')
<div class="page-content-wrapper"><div class="content-container"><div class="page-content">
    <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-file-invoice me-1"></i>فواتير المبيعات</h4>
            <p class="text-muted mb-0">لوحة فواتير احترافية لمتابعة البيع، التحصيل، والمبالغ المستحقة لحظة بلحظة.</p>
        </div>
        @can('sales.create')
        <a href="{{ route('admin.sales-invoices.create') }}" class="btn btn-primary">
            <i class="ti ti-plus me-1"></i>إضافة فاتورة جديدة
        </a>
        @endcan
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-3 col-sm-6"><div class="card border-0 shadow-sm h-100"><div class="card-body"><p class="text-muted mb-1">إجمالي الفواتير</p><h5 class="mb-0">{{ number_format($stats['count']) }}</h5></div></div></div>
        <div class="col-md-3 col-sm-6"><div class="card border-0 shadow-sm h-100"><div class="card-body"><p class="text-muted mb-1">فواتير اليوم</p><h5 class="mb-0 text-primary">{{ number_format($stats['today_count']) }}</h5></div></div></div>
        <div class="col-md-3 col-sm-6"><div class="card border-0 shadow-sm h-100"><div class="card-body"><p class="text-muted mb-1">مبيعات اليوم</p><h5 class="mb-0 text-success">{{ number_format((float) $stats['today_sales'], 2) }}</h5></div></div></div>
        <div class="col-md-3 col-sm-6"><div class="card border-0 shadow-sm h-100"><div class="card-body"><p class="text-muted mb-1">مستحق اليوم</p><h5 class="mb-0 text-danger">{{ number_format((float) $stats['today_due'], 2) }}</h5></div></div></div>
    </div>

    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <div class="col-md-2">
                    <label class="form-label fw-semibold">من تاريخ</label>
                    <input type="date" id="filter-date-from" class="form-control">
                </div>
                <div class="col-md-2">
                    <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-customer" class="form-select">
                        <option value="">الكل</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">حالة الدفع</label>
                    <select id="filter-payment-status" class="form-select">
                        <option value="">الكل</option>
                        <option value="unpaid">غير مدفوع</option>
                        <option value="partial">جزئي</option>
                        <option value="paid">مدفوع</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">حالة الفاتورة</label>
                    <select id="filter-invoice-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-1 d-grid">
                    <button type="button" class="btn btn-primary" id="btn-apply-filters" title="تطبيق"><i class="ti ti-filter"></i></button>
                </div>
                <div class="col-md-2 d-grid">
                    <button type="button" class="btn btn-outline-secondary" id="btn-reset-filters"><i class="ti ti-refresh me-1"></i>إعادة تعيين</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table id="sales-invoices-table" class="table table-hover align-middle w-100">
                    <thead class="table-light">
                    <tr>
                        <th>م</th>
                        <th>رقم الفاتورة</th>
                        <th>التاريخ</th>
                        <th>العميل</th>
                        <th>المخزن</th>
                        <th>الكاشير</th>
                        <th>الدفع</th>
                        <th>الحالة</th>
                        <th>الإجمالي</th>
                        <th>المدفوع</th>
                        <th>المستحق</th>
                        <th class="text-center">الإجراءات</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div></div></div>
@endsection

@push('scripts')
<script>
$(function () {
    const table = $('#sales-invoices-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.sales-invoices.index') }}',
            data: function (d) {
                d.date_from = $('#filter-date-from').val();
                d.date_to = $('#filter-date-to').val();
                d.customer_id = $('#filter-customer').val();
                d.payment_status = $('#filter-payment-status').val();
                d.invoice_status = $('#filter-invoice-status').val();
            }
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'invoice_number', name: 'invoice_number'},
            {data: 'invoice_date', name: 'invoice_date'},
            {data: 'customer', name: 'customer', defaultContent: 'عميل نقدي'},
            {data: 'warehouse', name: 'warehouse'},
            {data: 'cashier', name: 'cashier'},
            {data: 'payment_status', name: 'payment_status', orderable: false, searchable: false},
            {data: 'invoice_status', name: 'invoice_status', orderable: false, searchable: false},
            {data: 'total', name: 'total', className: 'text-end fw-semibold'},
            {data: 'paid_amount', name: 'paid_amount', className: 'text-end text-success'},
            {data: 'due_amount', name: 'due_amount', className: 'text-end text-danger'},
            {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-customer, #filter-payment-status, #filter-invoice-status').val('');
        table.search('').ajax.reload();
    });

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