@extends('layouts.app')

@section('content')
    {{-- @include('components.profile') --}}
    {{-- @include('components.sidebar') --}}
    <div class="main-container h-screen">
        <div class="mt-32 lg:mt-12 ml-4 mr-4">
            <div class="overflow-x-auto shadow-md sm:rounded-lg">
                <table class="w-full text-sm text-left text-gray-300 ">
                    <thead class="text-xs text-gray-300 uppercase bg-theme_secondary_black">
                        <tr>
                            <th scope="col" class="px-6 py-3">
                                Id
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Ad
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Soyad
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Telefon
                            </th>
                            <th scope="col" class="px-6 py-3">
                                İşlemler
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($users as $user)
                            <tr class="bg-teheme_third_black border-b border-theme_black">
                                <td class="px-6 py-4 font-medium text-gray-300 whitespace-nowrap">
                                    {{ $user->id }}
                                </td>
                                <td class="px-6 py-4">
                                    {{ $user->name }}
                                </td>
                                <td class="px-6 py-4">
                                    {{ $user->surname }}
                                </td>
                                <td class="px-6 py-4">
                                    {{ $user->tel }}
                                </td>
                                <td class="px-6 py-4">
                                    <button type="submit" value="{{ $user->id }}"
                                        class="assignPermission font-medium text-gray-300 hover:underline">Düzenle</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="assign-menu mt-12 ml-4 lg:w-96 ">
            <form action="{{ route('root.update') }}" method="POST" class="w-full rounded-lg p-4 bg-theme_secondary_black" onsubmit="showLoading()">
                @csrf
                <div class=" flex flex-col w-full mt-2">
                    <span class="uppercase text-sm text-gray-300">Ad</span>
                    <input id="name" type="text" name="name"
                        class="focus:shadow-lg focus:shadow-teheme_third_black mt-2 rounded-lg bg-teheme_third_black border border-theme_secondary_gray text-gray-300 focus:ring-theme_black focus:border-theme_black">
                </div>
                <div class=" flex flex-col w-full mt-6">
                    <span class="uppercase text-sm text-gray-300">Soyad</span>
                    <input id="surname" type="text" name="surname"
                        class="focus:shadow-lg focus:shadow-teheme_third_black mt-2 rounded-lg bg-teheme_third_black border border-theme_secondary_gray text-gray-300 focus:ring-theme_black focus:border-theme_black">
                </div>
                <div class=" flex flex-col w-full mt-6">
                    <span class="uppercase text-sm text-gray-300">Telefon</span>
                    <input id="tel" type="text" name="tel"
                        class="focus:shadow-lg focus:shadow-teheme_third_black mt-2 rounded-lg bg-teheme_third_black border border-theme_secondary_gray text-gray-300 focus:ring-theme_black focus:border-theme_black">
                </div>
                <div class=" flex flex-col w-full mt-6">
                    <span class="uppercase text-sm text-gray-300">Yetki</span>
                    <select name="permission" id='permission'
                        class="mt-2 block rounded-lg bg-teheme_third_black border border-theme_secondary_gray text-gray-300 focus:ring-theme_black focus:border-theme_black">
                        {{-- <option value="" disabled selected class="uppercase default">Bir Yetki Secin</option> --}}
                        @foreach (Spatie\Permission\Models\Role::all() as $role)
                            <option value="{{ $role->id }}" class="uppercase focus:ring-white">{{ $role->title }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col w-full mt-6 p-">
                    <button id="user-id" name="user_id"
                        class="text-gray-300 border font-bold transition duration-500 border-theme_secondary_gray rounded-lg p-2 uppercase hover:bg-theme_gray hover:border-theme_black hover:text-theme_secondary_black">Kaydet</button>
                </div>
            </form>
        </div>
    </div>
    <style>
        .assign-menu {
            max-height: 0px;
            overflow: hidden;
            transition: max-height 4s;
        }

        .assign-menu.active {
            max-height: 100%;
        }
    </style>
@endsection
@section('javscript')
    <script>
        $(document).ready(function() {
            $('.assignPermission').click(function() {
                console.log('asd');
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                var menu = $('.assign-menu');
                menu.addClass('active');

                var id = $(this).val();
                $.ajax({
                    url: 'api/getSelectedUser',
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                    data: JSON.stringify({
                        id: id
                    }),
                    success: function(data) {
                        $('#name').val(data.name);
                        $('#name').text(data.name);
                        $('#surname').val(data.surname);
                        $('#surname').text(data.surname);
                        $('#tel').val(data.tel);
                        $('#tel').text(data.tel);
                        $('#user-id').val(data.id);
                        $('#permission').find('option:disabled').remove();
                        $('#permission').append(
                            '<option value="" disabled selected class="uppercase hidden default">' +
                            data.roles[0].name + '</option>')
                    },
                    error: function(xhr, status, error) {
                        console.error('Hata: ' + error);
                    }
                });
            });
        });
    </script>
@endsection