@extends('backend.template.layouts.template-base')
@section('title', 'Role Details')

@section('content')
<section>

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <a href="{{ route('backend.template.manage-users.roles.roles-and-permissions') }}"
           class="d-inline-flex align-items-center gap-2 text-decoration-none">
            <i class="ri-arrow-left-s-line fs-4" style="color:#374151;"></i>
            <h2 class="text-title fw-semibold mb-0">Role Details</h2>
        </a>
        <div class="d-flex gap-2">
            <button class="btn-inactive" id="statusBtn" onclick="openStatusModal()">
                {{ $role->status === 'active' ? 'Mark as Inactive' : 'Mark as Active' }}
            </button>
            <a href="{{ route('backend.template.manage-users.roles.edit-role', $role->id) }}"
               class="btn-edit d-inline-flex align-items-center gap-2">
                <img src="{{ asset('backend/template/svg-icon/edit-outline-w.svg') }}" style="width:16px;" alt="">
                Edit Role
            </a>
            <button class="btn-delete d-inline-flex align-items-center gap-2" onclick="openDeleteModal()">
                <img src="{{ asset('backend/template/svg-icon/delete-outline-w.svg') }}" style="width:16px;" alt="">
                Delete Role
            </button>
        </div>
    </div>

    {{-- Role Info Card --}}
    <div class="fb-container mb-3">
        <div class="p-4">
            <div class="d-flex align-items-center gap-3 mb-3">
                <div style="width:48px;height:48px;border-radius:10px;background:#dcfce7;
                            display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i class="ri-shield-user-line" style="font-size:22px;color:#0AA437;"></i>
                </div>
                <div>
                    <div class="d-flex align-items-center gap-2">
                        <h4 class="fw-bold mb-0" style="color:#111827;">{{ $role->name }}</h4>
                        <span class="status-badge-{{ $role->status }}">{{ ucfirst($role->status) }}</span>
                    </div>
                    <div style="font-size:13px;color:#6b7280;margin-top:3px;">
                        {{ $role->users->count() }} User{{ $role->users->count() != 1 ? 's' : '' }} assigned
                        &nbsp;·&nbsp;
                        Created {{ $role->created_at->format('d M Y') }}
                        @if($role->createdBy) by <strong style="color:#374151;">{{ $role->createdBy->name }}</strong>@endif
                    </div>
                    @if($role->updatedBy)
                    <div style="font-size:12px;color:#9ca3af;margin-top:2px;">
                        Last updated {{ $role->updated_at->format('d M Y, h:i A') }}
                        by {{ $role->updatedBy->name }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Permissions --}}
    <div class="fb-container mb-3">
        <div class="fb-filter-row">
            <h6 class="fw-semibold mb-0" style="color:#374151;">Permissions</h6>
        </div>
        @include('backend.template.manage-users.roles-and-permissions.partials.permission-table', [
            'permissionsByPage' => $permissionsByPage,
            'modulePages'       => $modulePages,
            'rolePermIds'       => $rolePermIds,
            'readonly'          => true,
        ])
    </div>

    {{-- Assigned Users --}}
    @if($role->users->isNotEmpty())
    <div class="fb-container">
        <div class="fb-filter-row">
            <h6 class="fw-semibold mb-0" style="color:#374151;">
                Assigned Users
                <span style="font-size:13px;color:#9ca3af;font-weight:400;">({{ $role->users->count() }})</span>
            </h6>
        </div>
        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead class="all-table-head">
                    <tr>
                        <th class="table-head-content ps-4">#</th>
                        <th class="table-head-content">Name</th>
                        <th class="table-head-content">Email</th>
                        <th class="table-head-content">Mobile</th>
                        <th class="table-head-content">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($role->users as $user)
                    <tr>
                        <td class="table-body-content ps-4">{{ $loop->iteration }}</td>
                        <td class="table-body-content fw-semibold" style="color:#111827;">{{ $user->name }}</td>
                        <td class="table-body-content">{{ $user->email }}</td>
                        <td class="table-body-content">{{ $user->mobile ?? '—' }}</td>
                        <td class="table-body-content">
                            <span class="status-badge-{{ $user->status ? 'active' : 'inactive' }}">
                                {{ $user->status ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

</section>

{{-- Status Modal --}}
<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
        <div class="modal-content custom-modal">
            <div class="modal-header {{ $role->status === 'active' ? 'inactive-header' : 'activate-header' }}" style="height:60px;">
                <h5 class="mt-2">{{ $role->status === 'active' ? 'Inactivate Role' : 'Activate Role' }}</h5>
            </div>
            <div class="modal-body">
                <p>{{ $role->status === 'active' ? 'Inactivate' : 'Activate' }} <strong>{{ $role->name }}</strong>?</p>
            </div>
            <div class="modal-footer custom-footer">
                <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                <button id="statusConfirm"
                        class="{{ $role->status === 'active' ? 'btn-inactive-action' : 'btn-activate-action' }}">
                    {{ $role->status === 'active' ? 'Inactivate' : 'Activate' }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
        <div class="modal-content custom-modal">
            <div class="modal-header delete-header" style="height:60px;"><h5 class="mt-2">Delete Role?</h5></div>
            <div class="modal-body">
                <p>Are you sure you want to delete <strong>{{ $role->name }}</strong>? This cannot be undone.</p>
            </div>
            <div class="modal-footer custom-footer">
                <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                <button id="deleteConfirm" class="btn-delete-action">Delete</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const CSRF  = "{{ csrf_token() }}";
const BASE  = "{{ url('/admin/manage-users/roles') }}";
const ID    = {{ $role->id }};
const STAT  = "{{ $role->status }}";
const INDEX = "{{ route('backend.template.manage-users.roles.roles-and-permissions') }}";

document.querySelectorAll('.toggle-arrow').forEach(function (arrow) {
    arrow.addEventListener('click', function () {
        var id = this.closest('tr').getAttribute('data-id');
        document.querySelectorAll('.child-' + id).forEach(function (row) { row.classList.toggle('d-none'); });
        this.classList.toggle('rotate');
    });
});

function openStatusModal() { new bootstrap.Modal(document.getElementById('statusModal')).show(); }
function openDeleteModal()  { new bootstrap.Modal(document.getElementById('deleteModal')).show(); }

$('#statusConfirm').on('click', function () {
    $(this).prop('disabled', true);
    $.post(BASE + '/' + ID + '/status', { _token: CSRF, status: STAT === 'active' ? 'inactive' : 'active' })
        .done(function () { toastr.success('Status updated.'); setTimeout(() => location.reload(), 700); })
        .fail(function () { toastr.error('Failed.'); $('#statusConfirm').prop('disabled', false); });
});

$('#deleteConfirm').on('click', function () {
    $(this).prop('disabled', true).text('Deleting…');
    $.post(BASE + '/' + ID + '/destroy', { _token: CSRF })
        .done(function () { toastr.success('Role deleted.'); setTimeout(() => window.location = INDEX, 700); })
        .fail(function (xhr) { toastr.error(xhr.responseJSON?.message || 'Failed.'); $('#deleteConfirm').prop('disabled', false).text('Delete'); });
});
</script>
@endsection