@extends('layouts.admin.main')

@section('title', 'users')

@section('header')
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-lg-6 col-7">
                <h6 class="h2 text-white d-inline-block mb-0"></h6>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid" style="padding-left: 0px !important; padding-right: 0px !important;">
        <div class="row">
        <!-- Light table -->
            <div class="col">
                <div class="card">
                    <!-- Card header -->
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="mb-0">Application Users</h3>
                            </div>

                        </div>
                    </div>

                    <form action="{{ url()->full() }}" method="get" id="get_data">
                        @csrf
                        <input type="hidden" name="page" id="page" class="form-control">
                    </form>

                    <div class="card-body pt-0">
                        <div class="loading-overlay hide-loading-overlay">
                            <div class="loading-content">
                                <img src="{{ asset('/img/loading.gif') }}" alt="Loading..."/>
                            </div>
                        </div>
                        @include('layouts.messages')

                        <div class="ajax-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @parent
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">

    <script>
        function get_data_ajax() {
            var form = $('form#get_data');
            $('.loading-overlay').removeClass('hide-loading-overlay');
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: $('form#get_data').serialize(),
                success: function (data) {
                    $('.ajax-content').html(data);
                    $('.loading-overlay').addClass('hide-loading-overlay');
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert('Error in fetching data. Please try again.');
                    $('.loading-overlay').addClass('hide-loading-overlay');
                }
            });
        }

        $(document).on('click', '.pagination>li>a', function (event) {
            event.preventDefault();
            $('#page').val($(this).text());
            get_data_ajax();
        });

        $(document).on('submit', 'form#get_data', function (event) {
            event.preventDefault();
            get_data_ajax();
        });

        $(document).ready(function() {
            $('form#get_data').submit();
        });
    </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript">
    function changeStatus(id, newStatus) {
        var activeColor = (newStatus == 1) ? '#A3CB38' : 'red';
        var inactiveColor = (newStatus == 2) ? 'red' : '#A3CB38';

        $.ajax({
            url: "{{ route('admin.user.deactive', ['id' => ':id']) }}".replace(':id', id),
            type: "post",
            headers: {
                'X-CSRF-Token': $('meta[name=_token]').attr('content')
            },
            data: {
                '_token': "{{ csrf_token() }}",
                'id': id,
                'new_status': newStatus
            },
            /* success: function(data) {
                if (data.status == 'success') {
                    var statusIndicator = $('[data-id="' + id + '"]');
                    statusIndicator.css('color', (newStatus == 1) ? activeColor : inactiveColor);
                    var slider = statusIndicator.siblings('.switch').find('.slider.round');
                    slider.css('background-color', (newStatus == 1) ? activeColor : inactiveColor);
                    slider.parent().find('input[type="checkbox"]').prop('checked', (newStatus == 1));
                    location.reload();
                }
            }, */
            success: function(data) {
            if (data.status === 'success') {
                // Find the status indicator and slider for the given ID
                var statusIndicator = $('[data-id="' + id + '"]');
                var slider = statusIndicator.siblings('.switch').find('.slider.round');
                var checkbox = slider.siblings('input[type="checkbox"]');

                // Update UI based on the new status
                statusIndicator.css('color', (newStatus == 1) ? activeColor : inactiveColor);
                slider.css('background-color', (newStatus == 1) ? activeColor : inactiveColor);
                checkbox.prop('checked', (newStatus == 1));

                // Update the slider's onclick to toggle status dynamically
                slider.attr('onclick', `changeStatus(${id}, ${newStatus === 1 ? 2 : 1})`);
            } else {
                alert('Failed to update the status. Please try again.');
            }
        },
            error: function(xhr, status, error) {
                console.error(xhr, status, error);
            }
        });
    }
</script>

<script>
$(document).on('submit', 'form.delete-action', function (event) {
if (confirm('Are you sure you want to delete this user?')) {
    $.ajax({
        dataType: 'json',
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data) {
            show_toastrs(data);
            $('#page').val('1');
            get_data_ajax();
        },
        error: function(err) {
            console.log(err);
        }
    });
    }
    return false;
});
</script>

@endsection

<style>

div#planlist_info {
    padding-bottom: 14px;
}

    h6.h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 18px !important;
    }

    .card-header.border-0 {
        padding: 1.3rem 1.5rem !important;
    }

    .navbar-top.border-bottom.navbar-dark {
        background-color: white!important;
        border-style:doted !important;
    }

    .pb-6, .py-6 {
        padding: 0 27px;
    }

    label {
        color: gray;
        font-family: sans-serif;
        font-weight: bold;
    }

    label input[type="search"] {
        border: solid #A3CB38 1px;
        border-radius: 5px;
    }

    .navbarflex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .navbar-expand .navbar-nav{
        margin-left:0 !important;
    }

    div#userlist_info{
        color: #4F8A10;
        padding: 5px 0;
    }

	th {
        color: black !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    form#get_data{
        border: solid white;
    }
    table#userlist{
        margin-bottom:0px !important;
    }
    .pagination-block.text-center.mt-2 {
    margin-top: 0px !important;
}
.pb-6  {
    padding: 40px 0px !important;
   }
   .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #A3CB38 !important;
    border-color: #A3CB38 !important;
}

.new-alert.alert.alert-success.alert-dismissible.mb-2 {
    width: 370px !important;
    margin: auto !important ;
}
        /*tablate*/
	@media (min-width:768px) and (max-width:1023px) {
        .main-content .navbar-top .collapse {
             justify-content: space-between;;
        }

        .navbar-expand .navbar-nav{
            margin-left:0 !important;
        }

        .table td{
            font-size:16px !important;
        }

        th {
            color: black !important;
            font-size: 16px !important;
            font-weight: 800 !important;
        }

        H3{
            font-size: 20px !important;
        }

        .btn{
            font-size:16px !important;

        }

        .actions .delete-action .btn {
            font-size: 14px !important;
        }

        table.dataTable.no-footer {
            padding: 15px 0 0 0;
        }

		div#planlist_filter {
    		padding: 15px 0px;
		}
    }
    /*mobile*/
	@media (min-width:320px) and (max-width:767px) {
        .alert-dismissible .close {
    top: 50% !important;
    right: 0.5rem !important;
}
    .new-alert.alert.alert-success.alert-dismissible.mb-2 {
    width: 300px !important;
    margin: auto !important;
}

.new-alert {
    padding: 10px !important;
    margin-bottom: 10px;
}
        .table td{
            font-size:14px !important;
        }
        label {
            padding: 0 17px;
        }

        th {
            color: black !important;
            font-size: 14px !important;
            font-weight: 800 !important;
        }

        H3{
            font-size: 17px !important;
        }

        .btn{
            font-size:14px !important;
        }

        .actions .delete-action .btn {
            font-size: 12px !important;
        }

        table.dataTable.no-footer {
            padding: 15px 0 0 0;
        }

        div#planlist_filter {
            padding: 15px 0px;
        }
        div#userlist_info {
    color: #A3CB38;
    padding: 10px 0;
}
.pagination-block.text-center.mt-2 {
    margin-top: 10px !important;
}
    }
    label {
    display: flex !important;
    margin-bottom: 0.5rem;
}


table#userlist {
        width: 100% !important;
}
div#userlist_length, div#userlist_filter, div#userlist_length label, div#userlist_filter label {
    padding: 0px !important;
    display: flex;
    justify-content: center;
}


</style>