@extends('admin::layouts.app')

@section('content')
    <style>
        .status-pending {
            background-color: yellow;
        }

        .status-approved {
            background-color: green;
        }

        .status-rejected {
            background-color: red;
        }
    </style>
    <section class="content mb-5">
        <div class="container-fluid">
            <div class="row titlepad publsih-sticky">
                <div class="col-md-12">
                    <div class="mt-3 mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <h4>{{ __('admin.role') }}</h4>
                            <p class="page-sub-head">{{ __('admin.apply_role') }}</p>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive bg-white">
                        <table class="table table-striped table-bordered admintable border-0" cellspacing="0"
                            cellpadding="0">
                            <tbody>
                                <tr>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('master.role_name') }}</th>
                                    <th>{{ __('admin.requested_to') }}</th>
                                    <th>{{ __('admin.application_status') }}</th>
                                    <th>{{ __('admin.action') }}</th>
                                </tr>
                                </tr>
                                @forelse ($roles as $key => $role)
                                    @php
                                        $status =
                                            $role
                                                ->users()
                                                ->where('user_id', auth()->user()->id)
                                                ->first()->pivot->status ?? __('admin.not_applied');
                                    @endphp
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $role->name }}</td>
                                        <td>
                                            {{ __('admin.super_admin') }}
                                        </td>
                                        <td>
                                            <p class="status-{{ $status }}">
                                                {{ strtoupper($status) }}
                                            </p>
                                        </td>
                                        <td>
                                            @if ($status === 'Not Applied')
                                                <button type="button" class="btn-md px-3 py-2 btn-secondary"
                                                    onclick="confirmAndApplyRole('{{ auth()->user()->id }}', '{{ $role->id }}');">
                                                    {{ __('admin.apply') }}
                                                </button>
                                            @else
                                                <button type="button" class="btn-md px-3 py-2 btn-primary" disabled>
                                                    {{ __('admin.applied') }}
                                                </button>
                                            @endif
                                        </td>
                                    @empty
                                    <tr>
                                        <td colspan="10">
                                            <p>
                                                <center class="text-danger">{{ __('admin::message.no_records_found') }}
                                                </center>
                                            </p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        {{-- Table End --}}
                    </div>

                </div>
                {{-- Pagination --}}
                {{ $roles->appends(request()->input())->links('admin::partials.pagination') }}
                {{-- Pagination End --}}
            </div>
        </div>
    </section>
@endsection
<script>
    async function applyRole(userId, roleId) {
        try {
            const response = await fetch(`${api_url}/admin/apply-role`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({
                    user_id: userId,
                    role_id: roleId,
                }),
            });

            const data = await response.json();

            if (response.ok) {
                setTimeout(function() {
                    showSuccessMessage(data.message);
                }, 500);
                location.reload();
            } else {
                showErrorMessage(`${data.message}`);
            }
        } catch (error) {
            showErrorMessage('An error occurred. Please try again later.');
            console.error('An error occurred:', error);
        }
    }

    function confirmAndApplyRole(userId, roleId) {
        const isConfirmed = confirm('Are you sure you want to apply this role?');
        if (isConfirmed) {
            applyRole(userId, roleId);
        }
    }

    function showSuccessMessage(message) {
        alert(message);
    }

    function showErrorMessage(message) {
        alert(message);
    }
</script>