@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/vendors/select2.css')}}">
@endsection

@section('breadcrumb-title')
<h3>Clients</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Clients</li>
@endsection

@section('content')
<style>
    .select2-selection--single {
        border-color: #8e8e8e !important;
    }

    .select2-container .select2-selection--single {
        height: 37px !important;
        padding: 4px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 13px !important;
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-xxl-12 col-xl-12 col-md-12 col-sm-12 box-col-12">
            <div class="card height-equal">
                <div class="card-header card-no-border">
                    <div class="header-top">
                        <h5>All Clients</h5>
                    </div>
                </div>
                <div class="card-body pt-3 pb-5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <select class="mb-3 js-example-basic-single" onchange="filter_rows(this)">
                                    <option value="">All</option>
                                    <option value="Verified">Verified Users</option>
                                    <option value="Unverified">Unverified Users</option>
                                </select>
                            </div>
                            <div class="table-responsive">
                                <table class="display" id="basic-1">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone Number</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (!empty($data))
                                        @php
                                        $count = 0;
                                        $sorteddata = $data->sortByDesc('created_at');
                                        @endphp
                                        @foreach ($sorteddata as $row)
                                        <tr
                                            @if($row->verified == 2)
                                            class="Verified"
                                            @else
                                            class="Unverified"
                                            @endif
                                            >
                                            <td>{{ ++$count }}</td>
                                            <td> </td>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                @if($row->verified == 2)
                                                <span class="badge badge-pill badge-success badge-sm">Verified</span>
                                                @else
                                                <span class="badge badge-pill badge-danger badge-sm">Unverified</span>
                                                @endif
                                            </td>
                                            <td style="display: flex;">
                                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editmodal_">
                                                    <span class="fa fa-edit"></span>
                                                </button>
                                                <button class="btn btn-danger m-l-10" onclick="delete_record()">
                                                    <span class="fa fa-trash"></span>
                                                </button>
                                                @if (!empty($row->is_block))
                                                <button class="btn btn-danger m-l-10" onclick="change_icon(this)" data-id="">
                                                    <span class="fa-solid fa-lock"></span>
                                                </button>
                                                @else
                                                <button class="btn btn-success m-l-10" onclick="change_icon(this)" data-id="">
                                                    <span class="fa-solid fa-unlock"></span>
                                                </button>
                                                @endif
                                            </td>
                                            <div class="modal fade" id="editmodal_" tabindex="-1" role="dialog" aria-labelledby="editmodalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="editmodalLabel">Update</h5>
                                                            <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
                                                        </div>
                                                        <form action="{{ route('update.client') }}" method="post">
                                                            <div class="modal-body">
                                                                @csrf
                                                                <div class="row">
                                                                    <div class="col-md-6 mb-2">
                                                                        <label for="">First Name</label>
                                                                        <input type="hidden" name="id" value="">
                                                                        <input type="text" name="fname" class="form-control" placeholder="First Name" value="">
                                                                    </div>
                                                                    <div class="col-md-6 mb-2">
                                                                        <label for="">Last Name</label>
                                                                        <input type="text" name="lname" class="form-control" placeholder="Last Name" value="">
                                                                    </div>
                                                                    <div class="col-md-6 mb-2">
                                                                        <label for="">Email</label>
                                                                        <input type="email" name="email" class="form-control " placeholder="email@gmail.com" value="">
                                                                    </div>
                                                                    <div class="col-md-6 mb-2">
                                                                        <label for="">Phone Number</label>
                                                                        <input type="text" name="phone_number" class="form-control " value="">
                                                                    </div>
                                                                    <div class="col-md-12 mb-2">
                                                                        <label for="">Address</label>
                                                                        <input type="text" class="form-control" name="address" placeholder="Address" value="">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">Cancel</button>
                                                                <button class="btn btn-primary" type="submit">Update</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </tr>
                                        @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="editmodalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editmodalLabel">Delete</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <p class="txt-danger">Are you sure you want to delete this?</p>
                    <input type="hidden" class="hid_id">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">No</button>
                <button class="btn btn-primary" type="button" onclick="delete_record('trash')">Yes</button>
            </div>
        </div>
    </div>
</div>
<script>
    function change_icon(obj) {
        var id = $(obj).data('id');
        if ($(obj).find('span').hasClass('fa-unlock')) {
            $.ajax({
                url: "{{ route('update.admin') }}",
                type: 'POST',
                data: {
                    id: id,
                    is_block: 1,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $(obj).find('span').removeClass('fa-unlock')
                    $(obj).find('span').addClass('fa-lock')
                    $(obj).removeClass('btn-success')
                    $(obj).addClass('btn-danger');
                }
            });
        } else {
            $.ajax({
                url: "{{ route('update.admin') }}",
                type: 'POST',
                data: {
                    id: id,
                    is_block: 2,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $(obj).find('span').removeClass('fa-lock')
                    $(obj).find('span').addClass('fa-unlock')
                    $(obj).removeClass('btn-danger')
                    $(obj).addClass('btn-success');
                }
            });
        }
    }

    function delete_record(obj) {
        if (obj == 'trash') {
            $('#delete_modal').modal('hide');
            var id = $('#delete_modal').find('.hid_id').val();
            $('#delete_modal').find('.hid_id').val('');
            $.ajax({
                url: "{{ route('delete.client') }}",
                type: 'POST',
                data: {
                    id: id,
                    trash: 1,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('button[onclick="delete_record(' + id + ')"]').closest('tr').remove();
                    location.reload();

                }
            });
        } else {
            $('#delete_modal').modal('show');
            $('#delete_modal').find('.hid_id').val(obj);
        }
    }
</script>
@endsection

@section('script')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">
<script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}"></script>
<script>

    function filter_rows(obj) {
        var value = $(obj).val();
        // if (value) {
        //     $('#basic-1').DataTable().search(value).draw();
        // } else {
        //     $('#basic-1').DataTable().search('').draw();
        // }
        $.fn.dataTable.ext.search.pop();

        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
                var row = $('#basic-1').DataTable().row(dataIndex).node();

                if (!value) {
                    return true;
                }
                console.log(value)
                console.log(row)
                if ($(row).hasClass(value)) {
                    return true;
                }

                return false;
            }
        );

        $('#basic-1').DataTable().draw();
    }
</script>
@endsection