@extends('layouts.admin')

@section('title', 'Role Management')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card shadow-none">
            <div class="card-header bg-white">
                <h3 class="card-title font-weight-bold">Roles List</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-create">
                        <i class="fas fa-plus"></i> Add Role
                    </button>
                </div>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show py-2">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                @endif
                <table id="dataTable" class="table table-bordered table-striped table-sm">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Role Name</th>
                            <th>Guard</th>
                            <th>Users Count</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($roles as $role)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                <span class="badge badge-primary px-2 py-1">{{ $role->name }}</span>
                            </td>
                            <td><code>{{ $role->guard_name }}</code></td>
                            <td>
                                <span class="badge badge-secondary">{{ $role->users_count }} users</span>
                            </td>
                            <td>{{ $role->created_at->format('d M Y') }}</td>
                            <td>
                                <button type="button" class="btn btn-info btn-xs btn-edit"
                                    data-id="{{ $role->id }}"
                                    data-name="{{ $role->name }}"
                                    data-toggle="modal" data-target="#modal-edit">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                                <form action="{{ route('admin.roles.destroy', $role->id) }}" method="POST" style="display:inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-xs" onclick="return confirm('Delete this role?')">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Create Modal -->
<div class="modal fade" id="modal-create">
    <div class="modal-dialog">
        <form action="{{ route('admin.roles.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header py-2 bg-white">
                    <h4 class="modal-title" style="font-size:1.1rem;">Add Role</h4>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Role Name</label>
                        <input type="text" name="name" class="form-control" placeholder="e.g. admin, seller, buyer" required>
                        <small class="text-muted">Use lowercase with hyphens, e.g. <code>super-admin</code></small>
                    </div>
                </div>
                <div class="modal-footer justify-content-between py-2">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Role</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="modal-edit">
    <div class="modal-dialog">
        <form id="edit-form" method="POST">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header py-2 bg-white">
                    <h4 class="modal-title" style="font-size:1.1rem;">Edit Role</h4>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Role Name</label>
                        <input type="text" name="name" id="edit-name" class="form-control" placeholder="Enter role name" required>
                    </div>
                </div>
                <div class="modal-footer justify-content-between py-2">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-info">Update Role</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        if (!$.fn.DataTable.isDataTable('#dataTable')) {
            $('#dataTable').DataTable({
                "paging": true, "lengthChange": true, "searching": true,
                "ordering": true, "info": true, "autoWidth": false, "responsive": true,
            });
        }

        $(document).on('click', '.btn-edit', function () {
            const id   = $(this).data('id');
            const name = $(this).data('name');

            $('#edit-form').attr('action', `/admin/roles/${id}`);
            $('#edit-name').val(name);
        });
    });
</script>
@endpush