@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">
            @include('admin::partials.title-pad', [
                'title' => __('admin.apply_staff_user'),
                'search' => $search,
                'searchPlaceholder' => __('placeholder.search_business_user'),
                'create' => 'admin.staffs.create',
                'list' => $businessUsers,
            ])
            <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>{{ __('admin.business_user') }}</th>
                                    <th>{{ __('admin.branches') }}</th>
                                    <th>{{ __('admin.staff_number') }}</th>
                                    <th>{{ __('label.business_location') }}</th>
                                    <th>{{ __('label.status') }}</th>
                                    <th>{{ __('admin.action') }}</th>
                                </tr>
                                </tr>
                                @forelse ($businessUsers as $key => $businessUser)
                                    <tr>
                                        <td>
                                            {{ $loop->iteration }}
                                        </td>
                                        <td> <strong>
                                                {{ $businessUser->name }} &nbsp;({{ $businessUser->email }})
                                            </strong>
                                        </td>
                                        <td>
                                            <strong>
                                                {{ $businessUser->branches_count }}
                                            </strong>
                                        </td>
                                        <td>
                                            <strong>
                                                {{ $businessUser->staffs_count }}
                                            </strong>
                                        </td>
                                        <td>
                                            <strong>
                                                {{ $businessUser->business_location }}
                                            </strong>
                                        </td>
                                        <td>
                                            @php
                                                $status = $businessUser->staffs->first()->pivot->status ?? '-';
                                            @endphp
                                            <strong>
                                                {{ ucfirst($status) }}
                                            </strong>
                                        </td>
                                        <td>
                                            @if ($status === 'approved')
                                                <button type="button" class="btn-md px-3 py-2 btn-primary">
                                                    Applied
                                                </button>
                                            @elseif($status === 'pending')
                                                <button type="button" class="btn-md px-3 py-2 btn-warning"
                                                    onclick="confirmAndRevokeStaffRequest('{{ $businessUser->id }}', '{{ auth()->user()->id }}');">
                                                    Revoke
                                                </button>
                                            @elseif($status === 'inactive')
                                                <button type="button" class="btn-md px-3 py-2 btn-danger" disabled>
                                                    In Active
                                                </button>
                                            @elseif($status === 'rejected')
                                                <button type="button" class="btn-md px-3 py-2 btn-danger" disabled>
                                                    Rejected
                                                </button>
                                            @else
                                                <button type="button" class="btn-md px-3 py-2 btn-info"
                                                    onclick="confirmAndApplyStaffRequest('{{ $businessUser->id }}', '{{ auth()->user()->id }}');">
                                                    Apply
                                                </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 --}}
                {{ $businessUsers->appends(request()->input())->links('admin::partials.pagination') }}
                {{-- Pagination End --}}
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        async function applyStaff(userId, staffId) {
            try {
                const response = await fetch(`${api_url}/admin/apply-staff-user`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({
                        user_id: userId,
                        staff_id: staffId,
                    }),
                });

                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 confirmAndApplyStaffRequest(userId, staffId) {
            const isConfirmed = confirm('Are you sure you want to apply this staff request?');
            if (isConfirmed) {
                applyStaff(userId, staffId);
            }
        }

        async function revokeStaff(userId, staffId) {
            try {
                const response = await fetch(`${api_url}/admin/revoke-staff-user`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({
                        user_id: userId,
                        staff_id: staffId,
                    }),
                });

                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 confirmAndRevokeStaffRequest(userId, staffId) {
            const isConfirmed = confirm('Are you sure you want to revoke this staff request?');
            if (isConfirmed) {
                revokeStaff(userId, staffId);
            }
        }

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

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