@extends('layout.mainlayout_admin')
@section('content')
<!-- Page Wrapper -->
<div class="page-wrapper">
    <div class="content container-fluid">

        <!-- Page Header -->

        <!-- /Page Header -->

        <div class="row">
            <div class="col-lg-12">

                <!-- Settings Menu -->
                <div class="settings-menu-links">
                    <ul class="nav nav-tabs menu-tabs">
                        <li @if ($j_2==false) class="nav-item active" @else class="nav-item" @endif>
                            <a @if ($j_2==false) class="nav-link active" @else class="nav-link" @endif href="/public/admin/call">J-1</a>
                        </li>
                        <li @if ($j_2==true) class="nav-item active" @else class="nav-item" @endif>
                            <a @if ($j_2==true) class="nav-link active" @else class="nav-link" @endif href="/public/admin/call/j-2">J-2</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" href="/public/admin/giftsdistribution/">Gestion des cadeaux</a>
                        </li>
                    </ul>
                </div>
                <!-- Settings Menu -->

                <!-- /Search Filter -->

                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-center table-hover mb-0 datatable">
                                        <thead>
                                            <tr>
                                                <th>numero</th>
                                                <th>Appel Client</th>
                                                <th>Joignabilite</th>
                                                <th>repondre</th>
                                                <th>informer de jeux</th>
                                                <th class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($calls as $call)
                                            <tr>
                                                <td>
                                                    <h2 class="table-avatar">
                                                        <strong>
                                                            {{ $call->number }}
                                                        </strong>
                                                    </h2>
                                                </td>
                                                <td>
                                                    <button class="{{ $call->call ? 'btn btn-approve ' : 'btn btn-disable' }}">


                                                        <strong>
                                                            @if ($call->call)
                                                            Oui
                                                            @else
                                                            Non
                                                            @endif
                                                        </strong>
                                                    </button>
                                                </td>
                                                <td>
                                                    <button class="{{ $call->available ? 'btn btn-approve ' : 'btn btn-disable' }}">


                                                        <strong>
                                                            @if ($call->available)
                                                            Oui
                                                            @else
                                                            Non
                                                            @endif
                                                        </strong>
                                                    </button>
                                                </td>
                                                <td>
                                                    <button class="{{ $call->respond ? 'btn btn-approve ' : 'btn btn-disable' }}">


                                                        <strong>
                                                            @if ($call->respond)
                                                            Oui
                                                            @else
                                                            Non
                                                            @endif
                                                        </strong>
                                                    </button>
                                                </td>

                                                <td>
                                                    <button class="{{ $call->informed ? 'btn btn-approve ' : 'btn btn-disable' }}">


                                                        <strong>
                                                            @if ($call->informed)
                                                            Oui
                                                            @else
                                                            Non
                                                            @endif
                                                        </strong>
                                                    </button>
                                                </td>

                                                <td class="text-end">
                                                    <a href="#" id="{{ $call->id }}" onclick="reply_click(this.id)" class="btn btn-sm btn-secondary me-2"> <i class="far fa-edit"></i></a>


                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- /Page Wrapper -->
    </div>

    <div class="collapse">
        {!! Form::open(['id' => 'delete-user', 'url' => 'admin/user/']) !!}
        {{ Form::hidden('_method', 'DELETE') }}
        <button onclick="delete()" class="btn btn-disable btn-ok">Delete</button>
        {!! Form::close() !!}
    </div>


    <!-- /Main Wrapper -->




    <!-- Add Modal -->
    <div class="modal fade custom-modal" id="edit-category">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header flex-wrap">
                    <div class="text-center w-100 mb-3">
                        <img src="../assets_admin/img/logo-small.png" alt="">
                    </div>
                    <h4 class="modal-title">Modifier</h4>
                    <button type="button" class="close" data-bs-dismiss="modal"><span>&times;</span></button>
                </div>

                <div class="modal-body" id="edit_call_body">

                </div>
            </div>
        </div>
    </div>
    <!-- Add Modal -->
    @endsection





    @section('scripts')
    @parent









    <script type="text/javascript">
        // $("input[type='checkbox']").click(function(e) {
        //     $(e.target).prevAll().prop("checked", true);
        // });



        $(document).ready(function() {


            // $("body").on('click', "input[type='checkbox']", function(e) {
            //     console.log("ggggggggggggggggggggggggggg", $(e.target).prevAll());

            // $(e.target).prevAll("input[type='checkbox']").each(function(index) {
            //     //index=0 will be the first box after that one
            //     //index=1 will be the 2nd box
            //     //index=2 will be the 3nd box

            //     alert(index);
            // });

            // $(e.target).prevAll("input[type='checkbox']").each(function(i, item) {
            //     if (ids.indexOf($(item).data('id')) > -1) {
            //         $(item).prop("checked", "checked");
            //     }
            // });

            // if ($(this).is(':checked')) {
            //    let checkboxes= $(this).prevAll("input[type='checkbox']");
            //    checkboxes.prop("checked",true);
            // :status_1
            // $(this).prevAll().each(function(index) {
            //     console.log(this);
            // });
            // prop("checked", true);
            // $('#status_1').attr('checked', true);
            // } else {
            // console.log("ggggggggggggggggggggggggggg", e.target);

            // $(this).nextAll().prop("checked", false);
            // $('#status_1').attr('checked', false);
            // $('.spin-input').attr('disabled', true);
            // }
            // });


        });






        function OptionsSelected(me) {
            if ($(me).is(":checked")) {






                $('.check').each(function(i, obj) {
                    if (i + 1 < Number(me.id.charAt(me.id.length - 1))) {
                        $(obj).prop('checked', true);
                    }
                    //test
                });


            } else {

                $('.check').each(function(i, obj) {
                    if (i + 1 > Number(me.id.charAt(me.id.length - 1))) {
                        $(obj).prop('checked', false);
                    }
                    //test
                });


            }
            // alert(me.id);
            // console.log($(me).prevAll('check'));

            //             if (me.checked) {
            //                 for (let index = 0; index < Number(me.id.charAt(me.id.length - 1)); index++) {
            // $('.check').ea

            //                 }
            // }

        }


        function reply_click(clicked_id) {
            console.log('/admin/call/' + clicked_id);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'GET',
                url: '/public/admin/call/' + clicked_id + '/edit',
                // dataType: 'json',

                success: function(data) {
                    // console.log(data)
                },
            }).then(data => {
                // console.log("***********************",data)
                $('#edit_call_body').html(data);
                $('#edit-category').modal("show");




            }).fail(error => {
                // var xhr = $.ajax();
                // console.log(xhr);
                console.error("errooooor", error);
            });

        }
    </script>
    @endsection