@extends('layouts.app')
@push('css')
    @include('components.dataTable-style-links')
@endpush
@section('content')
    <div class="content-wrapper container">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i>
                </span> {{ __('Users') }}
            </h3>
            <div class="">
                <button type="button" class="btn btn-primary float-end " data-bs-toggle="modal"
                    data-bs-target="#add-modal">{{ __('Add Item') }}</button>
            </div>
        </div>
        @include('dashboard.users.table')
        @include('dashboard.users.add-modal')
        @include('dashboard.users.edit-modal')
        @include('dashboard.users.permission-modal')
    </div>
@endsection

@section('scripts')
    @include('components.dataTable-script-links')
    <script src="{{ asset('assets/js/pages/users.js') }}"></script>
    <script>
        $('.select-all').on('click', function() {
            const groupName = $(this).data('group');
            const checkboxes = $(`[data-group="${groupName}"]`);
            // Toggle checkboxes
            const allChecked = checkboxes.filter(':checked').length > 0;
            checkboxes.prop('checked', !allChecked);
        });
        $(document).on('click', '.permission-btn', function() {
            $("[type='checkbox']").prop('checked', false);
            $("#permission-form").data('id', $(this).data('id'))
            $("#permission-modal").modal('show');
            $.ajax({
                url: `${$("#permission-form").data('get-permission')}/${$(this).data('id')}`,
                method: 'get',
                success: function(response) {
                    $.each(response.data, function(index, value) {
                        $(`#permission${value}`).prop('checked', true);
                    })
                },
                error: function(xhr) {
                    $('button[type="submit"]').prop('disabled', false);
                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('[name="' + key + '"]').addClass('is-invalid');
                            $('[name="' + key + '"]').after('<div class="invalid-feedback">' +
                                value + '</div>');
                            let newKey = key.replace('.', '[');
                            newKey = newKey.replace('.', '][') + ']';
                            $('[name="' + newKey + '"]').addClass('is-invalid');
                            $('[name="' + newKey + '"]').after(
                                '<div class="invalid-feedback">' + value + '</div>');
                        });
                    }
                }
            });
        })

        $("#permission-form").on('submit', function(e) {
            e.preventDefault();
            $(".is-invalid").removeClass('is-invalid')
            $(".invalid-feedback").remove()
            var formData = $(this).serialize();
            $('button[type="submit"]').prop('disabled', true);
            $.ajax({
                url: `${$(this).attr('action')}/${$(this).data('id')}`,
                method: 'POST',
                data: formData,
                success: function(response) {
                    $('button[type="submit"]').prop('disabled', false);
                    $('#add-modal').modal('hide');
                    table.ajax.reload();
                    Swal.fire({
                        title: 'success',
                        icon: 'success',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $('#add-form')[0].reset();
                },
                error: function(xhr) {
                    $('button[type="submit"]').prop('disabled', false);
                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('[name="' + key + '"]').addClass('is-invalid');
                            $('[name="' + key + '"]').after('<div class="invalid-feedback">' +
                                value + '</div>');
                            let newKey = key.replace('.', '[');
                            newKey = newKey.replace('.', '][') + ']';
                            $('[name="' + newKey + '"]').addClass('is-invalid');
                            $('[name="' + newKey + '"]').after(
                                '<div class="invalid-feedback">' + value + '</div>');
                        });
                    }
                }
            });
        })
    </script>
@endsection