@extends('admin.layouts.sidebar')

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


        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.userslists') }}" method="get">


                        <div id="accordion">
                            <div class="card mb-1 shadow-none">
                                <div style="background-color: rgb(58, 92, 231)" class="card-header" id="headingOne">
                                    <a href="#collapseOne" class="text-dark collapsed" data-toggle="collapse"
                                        aria-expanded="false" aria-controls="collapseOne">
                                        <h6 style="color: white" class="m-0">
                                            جست و جو
                                        </h6>
                                    </a>
                                </div>

                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"
                                    style="">
                                    <div class="card-body line-height-p">
                                        <div class="form-group row">
                                            <label class="col-md-2 col-form-label">بر اساس</label>
                                            <div class="col-md-10">
                                                <select name="type" class="form-control">
                                                    <option @if (isset($type) && $type == 1) selected @endif
                                                        value="1">نام</option>
                                                    <option @if (isset($type) && $type == 2) selected @endif
                                                        value="2">شماره تلفن</option>
                                                    <option @if (isset($type) && $type == 3) selected @endif
                                                        value="3">کدپرسنلی</option>
                                                </select>
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label for="example-text-input" class="col-md-2 col-form-label">متن</label>
                                            <div class="col-md-10">
                                                <input placeholder="متن جست و جو بر اساس گزینه انتخاب شده بالا"
                                                    name="inp" class="form-control" type="text"
                                                    id="example-text-input">
                                            </div>
                                        </div>



                                        <button type="submit" class="col-12 btn btn-primary waves-effect waves-light">جست و
                                            جو</button>

                                    </div>
                                </div>
                            </div>


                        </div>

                    </form>




                    <br><br>
                    <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>
                                <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.deletegroupusers') }}" 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 ($users as $user)
                                        {{-- {{ dd($users) }} --}}
                                        <tr>
                                            <th><input class="defaultCheck" name="deletedata[]" type="checkbox"
                                                    value="{{ $user->id }}" id="checkboxs">
                                            </th>
                                            <th scope="row">{{ $loop->index + 1 }}</th>
                                            <td><a target="_blank"
                                                    href="{{ route('admin.factorlistsbyuser', ['userid' => $user->id]) }}">{{ $user->name }}</a>
                                            </td>
                                            <td>{{ $user->phone }}</td>
                                            <td>{{ $user->usercode }}</td>
                                            <td>
                                                <a href="" data-toggle="modal"
                                                    data-target=".bs-example-modal-lg{{ $user->id }}">حذف</a>

                                                <!--  Modal content for the above example -->
                                                <div class="modal
                                                fade bs-example-modal-lg{{ $user->id }}"
                                                    tabindex="-1" role="dialog"
                                                    aria-labelledby="myLargeModalLabel{{ $user->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{{ $user->id }}">شما درحال
                                                                    حذف کاربر {{ $user->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.deleteuser', ['id' => $user->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>
    {{ $users->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.length);
                } else {
                    document.getElementById('groupdeletebtn').style.display = 'none';
                    console.log(ch.length);
                }
            });
        });

        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
