@extends('layouts.master')
@section('title') @lang('translation.Roles') @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Admin @endslot
@slot('title') {{ isset($role) ? 'Edit Role' : 'New Role' }} @endslot
@endcomponent

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header">
                <div class="card-header py-3 d-flex justify-content-between align-items-center bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-user-shield mr-2"></i>{{ isset($role) ? 'Edit Role' : 'Create New Role' }}
                    </h6>
                    <a href="{{ route('admin.roles.index') }}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left mr-1"></i> Back to List
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form class="needs-validation" novalidate 
                      action="{{ isset($role) ? route('admin.roles.update', $role) : route('admin.roles.store') }}" 
                      method="POST" 
                      id="rolesForm">
                      
                    @csrf
                    @if(isset($role))
                        @method('PUT')
                    @endif
                    
                    <div id="formErrors" class="alert alert-danger d-none"></div>
                    
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="name" class="font-weight-bold">Role Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" 
                                       id="name" name="name" 
                                       value="{{ old('name', $role->name ?? '') }}" required>
                                <div class="invalid-feedback">Please provide a valid role name.</div>
                            </div>
                        </div>
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="guard_name" class="font-weight-bold">Guard Name <span class="text-danger">*</span></label>
                                <select class="form-select" id="guard_name" name="guard_name" required>
                                    <option value="web" {{ old('guard_name', $role->guard_name ?? 'web') == 'web' ? 'selected' : '' }}>Web</option>
                                    <option value="api" {{ old('guard_name', $role->guard_name ?? 'web') == 'api' ? 'selected' : '' }}>API</option>
                                </select>
                                <div class="invalid-feedback">Please select a guard name.</div>
                            </div>
                        </div>
                    </div>
                    
                    @if(isset($role))
                    <div class="mb-3">
                        <div class="form-group">
                            <label class="font-weight-bold">Permissions</label>
                            <div class="row">
                                @foreach($permissions as $permission)
                                <div class="col-md-3 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="permission_{{ $permission->id }}" 
                                               name="permissions[]" 
                                               value="{{ $permission->id }}"
                                               {{ in_array($permission->id, old('permissions', $role->permissions->pluck('id')->toArray() ?? [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="permission_{{ $permission->id }}">
                                            {{ $permission->name }}
                                        </label>
                                    </div>

                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    <div class="form-group mt-4">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fas fa-save mr-1"></i> {{ isset($role) ? 'Update' : 'Save' }} Role
                        </button>
                        <a href="{{ route('admin.roles.index') }}" class="btn btn-secondary ml-2">
                            <i class="fas fa-times mr-1"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="{{ URL::asset('assets/libs/pristinejs/pristinejs.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection

@section('script-bottom')
<script>
$(document).ready(function () {
    const form = $('#rolesForm');
    const submitButton = form.find("button[type=submit]");

    // Client-side validation
    form.on('submit', function (e) {
        if (!this.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        this.classList.add('was-validated');
    });

    // AJAX form submission
    form.on('submit', function (e) {
        e.preventDefault();

        // Clear previous errors
        $('#formErrors').addClass('d-none').html('');
        form.find('.is-invalid').removeClass('is-invalid');
        form.find('.invalid-feedback').html('');

        // Set loading state
        submitButton.prop('disabled', true).html(`
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            ${submitButton.text()}
        `);

        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            dataType: 'json',
            success: function (response) {
                submitButton.prop('disabled', false).html(
                    `<i class="fas fa-save mr-1"></i> ${submitButton.text().replace('ing...', '')}`
                );

                if (response.success) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message || (form.attr('method') === 'PUT' 
                            ? 'Role updated successfully!' 
                            : 'Role created successfully!'),
                        icon: 'success',
                        confirmButtonText: 'OK',
                        timer: 1800,
                        willClose: () => {
                            window.location.href = response.redirect || "{{ route('admin.roles.index') }}";
                        }
                    });
                }
            },
            error: function (jqXHR) {
                submitButton.prop('disabled', false).html(
                    `<i class="fas fa-save mr-1"></i> ${submitButton.text().replace('ing...', '')}`
                );

                if (jqXHR.status === 422) {
                    const errors = jqXHR.responseJSON.errors;
                    let errorHtml = '<ul>';

                    $.each(errors, function (field, messages) {
                        const input = $(`#${field}`);
                        input.addClass('is-invalid');
                        input.siblings('.invalid-feedback').html(messages.join('<br>'));
                        messages.forEach(msg => {
                            errorHtml += `<li>${msg}</li>`;
                        });
                    });

                    errorHtml += '</ul>';
                    $('#formErrors').removeClass('d-none').html(errorHtml);
                } else {
                    $('#formErrors').removeClass('d-none')
                        .html(jqXHR.responseJSON?.message || 'Something went wrong. Please try again.');
                }

                // Scroll to error box
                $('html, body').animate({
                    scrollTop: $('#formErrors').offset().top - 100
                }, 500);
            }
        });
    });
});
</script>
@endsection