@extends('admin.layouts.app')
@section('content')
    <div class="container-fluid">
        <div class="page-header">
            <div class="row">
                <div class="col-sm-6">
                    <h3>Role Create</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item">User Management </li>
                        <li class="breadcrumb-item active">Role Create</li>
                    </ol>
                </div>
                <div class="col-sm-6">
                    <!-- Bookmark Start-->
                    <div class="bookmark">
                        <div class="text-end"><a class="btn btn-success" href="{{ route('admin.roles') }}">Back</a>
                        </div>
                    </div>
                    <!-- Bookmark Ends-->
                </div>

            </div>
        </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form method="post" id="createRoleForm" name="createRoleForm">
                            @csrf
                            <div class="form theme-form">
                                <div class="row">
                                    <div class="col">
                                        <div class="mb-3">
                                            <label>Title</label>
                                            <input class="form-control" name="title" type="text"
                                                placeholder="Role Title *" id="title">
                                            <p></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="mb-3">
                                            <label>Slug</label>
                                            <input class="form-control" name="slug" type="text"
                                                placeholder="Role Slug *" id="slug" readonly>
                                            <p></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="mb-3">
                                            <label>Permissions</label>
                                            <div class="row">
                                                @if ($permissions->isNotEmpty())
                                                    @foreach ($permissions as $permission)
                                                        <div class="col-md-3 mt-3">
                                                            <input type="checkbox" name="permission[]" class="rounded"
                                                                id="permission-{{ $permission->id }}"
                                                                value="{{ $permission->name }}">
                                                            <label
                                                                for="permission-{{ $permission->id }}">{{ $permission->name }}</label>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="mb-3">
                                            <label>Status</label>
                                            <select name="status" id="status" class="form-control">
                                                <option>Select</option>
                                                <option value="1">Active</option>
                                                <option value="0">Deactive</option>
                                            </select>
                                            <p></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="text-end">
                                            <input type="submit" value="Save" class="btn btn-success w-100">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            function generateSlug(title) {
                // Remove special characters using regular expression
                return title.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
            }
            // jQuery keyup event handler
            $('#title').keyup(function() {
                var title = $(this).val();
                var slug = generateSlug(title);
                $('#slug').val(slug);
            });
            $(document).on("submit", "#createRoleForm", function(event) {
                event.preventDefault();
                var data = new FormData(this);
                $("button[type=submit]").prop('disabled', true);
                $.ajax({
                    url: '{{ route('admin.role.store') }}',
                    type: 'post',
                    data: data,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == true) {
                            $(".error").removeClass('invalid-feedback').html('');
                            $("input, select").removeClass('is-invalid');
                            'use strict';
                            var notify = $.notify({
                                // Your message with an icon
                                message: '<i class="fa fa-bell-o"></i><strong>Success</strong> Role Created Successfully...'
                            }, {
                                type: 'theme',
                                allow_dismiss: true,
                                delay: 2000,
                                showProgressbar: true,
                                timer: 300,
                                template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
                                    '<span data-notify="icon"></span> ' +
                                    '<span data-notify="title">{1}</span> ' +
                                    '<span data-notify="message">{2}</span>' +
                                    '<div class="progress" data-notify="progressbar">' +
                                    // Add custom color here
                                    '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                                    '</div>' +
                                    '<a href="{3}" target="{4}" data-notify="url"></a>' +
                                    '</div>'
                            });

                            // Update the notify after a delay
                            setTimeout(function() {
                                notify.update();
                            }, 1000);
                            $('#createRoleForm')[0].reset();
                            $("button[type=submit]").prop('disabled', false);
                        } else {
                            let errors = response['errors'];
                            $("button[type=submit]").prop('disabled', false);
                            $(".error").removeClass('invalid-feedback').html('');
                            $("input, select").removeClass('is-invalid');
                            $.each(errors, function(key, value) {
                                $(`#${key}`).addClass('is-invalid')
                                    .siblings('p')
                                    .addClass('invalid-feedback')
                                    .html(value);
                            });
                            'use strict';
                            var notify = $.notify({
                                // Your message with an icon
                                message: '<i class="fa fa-bell-o"></i><strong>Required</strong> Please Fill All Field...'
                            }, {
                                type: 'theme',
                                allow_dismiss: true,
                                delay: 2000,
                                showProgressbar: true,
                                timer: 300,
                                template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0} text-danger" role="alert">' +
                                    '<span data-notify="icon" class="bg-danger"></span> ' +
                                    '<span data-notify="title">{1}</span> ' +
                                    '<span data-notify="message">{2}</span>' +
                                    '<div class="progress" data-notify="progressbar">' +
                                    // Add custom color here
                                    '<div class="bg-danger progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                                    '</div>' +
                                    '<a href="{3}" target="{4}" data-notify="url"></a>' +
                                    '</div>'
                            });

                            // Update the notify after a delay
                            setTimeout(function() {
                                notify.update();
                            }, 1000);
                        }
                    },
                    error: function(jqXHR, exception) {
                        'use strict';
                        var notify = $.notify({
                            // Your message with an icon
                            message: '<i class="fa fa-bell-o"></i><strong>Error</strong> Please Try Again...'
                        }, {
                            type: 'theme',
                            allow_dismiss: true,
                            delay: 2000,
                            showProgressbar: true,
                            timer: 300,
                            template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0} text-danger" role="alert">' +
                                '<span data-notify="icon" class="bg-danger"></span> ' +
                                '<span data-notify="title">{1}</span> ' +
                                '<span data-notify="message">{2}</span>' +
                                '<div class="progress" data-notify="progressbar">' +
                                // Add custom color here
                                '<div class="bg-danger progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                                '</div>' +
                                '<a href="{3}" target="{4}" data-notify="url"></a>' +
                                '</div>'
                        });

                        // Update the notify after a delay
                        setTimeout(function() {
                            notify.update();
                        }, 1000);
                        $("button[type=submit]").prop('disabled', false);
                    }
                });
            });
        });
    </script>
@endsection