`<x-backend.layouts.master>
    <x-slot name="pageTitle">
        User List
    </x-slot>

    <x-slot name='breadCrumb'>
        <x-backend.layouts.elements.breadcrumb>
            <x-slot name="pageHeader"> User </x-slot>
            <li class="breadcrumb-item"><a href="{{ route('users.index') }}">User</a></li>
            <li class="breadcrumb-item active">User</li>
        </x-backend.layouts.elements.breadcrumb>
    </x-slot>

    <section class="content">
        <div class="container-fluid">

            @if (session('message'))
                <div class="alert alert-success">
                    <span class="close" data-dismiss="alert">&times;</span>
                    <strong>{{ session('message') }}.</strong>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger">
                    <span class="close" data-dismiss="alert">&times;</span>
                    <strong>{{ session('error') }}.</strong>
                </div>
            @endif
            @php
                $supervisor = App\Models\SupervisorAssign::where('supervisor_id', Auth::user()->id)->get();
                // dd($supervisor);
                
                $user_id = [];
                
                foreach ($supervisor as $supervisor) {
                    $user_id[] = $supervisor->user_id;
                }
                
                $users = App\Models\User::whereIn('id', $user_id)->get();
                // dd($users);
            @endphp
            <x-backend.layouts.elements.errors />

            <div class="row justify-content-center">
                @forelse ($users as $user)
                    <div class="col-md-4">
                        <div class="card text-center">
                            <div class="card-header">
                                <img src="{{ asset('images/users/' . $user->picture) }}" alt="{{ $user->emp_id }}"
                                    class="img-top" width="150px" height="100px">
                                <h3 class="card-title">{{ $user->name }}</h3>
                            </div>
                            <div class="card-body">
                                <p>Employee ID: {{ $user->emp_id }}</p>
                                <p>Designation: {{ $user->designation->name }}</p>
                            </div>
                            <div class="card-footer ">
                                <div class="btn-group btn-group-toggle justify-content-between" data-toggle="buttons">
                                    <a href="#" class="btn btn-secondary active"
                                        onclick="event.preventDefault(); submitKpiForm('{{ $user->id }}', '1st Phase, {{ date('Y') }}')">1st
                                        Phase, {{ date('Y') }}</a>
                                    <a href="#" class="btn btn-secondary"
                                        onclick="event.preventDefault(); submitKpiForm('{{ $user->id }}', '2nd Phase, {{ date('Y') }}')">2nd
                                        Phase, {{ date('Y') }}</a>
                                    <a href="#" class="btn btn-secondary"
                                        onclick="event.preventDefault(); submitKpiForm('{{ $user->id }}', '3rd Phase, {{ date('Y') }}')">3rd
                                        Phase, {{ date('Y') }}</a>
                                </div>
                                <form id="kpi-form" method="POST" action="{{ route('kpi_Mark_entry.show') }}"
                                    style="display: none;">
                                    @csrf
                                    <input type="hidden" name="user_id" id="user_id">
                                    <input type="hidden" name="kpi_period" id="kpi_period">
                                </form>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-md-12">
                        <h4>No User Found</h4>
                    </div>
                @endforelse
            </div>


        </div>
        <!-- /.container-fluid -->
    </section>

    <script>
        function submitKpiForm(userId, kpiPeriod) {
            document.getElementById('user_id').value = userId;
            document.getElementById('kpi_period').value = kpiPeriod;

            document.getElementById('kpi-form').submit();
        }
    </script>
</x-backend.layouts.master>