@section('title')
    Users
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.2/css/dataTables.dataTables.css" />
    <script src="https://cdn.datatables.net/2.1.2/js/dataTables.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <style>
        div.dt-container select.dt-input{
            width: 60px !important;
        }
    </style>
@endsection

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            @lang('messages.user')
        </h2>
        <div class="flex gap-4">
            <a href="{{ route('create.user') }}" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">@lang('messages.new')</a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <table class="w-full table-fixed responsive" id="users">
                        <thead>
                            <tr>
                                <th>@lang('messages.name')</th>
                                <th>@lang('messages.email')</th>
                                <th>@lang('messages.phone')</th>
                                <th style="text-align: center;">@lang('messages.created_at')</th>
                                <th style="text-align: center;">@lang('messages.actions')</th>
                            </tr>
                        </thead>
                        <tbody class="text-[13px]">
                            @if (count($users) > 0)
                                @foreach ($users as $user)
                                    @if ($user->id != auth()->user()->id && $user->email != "fatihbarissahan@gmail.com")
                                        <tr>
                                            <td class="whitespace-nowrap overflow-hidden text-ellipsis">{{ $user->name." ".$user->last_name }}</td>
                                            <td class="whitespace-nowrap overflow-hidden text-ellipsis">{{ $user->email }}</td>
                                            <td class="whitespace-nowrap overflow-hidden text-ellipsis">{{ $user->phone }}</td>
                                            <td class="whitespace-nowrap overflow-hidden text-ellipsis" style="text-align: center;">{{ $user->created_at->format('d/m/Y') }}</td>
                                            <td style="text-align: center;">
                                                <div class="w-full flex justify-center gap-4">
                                                    <a href="/user/{{ $user->id }}/edit"><ion-icon name="create-outline"></ion-icon></a>
                                                    <form method="post" action="{{ url('user/'.$user->id) }}" method="user">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit"><ion-icon name="trash-outline"></ion-icon></button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>      
                                    @endif
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready( function () {
            $('#users').DataTable({
                order: [ 0, "desc" ],
                language: {
                    url: '/files/{{ app()->getLocale() }}.json',
                },
                responsive: true
            });
        });
    </script>
</x-app-layout>