@extends('layouts.tenant', ['title' => 'Add new App'])

@section('content')
    <form action="{{ route('tenant.photobooths.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <x-section title="General settings" description="This information will be displayed publicly.">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">

                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="app_name" value="The name of your app" label-required="true"/>
                            <x-form.input id="app_name"
                                          name="app_name"
                                          type="text"
                                          required
                                          value="{{ old('app_name', '') }}"
                                          placeholder="My photo booth"/>
                            <x-form.input-error for="app_name"/>
                        </div>

                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="logo" value="App logo" label-required="true"/>
                            <x-form.input id="logo" name="logo" type="file" />
                            <x-form.input-error for="logo"/>
                        </div>

                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="notes" value="Notes" label-required="true"/>
                            <x-form.input id="notes"
                                          name="notes"
                                          type="text"
                                          required
                                          value="{{ old('notes', '') }}"
                                          placeholder="My photo booth"/>
                            <x-form.input-error for="notes"/>
                        </div>
                    </div>
                </div>

            </div>
        </x-section>

        <x-section-divider/>

        <x-section title="Domain settings" description="The sub domain that will be used to show your app.">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">

                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="is_restricted" value=""/>
                            <input type="checkbox" id="is_restricted" name="restricted"
                                   value="1" @checked(old('restricted')) /> Restricted secure URL
                            <x-form.input-error for="restricted_url"/>
                        </div>

                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="restricted_url" value="Secure URL"/>
                            <x-form.input id="restricted_url"
                                          name="restricted_url"
                                          type="text"
                                          value="{{ old('restricted_url', '') }}"
                                          placeholder="domain.app/AqsW34CvaAWEdcv"/>
                            <x-form.input-error for="restricted_url"/>
                        </div>

                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="is_domain" value=""/>
                            <input type="checkbox" id="is_domain" name="domain" value="1" @checked(old('domain'))/>
                            Custom domain
                            <x-form.input-error for="domain"/>
                        </div>

                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="domain_url" value="Branded domain or App Name" label-required="true"/>
                            <x-form.input id="domain_url"
                                          name="domain_url"
                                          type="text"
                                          value="{{ old('domain_url', '') }}"
                                          placeholder="domain.app/App1"/>
                            <x-form.input-error for="domain_url"/>
                        </div>


                    </div>
                </div>

            </div>
        </x-section>

        <x-section-divider/>

        <x-section title="Selfie + Take Photo" description="">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">
                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 mb-4">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="selfie" value=""/>
                            <input type="checkbox" id="selfie" name="selfie" value="1" @checked(old('selfie')) /> Upload
                            Selfie
                            <x-form.input-error for="selfie"/>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="take_photo" value=""/>
                            <input type="checkbox" id="take_photo" name="take_photo"
                                   value="1" @checked(old('take_photo')) /> Take Photo
                            <x-form.input-error for="take_photo"/>
                        </div>
                    </div>
                </div>

            </div>
        </x-section>

        <x-section-divider/>

        <x-section title="Devices" description="">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">
                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="devices" value="Devices" label-required="true"/>
                            <input type="checkbox" name="devices[]"
                                   value="Desktop" @checked(in_array('Desktop', old('devices', []))) /> Desktop
                            <input type="checkbox" name="devices[]"
                                   value="Mobile" @checked(in_array('Mobile', old('devices', []))) /> Mobile
                            <input type="checkbox" name="devices[]"
                                   value="Tablet" @checked(in_array('Tablet', old('devices', []))) /> Tablet
                            <x-form.input-error for="devices"/>
                        </div>
                    </div>
                </div>
            </div>
        </x-section>

        <x-section-divider/>

        <x-section title="Capture Mode" description="">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">
                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="photo_size" value="Photo Size" label-required="true"/>
                            <input type="radio" name="photo_size"
                                   value="Square" @checked(old('photo_size') === 'Square') /> Square
                            <input type="radio" name="photo_size"
                                   value="Portrait" @checked(old('photo_size') === 'Portrait') /> Portrait
                            <x-form.input-error for="photo_size"/>
                        </div>
                    </div>
                </div>
            </div>
        </x-section>

        <x-section-divider/>

        <x-section title="AR 3D Assets" description="">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">
                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="augmented_reality" value="Enable AR Mode"/>
                            <input type="checkbox" name="augmented_reality"
                                   value="1" @checked(old('augmented_reality')) /> Enabled
                            <x-form.input-error for="augmented_reality"/>
                        </div>
                    </div>
                    {{-- WIP --}}
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="ar_name" value="AR Asset Name"/>
                            <x-form.input id="ar_name" name="ar_name" type="text" value="{{ old('ar_name', '') }}"/>
                            <x-form.input-error for="ar_name"/>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="ar_asset_type" value="AR Asset Type"/>
                            <input type="radio" name="ar_asset_type" value="{{ $arAssetTypes::HEAD->value }}"
                                @checked(old('ar_asset_type') === $arAssetTypes::HEAD->value) /> Head
                            <input type="radio" name="ar_asset_type" value="{{ $arAssetTypes::FACE->value }}"
                                @checked(old('ar_asset_type') === $arAssetTypes::FACE->value) /> Face
                            <x-form.input-error for="ar_asset_type"/>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="ar_gltf_file" value="Upload 3D File .GLTF "/>
                            <x-form.input id="ar_gltf_file" name="ar_gltf_file" type="file" accept=".glb"/>
                            <x-form.input-error for="ar_gltf_file"/>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="ar_icon_file" value="Upload icon "/>
                            <x-form.input id="ar_icon_file" name="ar_icon_file" type="file" />
                            <x-form.input-error for="ar_icon_file"/>
                        </div>
                    </div>

                    <x-asset-selector :data-key="'arModal'" :request-key="'augmented_reality'"
                                      :media-collection="$arAssets" :button-label="'Tenant Assets'"
                                      :asset-display-label="'Selected AR Assets'"/>

                </div>
            </div>
        </x-section>
        <x-section-divider/>

        <x-section title="Photo Frames" description="">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">
                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="frames" value="Enable Photo Frames"/>
                            <input type="checkbox" name="frames" value="1" @checked(old('frames')) /> Enabled
                            <x-form.input-error for="frames"/>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="frame_orientation" value="Frame Orientation"/>
                            <input type="radio" name="frame_orientation"
                                   value="square" @checked(old('frame_orientation') === 'square') /> Square
                            <input type="radio" name="frame_orientation"
                                   value="portrait" @checked(old('frame_orientation') === 'portrait') /> Portrait
                            <x-form.input-error for="frame_orientation"/>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 mb-4">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="frame_files" value="Uploaded Frames"/>
                            <x-form.input id="frame_files" name="frame_files[]" type="file"  multiple/>
                            <x-form.input-error for="frame_files"/>
                        </div>
                    </div>

                    <div
                        x-data="{ ids: [], urls: [], addImage(id, url) { this.ids.push(id); this.urls.push(url) }, frameModal: false }">
                        <button @click="frameModal =!frameModal" type="button"
                                class="flex items-center justify-center px-3 py-2 space-x-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:bg-indigo-700 hover:bg-indigo-600 focus:outline-none focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-50">
                            <span>Tenant Assets</span>
                        </button>
                        <p>Selected frames: </p>
                        <input type="hidden" name="media[frames]" x-bind:value="ids"/>

                        <template x-for="url in urls">
                            <img x-bind:src="url" alt="" width="100"/>
                        </template>

                        <x-modal modelVar="frameModal">
                            <ul>
                                @foreach(Arr::get($assets, 'frames.tenant', []) as $media)
                                    <li>
                                        <img src="{{ $media->get_normal_url }}"
                                             width="100"
                                             data-media-id="{{$media->id}}"
                                             @click="addImage('{{$media->id}}', '{{ $media->get_normal_url }}')"
                                        />
                                    </li>
                                @endforeach
                            </ul>
                        </x-modal>
                    </div>

                    {{-- Tenant Assets and Admin Assets pending --}}
                </div>
            </div>
        </x-section>

        <x-section-divider/>

        <x-section title="Virtual Background Assets" description="">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">
                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="is_backdrop_enabled" value="Enable Virtual Backgrounds"/>
                            <input type="checkbox" name="is_backdrop_enabled" value="1" @checked(old('is_backdrop_enabled')) /> Enabled
                            <x-form.input-error for="is_backdrop_enabled"/>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 mb-4">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="backdrop_files" value="Uploaded"/>
                            <x-form.input id="backdrop_files" name="backdrop_files[]" type="file"  multiple/>
                            <x-form.input-error for="backdrop_files"/>
                        </div>
                    </div>

                    <x-asset-selector :data-key="'backdropModal'" :request-key="'backgrounds'"
                                      :media-collection="Arr::get($assets, 'backgrounds.tenant', [])"
                                      :button-label="'Tenant Assets'" :asset-display-label="'Selected backdrops'"/>

                    {{-- Tenant Assets and Admin Assets pending --}}
                </div>
            </div>
        </x-section>

        <x-section-divider/>

        <x-section title="Stickers" description="">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">
                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="is_sticker_enabled" value="Enable Stickers"/>
                            <input type="checkbox" name="is_sticker_enabled" value="1" @checked(old('is_sticker_enabled')) /> Enabled
                            <x-form.input-error for="is_sticker_enabled"/>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="sticker_files" value="Uploaded"/>
                            <x-form.input id="sticker_files" name="sticker_files[]" type="file"  multiple/>
                            {{-- Array required for these images --}}
                            <x-form.input-error for="sticker_files"/>
                        </div>
                    </div>

                    <x-asset-selector :data-key="'filterModal'" :request-key="'stickers'" :media-collection="$stickers"
                                      :button-label="'Tenant Assets'" :asset-display-label="'Selected Stickers'"/>

                    {{-- Tenant Assets and Admin Assets pending --}}
                </div>
            </div>
        </x-section>

        <x-section-divider/>

        <x-section title="Filters" description="">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">
                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="filter" value="Enable Filters"/>
                            <input type="checkbox" name="filter" value="1" @checked(old('filter')) /> Enabled
                            <x-form.input-error for="filter"/>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <x-form.label for="filters" value="filters"/>

                            <div class=" inline-block">
                                @foreach ($filters as $filter)
                                    <span class="mr-2">
                                    <input type="checkbox" name="filters[]" value="{{ $filter->id }}"
                                        @checked(in_array($filter->id, old('filters', []))) /> {{ $filter->name }} <img
                                            src="{{ $filter->url }}" alt="{{ $filter->name }}" class="h-6 w-6">
                                </span>
                                    <br>
                                @endforeach
                            </div>
                            <x-form.input-error for="filters"/>
                        </div>
                    </div>
                    {{-- filters[] dynamic TBD --}}
                </div>
            </div>
        </x-section>

        <x-section-divider/>

        <x-section title="" description="">
            <div class="mt-4 md:mt-0 w-full md:w-2/3 pl-0 md:pl-2">
                <div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="col-span-12 sm:col-span-4">
                            <a href="{{ route('tenant.photobooths.index') }}">
                                <button type="button"
                                        class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 mx-4 rounded">
                                    Cancel
                                </button>
                            </a>
                            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mx-4 rounded"
                                    name="status"
                                    value="{{ App\Enums\PhotoboothStatus::DRAFT }}">
                                Save
                            </button>
                            <button class="bg-blue-500 hover:bg-green-700 text-white font-bold py-2 px-4 mx-4 rounded"
                                    name="status"
                                    value="{{ App\Enums\PhotoboothStatus::LIVE }}">
                                Save and Publish
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </x-section>

    </form>
@endsection