@extends('layout')
@section('content')
    <!-- begin::main content -->
    <style>
        .input_upload{
            width:100px;
            height:35px;
            position:absolute;
            bottom:-34px;
            right:350px;
        }
        .import-content p{
            padding:0;
            margin:0;
            margin-bottom:8px;
            font-size:13px;
        }

        .filter-form-box{
            background-color:#FBFAFA;
            padding:10px 24px;
            position:absolute;
            width:450px;
            border:1px solid #ddd;
            border-radius:5px;
            top:71px;
            z-index:20;
        }
        .filter-form-box input{
            height:40px !important;
        }
        .diamond {
            width: 20px;
            height: 20px;
            background-color: #FBFAFA;
            transform: rotate(45deg);
            position: relative;
            top:-21px;
            left:0px;
            border-top:1px solid #ddd;
            border-left:1px solid #ddd;
        }
        .seach-input:focus{
            outline:none !important;
            border-top:1px solid #ddd !important;
            border-bottom:1px solid #ddd !important;

        }
        .seach-input{
            height:40px !important;
            border-top:1px solid #ddd !important;
            border-bottom:1px solid #ddd !important;
            border-left:1px solid #ddd !important;
        }
    </style>
    <main class="main-content">
        <div class="container">
            <div class="toast d-none float-right" >

                <div class="toast-body bg-success text-white">
                    <i class="fa fa-check fa-lg"></i>&nbsp Status Update Successfully
                </div>
            </div>
            <!-- begin::page header -->
            <div class="page-header">
                <h3>Contacts</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{ __('message.dashboard') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('message.list') }}</li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->
            <div class="card">

                <div class="card-header">

                        <div class="row">
                            <div class="col-md-4 py-3">
                                <form action="{{asset('contacts')}}" method="get">

                                    <div class="company-field-box">
                                        <div>
                                            <div class="input-group">
                                            <div class="input-group-prepend">
                                                <button type="button" class="btn border input-group-text filter-company-btn">
                                                    <i class="ti-filter fa-lg px-2"></i>
                                                </button>
                                            </div>

                                                <input type="search" value="{{isset($_GET['search']) ? $_GET['search'] : null}}" name="search" class="form-control border-right-0 seach-input">
                                                <button class="btn border border-left-0" type="submit" style="margin-left:-5px;">
                                                    <i class="ti-search fa-lg"></i>
                                                </button>

                                            </div>


                                            <div class="filter-form-box d-none">
                                                <div class="diamond"></div>
                                                <form method="get" action="{{asset('contacts')}}">
                                                    <div class="form-group">
                                                        <label>{{__('message.name')}} </label>
                                                        <input value="{{isset($_GET['name']) ? $_GET['name'] : null}}" type="text" name="name" class="form-control" id="name">
                                                    </div>

                                                    <div class="form-group">
                                                        <label> {{__('message.email')}}</label>
                                                        <input type="text" name="email" value="{{isset($_GET['email']) ? $_GET['email'] : null}}" class="form-control" id="email">
                                                    </div>


                                                        <div class="form-group">
                                                            <label>{{__('message.phone')}}</label>
                                                            <input type="text" value="{{isset($_GET['mobile']) ? $_GET['mobile'] : null}}" name="mobile" class="form-control" id="mobile">
                                                        </div>



                                                    <div class="row">
                                                        <div class="form-group col-12">
                                                           <button type="submit" class="btn btn-success-lux mr-5 px-4 apply-button">{{__('message.apply')}}</button>

                                                            <a href="{{asset('contacts')}}" class="btn btn-primary-lux px-5 clear-button text-white">{{__('message.clear')}}</a>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                </form>

                            </div>

                            <div class="col-md-8 d-flex justify-content-end py-3">
                                <div>
                                <button data-original-title="Delete Contacts" class="btn btn-outline-secondary text-uppercase mr-2 multiple-delete-btn">
                                            <i class="ti-trash fa-lg" ></i>
                                </button> </div>
                                <div>
                                    <a data-toggle="tooltip" data-original-title="Add New Contacts"
                                            href="{{ asset('add-contact') }}"
                                            class="btn btn-outline-secondary text-uppercase mr-2">
                                            <i class="ti-plus"></i>
                                    </a>
                                </div>



                                {{-- <button type="button" class="btn btn-danger d-none" id="delete-multiple">
                                    <i class="fa fa-trash fa-lg"></i>
                                </button> --}}
                            </div>


                        </div>



                </div>

                <div class="card-body">

                    @if (isset($users))

                        <div class="table-responsive">
                            <table class="table table-bordered" >
                                <thead style="background-color:#E9EEF1">
                                    <tr>
                                         <th>
                                            <input type="checkbox"  id="checkAll"  />
                                        </th> 
                                        <th>{{__('message.sno')}}</th>

                                        <th>{{__('message.name')}}</th>

                                        <th>{{__('message.email')}}</th>
                                        <th>{{__('message.phone')}}</th>

                                        <th>{{ __('message.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (!empty($users))
                                        @foreach ($users as $key=>$value)
                                        <tr>

                                        <td>

                                            <input type="checkbox" name="checkbox[]" class="userids" value="{{$value->id}}" />
                                        </td>
                                           <td>{{++$key}}</td>

                                           <td>{{$value->name}}</td>
                                           <td>{{$value->email}}</td>
                                           <td>{{$value->phone}}</td>

                                           <td>
                                                <div class="btn-group">

                                                    @if (Auth::user()->can('edit-user') || Auth::user()->type=="admin" || Auth::user()->type=="manager")
                                                        {{-- <a class="btn btn-sm btn-info text-white" data-toggle="tooltip"
                                                            data-original-title="User Info"
                                                            href="{{ asset('view-users/'.$value->id) }}"><i
                                                                class="fa fa-eye fa-lg"></i>
                                                        </a> --}}


                                                        <a class="btn btn-sm btn-success text-white"
                                                            data-toggle="tooltip" data-original-title="Edit Contact"
                                                            href="{{ asset('edit-contact/'.$value->id) }}"><i
                                                                class="fa fa-edit fa-lg"></i>
                                                        </a>
                                                        <buttton class="btn btn-sm btn-danger text-white emp-delete-btn"
                                                            data-toggle="tooltip" data-original-title="Delete Contact"
                                                            emp_id="{{$value->id}}">
                                                            <i class="fa fa-trash fa-lg"></i>
                                                        </button>

                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    @else
                                        <h1>No Record Found!!</h1>
                                    @endif
                                </tbody>
                            </table>
                        </div>



                    @endif
                </div>
            </div>
        </div>


    </main>
    <!-- end::main content -->
@endsection
@push('footer-script')
    <!-- begin::dataTable -->

    <!-- end::dataTable -->
    <script>
        $(document).ready(function() {
            $("#checkAll").click(function() {
                $('.userids:checkbox').not(this).prop('checked', this.checked);
                var length = $('.userids[type="checkbox"]:checked').length;
               

            });

            //employee delte button code
            $(".emp-delete-btn").click(function(){
                var emp_id = $(this).attr("emp_id");
                // alert(emp_id);

                swal({
                    title: 'Are you sure?',
                    text: 'Once deleted, you will not be recover!',
                    icon: 'warning',
                    dangerMode: true,
                    buttons: ["Cancel", "Yes!"],
                }).then(function(value) {
                    if (value) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        $.ajax({
                            type: "get",
                            data: {

                            },
                            url: "{{asset('delete-contact')}}"+"/"+emp_id,
                            dataType: "html",
                            success: function(result) {

                                swal("success!", "Successfully deleted!", "success");
                                window.location.reload();
                            },
                            error:function(error)
                            {

                                swal("Failed !", "Failed !", "error");
                                window.location.reload();
                            }
                        });

                    }
                });
            });



           
            // Delete Multiple
            $(".multiple-delete-btn").click(function() {
                var URL = "{{ asset('contact-delete-multiple') }}";
                var user_ids = [];
                $('.userids:checkbox:checked').each(function() {
                    user_ids.push($(this).val());
                });



                swal({
                    title: 'Are you sure?',
                    text: 'Once deleted, you will not be recover!',
                    icon: 'warning',
                    dangerMode: true,
                    buttons: ["Cancel", "Yes!"],
                }).then(function(value) {
                    if (value) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        $.ajax({
                            type: "post",
                            data: {
                                "ids": user_ids
                            },
                            url: URL,
                            dataType: "html",
                            success: function(result) {
                                console.log(result);
                                swal("success!", "Successfully deleted!", "success");
                                window.location.reload();
                            },
                            error:function(xhr,status,error)
                            {
                                swal("failed!", "Failed !", "error");
                                window.location.reload();
                            }
                        });

                    }
                });

            });


        });

        $(".apply-button").click(function(){
            $(".filter-form-box").addClass("d-none");
        });


        //filter company code
        $(".filter-company-btn").click(function(){

            if($(".filter-form-box").hasClass("d-none"))
            {
                $(".filter-form-box").removeClass("d-none");
            }
            else
            {
                $(".filter-form-box").addClass("d-none");
            }
        });



         //change status code
       $(".status-change").on("change",function(){

            var check_val = 0;
            if( $(this).is(":checked"))
            {
                check_val = 1;
            }

            var id = $(this).val();

            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{asset('change-user-status')}}",
                data:{
                    user_id:id,
                    status:check_val
                },
                dataType: "html",
                success: function(result)
                {   console.log(result);
                    var allData = JSON.parse(result);

                    if(allData.message=="success")
                    {
                        $('.toast').removeClass('d-none');
                        $('.toast').toast('show');
                    }
                    else
                    {
                        var div = `
                        <div class="toast-body bg-danger text-white">
                                <i class="fa fa-times-circle-o fa-lg"></i>&nbsp Status Update Failed

                        </div>
                    `;

                    $('.toast').removeClass('d-none');
                        $('.toast').toast('show');
                        $('.toast').html(div);
                    }
                },
                error:function(xhr,status,error)
                {
                    console.log(error);
                    var div = `
                        <div class="toast-body bg-danger text-white">
                                <i class="fa fa-times-circle-o fa-lg"></i>&nbsp Status Update Failed

                        </div>
                    `;

                    $('.toast').removeClass('d-none');
                        $('.toast').toast('show');
                        $('.toast').html(div);

                }
            });

        });
    </script>
@endpush