@extends('pages.product-photography._layout', [
    'title' => 'Fashion Photography',
    'description' => 'SnappyFly is here to help capture your apparels professionally and creatively. Showcase your pieces on your website with simple white background images or eye-catching styled images!',
    'banner' => url('/img/banner-white-bg-images.png'),
    'portfolio' => url('/portfolio?prefix=portfolio/White+Background')
])
	<p class="font-bold text-3xl mb-6 text-center">Flat-lays & Ghost Mannequins</p>
    <p class="max-w-2xl mx-auto text-center">Keep things simple and consistent with white background images for your e-commerce website. </p>

@section('info')
    @php
        $images = \App\Support\S3FilesCollection::from("snappy-public", 'portfolio')
            ->asFlatFolders('/')->whereKeyStartsWith('portfolio/White Background')
            ->flatten()->sortRand()->values()->take(20)
    @endphp
    <x-gallery-carousel id="portfolio" :images="$images" class="my-5"
                        image-class="w-fit h-fit max-w-[100%] max-h-[100%]" />



    <section class="wrapper mb-4 py-6 lg:py-12">
        <p class="font-bold text-3xl mb-6 text-center">Fast & Hassle-free Process</p>
        <div class="grid grid-cols-3 lg:grid-cols-5 gap-x-4 gap-y-8">
            <x-service.order-step step="1" icon="step-order" text="Place Order"/>
            <x-service.order-step step="2" icon="step-pickup" text="Pick-up Products"/>
            <x-service.order-step step="3" icon="step-review" text="Review Photos"/>
            <x-service.order-step step="4" icon="step-download" text="Pay & Download"/>
            <x-service.order-step step="5" icon="step-return" text="Return Products"/>
        </div>
    </section>
@endsection

