@extends("layouts.metor.admin")
@section("content")
@section("title","Update Permissions")

<div class="row">
    <div class="col-xl-12 col-lg-12">
        <div class="alert alert-success my-3" style="display:none;" id="success"></div>
        
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Update Permissions</h4>
                <a href="javascript:history.back()" class="btn btn-sm btn-light">
                    <i class="ri-arrow-left-line"></i> Back
                </a>
            </div>
            
            <div class="card-body">
                <form accept-charset="utf-8" name="update-form" id="update-form">
                    @csrf
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="update-page" class="form-label">Page <span class="text-danger">*</span></label>
                                <input type="text" name="page" id="update-page" autocomplete="off" maxlength="255" value="{{ $row->page }}" required class="form-control" placeholder="Page (e.g., roles, permissions)">
                                <small class="text-muted">This will be used to generate the permission name as: {page}-{title}</small>
                                <span class='text-danger' id='update-pageError'></span>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="update-title" class="form-label">Title <span class="text-danger">*</span></label>
                                <select name="title" id="update-title" class="form-control" required>
                                    <option value="">Select Title</option>
                                    <option value="list" {{ $row->title == 'list' ? 'selected' : '' }}>List</option>
                                    <option value="create" {{ $row->title == 'create' ? 'selected' : '' }}>Create</option>
                                    <option value="edit" {{ $row->title == 'edit' ? 'selected' : '' }}>Edit</option>
                                    <option value="delete" {{ $row->title == 'delete' ? 'selected' : '' }}>Delete</option>
                                </select>
                                <span class='text-danger' id='update-titleError'></span>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="update-guard_name" class="form-label">Guard Name <span class="text-danger">*</span></label>
                                <input type="text" name="guard_name" id="update-guard_name" autocomplete="off" maxlength="255" value="{{ $row->guard_name }}" required class="form-control" placeholder="Guard Name">
                                <span class='text-danger' id='update-guard_nameError'></span>
                            </div>
                        </div>
                    </div>

                    <div class="p-3 mb-3 rounded">
                        <div class="row justify-content-end g-2">
                            <div class="col-lg-3">
                                <div id="edit-mode">
                                    <button type='submit' name='update-submit' id='update-submit' class='btn btn-outline-secondary w-100' data-args1='{{url("/permissions/edit/". $row->id)}}' data-args2='No' onclick='addUpdate(event,"update")'>
                                        <i class="ri-save-line"></i> Save 
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <a href="{{ url('/admin/permissions') }}" class="btn btn-primary w-100">
                                    <i class="ri-close-circle-line"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

