@extends('tenants.layouts.master')
@section('title')
    @lang('Permissions Add')
@endsection
@section('css')
    <link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
@endsection
@section('content')
    @component('tenants.components.breadcrumb')
        @slot('li_1')
            Permissions
        @endslot
        @slot('title')
            {{ isset($permission) ? 'Edit Permission' : 'Create Permission' }}
        @endslot
    @endcomponent
    <div class="row">
        <form id="permission-form" action="{{ isset($permission) ? route('permissions.update', $permission->id) : route('permissions.store') }}" method="POST">
            @csrf
            @if(isset($permission)) 
                @method('PUT') <!-- For update route -->
            @endif

            <div class="col-lg-12">                
                <div class="card">
                    <div class="card-header align-items-center d-flex">
                        <h4 class="card-title mb-0 flex-grow-1">{{ isset($permission) ? 'Edit Permission' : 'Create Permission' }}</h4>
                    </div><!-- end card header -->
                    <div class="card-body">
                        <div class="live-preview">
                            <div class="row gy-4">
                                <div class="col-xxl-4 col-md-4">
                                    <div>
                                        <label for="name" class="form-label">Permission Name</label>
                                        <input type="text" class="form-control"
                                            value="{{ isset($permission) ? $permission->name : '' }}"
                                            placeholder="Enter Job Title" name="name" id="name" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input-group">
                                        <button class="btn btn-primary" type="submit">{{ isset($permission) ? 'Update Permission' : 'Create Permission' }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </form>
    </div>
    <!-- Submit Button -->
@endsection
@section('script')
            <script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
            <script src="{{ url('js/jquery-validate-1.19.3/jquery-validate.min.js') }}"></script>
            <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // Initialize jQuery validation
    $('#permission-form').validate({
        rules: {
            name: {
                required: true,
                minlength: 3
            }
        },
        messages: {
            name: {
                required: "Please enter a permission name",
                minlength: "Permission name must be at least 3 characters long"
            }
        },
        submitHandler: function(form) {
            // If the form is valid, submit it via AJAX
            $.ajax({
                url: $(form).attr('action'),
                method: $(form).attr('method'),
                data: $(form).serialize(),  // Serialize form data
                success: function(response) {
                    // Handle success                    
                    $('#permission-form')[0].reset(); // Reset the form
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(function() {
                        // Optionally, redirect after success
                        window.location.href =
                            '{{ route('permissions.index') }}'; // Change to your desired path
                    });
                },
                error: function(xhr, status, error) {
                    // Handle error
                    Swal.fire({
                        title: 'Error!',
                        text: response.message,
                        icon: 'error',
                        confirmButtonText: 'Try Again'
                    });
                }
            });
        }
    });
});
</script>
@endsection