@extends('app')
<style>
    #datatable-example {
        width: 100% !important;
    }

    .dataTables_wrapper {
        width: 100% !important;
        overflow-x: auto;
    }

    .grid-body,
    .vertical,
    .overflow-auto {
        width: 100% !important;
    }
</style>
@section('content')
    @if (Session::has('flash_message'))
        <div class="alert {{ Session::has('flash_message_status') ? 'alert-error' : 'alert-success' }}"
            style="text-align: center;">
            <button class="close" data-dismiss="alert"></button>
            {!! Session::get('flash_message') !!}
        </div>
    @endif


    <div class="row">
        <div class="col-sm-12">
            <div class="grid simple vertical">

                <div class="grid-body no-border overflow-auto">
                    <div class='row control' style="margin-bottom: 10px; margin-top: 10px;  background-color: #fff;">
                        <div class="col-sm-5 col-xs-12">
                            <div class="pull-right markaction">


                                @if (Auth::user()->can('aggrementstats-destroy'))
                                    <a id="del" href="javascript:void(0)" class="btn btn-wider btn-danger"
                                        data-msg="هل أنت متأكد من الحذف؟"
                                        data-url="{{ route('admin.aggrementstats.bulkdisagree') }}">حذف</a>
                                @endif
                            </div>


                        </div>

                        <div class="col-sm-2 col-xs-12" style="text-align: center;">
                            <span class="bold" style="font-size: 20px;">إحصائيات الاتفاق</span>
                        </div>

                        <div class="col-sm-5 col-xs-12">
                            @if (Auth::user()->can('familyappregisteration-edit'))
                                <a href="javascript:void(0)" class="btn btn-default btn-wider bulkExport"
                                    id="bulkExportBtn">
                                    Download CSV
                                </a>
                            @endif
                        </div>

                    </div>




                    <table class="table table-hover w-100" id="datatable-example">


                        <thead>
                            <tr>
                                <th width="2%"><input type="checkbox" class="group-checkable"
                                        data-set="#datatable-example .checkboxes" /></th>
                                <th width="2%">الهوية</th>
                                <th width="2%">الجنس</th>
                                <th width="2%">الإسم الأول</th>
                                <th width="2%">الأب</th>
                                <th width="2%">الجد ١</th>
                                <th width="2%">الجد ٢</th>
                                <th width="2%">الجد ٣</th>
                                <th width="5%">البريد الإلكتروني</th>
                                <th width="5%">الهالتف المتحرك</th>
                                <th width="3%">تاريخ الميلاد</th>
                                <th width="2%">المدينة</th>
                                <th width="2%">البلد</th>
                                <th width="2%"></th>
                            </tr>
                        </thead>
                    </table>


                </div>
            </div>
        </div>
    </div>
    <form method="POST" action="{{ route('admin.aggrementstats.bulkexport') }}" class="inline" id="bulkExportForm">
        @csrf
        <input type="hidden" name="ids_export" id="ids_export" value="">
    </form>
    <form method="POST" class="inline" id="bulkaction">
        @csrf
        <input type="hidden" name="ids" id="ids" value="">
    </form>
    {{-- Delete modal --}}
    <div id="deleteContentModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body info-modal">
                    <p class="message-content">هل أنت متأكد من الحذف؟</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">لا</button>
                    <button type="button" class="btn btn-primary confirm-delete">نعم</button>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        // Initialize DataTable
        let deleteId = '';
        var table = $('#datatable-example').DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            autoWidth: false, // ✅ prevents DataTables from auto-shrinking
            responsive: false,
            language: {
                search: "",
                searchPlaceholder: "بحث",
                "emptyTable": "لا يوجد محتوى",
                "zeroRecords": "لم يصل البحث إلى أي نتيجة",
                processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
            },
            ajax: {
                "url": "{{ URL::to('admin/aggrementstats/datatable') }}",
                "type": "POST"
            },
            columns: [{
                    data: 'check',
                    name: 'check'
                },
                {
                    data: 'nodeID',
                    name: 'nodeID'
                },
                {
                    data: 'gender',
                    name: 'gender'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'father_name',
                    name: 'father_name'
                },
                {
                    data: 'grand_father_name',
                    name: 'grand_father_name'
                },
                {
                    data: 'g_grand_father_name',
                    name: 'g_grand_father_name'
                },
                {
                    data: 'next_g_grand_father_one',
                    name: 'next_g_grand_father_one'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'mobile',
                    name: 'mobile'
                },
                {
                    data: 'dob',
                    name: 'dob'
                },
                {
                    data: 'city',
                    name: 'city'
                },
                {
                    data: 'country',
                    name: 'country'
                },
                {
                    data: 'actions',
                    name: 'actions'
                }
            ],
            "iDisplayLength": 50,

        });


        $(document).on('click', '.delete-item', function(e) {
            e.preventDefault();
            deleteUrl = $(this).data('url'); // get delete route
            deleteId = $(this).data('id'); // store the id here
            $('#deleteContentModal').modal('show'); // show confirmation modal
        });
        $(document).on('click', '.confirm-delete', function() {
            if (!deleteUrl) return;
            console.log("$(this).data == ", $(this).data());
            const id = $(this).data('id');
            $.ajax({
                url: deleteUrl,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: deleteId,
                },
                success: function(response) {

                    location.reload();
                },
                error: function(xhr) {
                    alert('حدث خطأ أثناء الحذف');
                }
            });

            // Hide modal after clicking confirm
            $('#deleteContentModal').modal('hide');
        });
        // $(document).on('click', '.delete-item', function(e) {
        //     e.preventDefault();

        //     const id = $(this).data('id');
        //     const deleteUrl = "{{ route('admin.aggrementstats.disagree') }}"; // no id in URL

        //     if (!id) return alert('Invalid record.');

        //     // optional confirmation modal
        //     // if (!confirm('هل أنت متأكد أنك تريد الحذف؟')) return;

        //     $.ajax({
        //         url: deleteUrl,
        //         type: 'POST',
        //         data: {
        //             _token: '{{ csrf_token() }}',
        //             id: id,
        //         },
        //         success: function(response) {
        //             // alert(response.message || 'تم الحذف بنجاح');
        //             // Reload table or page if needed
        //             // location.reload();
        //         },
        //         error: function(xhr) {
        //             alert('حدث خطأ أثناء الحذف');
        //         }
        //     });
        //     $('#deleteContentModal').modal('hide');
        // });

        $(".bulkExport").click(function() {
            console.log("exp btn clicked");

            var ids = $('#datatable-example tbody :checkbox:checked').map(function() {
                return this.value;
            }).get();

            if (ids.length > 0) {
                $("#ids_export").val(ids);
                $('#bulkExportForm').submit(); // ✅ submit the form
            } else {
                $('#bulkExportForm').submit();
            }
        });



        // ✅ Handle select all checkbox in header
        $(document).on("change", ".group-checkable", function() {
            var checked = $(this).is(":checked");

            // Toggle only visible checkboxes (DataTables paginated rows)
            $('#datatable-example tbody input.checkboxes[type="checkbox"]').prop("checked", checked);
        });

        // ✅ Sync header checkbox if a row is unchecked/checked manually
        $(document).on("change", "#datatable-example tbody input.checkboxes[type='checkbox']", function() {
            var total = $('#datatable-example tbody input.checkboxes[type="checkbox"]').length;
            var checked = $('#datatable-example tbody input.checkboxes[type="checkbox"]:checked').length;

            $(".group-checkable").prop("checked", total > 0 && total === checked);
        });
    </script>
@endsection