@extends('layouts.nav')
@section('title')
Roles
@endsection
@section('content')               

<div class="pagetitle">
    <h1 id="formHeader">Add Roles</h1>
</div>
<!-- End Page Title -->

<section class="section">
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <!-- Roles Form -->
                    @if (session('success'))
                        <div class="alert alert-success" id="successMessage">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="alert alert-danger" id="errorMessage">
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    @endif

                    <form action="" method="POST" id="roleForm" class="row g-3">
                        @csrf
                        <input type="hidden" name="id" id="roleId" value="">

                        <div class="col-md-6">
                            <input type="text" name="roleName" id="roleName" class="form-control" placeholder="Role Name" value="{{ old('roleName') }}" required>
                        </div>

                        <div class="col-md-6">
                            <textarea name="description" id="description" class="form-control" placeholder="Enter Your Description" rows="4" required>{{ old('description') }}</textarea>
                        </div>

                        <div style="display:flex; gap:3px;" class="col-md-12 d-flex gap-10">
                            <button type="submit" class="btn btn-primary" id="submitButton">Submit</button>
                            <button type="reset" class="btn btn-secondary" onclick="resetForm()">Reset</button>
                        </div>
                    </form>
                    <!-- End Roles Form -->
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Roles Table</h5>
                    <!-- Roles Table -->
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Role Name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($getRoles as $role)
                                <tr>
                                    <td>{{ $role->name }}</td>
                                    <td>{{ $role->description }}</td>
                                    <td>
                                        <a href="#" onclick="editRole(event, '{{ $role->id }}', '{{ $role->name }}', '{{ $role->description }}')" class="btn btn-primary btn-sm">Edit</a>
                                        <a href="{{ url('Deleterole', $role->id) }}" class="btn btn-danger btn-sm" onclick="return confirmDelete('{{ $role->name }}')">Delete</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <!-- End Roles Table -->
                </div>
            </div>
        </div>
    </div>
</section>

<script>
function editRole(event, id, name, description) {
    event.preventDefault();
    document.getElementById('roleId').value = id;
    document.getElementById('roleName').value = name;
    document.getElementById('description').value = description;
    document.getElementById('formHeader').innerText = 'Edit Role';
    document.getElementById('submitButton').innerText = 'Update';

    // Update the form method and action
    document.getElementById('roleForm').method = "POST";
    document.getElementById('roleForm').action = "/users/role/edit/" + id; // Include the ID in the URL
}


    function resetForm() {
        document.getElementById('roleId').value = '';
        document.getElementById('roleName').value = '';
        document.getElementById('description').value = '';
        document.getElementById('formHeader').innerText = 'Add Roles';
        document.getElementById('submitButton').innerText = 'Submit';
        document.getElementById('roleForm').method = "post";
        document.getElementById('roleForm').action = "";
        document.getElementById('successMessage')?.remove();
        document.getElementById('errorMessage')?.remove();
    }

    function confirmDelete(name) {
        return confirm(`Are you sure you want to delete the role: ${name}?`);
    }
</script>
@endsection