@extends('admin.layouts.master')

@section('title', $type === 'sales' ? 'فواتير المبيعات' : 'فواتير المشتريات')
@section('page_title', $type === 'sales' ? 'فواتير المبيعات' : 'فواتير المشتريات')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">{{ $type === 'sales' ? 'فواتير المبيعات' : 'فواتير المشتريات' }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <ul class="nav nav-pills card-header-pills">
            <li class="nav-item"><a class="nav-link {{ $type === 'sales' ? 'active' : '' }}" href="{{ route('admin.invoices.index', ['type' => 'sales']) }}">مبيعات</a></li>
            <li class="nav-item"><a class="nav-link {{ $type === 'purchase' ? 'active' : '' }}" href="{{ route('admin.invoices.index', ['type' => 'purchase']) }}">مشتريات</a></li>
        </ul>
        <div class="card-tools">
            @can('invoices.create')
                <a href="{{ route('admin.invoices.create', ['type' => $type]) }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus"></i> {{ __('admin.add') }}
                </a>
            @endcan
        </div>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-2"><label class="small mb-1">حالة الفاتورة</label>
                <select class="form-control form-control-sm filter-input" id="filter_status">
                    <option value="">—</option>
                    <option value="draft">draft</option>
                    <option value="posted">posted</option>
                    <option value="cancelled">cancelled</option>
                </select></div>
            <div class="col-md-2"><label class="small mb-1">حالة الدفع</label>
                <select class="form-control form-control-sm filter-input" id="filter_payment_status">
                    <option value="">—</option>
                    <option value="unpaid">unpaid</option>
                    <option value="partial">partial</option>
                    <option value="paid">paid</option>
                    <option value="overdue">overdue</option>
                </select></div>
            <div class="col-md-3"><label class="small mb-1">{{ $type === 'sales' ? 'العميل' : 'المورد' }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_party_id">
                    <option value="">—</option>
                    @foreach(($type === 'sales' ? $customers : $suppliers) as $p)
                        <option value="{{ $p->id }}">{{ $p->name_ar }}</option>
                    @endforeach
                </select></div>
            <div class="col-md-2"><label class="small mb-1">من</label>
                <input type="date" class="form-control form-control-sm filter-input" id="filter_date_from"></div>
            <div class="col-md-2"><label class="small mb-1">إلى</label>
                <input type="date" class="form-control form-control-sm filter-input" id="filter_date_to"></div>
            <div class="col-md-1 d-flex align-items-end">
                <div class="icheck-danger">
                    <input type="checkbox" id="filter_overdue_only">
                    <label for="filter_overdue_only">متأخر</label>
                </div>
            </div>
        </div>

        <table id="invoicesTable" class="table table-bordered table-striped table-hover" style="width:100%">
            <thead><tr>
                <th>#</th><th>الرقم</th><th>التاريخ</th><th>الاستحقاق</th>
                <th>{{ $type === 'sales' ? 'العميل' : 'المورد' }}</th><th>عناصر</th>
                <th>الإجمالي</th><th>المدفوع</th><th>المتبقي</th>
                <th>{{ __('admin.status') }}</th><th>الدفع</th><th>{{ __('admin.actions') }}</th>
            </tr></thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    const TYPE = '{{ $type }}';
    const t = $('#invoicesTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.invoices.data') }}',
            data: d => {
                d.type           = TYPE;
                d.status         = $('#filter_status').val();
                d.payment_status = $('#filter_payment_status').val();
                d.{{ $type === 'sales' ? 'customer_id' : 'supplier_id' }} = $('#filter_party_id').val();
                d.date_from      = $('#filter_date_from').val();
                d.date_to        = $('#filter_date_to').val();
                d.overdue_only   = $('#filter_overdue_only').is(':checked') ? 1 : 0;
            }
        },
        language: { url: OFP.dtLanguage },
        columns: [
            { data: 'id', name: 'id', width: '50px' },
            { data: 'number', name: 'number' },
            { data: 'invoice_date', name: 'invoice_date' },
            { data: 'due_date', name: 'due_date' },
            { data: 'party_name', name: TYPE === 'sales' ? 'customer.name_ar' : 'supplier.name_ar', orderable: false },
            { data: 'items_count_badge', name: 'items_count', orderable: false, searchable: false },
            { data: 'total', name: 'total' },
            { data: 'paid_amount', name: 'paid_amount' },
            { data: 'remaining', name: 'remaining', orderable: false, searchable: false },
            { data: 'status', name: 'status' },
            { data: 'payment_status', name: 'payment_status' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ]
    });
    $('.filter-input, #filter_overdue_only').on('change', () => t.ajax.reload());
});
</script>
@endpush