@extends('layouts.tenant', ['title' => $photobooth->app_name])

@section('content')
    <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"/>
                        <x-form.input id="app_name" name="app_name" type="text" required
                                      value="{{ $photobooth->app_name }}"
                                      readonly/>
                    </div>

                    <div class="col-span-12 sm:col-span-4">
                        <x-form.label for="logo" value="App logo"/>
                        <div class="px-6 py-4">
                            <img class="h-10 w-10 rounded-full" src="{{ $photobooth->logo_url }}" alt="app logo">
                        </div>
                    </div>

                    <div class="col-span-12 sm:col-span-4">
                        <x-form.label for="notes" value="Notes"/>
                        <x-form.input id="app_name" name="app_name" type="text" value="{{ $photobooth->notes }}"
                                      readonly/>
                    </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($photobooth->restricted) /> Restricted secure 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="{{ $photobooth->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($photobooth->domain) />
                        Custom domain
                    </div>

                    <div class="col-span-12 sm:col-span-4">
                        <x-form.label for="domain_url" value="Secure URL"/>
                        <x-form.input id="domain_url" name="domain_url" type="text"
                                      value="{{ $photobooth->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 gap-6">
                    <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($photobooth->selfie) />
                        Upload 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($photobooth->take_photo) /> 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"/>
                        <input type="checkbox" name="devices[]"
                               value="Desktop" @checked(in_array('Desktop', $photobooth->devices)) /> Desktop
                        <input type="checkbox" name="devices[]"
                               value="Mobile" @checked(in_array('Mobile', $photobooth->devices)) /> Mobile
                        <input type="checkbox" name="devices[]"
                               value="Tablet" @checked(in_array('Tablet', $photobooth->devices)) /> Tablet
                    </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"/>
                        <input type="radio" name="photo_size"
                               value="Square" @checked($photobooth->photo_size === 'Square') /> Square
                        <input type="radio" name="photo_size"
                               value="Portrait" @checked($photobooth->photo_size === 'Portrait') /> Portrait
                    </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($photobooth->augmented_reality) />
                        Enabled
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-6">
                    <div class="col-span-12 sm:col-span-4">
                        AR files
                        @foreach ($photobooth->augmentedRealities as $augmentedReality)
                            <div class="m-4 p-4">
                                <img class="h-10 w-10 rounded-full" src="{{ $augmentedReality->icon->get_thumb_url }}"
                                     alt="">
                            </div>
                        @endforeach
                    </div>
                </div>
            </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($photobooth->frames) />
                        Enabled
                    </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($photobooth->frame_orientation === 'Square') />
                        Square
                        <input type="radio" name="frame_orientation"
                               value="Portrait" @checked($photobooth->frame_orientation === 'Portrait') />
                        Portrait
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-6">
                    <div class="col-span-12 sm:col-span-4">
                        <x-form.label for="frame_files" value="Uploaded Frames"/>
                        @foreach ($photobooth->media->whereIn('collection_name', [$mediaCollections::FRAME_SQUARE->value, $mediaCollections::FRAME_PORTRAIT->value]) as $item)
                            <div class="m-4 p-4">
                                <img class="h-10 w-10 rounded-full" src="{{ $item->get_normal_url }}" alt="">
                            </div>
                        @endforeach
                    </div>
                </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($photobooth->is_backdrop_enabled) />
                        Enabled
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-6">
                    <div class="col-span-12 sm:col-span-4">
                        <x-form.label for="backdrop_files" value="Uploaded"/>
                        @foreach ($photobooth->getMedia($mediaCollections::BACKDROPS->value) as $item)
                            <div class="m-4 p-4">
                                <img class="h-10 w-10 rounded-full" src="{{ $item->get_normal_url }}" alt="">
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- 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="stickers" value="Enable Stickers"/>
                        <input type="checkbox" name="stickers" value="1" @checked($photobooth->is_sticker_enabled) />
                        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"/>
                        @foreach ($photobooth->stickers as $sticker)
                            <div class="m-4 p-4">
                                <img class="h-10 w-10 rounded-full" src="{{ $sticker->get_normal_url }}" alt=""> - {{ $sticker->model?->name }}
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- 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($photobooth->filter) /> Enabled
                    </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"/>
                        @foreach ($photobooth->filters as $filter)
                            <div>
                                - {{ $filter->name }}
                            </div>
                        @endforeach

                    </div>
                </div>
                {{-- filters[] dynamic TBD --}}
            </div>
        </div>
    </x-section>
@endsection