@section('form')
    <x-service.select-product-type/>

    <div class="flex items-center mb-6 gap-2">
        <select class="block min-w-[300px] border px-4 py-2  rounded" name="service" v-model="prod.service" required>
            <option v-for="(val, key) in prod.services[prod.category]" :value="key" v-text="val"></option>
        </select>
        <x-tooltip v-cloak v-show="prod.service === 'IndividualShots'" id="service_IndividualShots">
            <strong>Individual Shots:</strong>
            <p>Only 1 item is featured in the image. A product with multiple components to be laid out is a group shot.</p>
        </x-tooltip>
        <x-tooltip v-cloak v-show="prod.service === 'GroupShots'" id="service_GroupShots">
            <strong>Group Shots:</strong>
            <p>Multiple items are featured in 1 image. A product with multiple components to be laid out is a group shot.</p>
        </x-tooltip>
    </div>

    <div class="border-2 rounded border-theme-yellow mb-6 px-4 py-3">
        <p class="text-lg font-bold mb-1">Here's the rate card!</p>
        <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
            <template v-if="prod.category === 'General' && prod.service === 'IndividualShots'">
                <p>1st shot for every item</p>
                <p class="font-bold">$@json(servicePrice('General.IndividualShots.0'))</p>
                <p>Add-on shot for same item</p>
                <p class="font-bold">$@json(servicePrice('General.IndividualShots.1'))</p>
            </template>
            <template v-if="prod.category === 'General' && prod.service === 'GroupShots'">
                <p>Each group shot (up to 5 items per shot)</p>
                <p class="font-bold">$@json(servicePrice('General.GroupShots.0'))</p>
            </template>
            <template v-if="prod.category === 'Apparel' && prod.service === 'IndividualShots'">
                <p>1st shot for every item</p>
                <p class="font-bold">$@json(servicePrice('Apparel.IndividualShots.0'))</p>
                <p>Add-on shot for same item</p>
                <p class="font-bold">$@json(servicePrice('Apparel.IndividualShots.1'))</p>
            </template>
            <template v-if="prod.category === 'Apparel' && prod.service === 'GroupShots'">
                <p>Each group shot (up to 3 items per shot)</p>
                <p class="font-bold">$@json(servicePrice('Apparel.GroupShots.0'))</p>
            </template>
            <template v-if="prod.category === 'Apparel' && prod.service === 'GhostMannequin'">
                <p>1st shot for every item</p>
                <p class="font-bold">$@json(servicePrice('Apparel.GhostMannequin.0'))</p>
                <p>Additional angle for same item</p>
                <p class="font-bold">$@json(servicePrice('Apparel.GhostMannequin.1'))</p>
            </template>
            <template v-if="prod.category === 'Bags' && prod.service === 'IndividualShots'">
                <p>1st shot for every item</p>
                <p class="font-bold">$@json(servicePrice('Bags.IndividualShots.0'))</p>
                <p>Additional angle for same item</p>
                <p class="font-bold">$@json(servicePrice('Bags.IndividualShots.1'))</p>
            </template>
            <template v-if="prod.category === 'Bags' && prod.service === 'GroupShots'">
                <p>Each group shot (up to 3 items per shot)</p>
                <p class="font-bold">$@json(servicePrice('Bags.GroupShots.0'))</p>
            </template>
            <template v-if="prod.category === 'Jewellery' && prod.service === 'IndividualShots'">
                <p>1st shot for every item</p>
                <p class="font-bold">$@json(servicePrice('Jewellery.IndividualShots.0'))</p>
                <p>Additional angle for same item</p>
                <p class="font-bold">$@json(servicePrice('Jewellery.IndividualShots.1'))</p>
            </template>
            <template v-if="prod.category === 'Jewellery' && prod.service === 'GroupShots'">
                <p>Each group shot (up to 5 items per shot)</p>
                <p class="font-bold">$@json(servicePrice('Jewellery.GroupShots.0'))</p>
            </template>
        </div>
    </div>

    <div class="mb-6" v-if="prod.service === 'GhostMannequin'">
        <div class="relative">
            <p class="text-lg font-bold mb-1">Angles for the shots?</p>
            <input class="absolute opacity-0 bottom-0" id="gmAngleSelectionValidation">
        </div>
        <label class="flex items-center gap-2">
            <input value="0" name="frontShot" type="hidden">
            <input v-model="prod.frontShot" value="1" name="frontShot" type="checkbox" class="accent-theme-yellow">
            <span>Front Shot</span>
        </label>
        <label class="flex items-center gap-2">
            <input value="0" name="backShot" type="hidden">
            <input v-model="prod.backShot" value="1" name="backShot" type="checkbox" class="accent-theme-yellow">
            <span>Back Shot</span>
        </label>
        <label class="flex items-center gap-2 mb-2">
            <input value="0" name="detailShot" type="hidden">
            <input v-model="prod.detailShot" value="1" name="detailShot" type="checkbox" class="accent-theme-yellow">
            <span>Detail Shots</span>
        </label>
        <div class="text-blue-600">Please prepare <strong>Asian size M</strong> or equivalent for apparels</div>
        <button type="button" class="text-blue-600 flex items-center" @click="$modal.show('mannequins-sizing-info')">
            <i class="material-icons text-2xl leading-none">chevron_right</i>
            <span class="underline">See mannequins sizing</span>
        </button>
    </div>

    <div class="mb-6" v-if="prod.service === 'GroupShots'">
        <p class="text-lg font-bold mb-1">How many shots do you wish to have?</p>
        <div class="flex items-center gap-4 mb-6">
            <p>No. of Group Shots</p>
            <input type="number" min="1" name="itemCount" v-model="prod.itemCount" required
                   class="w-[100px] border rounded px-4 py-2"/>
        </div>
    </div>
    <div class="mb-6" v-else>
        <p class="text-lg font-bold mb-1">How many items do you wish to shoot?</p>
        <div class="flex items-center gap-4 mb-6">
            <p>No. of Items</p>
            <input type="number" min="1" name="itemCount" v-model="prod.itemCount"
                   class="w-[65px] border rounded px-3 py-2" required/>
        </div>
    </div>

    <p class="text-lg font-bold mb-1">Do you have any special instructions?</p>
    <textarea class="w-[360px] border rounded resize-none px-4 py-2 mb-6"
              rows="4" name="instructions" v-model="prod.instructions"></textarea>

    <div class="mb-6">
        <p class="font-bold mb-1">Your Custom Dimensions</p>
        <div class="flex items-center mb-1">
            <input class="w-[100px] border rounded text-center px-2 py-1 mr-1"
                   v-model="prod.dim_w" name="dim_w" type="number" min="100" max="5000">W
            <div class="mx-2">×</div>
            <input class="w-[100px] border rounded text-center px-2 py-1 mr-1"
                   v-model="prod.dim_h" name="dim_h" type="number" min="100" max="5000">H
            <div class="mx-2">JPG (72DPI)</div>
        </div>
    </div>

    <div class="mb-6">
        <p class="font-bold mb-1">You will get images in these dimensions:</p>
        <x-checked-description class="items-center">
            <div class="mr-2">1600 × 1600 JPG (72DPI)</div>
            <x-tooltip>For RedMart, Lazada, Qoo10, Shopify</x-tooltip>
        </x-checked-description>
        <x-checked-description class="items-center">
            <div class="mr-2">2500 × 2500 JPG (72DPI)</div>
            <x-tooltip>For Amazon, Fairprice</x-tooltip>
        </x-checked-description>
        <x-checked-description class="items-center">
            <div class="mr-2">2500 × 2500 PNG (300DPI)</div>
            <x-tooltip>High-res transparent format for web and print</x-tooltip>
        </x-checked-description>
        <x-checked-description class="items-center">
            <div class="mr-2"><span v-text="prod.dim_w"></span> x <span v-text="prod.dim_h"></span> JPG (72DPI)</div>
            <x-tooltip>This is your custom dimensions.</x-tooltip>
        </x-checked-description>
    </div>

    <div class="flex mb-6">
        <div class="bg-gray-200 py-1 px-2 text-sm font-bold">NO PRE-PAYMENT REQUIRED</div>
    </div>
