@extends('admin.layouts.app')
@push('style')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
    select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
</style>

</style>
@endpush

@section('content')
<section class="content home">

    <div class="block-header">
        <div class="row app-title">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2 class="mt-3"><i class="zmdi zmdi-account"></i>
                    Manage Customers
                    <small class="text-muted"></small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right mt-3">
                    <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item active">Manage Customers</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Start Content-->

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        @include('admin.common.flash')

                        <div class="float-right">
                            <a href="{{route('admin-blocked_customers')}}" style="margin-top: -10%;">Blocked Customers</a>
                        </div>

                        <div class="row mt-4">
                            <div class="col-lg-7 col-md-6">
                                <select class="customer_select">
                                    <option value="All_Customers">All Customers</option>
                                    <option value="Personal">Personal</option>
                                    <option value="Business">Business</option>
                                    <option value="Freelancer">Freelancer</option>
                                </select>
                            </div>

                            <div class="col-lg-5 col-md-12">
                                <div class="form-outline">
                                    <i class="zmdi zmdi-search search-icon ml-2"></i>
                                    <input type="text" id="search-input" class="form-control" placeholder="Search by name." />
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="customer-datatable" class="table dt-responsive nowrap table-striped w-100 mb-5 mt-2" style="width:100%;">
                                <thead class="text">
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>DOB</th>
                                        <th>Phone Number</th>
                                        <th>Registered Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody class="text">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection


@push('script')
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>

<script>
    $(document).ready(function() {
        $('.btn-default').hide();
    });

    var table;
    var customerSelect = $('.customer_select');
    initializeDataTable('All_Customers');

    customerSelect.on('change', function() {
        var status = $(this).val();
        table.clear().destroy();
        initializeDataTable(status);
    });

    function initializeDataTable(status) {
        table = $('#customer-datatable').DataTable({
            searching: false,
            processing: true,
            serverSide: true,
            responsive: false,
            pageLength: 15,
            lengthChange: false,
            aaSorting: [
                [0, 'desc']
            ],
            "ajax": {
                type: 'GET',
                url: '{{route("admin-get_customer_listing")}}',
                data: function(d) {
                    d.status = status,
                        d.keyword = $('#search-input').val();
                }
            },
            "columns": [{
                    data: 'id',
                    render: function(data, type, row, meta) {
                        var serialNumber = meta.row + meta.settings._iDisplayStart + 1;
                        return serialNumber;
                    },
                },
                {
                    data: 'name',
                    orderable: false,
                },
                {
                    data: 'email',
                    orderable: false,
                },
                {
                    data: 'dob',
                    orderable: false,
                },
                {
                    data: 'phone_number',
                    orderable: false,
                    render: function(data, type, row) {
                        return data ? data : '-';
                    }
                },
                {
                    data: 'created_at',
                    orderable: false,
                    render: function(data, type, row) {
                        var mydate = moment(data).local().format('lll');
                        return mydate;
                    }
                },
                {
                    data: 'action',
                    orderable: false,
                },
            ],
        });

        $('#search-input').on('keyup', function() {
            table.search($(this).val()).draw();
        });
    }


    // Block Customer
    $(document).on('click', '.btnBlockUser', function() {
        var userId = $(this).data('id');

        Swal.fire({
            title: 'Confirmation',
            text: 'Are you sure you want to block this user?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, block user'
        }).then((result) => {
            if (result.isConfirmed) {

                $.ajax({
                    url: '{{ route("admin-block_customer") }}',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        _token: '{{ csrf_token() }}',
                        user_id: userId
                    },
                    success: function(response) {

                        Swal.fire('Success', response.success, 'success');
                        window.location.href = "{{ route('admin-blocked_customers') }}";
                    },
                    error: function(xhr, status, error) {
                        console.log(xhr.responseText);
                    }
                });
            }
        });
    });

    // Unblock Customer
    $(document).on('click', '.btnUnblockUser', function() {
        var userId = $(this).data('id');

        Swal.fire({
            title: 'Confirmation',
            text: 'Are you sure you want to unblock this user?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, unblock user'
        }).then((result) => {
            if (result.isConfirmed) {

                $.ajax({
                    url: '{{ route("admin-unblock_customer") }}',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        _token: '{{ csrf_token() }}',
                        user_id: userId
                    },
                    success: function(response) {

                        $('.btnUnblockUser[data-id="' + userId + '"]').replaceWith('<a href="javascript:void(0)" class="btn btn-xs btn-danger mx-2 btnBlockUser" data-id="' + userId + '"  title="Block"><i class=""></i> Block</a>');
                        Swal.fire('Success', response.success, 'success');
                    },
                    error: function(xhr, status, error) {

                        console.log(xhr.responseText);
                    }
                });
            }
        });
    });
</script>
@endpush