@section('title', 'فواتير العروض')
<section class="main-side">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
        <div class="main-title mb-0">
            <div class="small">
                الرئيسية
            </div>
            <div class="large">
                فواتير العروض
            </div>
        </div>
        <div class="btn-holder d-flex align-items-center gap-1">
            <a href="{{ route('admin.clients') }}" class="main-btn btn-main-color">
                <i class="fas fa-user-plus fs-13px"></i> اضافة عميل
            </a>
            <a href="{{ route('admin.invoice.form',['type' => 'offer']) }}" class="main-btn">
                <i class="fa-solid fa-plus fs-13px"></i>
                اضافة فاتورة
            </a>
        </div>
    </div>
    <x-message-admin />
    <div class="content_view">
        <div class="btn-holder d-flex align-items-center gap-1 mb-3">
            <button type="submit" wire:click="$set('status' , '')" class="main-btn btn-main-color">
                الكل: {{ $invoices->count() }}
            </button>

            <button type="submit" wire:click="$set('status' , 'paid')" class="main-btn">
                فواتير مسددة : {{ $invoices_paid }}
            </button>

            <button type="submit" wire:click="$set('status' , 'unpaid')" class="main-btn bg-danger">
                فواتير غير مسددة : {{ $invoices_unpaid }}
            </button>

            <button type="submit" wire:click="$set('status' , 'paid_partially' )" class="main-btn bg-warning">
                فواتير مسددة جزئيا : {{ $invoices_partially_paid }}
            </button>
            <button class="main-btn btn-purple">مجموع الفواتير المسددة : {{ $invoices->sum('paid') }}</button>
            <button class="main-btn btn-orange"> مجموع الفواتير الغير المسددة : {{ $invoices->sum('rest') }} </button>
        </div>

        <div class="row g-2 mb-2">
            <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                <div class="form-group">
                    <input type="search" wire:model.live="search" class="form-control"
                        placeholder="بحث بالاسم او رقم الجوال">
                </div>
            </div>
            <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                <div class="input-group">
                    <span class="input-group-text" id="">من</span>
                    <input type="date" wire:model.live="from" class="form-control">
                </div>
            </div>
            <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                <div class="input-group">
                    <span class="input-group-text" id="">الى</span>
                    <input type="date" wire:model.live="to" class="form-control">
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table main-table">
                <thead class="">
                    <tr>
                        <th>رقم الفاتورة</th>
                        <th>تاريخ الفاتورة</th>
                        <th>الاسم</th>
                        <th>نوع الفاتورة</th>
                        <th>اسم الموظف</th>
                        <th>الخدمات</th>
                        <th>السعر</th>
                        <th>الضريبة</th>
                        <th>السعر شامل الضريبة</th>
                        <th>المدفوع</th>
                        <th>المتبقي</th>
                        <th>الحالة</th>
                        <th>العمليات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($invoices as $invoice)
                        <tr>
                            <td>{{ $invoice->id }}</td>
                            <td>{{ $invoice->invoice_date }}</td>
                            <td class="text-nowrap">{{ $invoice->client?->name }}</td>
                            <td>{{ $invoice->type == 'invoice' ? 'فاتورة' : 'عرض سعر' }}</td>
                            <td>{{ $invoice->employee?->name }}</td>
                            <td>{!! Str::limit($invoice->services ?? $invoice->servicess()->pluck('name')->join(' - '), 30) !!}</td>
                            <td>{{ $invoice->price }}</td>
                            <td>{{ $invoice->tax }}</td>
                            <td>{{ $invoice->total }}</td>
                            <td>{{ $invoice->paid }}</td>
                            <td>{{ $invoice->rest }}</td>
                            <td>
                                <span @class([
                                    'badge',
                                    'bg-success' => $invoice->status == 'paid',
                                    'bg-danger' => $invoice->status == 'unpaid',
                                    'bg-secondary' => $invoice->status == 'paid_partially',
                                ])>{{ __($invoice->status) }}</span>
                            </td>
                            <td>
                                <div class="d-flex gap-1">
                                    @if ($invoice->rest > 0 || $invoice->bonds?->count() > 0)
                                        <a href="{{ route('admin.bonds', $invoice->id) }}"
                                            class="btn  btn-sm text-light" style="background-color: #ffa200;"
                                            title="@lang('admin.Invoice Bonds')"><i class="fa-solid fa-file-contract"></i></i>
                                        </a>
                                    @endif

                                    <a class="btn btn-purple btn-sm" data-bs-toggle="modal"
                                        href="#invoicesShow{{ $invoice->id }}"><i class="fa fa-eye"></i></a>
                                    <!-- Modal -->
                                    <div class="modal fade" id="invoicesShow{{ $invoice->id }}" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h1 class="modal-title fs-5" id="invoicesShow{{ $invoice->id }}">
                                                        بيانات الفاتورة</h1>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="d-flex">
                                                        <table class="table main-table mb-0">
                                                            <tbody>
                                                                <tr>
                                                                    <th class="text-nowrap"> رقم الفاتورة</th>
                                                                    <td>{{ $invoice->id }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>الاسم</th>
                                                                    <td>{{ $invoice->client?->name }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th class="text-nowrap">تاريخ الانشاء</th>
                                                                    <td>
                                                                        {{ $invoice->created_at->format('Y-m-d') }}
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        <table class="table main-table mb-0">
                                                            <tbody>
                                                                <tr>
                                                                    <th class="text-nowrap">تاريخ الفاتورة</th>
                                                                    <td>{{ $invoice->invoice_date }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>السعر</th>
                                                                    <td>{{ $invoice->price }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>الملاحظات</th>
                                                                    <td>{{ $invoice->note ?? 'لا يوجد ملاحظات' }}</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <table class="table main-table">
                                                        <tbody>
                                                            <tr>
                                                                <th>الخدمة</th>
                                                                <td>{!! $invoice->services ?: $invoice->servicess()->pluck('name')->join(' - ') !!}</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary btn-sm px-3"
                                                        data-bs-dismiss="modal">رجوع</button>
                                                    <a target="_blank"
                                                        href="{{ route('admin.invoice.show', $invoice->id) }}"
                                                        class="btn btn-warning btn-sm"><i class="fa fa-print"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="{{ route('admin.new_invoices.edit', $invoice->id) }}"
                                        class="btn btn-info btn-sm text-white"> <i class="fa-solid fa-pen"></i></a>
                                    <x-delete-modal :item="$invoice" />
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            {{ $invoices->links() }}
        </div>
    </div>
</section>