@extends('admin.layouts.adminNosidebar')
@section('title', 'الفاتورة')
@section('content')
    <section class="py-4 " >
        <div id="html2pdf">
            <div class="content_view p-0" id="prt-content">
                @if ($client_invoice->type == 'invoice')

                    @if ($client_invoice->paid)
                        <div class="status-invoice paid ">
                            مدفوعة
                        </div>
                    @elseif('unpaid')
                        <div class="status-invoice ">
                            غير مدفوعة
                        </div>
                    @else
                        <div class="status-invoice ">
                            مدفوعة جزئيا
                        </div>
                    @endif
                @endif


                <div class="box-shadow">
                    <img class="bg-img" src="{{ asset('admin-assets/img/login_logo.png') }}" alt="const tech">
                    <div class="p-3 pt-2 pt-md-0 pe-5">
                        <div>
                            <div class="header-invoice py-3  mb-3">
                                <div class="row align-items-center">
                                    <div class="col-lg-4 text-center text-lg-end">
                                        <div class="name">
                                            المملكة العربية السعودية
                                        </div>
                                        <div class="address">
                                            كوكبة التقنية <br>
                                            @if (setting('tax_no'))
                                                الرقم الضريبي: {{ setting('tax_no') }}
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-4 text-center">
                                        @if ($client_invoice->type == 'invoice')
                                            <h4 class="mb-2 fw-bold">
                                                فاتورة مبيعات
                                            </h4>
                                        @else
                                            <h4 class="mb-2 fw-bold">
                                                عرض سعر
                                            </h4>
                                        @endif
                                        <span class="fw-bold text-danger">
                                            (رقم الفاتورة: {{ $client_invoice->id }})
                                        </span>
                                    </div>
                                    <div class="col-lg-4 text-center text-lg-end">
                                        <div class="img-holder text-lg-start ">
                                            <img src="{{ asset('admin-assets/img/login_logo.png') }}" alt="const tech"
                                                width="100">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center flex-wrap gap-2 mb-3 justify-content-between">
                                <h6 class="black mb-0 fs-15px fw-600">المكرم / <span class="text-danger">
                                        {{ $client_invoice->client?->name }}</span></h6>
                                <h5 class="black mb-5 fw-600">
                                    السلام عليكم ورحمه الله وبركاته وبعد
                                </h5>
                                <div class="date fw-500 mb-0 ">{{ date('Y-m-d ') }}</div>
                            </div>
                            <div class="table-responsive mb-2">
                                <table class="table main-table shadow-none">
                                    <thead>
                                        <tr>
                                            {{-- <th style="width:6%;" class="border-left text-end">#</th> --}}
                                            <th class="text-end">الخدمة</th>
                                        </tr>
                                    </thead>
                                    {{-- <tbody>
                                        @if ($client_invoice->servicess()->count() > 0)
                                            @foreach ($client_invoice->servicess as $index => $service)
                                                <tr>
                                                    <td class="text-end mx-3 px-4">{!! $service->name !!}</td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="2">لا توجد خدمات متاحة</td>
                                            </tr>
                                        @endif
                                    </tbody> --}}
                                    <tbody>
                                        <tr>
                                            <td class="text-end mx-3 px-4">{!! $client_invoice->services !!}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="row justify-content-center">
                                <div class="col-md-7 col-xxl-4">
                                    <table class="table main-table shadow-none">
                                        <tr>

                                            <th>مبلغ الفاتورة</th>
                                            <td>{{ $client_invoice->price }}</td>
                                        </tr>
                                        <tr>
                                            <th>الخصم</th>
                                            <td>{{ $client_invoice->discount ?? 0 }}</td>

                                        </tr>
                                        <tr>

                                            <th>المدفوع</th>
                                            <td>{{ $client_invoice->paid }}</td>
                                        </tr>
                                        <tr>
                                            <th>المتبقي</th>
                                            <td>{{ $client_invoice->rest }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <h6 class="text-danger text-center mb-3 fw-bold fs-16px">اجمالي المبلغ
                                ({{ $client_invoice->price }})
                                ريال</h6>
                            {{-- @if ($client_invoice->description) --}}
                            @if ($client_invoice->type === 'invoice')
                                <div>
                                    {!! $client_invoice->description !!}
                                </div>
                            @else
                                <div>
                                    {!! $client_invoice->price_conditions !!}
                                </div>
                            @endif

                        </div>
                        {{-- <div class="box-bank">
                                <div class="item">
                                    <div class="title">
                                        أسم الحساب:
                                    </div>
                                    <div class="content">
                                        محمد عثمان
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        أسم البنك:
                                    </div>
                                    <div class="content">
                                        بنك الأهلي
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        رقم الحساب:
                                    </div>
                                    <div class="content">
                                        54685484
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        رقم الـIPN:
                                    </div>
                                    <div class="content">
                                        54685484
                                    </div>
                                </div>
                            </div> --}}
                        <div class="d-flex gap-3 justify-content-center  align-items-center mb-4">
                            <div class="admin-holder">
                                <p class="opening mb-4 text-center  fw-600">المشرف الإداري وخدمة العملاء</p>
                                <p class="opening text-center fw-600 "> أ- صالح بن حامد الشمراني</p>
                            </div>
                            <div class="company">
                                @if ($client_invoice->is_signature)
                                    <img src="{{ asset('admin-assets/img/settings/' . setting('signature_icon')) }}"
                                        width="89" alt="" style="transform: rotate(343deg);">
                                @endif
                            </div>
                        </div>
                        @if ($client_invoice->bank_account_id)
                            <div class="box-bank">
                                <div class="item">
                                    <div class="title">
                                        أسم الحساب:
                                    </div>
                                    <div class="content">
                                        {{ $client_invoice->bank->account_name }}
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        أسم البنك:
                                    </div>
                                    <div class="content">
                                        {{ $client_invoice->bank->bank_name }}
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        رقم الحساب:
                                    </div>
                                    <div class="content">
                                        {{ $client_invoice->bank->account_number }}
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        رقم الـIPN:
                                    </div>
                                    <div class="content">
                                        {{ $client_invoice->bank->ipn_number }}
                                    </div>
                                </div>
                            </div>
                        @else
                            <p class="text-center">لا توجد بيانات حساب بنكي.</p>
                        @endif
                        <div class="box-information">
                            <div class="box-qr">
                                <div class="text">
                                    سياسه الاتفاق
                                </div>
                                <div class="holder-qr">
                                    <img src="{{ asset('admin-assets/img') }}/qrcode-const.png" alt=""
                                        class="qr">
                                </div>
                            </div>
                            <div class="content">
                                <div
                                    class="d-flex justify-content-center justify-content-md-start align-items-center gap-2 flex-wrap">
                                    <a href="https://www.const-tech.org/" class="badge-footer text-light " target="_blank">
                                        www.const-tech.org
                                        <i class="icon fas fa-globe"></i>
                                    </a>
                                    <div class="badge-footer">
                                        info@const-tech.org
                                        <i class="icon fas fa-envelope"></i>
                                    </div>
                                    <div class="badge-footer">
                                        0506499275
                                        <i class="icon fas fa-phone"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btns-holder d-flex align-items-center gap-2 justify-content-center mt-3">
             {{-- <button class="btn btn-sm px-2 btn-warning text-white"><i class="fa-solid fa-print"></i> طباعة</button>
             <button class="btn btn-sm px-2 btn-info text-white"><i class="fa-solid fa-file-excel"></i> تصدير Excel</button>
             <button class="btn btn-sm px-2 btn-purple"><i class="fa-solid fa-eye"></i> معاينة</button>  --}}

            {{-- <a class="btn btn-sm px-2 btn-primary" href="{{ route('admin.invoice.pdf',$client_invoice->id) }}">Export to PDF</a> --}}
            <a class="btn btn-sm btn-danger" href="javascript:generateHTML2PDF()" style="background-color:#f00200;">
                <i class="fa-solid fa-file-pdf"></i>
            </a>

            {{-- <a href="{{ route('admin.export.pdf', $bond->id) }}" class="btn btn-danger not-print" style="backgorund-color:#F00200;">
            <i class="fa-solid fa-file-pdf"></i>
            </a> --}}

            <button class="btn btn-warning btn-sm text-white text-nowrap" id="btn-prt-content">
                <i class="fas fa-print"></i>
            </button>
            {{-- <a class="btn btn-sm px-2 btn-info text-white" 
            data-clipboard-text="{{ route('admin.invoice.public.view', ['id' => $client_invoice->id, 'hash' => hash('sha256', $client_invoice->id . config('app.key'))]) }}"
            id="copy-link-btn">
                <i class="fa-solid fa-link"></i> نسخ رابط للعميل
            </a> --}}
        </div>
    </section>
    @push('js')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
        <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
        <script>
            function generateHTML2PDF() {
                var element = document.getElementById('html2pdf');

                html2canvas(element, {
                    scale: 2
                }).then(function(canvas) {
                    var imgData = canvas.toDataURL('image/jpeg', 0.7);
                    var pdf = new jsPDF();

                    // Set the width and height of the PDF page to match the element's dimensions
                    var imgWidth = pdf.internal.pageSize.getWidth();
                    var imgHeight = (canvas.height * imgWidth) / canvas.width;

                    pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
                    pdf.save(`فاتورة رقم {{ $client_invoice->id }} - {{ $client_invoice->client?->name }}.pdf`);
                });
            }
        </script>

        <script>
            document.getElementById('copy-link-btn').addEventListener('click', function(e) {
                e.preventDefault();
                var text = this.getAttribute('data-clipboard-text');
                navigator.clipboard.writeText(text).then(function() {
                    alert('تم نسخ الرابط بنجاح');
                });
            });
        </script>
    @endpush
@endsection