@extends('client.layouts.app')
@section('title', 'عرض فواتير المبيعات')
@section('content')
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">

                            <h2 class="content-header-title float-start mb-0">
                                المبيعات
                            </h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('client.home') }}">لوحة التحكم </a>
                                    </li>
                                    <li class="breadcrumb-item active">
                                        المبيعات
                                    </li>
                                    <li class="breadcrumb-item active">
                                        عرض الفواتير
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
                    <div class="mb-1 breadcrumb-right">
                        <div class="dropdown">
                            @can('إضافة فاتورة مبيعات')
                                <a href="{{ route('client.sale_bills.create') }}">
                                    <button class="btn-icon btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-title="{{__("app.buttons.add-sales-invoice")}}">
                                        <i data-feather='plus'></i>
                                    </button>
                                </a>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Basic Horizontal form layout section start -->
                <!-- Basic multiple Column Form section start -->
                <section class="app-user-list">
                    <div class="row">
                        <div class="col-lg-3 col-sm-6">
                            <div class="card">
                                <div class="card-body d-flex align-items-center justify-content-between">
                                    <div>
                                        <h3 class="fw-bolder mb-75">{{ $sale_bills->count() }}</h3>
                                        <span style="font-weight: bold">عدد الفواتير</span>
                                    </div>
                                    <div class="avatar bg-light-primary p-50">
                                        <span class="avatar-content">
                                            <i data-feather="file" class="font-medium-5"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="card">
                                <div class="card-body d-flex align-items-center justify-content-between">
                                    <div>
                                        <h3 class="fw-bolder mb-75">{{ $sale_bills->where('status', 'done')->count() }}</h3>
                                        <span style="font-weight: bold">عدد الفواتير المحفوظة </span>
                                    </div>
                                    <div class="avatar bg-light-success p-50">
                                        <span class="avatar-content">
                                            <i data-feather="file" class="font-medium-5"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="card">
                                <div class="card-body d-flex align-items-center justify-content-between">
                                    <div>
                                        <h3 class="fw-bolder mb-75">{{ $sale_bills->where('status', 'open')->count() }}</h3>
                                        <span style="font-weight: bold"> الفواتير الغير محفوظة </span>
                                    </div>
                                    <div class="avatar bg-light-danger p-50">
                                        <span class="avatar-content">
                                            <i data-feather="file" class="font-medium-5"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="card">
                                <div class="card-body d-flex align-items-center justify-content-between">
                                    <div>
                                        <h3 class="fw-bolder mb-75">
                                            {{ number_format($sale_bills->where('status', 'done')->sum('final_total')) }}
                                        </h3>
                                        <span style="font-weight: bold"> إجمالي المبيعات</span>
                                    </div>
                                    <div class="avatar bg-light-warning p-50">
                                        <span class="avatar-content">
                                            <i data-feather="dollar-sign" class="font-medium-5"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- list and filter start -->
                    <div class="card">
                        <div class="card-body border-bottom">
                            <h4 class="card-title" style="direction: rtl; text-align: right;">البحث &amp; و فلترة النتائج
                            </h4>
                            <div class="row">
                                <div class="col-md-3 ">
                                    <label class="form-label " for="clients"
                                        style=" font-weight:bold; direction: rtl; text-align: right;">العملاء</label>
                                    <select id="outerclients" class="form-select text-capitalize mb-md-0 mb-2 search">
                                        <option value="all">كل العملاء</option>
                                        @foreach ($outer_clients as $client)
                                            <option value="{{ $client->id }}">{{ $client->client_name }}</option>
                                        @endforeach

                                    </select>
                                </div>
                                <div class="col-md-3 ">
                                    <label class="form-label"
                                        style="font-weight:bold; direction: rtl; text-align: right;">المنتجات</label>
                                    <select id="products" class="form-select text-capitalize mb-md-0 mb-2 search">
                                        <option value="all">كل المنتجات</option>
                                        @foreach ($products as $product)
                                            <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3 ">
                                    <label class="form-label" for="status"
                                        style="font-weight:bold; direction: rtl; text-align: right;">حالة الفاتورة</label>
                                    <select id="status" class="form-select text-capitalize mb-md-0 mb-2 search">
                                        <option value="all">عرض الكل</option>
                                        <option value="done">تم الحفظ</option>
                                        <option value="open">لم تحفظ</option>

                                    </select>
                                </div>
                                <div class="col-md-3 ">
                                    <label class="form-label" for="status"
                                        style="font-weight:bold; direction: rtl; text-align: right;">المسؤولين</label>
                                    <select id="clients" class="form-select text-capitalize mb-md-0 mb-2 search">
                                        <option value="all">عرض الكل</option>
                                        @foreach ($clients as $client)
                                            <option value="{{ $client->id }}">{{ $client->name }}</option>
                                        @endforeach
                                    </select>
                                </div>


                            </div>
                            <br>
                            <center>
                                <a href="javascript:;" id="additionalButton"
                                    class="btn btn-link  waves-effect waves-float waves-light">
                                    خيارات إضافية
                                </a>
                            </center>
                            <div id="additional" style="display: none" class="row">

                                <div class="col-md-4 ">
                                    <label class="form-label"
                                        style="font-weight:bold; direction: rtl; text-align: right;">من تاريخ</label>
                                    <input type="date" name="from_date" class="form-control" id="from_date">
                                </div>

                                <div class="col-md-4 ">
                                    <label class="form-label"
                                        style="font-weight:bold; direction: rtl; text-align: right;">إلي تاريخ</label>
                                    <input type="date" name="to_date" class="form-control" id="to_date">
                                </div>

                            </div>

                        </div>

                        <div class="card-datatable table-responsive pt-0">
                            <table id="example2" class="datatables-basic table dataTable no-footer dtr-column collapsed">
                                <thead>
                                    <tr>
                                        <th>تحكم</th>
                                        <th>كود</th>
                                        <th> العميل</th>
                                        <th>تاريخ </th>
                                        <th> وقت </th>
                                        <th>الاجمالى النهائى</th>
                                        <th>الربح</th>
                                        <th>الحالة</th>
                                        <th>المسؤول</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                    </tbody>
                            </table>
                        </div>


                        <div id="offline_section" class="card-datatable table-responsive pt-0 mt-5">
                            <div class="m-2">
                                <button id="sync_offline" class="btn btn-primary">مزامنة الفواتير
                                    الاوفلاين</button>
                            </div>
                            <table id="offline_table"
                                class="datatables-basic table dataTable no-footer dtr-column collapsed">
                                <thead>
                                    <tr>
                                        <th>رقم الفاتورة</th>
                                        <th>العميل</th>
                                        <th>التاريخ</th>
                                        <th>الوقت</th>
                                        <th>الاجمالي النهائي</th>
                                        <th>عرض الفاتورة</th>

                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <!-- list and filter end -->
                </section>



            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('app-assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('app-assets/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('app-assets/js/sweetalert.min.js') }}"></script>
    <script src="{{ asset('app-assets/js/select2.min.js') }}"></script>
    <script>
        filter();

        $('.search').select2();
        var table = $('#example2').DataTable({
            "language": {
                "url": "{{ asset('app-assets/data/locales/Arabic.json') }}"
            }
        });




        $('#outerclients').on('change', function() {
            filter()
        });
        $('#status').on('change', function() {
            filter();
        });
        $('#products').on('change', function() {
            filter();
        });
        $('#clients').on('change', function() {
            filter();
        });
        $('#from_date').on('change', function() {
            filter();
        });
        $('#to_date').on('change', function() {
            filter();
        });

        function filter() {

            var product_id = $('#products').val();
            var outerclients = $('#outerclients').val();
            var status = $('#status').val();
            var clients = $('#clients').val();
            var from_date = $('#from_date').val();
            var to_date = $('#to_date').val();


            $.ajax({
                url: "{{ route('client.sale_bills.search_filter') }}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "product_id": product_id,
                    "outerClient": outerclients,
                    status: status,
                    clients: clients,
                    from_date: from_date,
                    to_date: to_date,

                },
                success: function(data) {
                    table.clear().draw();
                    $.map(data, function(value, index) {
                        var url = "{{ route('client.sale_bills.print', ['id' => ':id']) }}";
                        url = url.replace(':id', value.sale_bill_number);

                        var posUrl = "{{ route('client.sale_bills.print_pos', ['id' => ':id']) }}";
                        posUrl = posUrl.replace(':id', value.sale_bill_number);

                        //
                        var editUrl = "{{ route('client.sale_bills.edit', ['id' => ':id']) }}";
                        editUrl = editUrl.replace(':id', value.sale_bill_number);
                        table.row.add([
                            '<a class="pe-1 dropdown-toggle -arrow text-primary" data-bs-toggle="dropdown"><i class="las la-ellipsis-v"style="font-size:26px"></i></a><div class="dropdown-menu dropdown-menu-end"> <a href="' +
                            url +
                            '" class="dropdown-item"><b> عرض </b></i></a> <a href="' +
                            posUrl +
                            '" class="dropdown-item"><b> عرض كاشير </b></i></a> @can('تعديل فاتورة مبيعات') <a href="' +
                            editUrl +
                            '" class="dropdown-item"><b> تعديل </a>@endcan @can('حذف فاتورة مبيعات')<a id="' +
                            value.id + '" onclick="deleteRow(' + value.id +
                            ')" class="dropdown-item"><b> حذف </b></i></a>@endcan</div> ',
                            value.sale_bill_number,
                            value.outer_client == null ? 'عميل مبيعات نقدية' : value
                            .outer_client.client_name,
                            value.date,
                            value.time,
                            formatMoney(parseFloat(value.final_total)),
                            formatMoney(parseFloat(value.updated_at)),
                            value.status == 'open' ?
                            '<span class="badge rounded-pill badge-light-danger" text-capitalized=""> لم تحفظ </span>' :
                            '<span class="badge rounded-pill badge-light-success" text-capitalized=""> تم الحفظ </span>',
                            value.client.name,
                        ]).draw();
                    });
                },

                error: function(data) {
                    console.log('Error:', data);
                }
            });
        };

        function deleteRow(id) {

            swal({

                title: "هل أنت متأكد من حذف هذة الفاتورة ",


                type: "warning",

                showCancelButton: true,

                confirmButtonColor: "#DD6B55",

                confirmButtonText: "تأكيد",

                cancelButtonText: "إلغاء",

                closeOnConfirm: false

            }, function(isConfirm) {

                if (!isConfirm) return;

                $.ajax({

                    url: "{{ route('client.sale_bills.delete') }}",

                    type: "post",

                    data: {

                        id: id,
                        '_token': '{{ csrf_token() }}'
                    },

                    dataType: "html",

                    beforeSend: function() {
                        var ifConnected = window.navigator.onLine;
                        if (!ifConnected) {
                            toastr.info("يتم الآن إعادة الإتصال", "لا يوجد إتصال بالإنترنت", {
                                positionClass: "toast-top-right",
                                tapToDismiss: !1,
                                timeOut: 2e3,
                                rtl: $("html").attr("data-textdirection")
                            });
                        }
                    },


                    success: function() {

                        swal("تم الحذف بنجاح", "", "success");


                        $("#" + id).closest('tr').remove();


                    },

                    error: function(xhr, ajaxOptions, thrownError) {

                        swal("خطأ في الحذف ", "الرجاء المحاولة مرة آخري", "error");

                    }

                });

            });

        }
        $('#additionalButton').on('click', function() {


            if ($('#additional').is(':hidden')) {
                $('#additional').show();
            } else {
                $('#additional').hide();
            }

        });
    </script>


    <script>
        var request = indexedDB.open('offline');

        request.onsuccess = function(event) {
            var db = event.target.result;
            var transaction = db.transaction(['sale_bills'], 'readonly');
            var objectStore = transaction.objectStore('sale_bills');

            var getAllRequest = objectStore.getAll();

            getAllRequest.onsuccess = function(event) {
                var invoices = event.target.result;
                var offlineTable = document.getElementById('offline_table').getElementsByTagName('tbody')[0];

                if (invoices && invoices.length > 0) {
                    document.getElementById('offline_section').style.display = 'block';
                    invoices.forEach(function(invoice, index) {
                        var row = offlineTable.insertRow(index);
                        row.insertCell(0).textContent = invoice.invoiceID; // رقم الفاتورة
                        row.insertCell(1).textContent = invoice.customerName; // العميل
                        row.insertCell(2).textContent = invoice.date; // التاريخ
                        row.insertCell(3).textContent = invoice.time; // الوقت
                        row.insertCell(4).textContent = invoice.finalTotal; // الاجمالي النهائي

                        var viewButton = document.createElement('button');
                        viewButton.textContent = 'عرض';
                        viewButton.className = 'btn btn-info';
                        viewButton.onclick = function() {
                            window.location.href = `/print_offline.html?id=${invoice.invoiceID}`;
                        };
                        var cell = row.insertCell(5);
                        cell.appendChild(viewButton);
                    });
                } else {
                    // التعامل مع حالة عدم وجود فواتير
                }
            };

            getAllRequest.onerror = function(event) {
                console.error("حدث خطأ أثناء جلب الفواتير:", event.target.error);
            };
        };

        request.onerror = function(event) {
            console.error("حدث خطأ أثناء فتح قاعدة البيانات:", event.target.error);
        };





        // sync offline inv
        $("#sync_offline").on("click", function() {
            var syncButton = $(this);

            // تعطيل الزر لمنع الضغط المتكرر
            syncButton.prop('disabled', true);

            var request = indexedDB.open('offline');

            request.onsuccess = function(event) {
                var db = event.target.result;
                var transaction = db.transaction(['sale_bills'], 'readonly');
                var objectStore = transaction.objectStore('sale_bills');
                var getAllRequest = objectStore.getAll();

                getAllRequest.onsuccess = function(event) {
                    var invoices = event.target.result;
                    if (invoices && invoices.length > 0) {
                        // Send the invoices using AJAX
                        $.ajax({
                            url: '{{ route('client.sale_bills.syncOffline') }}',
                            type: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            contentType: 'application/json',
                            data: JSON.stringify({
                                invoices: invoices,
                                _token: '{{ csrf_token() }}',
                            }),
                            success: function(response) {
                                var request = indexedDB.open('offline');

                                request.onsuccess = function(event) {
                                    var db = event.target.result;
                                    var transaction = db.transaction(['sale_bills'],
                                        'readwrite');
                                    var objectStore = transaction.objectStore('sale_bills');

                                    // حذف الفواتير من قاعدة البيانات المؤقتة
                                    var deleteRequest = objectStore.clear();

                                    deleteRequest.onsuccess = function(event) {
                                        console.log(
                                            "تم حذف الفواتير بنجاح من قاعدة البيانات المؤقتة."
                                        );
                                    };

                                    deleteRequest.onerror = function(event) {
                                        console.error(
                                            "حدث خطأ أثناء محاولة حذف الفواتير:",
                                            event.target.error);
                                    };
                                };

                                toastr.success(
                                    "رجاء اعادة تحميل الصفحة للتعديل او الحذف علي الفواتير المزامنة",
                                    "تم مزامنة الفواتير بنجاح", {
                                        positionClass: "toast-top-right",
                                        tapToDismiss: !1,
                                        timeOut: 2e4,
                                        rtl: $("html").attr("data-textdirection")
                                    }
                                );

                                // إعادة تفعيل الزر بعد اكتمال العملية بنجاح
                                syncButton.prop('disabled', false);
                            },
                            error: function(xhr, status, error) {
                                console.error("Error sending data: " + error);

                                // إعادة تفعيل الزر في حالة حدوث خطأ
                                syncButton.prop('disabled', false);
                            }
                        });
                    } else {
                        console.log("لا توجد فواتير للمزامنة.");

                        // إعادة تفعيل الزر في حالة عدم وجود فواتير
                        syncButton.prop('disabled', false);
                    }
                };

                getAllRequest.onerror = function(event) {
                    console.error("حدث خطأ أثناء جلب الفواتير:", event.target.error);

                    // إعادة تفعيل الزر في حالة حدوث خطأ أثناء جلب الفواتير
                    syncButton.prop('disabled', false);
                };
            };

            request.onerror = function(event) {
                console.error("حدث خطأ أثناء فتح قاعدة البيانات:", event.target.error);

                // إعادة تفعيل الزر في حالة حدوث خطأ أثناء فتح قاعدة البيانات
                syncButton.prop('disabled', false);
            };
        });
    </script>

    <script>
        $(document).ready(function() {
            // التحقق من حالة الاتصال بالإنترنت عند تحميل الصفحة
            if (!navigator.onLine) {
                $('#sync_offline').hide(); // إخفاء الزر إذا كان غير متصل بالإنترنت
            }

            // استجابة لتغيير حالة الاتصال
            window.addEventListener('online', function() {
                $('#sync_offline').show(); // إظهار الزر عند الاتصال بالإنترنت
            });

            window.addEventListener('offline', function() {
                $('#sync_offline').hide(); // إخفاء الزر عند فقدان الاتصال بالإنترنت
            });
        });
    </script>


@endsection

@section('style')
    <style>
        #offline_section {
            display: none;
        }
    </style>
@endsection