@extends('layouts.master')

@section('title', 'Express54')

@section('content')



    <div class="homesection">
        <!-- <div class="homesec">
            <img src="{{ asset('/assets/image/logo.png') }}" class="homelogo" alt="Icon">
        </div> -->
    </div>

    <!-- table -->
    <div class="admin_bg" style="min-height: calc(100vh - 110px)">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 d-flex justify-content-end mt-3">
                        <td><a href="{{ url('admin/addsupervisor') }}" class="btn btn-lg px-3 superbutton"><i
                                    class="fa-solid fa-plus"></i>
                                @lang('messages.add_Supervisor')</a>

                            <!-- <a href="{{ url('admin/countrybanner') }}" class="btn btn-lg px-3 superbutton">
                                <i class="fa-solid fa-list"></i> @lang('messages.country_banner')</a>

                            <a href="{{ url('admin/viewembassy') }}" class="btn btn-lg px-3 superbutton">
                                <i class="fa-solid fa-list"></i> @lang('messages.embassy_list')</a> -->
                        </td>

                    </div>
                    <div id="alert-container">
                        @if (Session('error'))
                            <div class="alert alert-warning" role="alert">
                                {{ Session('error') }}
                            </div>
                        @endif

                        @if (Session('success'))
                            <div class="alert alert-success" role="alert">
                                {{ Session('success') }}
                            </div>
                        @endif
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                var alertContainer = document.getElementById("alert-container");
                                if (alertContainer) {
                                    setTimeout(function() {
                                        alertContainer.remove();
                                    }, 5000);
                                }
                            });
                        </script>
                    </div>

                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body hometabel">
                            <h4 class="fw-bold mb-5 custom-heading">@lang('messages.user_list')</h4>
                            <table class="table" id="tablelist">
                                <thead class="table-light">
                                    <tr>
                                        <th>@lang('messages.name')</th>
                                        <th>@lang('messages.last_name')</th>
                                        <th>@lang('messages.role')</th>
                                        <th>@lang('messages.email')</th>
                                        <th>@lang('messages.country')</th>
                                        <th>@lang('messages.embassies')</th>
                                        <th>@lang('messages.action')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($user as $user)
                                        <tr>
                                            <td>{{ $user->fname }}</td>
                                            <td>{{ $user->lname }}</td>
                                            <td>{{ $user->role }}</td>
                                            <td>{{ $user->email }}</td>
                                            <td>{{ App\Models\Country::where('id', $user->country)->pluck('title')->first() }}

                                            <td>
                                                @if ($user->embassies == 'No embassy')
                                                    {{-- @lang('messages.no_embassy'); --}}
                                                    No Embassy
                                                @elseif ($user->embassies)
                                                    {{ App\Models\Embassy::where('id', $user->embassies)->pluck('name')->first() }}
                                                @else
                                                    {{-- @lang('messages.no_embassy_associated') --}}
                                                    No Embassy Associated
                                                @endif
                                            </td>

                                            <td><a href="{{ route('editsupervisor', ['id' => $user->id]) }}"
                                                    class="btn btn-sm btn-"><i class="fa-solid fa-pen"></i></a>

                                                <a href="{{ route('deletesupervisor', ['id' => $user->id]) }}"
                                                    class="btn btn-sm text-danger"
                                                    onclick="return confirm('Are you sure you want to delete this item?')"><i
                                                        class="fa-solid fa-trash"></i></a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4">no data available
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <script>
                                $(document).ready(function() {
                                    // Destroy and Initialize Expedited Table
                                    if ($.fn.DataTable.isDataTable('#tablelist')) {
                                        $('#tablelist').DataTable().destroy();
                                    }
                                    $('#tablelist').DataTable();
                                });
                            </script>

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

@endsection