@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss') {{-- formscss removed: no rich editors needed --}}
@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>

            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">

                    <form id='newuser'>
                        <div class="card">
                            <div class="card-body">

                                <div class="row row-sm">
                                    <div class="col-lg-4 mt-2">
                                        <label class="form-label"> الاسم </label>
                                        <input required class="form-control" name="name" value="" type="text">
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary mt-3 mb-0"> إضافة </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <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>
                                <div class="d-flex">
                                    @can('view codes')
                                        <a href="{{ route('admin.codes.index') }}" class="btn btn-primary btn-sm">
                                            <x-lucide-arrow-left width="20" height="20" /> العودة للأكواد
                                        </a>
                                    @endcan
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" id="groups-table">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>اسم المجموعة</th>
                                            <th>عدد الأكواد</th>
                                            <th>تاريخ الإنشاء</th>
                                            <th>الإجراءات</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- row closed -->
        </div>
        <!-- Container closed -->
    </div>
    <!-- main-content closed -->
@endsection

@section('js')
    @include('admin.helper.tablescripts') {{-- formscripts removed --}}
    @include('vue')
    <script>
        $(function() {
            const tablehead = ['id', 'name', 'codes_count', 'time', 'action'];

            var table = $('#groups-table').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                order: [
                    [0, 'desc']
                ],
                ajax: {
                    url: "{{ route('admin.codes.creategroup') }}",
                },
                columns: tablehead.map(element => ({
                    data: element,
                    name: element
                })),
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/ar.json'
                }
            });

            // حذف المجموعة
            $('#groups-table 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) {
                        const data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        };

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

                        axios.post('{{ route('admin.codes.deletegroup') }}', data)
                            .then(response => {
                                if (response.data.err === false) {
                                    Swal.fire({
                                        title: 'تم الحذف!',
                                        text: response.data.msg,
                                        icon: 'success',
                                        timer: 2000,
                                        showConfirmButton: false
                                    });
                                    table.draw();
                                } else {
                                    Swal.fire({
                                        title: 'خطأ!',
                                        text: response.data.msg,
                                        icon: 'error'
                                    });
                                }
                            })
                            .catch(error => {
                                Swal.fire({
                                    title: 'خطأ!',
                                    text: 'حدث خطأ أثناء الحذف',
                                    icon: 'error'
                                });
                            });
                    }
                });
            });

            // إضافة مجموعة جديدة
            $('#newuser').on('submit', function(e) {
                e.preventDefault();

                const submitBtn = $(this).find('button[type="submit"]');
                const originalText = submitBtn.text();
                submitBtn.prop('disabled', true).html(
                    `{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري الحفظ...`);

                let formData = new FormData(document.getElementById('newuser'));

                axios.post('{{ route('admin.codes.storegroup') }}', formData)
                    .then(response => {
                        if (response.data.err === false) {
                            Swal.fire({
                                title: 'نجح!',
                                text: response.data.msg,
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            });
                            table.draw();
                            document.getElementById('newuser').reset();
                        } else {
                            Swal.fire({
                                title: 'خطأ!',
                                text: response.data.msg,
                                icon: 'error'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            title: 'خطأ!',
                            text: 'حدث خطأ أثناء الحفظ',
                            icon: 'error'
                        });
                    })
                    .finally(() => {
                        submitBtn.prop('disabled', false).text(originalText);
                    });
            });
        });
    </script>
@endsection