@extends('layouts/eatvio')
@php
    $curDiaryDate = \Carbon\Carbon::createFromFormat('Y-m-d', $curDiary->date)->format('d-m-Y');
    $cities = ['London', 'Berlin', new Yourk()];
@endphp
@section('main_section')
    <section class="py-5 diary" id="main">
        <div class="diary__container container-sm">
            <div class="diary__header">
                <a href="{{ route('calendar.index') }}" class="text-black diary__back icon-arrow-short-left">
                    <span class="">{{ __('diary.calendar') }}</span>
                </a>
                <div class="diary__info">
                    <div class="diary__info-current">
                        <a class="link-dark" href="{{ route('calendar.index') }}">{{ $daysCount }}
                            {{ __('meal_form.day') }}</a>
                    </div>
                    <div class="diary__info-date"><a href="{{ route('calendar.index') }}">{{ $curDiaryDate }}</a></div>
                </div>
            </div>
        </div>
        <form method="post" action="{{ route('diary.update', $curDiary) }}">
            @method('PATCH')
            @csrf

            <div class="diary__container container-sm" x-data="{ open: false }">
                <div class="diary__caption title">{{ __('meal_form.wakeup_and_down_time') }}
                    <span class="text-eblue icon-down" x-bind:style="open ? 'rotate: 180deg' : ''"
                        x-on:click="open = !open"></span>
                </div>
                <div x-bind:class="open ?
                    'container flex-wrap py-2 px-0 mb-4 d-flex justify-content-between align-items-center --mw-1000 flex-md-nowrap' :
                    'hidden'"
                    x-transition style="display: none;" x-show="open">

                    <div
                        class="py-3 px-5 mb-3 text-center w-100 w-md-50 me-md-4 mb-md-0 --bg_white --shadow --radius --f_bold --no_wrap">
                        <p>{{ __('diary.waking_time') }}</p>
                        <div class="mx-2 d-flex align-items-center justify-content-center position-relative">
                            <svg width="24" height="24" class="--input_inline_left_icon">
                                <use xlink:href="#Clock"></use>
                            </svg>
                            <input name="wakeup" type="time"
                                class="py-2 text-center form-control --f_blue --f_bold fs-6"
                                value="{{ $curDiary->wakeup }}" placeholder="06:30" required="" />
                        </div>
                    </div>
                    <div class="py-3 px-5 text-center w-100 w-md-50 --bg_white --shadow --radius --f_bold --no_wrap">
                        <p>{{ __('diary.bedtime') }}</p>
                        <div class="mx-2 d-flex align-items-center justify-content-center position-relative">
                            <svg width="26" height="24" class="--input_inline_left_icon">
                                <use xlink:href="#Sleep"></use>
                            </svg>
                            <input name="retire" type="time"
                                class="py-2 text-center form-control --f_blue --f_bold fs-6"
                                value="{{ $curDiary->retire }}" placeholder="22:30" required="" />
                        </div>
                    </div>
                </div>

            </div>

            @livewire('diary.meal-form', ['diaryId' => $diaryId])
            <div class="diary__container container-sm">
                <div class="diary__extras">
                    <div class="diary__extras-caption">{{ __('meal_form.additional_info_for_consultant') }}</div>
                    <textarea name="comment" value="{{ $curDiary->comment ?? '' }}" class="textarea"
                        placeholder="{{ __('meal_form.additional_info_placeholder') }}"></textarea>
                </div>
                <button class="w-full diary__btn l-btn l-btn-primary l-btn-fullwidth"
                    type="submit">{{ __('meal_form.end_the_day') }}</button>

            </div>
        </form>
    </section>
    @once
        @push('jq_scripts')
            <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
            <script>
                function initializeSwiper(initedFrom = null) {
                    var mySwiper = new Swiper('.diary__product-slider', {
                        loop: true,
                        speed: 800,
                        slidesPerView: 1,
                        observeSlideChildren: true,
                        observer: true,
                        navigation: {
                            nextEl: '.diary__product-next',
                            prevEl: '.diary__product-prev',
                        },
                    });
                    if (initedFrom == "morph-updated") {
                        lastSlideIndex = mySwiper.slides.length - 1;
                        mySwiper.slideTo(lastSlideIndex, 1);
                    }
                    console.log('inited from ' + initedFrom);
                    window._mySwiper = mySwiper;
                }
                const onEvents = [
                    'livewire:initialized',
                    'photo-form-changed',
                    'photo-form-changed-file',
                    'photo-form-changed-rendered',
                    'food-intake-updated',
                    'meal-form-rendered',
                    'photo-form-photos-updated',
                    'photo-form-rendered'
                ];
                onEvents.forEach((eventName) => {
                    document.addEventListener(eventName, () => {
                        if (eventName === 'livewire:initialized') {
                            Livewire.hook('morph.updated', ({
                                el,
                                component
                            }) => {
                                if (component.name == 'diary.meal-photos' && el.className.includes(
                                        'diary__product-next')) {
                                    initializeSwiper('diary.meal-photos-component-moph-updated');
                                }
                            });
                        }
                        initializeSwiper(eventName);
                    });
                });
            </script>
        @endpush
    @endonce
@endsection