@section('title', 'إضافة فاتورة')

@push('css')
    <style>
        .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
            height: 200px;
        }

        .ck.ck-editor__main>.ck-editor__editable {
            height: 200px;
        }
    </style>
@endpush
<section class="main-side">
    <div class="d-flex align-items-center justify-content-between gap-2 mb-3">
        <div class="main-title mb-0">
            <div class="small">
                الرئيسية
            </div>
            <div class="large">
                تعديل فاتورة
            </div>
        </div>
        <a href="{{ route('admin.clients') }}" class="main-btn btn-blue">
            <i class="fa-solid fa-plus fs-13px"></i> اضافة عميل
        </a>
    </div>
    <x-message-admin />
    <div class="content_view">
        <div class="form row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3">
            <div class="col">
                <div class="form-group">
                    <label for="customer_name">{{ __('admin.customer_name') }}</label>

                    <x-xselect2 :options="$clients" id="client_id" wire:model.live="client_id"
                        placeholder="اختر العميل" />
                </div>
            </div>
            {{-- <div class="col">
                <div class="form-group">
                    <label for="customer_name">{{ __('admin.customer_name') }}</label>
                    <div wire:ignore>
                        <select id="client_id" class="form-control select2">
                            <option value="">أختر العميل</option>
                            @foreach ($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div> --}}
            <div class="col">
                <div class="form-group">
                    <label for="phone">{{ __('admin.customer_mobile') }}</label>
                    <input type="text" disabled wire:model="phone" class="form-control">
                </div>
            </div>
            {{-- <div class="col">
                <div class="form-group">
                    <label for="customer_name">المنتج</label>
                    <select wire:model="medical_clinic_id" class="form-control SlectBox">
                        <option value="">أختر المنتج</option>
                        @foreach ($medical_clinics as $medical_clinic)
                            <option value="{{ $medical_clinic->id }}">
                                {{ $medical_clinic->name }}</option>
                        @endforeach
                    </select>

                </div>
            </div> --}}



            <div class="col">
                <div class="form-group">
                    <label for="type">نوع الفاتورة</label>
                    <select wire:model.live="type" class="form-control" id="type">
                        <option value="">---اختر---</option>
                        <option value="invoice">فاتورة</option>
                        <option value="offer">عرض سعر</option>
                    </select>
                </div>
            </div>

            <div class="col">
                <div class="form-group">
                    <label>اختر من الاقسام</label>
                    <select wire:model.live="program_id" class="form-control">
                        <option value="">أختر قسم</option>
                        @foreach (\App\Models\Program::all() as $program)
                            <option value="{{ $program->id }}">{{ $program->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col">
                <div class="form-group">
                    <label>اختر من الخدمات</label>
                    <select wire:model.live="service_id" class="form-control">
                        <option value="">أختر خدمة</option>
                        @foreach ($services as $service)
                            <option value="{{ $service->id }}">{!! Str::limit($service->name, 35) !!}</option>
                        @endforeach
                    </select>
                </div>
            </div>




            <div class="col">
                <div class="form-group">
                    <label for="invoice_date">{{ __('admin.invoice_date') }}</label>
                    <input class="form-control fc-datepicker" wire:model="invoice_date" placeholder="YYYY-MM-DD"
                        type="date">
                </div>
            </div>
            <div class="col">
                <div class="form-group">
                    <label for="company_name">سعر الخدمة</label>
                    <input type="text" wire:model.live="price" pattern="[0-9]*"
                        oninput="this.value = this.value.replace(/[^0-9]/g, '');" class="form-control">
                </div>
            </div>

            <div class="col">
                <div class="form-group">
                    <label for=""> الضريبة</label>
                    <input type="number" wire:model.live="tax" class="form-control" disabled>
                </div>
            </div>

            <div class="col">
                <div class="form-group">
                    <label for=""> السعر شامل الضريبة</label>
                    <input type="number" wire:model.live="total" class="form-control" disabled>
                </div>
            </div>

            <div class="col">
                <div class="form-group">
                    <label for="paid">المدفوع</label>
                    <input class="form-control" wire:model.live="paid" placeholder="المدفوع" type="number"
                        min="0" id="paid">
                </div>
            </div>

            <div class="col">
                <div class="form-group">
                    <label for="rest">المتبقي</label>
                    <input class="form-control" wire:model.live="rest" placeholder="المتبقي" type="number"
                        id="rest" disabled>
                </div>
            </div>


            <div class="col">
                <div class="form-group">
                    <label for="customer_name">طريقة الدفع </label>
                    <select wire:model="bank_account_id" class="form-control SlectBox">
                        <option value="">أختر طريقة الدفع</option>
                        @foreach ($bank_accounts as $bank_account)
                            <option value="{{ $bank_account->id }}">
                                {{ $bank_account->account_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>


            <div class="col">
                <div class="form-group">
                    <label for="service">الحالة</label>
                    <select wire:model="status" disabled class="form-control" id="test">
                        <option value="">أختر الحالة</option>
                        <option value="paid">مسدد</option>
                        <option value="unpaid">غير مسدد </option>
                        <option value="paid_partially"> مسدد جزئيا </option>
                    </select>
                </div>
            </div>
            <div class="col d-flex align-items-end">
                <div class="form-check mt-1">
                    <input wire:model="is_signature" class="form-check-input " type="checkbox">
                    <label class="form-check-label" for="flexCheckDefault">
                        تفعيل التوقيع
                    </label>
                </div>
            </div>
            @if ($type == 'invoice')
                <div class="col d-flex align-items-end">
                    <div class="form-check mt-1">
                        <input wire:model="is_bank" class="form-check-input" type="checkbox">
                        <label class="form-check-label" for="flexCheckDefault">
                            تفعيل الحساب البنكي
                        </label>
                    </div>
                </div>

                <div class="col d-flex align-items-end" id="inv_desc">
                    <div class="form-check mt-1">
                        <input wire:model="inv_desc" class="form-check-input" type="checkbox">
                        <label class="form-check-label" for="flexCheckDefault">
                            تفعيل شرط الفاتورة
                        </label>
                    </div>
                </div>
            @endif

            @if ($type == 'offer')
                <div class="col d-flex align-items-end" id="inv_price">
                    <div class="form-check mt-1">
                        <input wire:model="inv_price" class="form-check-input" type="checkbox">
                        <label class="form-check-label" for="flexCheckDefault">
                            تفعيل شرط عرض السعر
                        </label>
                    </div>
                </div>
            @endif

            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="form-group">
                    <label for="new_service"> الخدمة</label>
                    <textarea wire:model="new_service" id="new_service" rows="4" class="form-control"></textarea>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <button type="submit" wire:click="submit" class="main-btn px-4">{{ __('admin.save') }}</button>
            </div>
        </div>

    </div>
</section>

@push('js')
    <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>

    <script type="text/javascript">
        function initializeCkEditor() {

            ClassicEditor
                .create(document.getElementById('new_service'), {
                    language: {
                        ui: 'ar',
                        content: 'ar',
                    }
                }).then(editor => {
                    editor.setData(@json($new_service ?? ''))
                    editor.model.document.on('change:data', () => {
                        @this.set('new_service', editor.getData());
                    })

                })
                .catch(error => {
                    console.log(error);
                });
        }

        Livewire.on('update-editor', (event) => {
            if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances.editor) {
                CKEDITOR.instances.editor.setData(event.content);
            }
        });

        Livewire.on('refreshCkEditor', (event) => {
            initializeCkEditor();
        });

        initializeCkEditor();
    </script>

    <!-- CDN Select2 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <script>
        function initSelect2Client() {
            $('#client_id').select2({
                placeholder: "أختر العميل",
                allowClear: true,
                dir: "rtl",
                width: '100%'
            });

            $('#client_id').on('change', function(e) {
                const selectedValue = $(this).val();
                @this.set('client_id', selectedValue);
            });
        }

        document.addEventListener('livewire:load', function() {
            initSelect2Client();
        });

        Livewire.on('reinitSelect2', () => {
            $('#client_id').select2('destroy');
            initSelect2Client();
        });
    </script>
@endpush