@extends('vendors.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
@endsection

@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">المستخدمين المدارين</h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection

@section('content')
    <!-- row -->
    <div id='blogId'>
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mg-b-0">المستخدمين التابعين</h4>
                            <a href="{{ route('vendor.users.create') }}" class="btn btn-primary">
                                <x-lucide-plus /> إضافة مستخدم جديد
                            </a>
                        </div>

                        <!-- Filters -->
                        <div class="row">
                            <div class="col-lg-4 mt-2">
                                <p class="mt-0">فلتر الرصيد</p>
                                <select id="balanceFilter" class="form-control">
                                    <option value="">الكل</option>
                                    <option value="1">دائن</option>
                                    <option value="0">مديون</option>
                                </select>
                            </div>
                            <div class="col-lg-4 mt-2">
                                <p class="mt-0">الاسم</p>
                                <input type="text" id="nameFilter" class="form-control">
                            </div>
                            <div class="col-lg-4 mt-2">
                                <p class="mt-0">الايميل</p>
                                <input type="text" id="emailFilter" class="form-control">
                            </div>
                        </div>

                        <!-- Statistics Cards -->
                        <div class="row mt-3">
                            <div class="col-lg-4">
                                <div class="card bg-primary-gradient">
                                    <div class="card-body">
                                        <div class="counter-status d-flex md-mb-0">
                                            <div class="counter-icon text-warning">
                                                <x-lucide-wallet />
                                            </div>
                                            <div class="mr-auto">
                                                <h5 class="tx-13 tx-white-8 mb-3">رصيدك كتاجر</h5>
                                                <h6 class="counter mb-0 text-white">
                                                    {{ number_format(Auth::user()->balance, 2) }}
                                                    {{ Auth::user()->currency->symbol ?? '' }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="card bg-success-gradient">
                                    <div class="card-body">
                                        <div class="counter-status d-flex md-mb-0">
                                            <div class="counter-icon text-warning">
                                                <x-lucide-rocket />
                                            </div>
                                            <div class="mr-auto">
                                                <h5 class="tx-13 tx-white-8 mb-3">رصيد</h5>
                                                <x-lucide-loader-2 class="animate-spin" style="color: white;" width="8" height="8" v-show="!done" />
                                                <h6 class="counter mb-0 text-white" v-show="done">@{{ precents[0] }}
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        <div class="table-responsive">
                            <table class="table text-md-nowrap" id="vendorUsers">
                                <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>المحل|الاسم</th>
                                        <th>الايميل</th>
                                        <th>التليفون</th>
                                        <th>الحالة</th>
                                        <th>الرصيد</th>
                                        <th>اجراءات</th>
                                        <th>تاريخ انشاء الحساب</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')

    <script>
        $(function() {
            // Initialize DataTable using the standard initDatatable function
            const tablehead = ['id', 'data', 'email', 'mobile', 'status', 'balance', 'action', 'time'];
            const filterdata = ['name', 'email', 'balance'];

            const table = initDatatable(
                '#vendorUsers',
                "{{ route('vendor.users.index') }}",
                tablehead, {},
                filterdata
            );

            // Filter events
            $('#nameFilter, #emailFilter, #balanceFilter').on('keyup change', function() {
                table.draw();
                app.getprecent();
            });

            // Handle add balance button
            $('#vendorUsers tbody').on('click', '.mony', function() {
                let id = $(this).attr("value");
                Swal.fire({
                    title: 'اضافة رصيد',
                    html: '<input id="swal-input1" class="swal2-input" type="number">',
                    focusConfirm: false,
                    showCancelButton: true,
                    confirmButtonText: 'اضافة',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        let data = {
                            '_token': "{{ csrf_token() }}",
                            'id': id,
                            'amount': document.getElementById('swal-input1').value,
                        };

                        Swal.showLoading();

                        $.ajax({
                            url: '{{ route('vendor.users.addBalance') }}',
                            type: 'POST',
                            data: data,
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire('نجح!', response.message, 'success');
                                    table.draw();
                                    app.getprecent();
                                    // Refresh the page to update vendor balance
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1000);
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function() {
                                Swal.fire('خطأ!', 'حدث خطأ في النظام', 'error');
                            }
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                });
            });

            // Handle status toggle
            $('#vendorUsers tbody').on('click', '.status', function() {
                var value = $(this).attr("value");
                Swal.fire({
                    title: 'هل انت متأكد من تغيير الحالة؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'متأكد!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        };

                        Swal.showLoading();

                        $.ajax({
                            url: '{{ route('vendor.users.status') }}',
                            type: 'POST',
                            data: data,
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire('نجح!', response.message, 'success');
                                    table.draw();
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function() {
                                Swal.fire('خطأ!', 'حدث خطأ في النظام', 'error');
                            }
                        });
                    }
                });
            });
            $('#vendorUsers tbody').on('click', '.canRequestBalance', function() {
                var value = $(this).attr("value");
                Swal.fire({
                    title: 'هل انت متأكد من تغيير الحالة؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'متأكد!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        };

                        Swal.showLoading();

                        $.ajax({
                            url: '{{ route('vendor.users.reqbalance') }}',
                            type: 'POST',
                            data: data,
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire('نجح!', response.message, 'success');
                                    table.draw();
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function() {
                                Swal.fire('خطأ!', 'حدث خطأ في النظام', 'error');
                            }
                        });
                    }
                });
            });
             $('#suppliers tbody').on('click', '.passwpord', function() {
                var value = $(this).attr("value");
                var name = $(this).attr("name");
                Swal.fire({
                    title: ` هل انت متأكد من تغيير باسورد ---- ${name} `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'متأكد !'
                }).then((result) => {
                    if (result.isConfirmed) {
                        data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        }
                        Swal.showLoading()
                        $.ajax({
                            url: '{{ route('vendor.users.changePassword') }}',
                            type: 'POST',
                            data: data,
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire('نجح!', response.message, 'success');
                                    table.draw();
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function() {
                                Swal.fire('خطأ!', 'حدث خطأ في النظام', 'error');
                            }
                        });
                        // adawe('{{ route('vendor.users.changePassword') }}', data)
                        $('#suppliers').DataTable().draw();
                    }
                })
                // console.log($(this).attr("value"));
            });
        });
    </script>

    <script>
        app = new Vue({
            'el': '#blogId',
            data: {
                precents: [0, 0],
                done: 0,
                vendorBalance: {{ Auth::user()->balance ?? 0 }}
            },
            methods: {
                getprecent: async function() {
                    this.done = 0;
                    let calcincomeurl = new URL('{{ route('vendor.users.filterBalance') }}');
                    let balance = $('#balanceFilter').val();
                    calcincomeurl.searchParams.set('balance', balance);

                    await axios.get(calcincomeurl).then(response => {
                        this.precents = response.data.data.data;
                        this.done = 1;
                    }).catch(error => {
                        console.error('Error fetching balance data:', error);
                        this.done = 1;
                    });
                },
                updateVendorBalance: function() {
                    // This method could be called to refresh vendor balance from server
                    // For now, we're refreshing the page
                }
            },
            created() {
                this.getprecent();
            }
        });
    </script>
@endsection