@extends('admin.layouts.sidebar')

@section('content')
    <div class="row">


        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">


                    <div class="table-responsive">
                        <table class="table table-striped mb-0">

                            <thead>
                                <tr>
                                    <th><input class="" type="checkbox" id="selectallcheckboxs"></th>
                                    <th>شماره</th>
                                    <th>متن</th>
                                    <th>تاریخ</th>
                                    <th>تغییرات</th>
                                </tr>
                            </thead>
                            <tbody>



                                <button type="button" data-toggle="modal" data-target=".bs-example-modal-lg"
                                    id="groupdeletebtn" style="margin-bottom: 20px;display: none;"
                                    class="btn btn-outline-primary waves-effect waves-light">حذف موارد انتخاب
                                    شده</button>
                                <form action="{{ route('admin.notifdeletegroup') }}" method="post">

                                    <div class="modal
                                                fade bs-example-modal-lg"
                                        tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">

                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <p>آیا از حذف اطلاعیه های انتخاب شده اطمینان دارید؟</p>
                                                    <button type="submit" type="button"
                                                        class="btn btn-danger waves-effect waves-light">حذف
                                                        اطلاعیه ها</button>
                                                </div>
                                            </div>
                                            <!-- /.modal-content -->
                                        </div>
                                        <!-- /.modal-dialog -->
                                    </div>
                                    <!-- /.modal -->
                                    @csrf

                                    @foreach ($notifications as $notification)
                                        {{-- {{ dd($users) }} --}}
                                        <tr>
                                            <th>

                                                <input class="defaultCheck" name="deletedata[]" type="checkbox"
                                                    value="{{ $notification->id }}" id="checkboxs">

                                            </th>
                                            <th scope="row">{{ $loop->index + 1 }}</th>
                                            <td>{{ $notification->Desc }}</td>
                                            <td>
                                                {{ $notification->Tarikh }}
                                            </td>

                                            <td>

                                                <a href="" data-toggle="modal"
                                                    data-target=".bs-example-modal-lg{{ $notification->id }}">حذف</a>

                                                <!--  Modal content for the above example -->
                                                <div class="modal
                                                fade bs-example-modal-lg{{ $notification->id }}"
                                                    tabindex="-1" role="dialog"
                                                    aria-labelledby="myLargeModalLabel{{ $notification->id }}"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog modal-lg">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title mt-0"
                                                                    id="myLargeModalLabel{{ $notification->id }}">شما درحال
                                                                    حذف اطلاعیه شماره {{ $loop->index + 1 }} هستید</h5>
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>

                                                            <div class="modal-body">
                                                                <p>آیا از حذف اطلاعیه اطمینان دارید؟</p>
                                                                <a href="{{ route('admin.deletenotif', ['id' => $notification->id]) }}"
                                                                    type="button"
                                                                    class="btn btn-danger waves-effect waves-light">حذف
                                                                    اطلاعیه</a>
                                                            </div>

                                                        </div>
                                                        <!-- /.modal-content -->
                                                    </div>
                                                    <!-- /.modal-dialog -->
                                                </div>
                                                <!-- /.modal -->
                    </div>
                    </td>


                    </tr>
                    @endforeach

                    </form>

                    </tbody>
                    </table>

                </div>

            </div>
        </div>
    </div>
    </div>
    {{-- {{ $filds->appends(request()->input())->render('pagination::bootstrap-4') }} --}}
@endsection


@section('script')
    <script>
        var ch = [];
        const checkboxes = document.querySelectorAll('#checkboxs');

        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function(event) {
                if (event.target.checked) {
                    // Checkbox is checked
                    ch.push(event.target.value);
                    // console.log(ch);
                    // Perform actions for checked checkbox
                } else {
                    // Checkbox is unchecked
                    ch = ch.filter(item => item !== event.target.value)
                    // console.log(ch);
                    // Perform actions for unchecked checkbox
                }
                if (ch.length > 0) {
                    document.getElementById('groupdeletebtn').style.display = 'block';
                    // console.log(ch);
                } else {
                    document.getElementById('groupdeletebtn').style.display = 'none';
                    // console.log(ch);
                }
            });
        });

        document.getElementById('selectallcheckboxs').addEventListener('change', function(event) {
            if (event.target.checked) {
                checkboxes.forEach((checkbox, index) => {
                    ch.push(checkboxes[index].value);
                    checkboxes[index].checked = true;
                    // console.log((index + 1));
                });
                // console.log('hi');
            } else {
                ch = [];
                checkboxes.forEach((checkbox, index) => {
                    checkboxes[index].checked = false;
                })
            }
            if (ch.length > 0) {
                document.getElementById('groupdeletebtn').style.display = 'block';
                // console.log(ch.length);
            } else {
                document.getElementById('groupdeletebtn').style.display = 'none';
                // console.log(ch.length);
            }
        })
    </script>
@endsection
