@extends('layouts.app')
@section('title', $title = __('navbar.profile'))
@section('content')
    <x-page-header>
        <x-slot name="center">
            <x-page-title :title=$title/>
        </x-slot>
    </x-page-header>
    
    <form action="{{ route('users.profile', $user) }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mt-5 grid gap-6 mb-6 md:grid-cols-3">
            <div
                class="rounded-lg bg-gray-300 dark:bg-gray-700 p-5 flex flex-col justify-center items-center hover:shadow-lg space-y-5">
                <div class="relative group w-32 h-32">
                    <button type="button" id="file-actions" onclick="Discard(this)"
                            class="hidden absolute text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-full z-30 px-2 py-1 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
                        <i class="bi bi-trash3-fill"></i>
                    </button>
                    <img src="{{ $user->ProfilePic() }}" alt="Profile"
                         class="w-full h-full object-cover rounded-full opacity-50 sm:opacity-100 sm:group-hover:opacity-50">
                    <div
                        class="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 rounded-full sm:opacity-0 group-hover:opacity-100 transition-opacity">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="w-10 h-10 text-white"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M12 4.5c-1.495 0-2.872.53-4 1.5H5.5a1.5 1.5 0 00-1.5 1.5v10a1.5 1.5 0 001.5 1.5h13a1.5 1.5 0 001.5-1.5v-10a1.5 1.5 0 00-1.5-1.5H16c-1.128-.97-2.505-1.5-4-1.5zM12 15a3 3 0 100-6 3 3 0 000 6z"
                            />
                        </svg>
                    </div>
                    <input type="file" id="profile-picture" name="picture" accept="image/*"
                           class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                </div>
                <div id="file-actions" class="hidden space-x-2 mt-2">
                    <button type="button" onclick="Discard(this)"
                            class="flex items-center text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
                        <i class="bi bi-trash3-fill me-2"></i>
                        <span>
                            {{ __('table.remove') }}
                        </span>
                    </button>
                </div>
                <div class="sm:flex sm:items-center sm:space-x-3 max-sm:space-y-3 w-full">
                    <div class="w-full">
                        <label for="first_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            {{ __('user.firstname') }}
                        </label>
                        <input type="text" id="first_name" name="first_name" required
                               class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                               placeholder="John" value="{{ $user->Profile->first_name }}"/>
                    </div>
                    <div class="w-full">
                        <label for="last_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            {{ __('user.lastname') }}
                        </label>
                        <input type="text" id="last_name" name="last_name" required
                               class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                               placeholder="Doe" value="{{ $user->Profile->last_name }}"/>
                    </div>
                </div>
                <div class="w-full">
                    <label for="address" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                        {{ __('forms.address') }}
                    </label>
                    <textarea id="address" name="address"
                              class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                              rows="4">{{ $user->Profile?->address }}</textarea>
                </div>
                <strong>
                    Real-Time Service
                </strong>
                <div class="flex items-center justify-between w-full">
                    <div class="flex items-center">
                        <input type="radio" id="echo" name="service" @checked($user->Profile->service == 'echo')
                                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                value="echo">
                        <label for="echo" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                            Reverb-Echo Service
                        </label>
                    </div>
                    <div class="flex items-center">
                        <input type="radio" id="mqtt" name="service" @checked($user->Profile->service == 'mqtt')
                                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                value="mqtt">
                        <label for="mqtt" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                            MQTT Service
                        </label>
                    </div>
                </div>

            </div>
            <div class="sm:col-span-2 space-y-6">
                <div class="rounded-lg bg-gray-300 dark:bg-gray-700 p-5 hover:shadow-lg">
                    <h2 class="text-2xl text-center">
                        {{ __('user.PersonalInformation') }}
                    </h2>
                    <hr class="my-5 border-gray-400 dark:border-gray-600">
                    <div class="grid gap-6 md:grid-cols-4">
                        <div>
                            <label for="gender" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('user.gender') }}
                            </label>
                            <select id="gender" name="gender"
                                    class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                <option value="male" @selected($user->Profile?->gender == 'male')>
                                    {{ __('user.male') }}
                                </option>
                                <option value="female" @selected($user->Profile?->gender == 'female')>
                                    {{ __('user.female') }}
                                </option>
                            </select>
                        </div>
                        <div>
                            <label for="birthday" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('user.birthday') }}
                            </label>
                            @include('shared.date', ['name' => 'birthday', 'id' => 'birthday', 'to' => 'today', 'value' => ($user->Profile?->birthday ?? '')])
                        </div>
                        <div>
                            <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('table.email') }}
                            </label>
                            <input type="email" id="email" name="email"
                                   class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                   value="{{ $user->email }}"/>
                        </div>
                        <div>
                            <label for="phone_number"
                                   class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('table.phone_number') }}
                            </label>
                            <input type="tel" id="phone_number" name="phone_number"
                                   class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                   value="{{ $user->phone_number }}"/>
                        </div>
                    </div>
                </div>
                <div class="rounded-lg bg-gray-300 dark:bg-gray-700 p-5 hover:shadow-lg">
                    <h2 class="text-2xl text-center">
                        {{ __('user.DateTimeLanguage') }}
                    </h2>
                    <hr class="my-5 border-gray-400 dark:border-gray-600">
                    <div class="grid gap-6 md:grid-cols-3">
                        <div>
                            <label for="language" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('table.language') }}
                            </label>
                            <select id="language" name="language"
                                    class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                @foreach($languages as $key => $language)
                                    <option value="{{ $key }}" @selected($user->Profile?->language == $key)>
                                        {{ __('navbar.languages.' . $key) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="calendar" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('user.CalendarDateTime') }}
                            </label>
                            <select id="calendar" name="calendar"
                                    class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                @foreach($calendars as $calendar)
                                    <option value="{{ $calendar }}" @selected($user->Profile?->calendar == $calendar)>
                                        {{ __('user.calendar.' . $calendar) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="timezone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('user.timezone') }}
                            </label>
                            <select id="timezone" name="timezone"
                                    class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                @foreach(timezone_identifiers_list() as $timezone)
                                    <option value="{{ $timezone }}" @selected($user->Profile?->timezone == $timezone)>
                                        {{ $timezone }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="rounded-lg bg-gray-300 dark:bg-gray-700 p-5 hover:shadow-lg">
                    <h2 class="text-2xl text-center">
                        {{ __('user.security') }}
                    </h2>
                    <hr class="my-5 border-gray-400 dark:border-gray-600">
                    <div class="grid gap-6 md:grid-cols-3">
                        <div>
                            <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('table.username') }}
                            </label>
                            <input type="text" id="name" name="name" required
                                   class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                   placeholder="John" value="{{ $user->name }}"/>
                        </div>
                        <div>
                            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('table.password') }}
                            </label>
                            <input type="password" id="password" name="password"
                                   class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            />
                        </div>
                        <div>
                            <label for="password_confirmation"
                                   class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('user.ConfirmPassword') }}
                            </label>
                            <input type="password" id="password_confirmation" name="password_confirmation"
                                   class="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex justify-center">
            <button type="submit"
                    class="hidden sm:flex items-center text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                <i class="bi bi-arrow-up-circle-fill me-2"></i>
                <span>
                {{ __('table.update') }}
            </span>
            </button>
            <button type="submit" class="sm:hidden fixed bottom-4 right-4 rounded-full text-green-500 z-30">
                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor"
                     class="bi bi-check-circle-fill" viewBox="0 0 16 16">
                    <path
                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
            </button>
        </div>
    </form>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            $('#profile-picture').on('change', function (event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        $('.group img').attr('src', e.target.result).addClass('border-2 p-1');
                    };
                    reader.readAsDataURL(file);
                    $('#file-actions').removeClass('hidden').addClass('flex');
                }
            });
        });

        function Discard(btn) {
            $('.group img').attr('src', '{{ $user->ProfilePic() }}').removeClass('border-2 p-1');
            $('#file-actions').removeClass('flex').addClass('hidden');
        }
    </script>
@endsection