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

    <x-hr/>

    <form id="form" action="{{ route('projects.subs.update', [$project, $sub]) }}" method="post"
          enctype="multipart/form-data">
        @csrf
        @method('PATCH')
        <div class="grid gap-6 mb-6 md:grid-cols-{{ $project->type == 'ImageProcessing' ? 10 : 6 }}">
            <div class="col-span-2">
                <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.name') }}
                </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="{{ __('forms.required') }}" value="{{ $sub->name }}"/>
            </div>
            @switch($project->type)
                @case('ImageProcessing')
                    <div class="col-span-2">
                        <label for="AR" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            AR (Augmented Reality)
                        </label>
                        <select id="AR" name="AR" onchange="SetAR(this)"
                                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="">
                                {{ __('forms.none') }}
                            </option>
                            @foreach($ars as $ar)
                                <option value="{{ $ar->uuid }}"
                                        data-url="{{ route('AR.GetAR', $ar) }}" @selected($sub->AR()->uuid == $ar->uuid)>
                                    {{ $ar->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @break
                @case('Panorama')
                    <div class="col-span-2">
                        <label for="type" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            {{ __('forms.PanoramaFileType') }}
                        </label>
                        <select id="type" name="type" onchange="SetType(this)"
                                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="photo" @selected($sub->Panorama->type == 'photo')>
                                {{ __('forms.photo') }}
                            </option>
                            <option value="video" @selected($sub->Panorama->type == 'video')>
                                {{ __('forms.video') }}
                            </option>
                        </select>
                    </div>
                    <div class="col-span-2">
                        <label for="file" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            {{ __('forms.UploadPhoto') }}
                        </label>
                        <input type="file" id="file" name="file" accept="image/*"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
                    </div>
                    @break
                @case('3D')
                    <div class="col-span-2">
                        <label for="icon" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Icon (Optional)
                        </label>
                        <input type="file" id="icon" name="icon" accept="image/*"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
                    </div>
                    <div class="col-span-2">
                        <label for="ground" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Ground Texture
                        </label>
                        <input type="file" id="ground" name="ground" accept="image/*"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <label for="px" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Sky Texture (px)
                        </label>
                        <input type="file" id="px" name="px" accept="image/*"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <label for="nx" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Sky Texture (nx)
                        </label>
                        <input type="file" id="nx" name="nx" accept="image/*"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <label for="py" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Sky Texture (py)
                        </label>
                        <input type="file" id="py" name="py" accept="image/*"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <label for="ny" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Sky Texture (ny)
                        </label>
                        <input type="file" id="ny" name="ny" accept="image/*"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <label for="pz" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Sky Texture (pz)
                        </label>
                        <input type="file" id="pz" name="pz" accept="image/*"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
                    </div>
                    <div class="col-span-2 sm:col-span-1">
                        <label for="nz" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Sky Texture (nz)
                        </label>
                        <input type="file" id="nz" name="nz" accept="image/*"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
                    </div>
                    @break
                @default
                    @break
            @endswitch
            <div class="sm:col-span-{{ in_array($project->type, ['VR', 'Location']) ? 4 : 6 }}">
                <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.description') }}
                </label>
                <textarea id="description" name="description"
                          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="1" placeholder="{{ __('forms.optional') }}">{{ $sub->description }}</textarea>
            </div>
        </div>
        @switch($project->type)
            @case('ImageProcessing')
                <div id="files">
                    @include('projects.subs.partial.ar', ['ar' => $sub->AR()])
                </div>
                @break
            @case('Panorama')
                <div class="flex justify-between items-center">
                    <h2 class="text-center text-3xl">
                        {{ __('forms.forms') }}
                    </h2>
                    <button type="button" onclick="AddItem(this)"
                            class="flex items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                        <i class="bi bi-plus-circle-fill sm:me-2"></i>
                        <span class="hidden sm:block">
                            {{ __('forms.AddForm') }}
                        </span>
                    </button>
                </div>
                <ul id="forms" class="space-y-2 mt-5">
                    @forelse($sub->Panorama->Items as $PanoramaItem)
                        @include('projects.subs.partial.panorama', $PanoramaItem)
                    @empty
                        {!! $item !!}
                    @endforelse
                </ul>
                @break
            @case('VR')
                <div class="grid gap-6 mb-6 md:grid-cols-2">
                    <div>
                        <div class="flex justify-between items-center">
                            <h2 class="text-center text-3xl">
                                {{ __('forms.send') }}
                            </h2>
                        </div>
                        <ul id="send" class="space-y-2 mt-5">
                            @include('projects.subs.partial.vr', ['type' => 'send', 'register' => $register, 'vr' => $sub->VR->firstWhere('type', 'send')])
                        </ul>
                    </div>
                    <div>
                        <div class="flex justify-between items-center">
                            <h2 class="text-center text-3xl">
                                {{ __('forms.receive') }}
                            </h2>
                        </div>
                        <ul id="receive" class="space-y-2 mt-5">
                            @include('projects.subs.partial.vr', ['type' => 'receive', 'register' => $register, 'vr' => $sub->VR->firstWhere('type', 'receive')])
                        </ul>
                    </div>
                </div>
                @break
            @case('Location')
                @include('projects.subs.partial.location', ['location' => $location, 'sub' => $sub])
                @break
            @case('3D')
                @include('projects.subs.partial.models', ['model' => $model, 'sub' => $sub])
                @break
            @default
                @break
        @endswitch

        <x-hr/>

        <button type="submit"
                class="flex items-center justify-center space-x-2 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-full 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"></i>
            <span>
                {{ __('forms.update') }}
            </span>
        </button>
    </form>

    <script>
        const item = '{!! str_replace(array("\r", "\n"), "", $item) !!}';

        function SetAR(box) {
            const selected = $(box).find(':selected');
            const value = selected.val();
            if (value != "") {
                SetLoading(true);
                const url = selected.data('url');
                $.ajax({
                    url: url,
                    type: 'GET',
                }).done(function (data) {
                    $('#files').html(data);
                }).fail(function (jqXHR, textStatus) {
                    window.swal.fire({
                        title: 'Error!',
                        text: 'Please contact support',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    });
                    console.log(textStatus);
                }).always(function () {
                    SetLoading(false);
                });
            } else {
                $('#files').html('');
            }
        }

        function SetType(box) {
            const selected = $(box).find(':selected');
            const value = selected.val();
            const fileInput = $('#file');
            if (value === "photo") {
                fileInput.prev().text('Upload Photo');
                fileInput.attr('accept', 'image/*');
            } else {
                fileInput.prev().text('Upload Video');
                fileInput.attr('accept', 'video/*');
            }
            CheckType()
        }

        function CheckType() {
            if ($('#type').find(':selected').val() === "photo") {
                $('.from').addClass('hidden');
                $('.to').addClass('hidden');
            } else {
                $('.from').removeClass('hidden');
                $('.to').removeClass('hidden');
            }
        }

        function AddItem() {
            $('#forms').append(item);
            CheckType();
        }
    </script>
@endsection