@extends('layouts.master')

@section('body')
    <h3 class="text-orange-400 text-base md:text-3xl font-medium">Loglar</h3>
    <div class="flex flex-col mt-8">
        <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
            <div>
                <form action="{{ route('logs.index') }}" method="get">
                    <div class="grid md:grid-cols-3 mt-4 gap-3 mb-4">
                        <div>
                            <label class="text-gray-700" for="user">İstifadəçi</label>
                            <select id="user" name="user_id"
                                class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                <option value="" selected>İstifadəçi seçin</option>
                                @foreach ($users as $user)
                                    <option {{ $user_id && $user_id == $user->id ? 'selected' : '' }}
                                        value="{{ $user->id }}">{{ $user->email }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="text-gray-700" for="start_date">Giriş tarixindən</label>
                            <input value="{{ $start_date ? $start_date : '' }}" name="start_date" id="start_date" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="datetime-local">
                        </div>
                        <div>
                            <label class="text-gray-700" for="end_date">Giriş tarixinədək</label>
                            <input value="{{ $end_date ? $end_date : '' }}" name="end_date" id="end_date" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="datetime-local">
                        </div>
                        <div class="self-end">
                            <button type="submit"
                                class="w-full px-4 py-2 bg-green-500 border-2 border-green-500 text-white rounded-md hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-400">Axtar</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
                <table class="min-w-full text-center">
                    <thead>
                        <tr>
                            <th
                                class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                İstifadəçi
                            </th>
                            <th
                                class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                Əməliyyat
                            </th>
                            <th
                                class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                Model / Id
                            </th>
                            <th
                                class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                Məlumat
                            </th>
                            <th
                                class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                Tarix
                            </th>
                        </tr>
                    </thead>
    
                    <tbody class="bg-white">
                        @foreach ($logs as $log)
                            <tr>
                                <td class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                    {{$log->user->email}}
                                </td>
                                <td class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                    {{$log->action}}
                                </td>
                                <td class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                    {{class_basename($log->model_type) . '/' . $log->model_id}}
                                </td>
                                <td class="px-2 py-2 md:!px-6 md:!py-4 whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                    <div class="text-xs md:text-base">
                                        <json-viewer
                                            data='{{ $log->changes }}'
                                            expand="2"
                                            theme="light"
                                        ></json-viewer>
                                    </div>
                                </td>
                                <td class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                    {{$log->created_at}}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="flex items-center justify-center my-2">
                    @include('components.pagination', ['paginator' => $logs])
                </div>
            </div>
        </div>
    </div>
    
@endsection

@section('script')
<script>
    $(document).ready(function() {
        
    });
</script>
@endsection