@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='taxId'>
        <div>
            <!-- Add Tax Form -->
            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                    <form id='newTax'>
                        <div class="card">
                            <div class="card-body">
                                <div class="main-content-label mg-b-5">
                                    إضافة ضريبة جديدة
                                </div>
                                <div class="row row-sm">
                                    <div class="col-lg-4 mt-2">
                                        <label class="mt-0"> مستخدم </label>
                                        <select name="user_id" id='user_id' class="form-control select2" required>
                                            <option value="" selected> اختر مستخدم </option>
                                            @php
                                                $currentUser = Auth::user();
                                                $managedUserIds = [];
                                                if ($currentUser->is_vendor && $currentUser->vendorProfile) {
                                                    $managedUsers = $currentUser->vendorProfile->managedUsers;
                                                    foreach ($managedUsers as $user) {
                                                        $managedUserIds[] = $user->id;
                                                    }
                                                }
                                            @endphp
                                            @foreach (\App\Models\User::whereIn('id', $managedUserIds)->get() as $user)
                                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <!--<div class="col-lg-4 mt-2">-->
                                    <!--    <label> الألعاب </label>-->
                                    <!--    <select class="form-control select2" name='game_id' style="width: 100%;height:45px">-->
                                    <!--        <option selected value="">اختر اللعبة</option>-->
                                    <!--        @foreach (\App\Models\Game::all() as $game)-->
                                    <!--            <option value="{{ $game->id }}"> {{ $game->name }} </option>-->
                                    <!--        @endforeach-->
                                    <!--    </select>-->
                                    <!--</div>-->
                                    <!--<div class="col-lg-4 mt-2">-->
                                    <!--    <label> المنتجات </label>-->
                                    <!--    <select class="form-control select2" name='product_id'-->
                                    <!--        style="width: 100%;height:45px">-->
                                    <!--        <option selected value="">اختر المنتج</option>-->
                                    <!--        @foreach (\App\Models\Product::all() as $product)-->
                                    <!--            <option value="{{ $product->id }}"> {{ $product->name }} </option>-->
                                    <!--        @endforeach-->
                                    <!--    </select>-->
                                    <!--</div>-->

                                    <div class="col-12 mt-3">
                                        <label class="form-label"> النسبة المئوية </label>
                                        <input required class="form-control" name="percent"
                                            placeholder="أدخل النسبة المئوية" type="number" step="0.01" min="0"
                                            max="10000">
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary mt-3 mb-0"> إضافة الضريبة </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Tax List Table -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between">
                                <h2 class="card-title mg-b-0"> قائمة الضرائب </h2>
                                <div class="row">
                                    <div class="col-lg-8 mt-2">
                                        <label class="mt-0"> تصفية حسب المستخدم </label>
                                        <select name="filter_user_id" id='filter_user_id' class="form-control select2">
                                            <option value="" selected> جميع المستخدمين </option>
                                            @foreach (\App\Models\User::whereIn('id', $managedUserIds)->get() as $user)
                                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" id="taxTable">
                                    <thead>
                                        <tr>
                                            <th> ID</th>
                                            <th> المستخدم </th>
                                            <th> اللعبة </th>
                                            <th> المنتج </th>
                                            <th> النسبة % </th>
                                            <th> تاريخ الإنشاء </th>
                                            <th> الإجراءات </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            $('.select2').select2();

            const tablehead = ['id', 'user', 'game', 'product', 'percent', 'time', 'action'];

            var table = $('#taxTable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                autoWidth: false,
                ajax: {
                    url: "{{ route('vendor.tax.index') }}",
                    data: function(d) {
                        d.user_id = $('#filter_user_id').val()
                    }
                },
                columns: tablehead.map(element => ({
                    data: element
                })),
                language: {
                    "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Arabic.json"
                }
            });

            // Filter by user
            $('#filter_user_id').change(function() {
                table.draw();
            });

            // Add new tax
            $('#newTax').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(document.getElementById('newTax'));

                // Add CSRF token
                formData.append('_token', "{{ csrf_token() }}");

                // Show loading
                Swal.fire({
                    title: 'جاري الإضافة...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    }
                });

                $.ajax({
                    url: "{{ route('vendor.tax.store') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        Swal.close();
                        if (response.status === 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'تم بنجاح',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });
                            $('#newTax')[0].reset();
                            $('.select2').val(null).trigger('change');
                            table.draw();
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ',
                                text: response.message || 'حدث خطأ أثناء الإضافة'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.close();
                        let message = 'حدث خطأ أثناء الإضافة';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ',
                            text: message
                        });
                    }
                });
            });

            // Delete tax
            $('#taxTable tbody').on('click', '.delete', function() {
                var value = $(this).attr("value");
                Swal.fire({
                    title: 'هل أنت متأكد من الحذف؟',
                    text: "لن تتمكن من استرداد هذا السجل!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم، احذف!',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        };

                        Swal.fire({
                            title: 'جاري الحذف...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading()
                            }
                        });

                        $.ajax({
                            url: "{{ route('vendor.tax.delete') }}",
                            type: 'POST',
                            data: data,
                            success: function(response) {
                                Swal.close();
                                if (response.status === 'success') {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'تم الحذف بنجاح',
                                        text: response.message,
                                        timer: 2000,
                                        showConfirmButton: false
                                    });
                                    table.draw();
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'خطأ',
                                        text: response.message ||
                                            'حدث خطأ أثناء الحذف'
                                    });
                                }
                            },
                            error: function(xhr) {
                                Swal.close();
                                let message = 'حدث خطأ أثناء الحذف';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                Swal.fire({
                                    icon: 'error',
                                    title: 'خطأ',
                                    text: message
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection