@extends('layouts.master')
@section('title', 'Roles')

@php
$roleFilters = session('roleFilters');
@endphp

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    @section('breadcrumbs')
    <nav aria-label="breadcrumb" class="d-flex custom-breadcrumbs flex-sm-nowrap flex-wrap ">
        <ol class="breadcrumb mb-0 me-1">
            <li class="breadcrumb-item">
                <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">
                Roles
            </li>

        </ol>
    </nav>
    @endsection

    <!-- <h4 class="fw-semibold mt-3">Roles List</h4> -->

    <!-- Role cards -->
    <div class="row g-4 mb-4 " id="rolelist">
        @foreach ($roles as $role)
        <div class="col-xl-4 col-lg-6 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <h6 class="fw-normal mb-2">Total {{ $role->users_count }} users</h6>
                    </div>
                    <div class="d-flex justify-content-between align-items-end mt-1">
                        <div class="role-heading">
                            <h4 class="mb-1 text-break">{{ $role->name }}</h4>
                            @if (auth()->user()->can('update-role'))
                            <a href='javascript:void(0)' onclick='editValueSet({{ $role->id }})' class="role-edit-modal me-2"><span>Update Role</span></a>
                            @endif
                            <a href="{{ route('admin.roles.show', $role->id) }}" class="role-edit-modal">Show
                                Permission</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    <!--/ Role cards -->


    @include('admin.errors.error')

    <!-- DataTable with Buttons -->
    <div class="card">

        <div class="card-header border-bottom">

            <div class="row">
                <form method="POST" action="" accept-charset="UTF-8" class="form-horizontal col-lg-9" id="filterData" name="filterData" novalidate="novalidate">
                    <div class="d-flex  align-items-center row pb-2 gy-2 ">
                        <div class="col-md-3 col-lg-3 col-sm-4 col-6">
                            <select class="form-select" id="status" name="status">
                                <option value="">Select Status</option>
                                @foreach ($statuses as $key => $status)
                                <option value="{{ $key }}" {{(isset($roleFilters) &&  $roleFilters['status'] == $key) ? 'selected' : ''}}>{{ $status }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-12 text-md-start text-center">
                            <button id="filteroptionreset" type="button" class="btn btn-primary resetbtn">Reset</button>
                        </div>

                    </div>
                </form>
                <div class="col-lg-3 text-md-end text-center">
                    @if (auth()->user()->can('create-role'))
                    <button type="button" data-bs-target="#addRoleModal" data-bs-toggle="modal" class="btn btn-primary flex-grow-1 flex-sm-grow-0 mt-sm-0 mt-1"><i class="fa-solid fa-plus"></i> &nbsp; Add Role</button>
                    @endif
                </div>
            </div>


        </div>

        <!-- </div> -->
        <div class="card-datatable table-responsive pt-0">
            <table class="table border-top" id="role_table">
                <thead>
                    <tr>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Created Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>



    <div class="edit_role_div">

    </div>
    <!--/ Add Role Modal -->


</div>

@include('admin.confirmalert')
@include('admin.role.create')
@endsection

@section('scripts')
<script>
    function editValueSet(id) {
        var editUrl = 'roles/' + id + '/edit';
        $.ajax({
            url: editUrl,
            type: "GET",
            dataType: 'json',
            success: function(data) {
                $('.edit_role_div').html(data.html)
                $('#editRoleModel').modal('toggle');
            },
            error: function(data) {
                toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
            }
        });
    }

    $(document).ready(function() {
        $(document).on('click', '#select_all_permissions_edit', function() {
            var isChecked = false;
            $('.permission-list-edit').each(function() {
                if ($(this).prop('checked') == true) {
                    isChecked = true;
                }
            })

            if (isChecked == true) {
                $(this).parent().parent().find('.form-check-input').each(function() {
                    $(this).prop('checked', false)
                });
            } else {
                $(this).parent().parent().find('.form-check-input').each(function() {
                    $(this).prop('checked', true)
                });
            }
        })

        /* Role module code */
        $('#select_all_permissions_add').on('click', function() {
            var isChecked = false;

            $('.permission-list-add').each(function() {
                if ($(this).prop('checked') == true) {
                    isChecked = true;
                }
            })

            if (isChecked == true) {
                $('.permission-list-add').each(function() {
                    $(this).prop('checked', false)
                });
            } else {
                $('.permission-list-add').each(function() {
                    $(this).prop('checked', true)
                });
            }
        })
        /** Add Role Checkbox Checked */
        $('.addcheck-all-checkbox').on('click', function() {
            var isChecked = false;
            $(this).parent().parent().find('.form-check-input').each(function() {
                if ($(this).prop('checked') == true) {
                    isChecked = true;
                }
            })

            if (isChecked == true) {
                $(this).parent().parent().find('.form-check-input').each(function() {
                    $(this).prop('checked', false)
                });
            } else {
                $(this).parent().parent().find('.form-check-input').each(function() {
                    $(this).prop('checked', true)
                });
            }
        })
        /** Edit Role Checkbox Checked */
        $('.check-all-checkbox').on('click', function() {
            var isChecked = false;
            $(this).parent().parent().find('.form-check-input').each(function() {
                if ($(this).prop('checked') == true) {
                    isChecked = true;
                }
            })

            if (isChecked == true) {
                $(this).parent().parent().find('.form-check-input').each(function() {
                    $(this).prop('checked', false)
                });
            } else {
                $(this).parent().parent().find('.form-check-input').each(function() {
                    $(this).prop('checked', true)
                });
            }
        })


        $("#createform").validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 50
                },
                status: {
                    required: true,
                }
            },
            submitHandler: function(form) {
                if ($("#createform").validate().checkForm()) {
                    $(".submitbutton").addClass("disabled");
                    $('.loader-btn').removeClass("d-none");
                    form.submit();
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("id") == "status") {
                    error.appendTo(element.parent("div"));
                } else {
                    error.insertAfter(element);
                }
            },
        });

        const JsDisplayDateTimeFormatWithAMPM = "{{config('const.JsDisplayDateTimeFormatWithAMPM')}}"

        var initTable1 = function() {
            var table = $('#role_table');
            // begin first table
            table.DataTable({
                lengthMenu: getPageLengthDatatable(),
                responsive: true,
                searchDelay: 500,
                processing: true,
                serverSide: true,
                order: [],
                ajax: {
                    url: "{{ route('admin.getroles') }}",
                    type: 'post',
                    data: function(data) {
                        data.fromValues = $("#filterData").serialize();
                    }
                },
                columns: [{
                        data: 'name',
                        name: 'name',
                    },

                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data, type, row, meta) {
                            const dateWithTimezone = moment.utc(data).tz(tz);
                            return dateWithTimezone.format(JsDisplayDateTimeFormatWithAMPM);
                        },
                        searchable: false,
                    },
                    {
                        data: 'action',
                        name: 'action',
                        searchable: false,
                        sortable: false,
                        responsivePriority: -1
                    },
                ],
            });
        };
        initTable1();

        $("#delete-record").on("click", function() {
            var id = $("#id").val();
            var deleteUrl = 'roles/' + id;
            $('#delete-modal').modal('hide');
            $.ajax({
                url: deleteUrl,
                type: "DELETE",
                dataType: 'json',
                success: function(data) {
                    toastr.success("@lang('admin.recordDelete')", "@lang('admin.success')");
                    $('#role_table').DataTable().draw();
                    $("#rolelist").load(location.href + " #rolelist");
                },
                error: function(e) {
                    if (e.responseJSON.msg) {
                        toastr.error(e.responseJSON.msg, "@lang('admin.error')");
                    } else {
                        toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
                    }
                }
            });
        });

        $("#status,#role_id").bind("change", function() {
            $('#role_table').DataTable().draw();
        });



        $('.dataTables_filter .form-control').removeClass('form-control-sm');
        $('.dataTables_length .form-select').removeClass('form-select-sm');

        /* Reset Fillter Option */
        $('#filteroptionreset').on("click", function() {
            $("#filterData")[0].reset();
            $('#role_table').DataTable().search('');
            $("#status").val('');
            $('#status').trigger('change');
        });
    });
</script>
@endsection