@extends('layouts.app', ['title' => __('Rights')])

@section('admin_title')
{{__('Rights')}}
@endsection

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<div class="header bg-gradient-primary pb-6 pt-5 pt-md-6"></div>

<div class="container-fluid mt--6">
    <div class="row">
        <div class="col">
            <div class="card shadow-lg border-0">

                {{-- Card Header --}}
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0 fw-bold text-dark">
                                <i class="bi bi-shield-lock me-2 text-primary"></i>
                                {{ __('Rights Management') }}
                            </h3>
                        </div>
                        <div class="col text-end">
                            <a href="{{ route('admin.right.create') }}" 
                               class="btn btn-primary btn-sm shadow-sm">
                                <i class="bi bi-plus-circle me-1"></i>
                                Add New Right
                            </a>
                        </div>
                    </div>
                </div>

                {{-- Flash Message --}}
                <div class="px-4 pt-3">
                    @include('partials.flash')
                </div>

                {{-- Table --}}
                <div class="table-responsive">
                    <table class="table table-hover align-items-center mb-0">
                        <thead class="thead-light bg-light">
                            <tr>
                                <th class="text-uppercase  text-xs font-weight-bolder">
                                    Module Name
                                </th>
                                <th class="text-uppercase  text-xs font-weight-bolder">
                                    Right Name
                                </th>
                                <th class="text-uppercase  text-xs font-weight-bolder text-center">
                                    Status
                                </th>
                                <th class="text-uppercase  text-xs font-weight-bolder text-center">
                                    Actions
                                </th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($rights as $right)
                            <tr>
                                <td class="fw-semibold">
                                    <i class="bi bi-folder2-open text-muted me-2"></i>
                                    {{ optional($right->appmodule)->module_name }}
                                </td>

                                <td>
                                    <i class="bi bi-key text-muted me-2"></i>
                                    {{ $right->right_name }}
                                </td>

                                <td class="text-center">
                                    @if($right->is_active)
                                        <span class="badge bg-success px-3 py-2">
                                            <i class="bi bi-check-circle me-1"></i> Active
                                        </span>
                                    @else
                                        <span class="badge bg-danger px-3 py-2">
                                            <i class="bi bi-x-circle me-1"></i> Inactive
                                        </span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">

                                        {{-- Edit Button --}}
                                        <a href="{{ route('admin.right.edit', $right->id) }}" 
                                           class="btn btn-sm btn-outline-primary"
                                           title="Edit">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>

                                        {{-- Delete Form --}}
                                        <form action="{{ route('admin.right.delete', $right->id) }}"
                                              method="POST"
                                              class="delete-role-form d-inline">
                                            @csrf
                                            @method('DELETE')

                                            <button type="button"
                                                    class="btn btn-sm btn-outline-danger delete-role-btn"
                                                    title="Delete">
                                                <i class="bi bi-trash3"></i>
                                            </button>
                                        </form>

                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Footer --}}
                <div class="card-footer py-3 bg-white">
                    <div class="d-flex justify-content-end">
                        {{-- Pagination if needed --}}
                        {{ $rights->links() ?? '' }}
                    </div>
                </div>

            </div>
        </div>
    </div>

    @include('layouts.footers.auth')
</div>

{{-- SweetAlert --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@if(session('success'))
<script>
Swal.fire({
    icon: 'success',
    title: 'Success',
    text: '{{ session("success") }}',
    timer: 2000,
    showConfirmButton: false
});
</script>
@endif

<script>
document.addEventListener("DOMContentLoaded", function () {

    document.querySelectorAll('.delete-role-btn').forEach(function(button) {

        button.addEventListener('click', function () {

            let form = this.closest('.delete-role-form');

            Swal.fire({
                title: 'Are you sure?',
                text: "This Right will be permanently deleted!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });

        });

    });

});
</script>

@endsection