@endsection

@push('head')
    <script>
        vue.data.prod = {
            category: @json($category_1 ?? 'General'),
            service: @json($category_2 ?? 'IndividualShots'),
            itemCount: @json($item_count ?? null),
            instructions: @json($instructions ?? ''),
            dim_w: @json($data['dimensions'][0] ?? 1000),
            dim_h: @json($data['dimensions'][1] ?? 1000),
            frontShot: @json(intval($data['frontShot'] ?? 0)),
            backShot: @json(intval($data['backShot'] ?? 0)),
            detailShot: @json(intval($data['detailShot'] ?? 0)),

            categories: {
                General: 'General Products',
                Apparel: 'Apparels',
                Bags: 'Bags',
                Jewellery: 'Jewellery & Eyewear',
            },
            services: {
                General: {
                    IndividualShots: 'Individual Shots',
                    GroupShots: 'Group Shots',
                },
                Apparel: {
                    IndividualShots: 'Flat-lays (Individual Shots)',
                    GroupShots: 'Flat-lays (Group Shots)',
                    GhostMannequin: 'Ghost Mannequins (Individual Shots)',
                },
                Bags: {
                    IndividualShots: 'Individual Shots',
                    GroupShots: 'Group Shots',
                },
                Jewellery: {
                    IndividualShots: 'Individual Shots',
                    GroupShots: 'Group Shots',
                },
            }
        };

        vue.watch['prod.category'] = function () {
            this.prod.service = 'IndividualShots';
        };

        vue.watch['prod.service'] = function (val) {
            window.flashTooltip(`service_${val}`);
            gmAngleValidation(this.gmAngles);
        }

        vue.computed['gmAngles'] = function () {
            return [
                this.prod['frontShot'],
                this.prod['backShot'],
                this.prod['detailShot'],
            ].filter(Boolean).length;
        }

        vue.mounted = vue.watch['gmAngles'] = function () {
            gmAngleValidation(this.gmAngles);
        }

        function gmAngleValidation(count) {
            setTimeout(() => {
                const target = document.querySelector('#gmAngleSelectionValidation');
                if (target) target.setCustomValidity(count === 0 ? 'You need to select at least 1 angle for the shot.' : '');
            }, 500);
        }
    </script>
@endpush
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Not Found</title>

        <!-- Fonts -->
        <link rel="dns-prefetch" href="//fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 100;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .code {
                border-right: 2px solid;
                font-size: 26px;
                padding: 0 15px 0 15px;
                text-align: center;
            }

            .message {
                font-size: 18px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            <div class="code">
                404            </div>

            <div class="message" style="padding: 10px;">
                Not Found            </div>
        </div>
    </body>
</html>