@extends('layouts.app')
@section('title', $title = $form->name)
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => __('form.index'), 'url' => route('forms.index')],
                ['label' => $title, 'url' => '']
            ]" />
        </x-slot>

        <x-slot name="right">
            @include('shared.button', ['type' => 'delete', 'url' => route('forms.destroy', $form)])
        </x-slot>
    </x-page-header>

    <x-hr/>

    <ul class="space-y-5">
        <li>
            {{ __('forms.name') }} : {{ $form->name }}
        </li>
        <li>
            {{ __('forms.user') }} : {{ $form->User?->name ?? '---' }}
        </li>
        <li>
            {{ __('forms.CreatedAt') . ' : ' . CheckDateTime($form->created_at, 'show', 'FullDateTime') }}
        </li>
        <li>
            {{ __('forms.UpdatedAt') . ' : ' . CheckDateTime($form->updated_at, 'show', 'FullDateTime') }}
        </li>
    </ul>
    
    <iframe src="{{ route('forms.content', $form) }}" width="100%" height="500" class="mt-5"></iframe>

    <x-hr/>

    <script>
        $(document).ready(function () {
            const dropBox = document.querySelector('#dropBox');
            if (window.matchMedia("(max-width: 640px)").matches) {
                dropBox.style.transform = "scale(0.4)";
            } else if (window.matchMedia("(max-width: 1024px)").matches) {
                dropBox.style.transform = "scale(0.67)";
            } else {
                dropBox.style.transform = "scale(1)";
            }
            dropBox.style.transformOrigin = "center";
        });
    </script>
@endsection