@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>
                                    <th>تغییرات</th>
                                </tr>
                            </thead>
                            <tbody>
                                <a href="{{route('admin.downloadfactorfild')}}" style="float: left;display: inline;margin-bottom: 20px" type="button"
                                    class="btn btn-outline-primary waves-effect waves-light">دانلود نمونه اکسل فایل فیش حقوقی</a>


                                <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.factordeletegroupfilds') }}" 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 ($filds as $fild)
                                        {{-- {{ dd($users) }} --}}
                                        <tr>
                                            <th>
                                                @if ($fild->Status == 3)
                                                    <i class="bx bx-checkbox-square"></i>
                                                @else
                                                    <input class="defaultCheck" name="deletedata[]" type="checkbox"
                                                        value="{{ $fild->id }}" id="checkboxs">
                                                @endif
                                            </th>
                                            <th scope="row">{{ $loop->index + 1 }}</th>
                                            <td>{{ $fild->Name }}</td>
                                            <td>
                                                @if ($fild->Type == 1)
                                                    متن
                                                @elseif($fild->Type == 2)
                                                    عدد
                                                @endif
                                            </td>
                                            <td>
                                                @if ($fild->Status == 1)
                                                    مزایا
                                                @elseif($fild->Status == 2)
                                                    کسورات
                                                @elseif($fild->Status == 3)
                                                    متفرقه
                                                @endif
                                            </td>
                                            <td>
                                                @if ($fild->Status == 3)
                                                    <i title="این فیلد اجباری است" style="color: red"
                                                        class="bx bx-error-circle"></i>
                                                @else
                                                    <a href="" data-toggle="modal"
                                                        data-target=".bs-example-modal-lg{{ $fild->id }}">حذف</a>

                                                    <!--  Modal content for the above example -->
                                                    <div class="modal
                                                fade bs-example-modal-lg{{ $fild->id }}"
                                                        tabindex="-1" role="dialog"
                                                        aria-labelledby="myLargeModalLabel{{ $fild->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{{ $fild->id }}">شما درحال
                                                                        حذف فیلد {{ $fild->Name }} هستید</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.factordeletefild', ['id' => $fild->id]) }}"
                                                                        type="button"
                                                                        class="btn btn-danger waves-effect waves-light">حذف
                                                                        فیلد</a>
                                                                </div>

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

                    </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


@section('script')
    <script>
        $("#table").tableExport();
    </script>
@endsection
