@extends('layouts.app')

@section('title', 'Editor Page')

@section('css')
<style>
    .form-check-image .form-check-wrapper {
        height: 100px;
    }

    .form-check-image img {
        width: -webkit-fill-available;
        height: -webkit-fill-available;
    }
</style>
@endsection
@section('content')
<div id="kt_app_content" class="app-content  flex-column-fluid ">

    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container  container-xxl ">
        <!--begin::Layout-->
        <div class="d-flex flex-column flex-lg-row">
            <!--begin::Content-->
            <div class="col-8 flex-lg-row-fluid mb-10 mb-lg-0 me-lg-5 me-xl-5">
                <!--begin::Card-->
                <div class="card">
                    <!--begin::Card body-->
                    <div class="card-body p-0">
                        <div class="before-upload-msg card-px text-centerx p-20 m-10">
                            <!--begin::Title-->
                            <h2 class="fs-2x fw-bold mb-10">Easy and Affordable Lignting Planning</h2>
                            <!--end::Title-->

                            <!--begin::Description-->
                            <h4>With Strandr you get</h4>
                            <p class="text-gray-500 fs-4 fw-semibold mb-10">
                                <b>Ease of Use:</b> Intuitive tools allow anyone to create stunning lighting designs without technical know-how.
                            </p>
                            <p class="text-gray-500 fs-4 fw-semibold mb-10">
                                <b>Affordable Pricing:</b> Get the features you need at a price that makes sense, with no hidden fees or costly subscriptions.
                            </p>
                            <p class="text-gray-500 fs-4 fw-semibold mb-10">
                                <b>No CRM Needed:</b> Forget about bulky customer relationship managemnet systems. Strandr simplifies the process, allowing you to foucs on your lighting, not managing client databases.
                            </p>
                            <!--end::Description-->

                            <!--begin::Action-->
                            <a href="#" class="btn btn-primary" onclick="event.preventDefault(); $('#upload-image').click()">Upload Image</a>
                            <input type="file" id="upload-image" accept="image/*" style="display:none;">
                            <!--end::Action-->
                        </div>
                        <div id="canvas-container" style="display: none;">
                            <canvas id="canvas" class="pb-5"></canvas>
                        </div>

                    </div>
                    <!--end::Card body-->
                    <div id="controls" class="d-none shadow p-3 mb-5 rounded">

                        <!-- Decoration Selection -->
                        <div class="row mb-3">
                            <label class="form-label col-form-label col-md-4">Add Decoration</label>
                            <div class="col-md-4">
                                <select id="decoration-select" class="form-select">
                                    <option value="wreath">Wreath</option>
                                    <option value="red_bow">Bow (Red)</option>
                                    <option value="striped_bow">Bow (Striped)</option>
                                    <option value="garland">Garland</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Content-->

            <!--begin::Sidebar-->
            <div class="col-3 flex-lg-auto min-w-lg-300px">
                <!--begin::Card-->
                <div class="card">
                    <!--begin::Card body-->
                    <div class="card-body p-0">
                        <!--begin::Lights Options-->
                        <div class="d-flex flex-stack fs-4 p-4 border">
                            <div class="fw-bold rotate collapsible active" data-bs-toggle="collapse" href="#lights_panel" role="button" aria-expanded="true" aria-controls="lights_panel">
                                Colors
                                <span class="ms-2 rotate-180">
                                    <i class="ki-outline ki-down fs-3"></i> </span>
                            </div>
                        </div>
                        <div id="lights_panel" class="collapse show p-5">

                            <div class="mb-0">
                                <!--begin::Row-->
                                <div class="row mb-5">
                                    <!--begin::Col-->
                                    <div class="col">
                                        <button id="single_color_btn" class="btn btn-light btn-active-light-primary w-100 active">Single Color</button>
                                    </div>
                                    <!--end::Col-->

                                    <!--begin::Col-->
                                    <div class="col">
                                        <button id="two_color_btn" class="btn btn-light btn-active-light-primary w-100">Two Colors</button>
                                    </div>
                                    <!--end::Col-->
                                </div>
                                <!--end::Row-->
                            </div>
                            <div id="single-color-selection" class="form-floating border rounded">
                                <select class="form-select form-select-transparent" placeholder="..." id="light-color-select" class="ss">
                                    <option value="red" data-kt-select2-country="/img/color-block?color=FF0000">Red</option>
                                    <option value="green" data-kt-select2-country="/img/color-block?color=32CD32">Green</option>
                                    <option value="blue" data-kt-select2-country="/img/color-block?color=1E90FF">Blue</option>
                                    <option value="orange" data-kt-select2-country="/img/color-block?color=FFA500">Orange</option>
                                    <option value="pink" data-kt-select2-country="/img/color-block?color=FF69B4">Pink</option>
                                    <option value="purple" data-kt-select2-country="/img/color-block?color=8A2BE2">Purple</option>
                                    <option value="white" data-kt-select2-country="/img/color-block?color=FFFFFF">White</option>
                                    <option value="warm-white" data-kt-select2-country="/img/color-block?color=FFD700">Warm White</option>
                                    <option value="cool-white" data-kt-select2-country="/img/color-block?color=F0F8FF">Cool White</option>
                                </select>
                                <label for="kt_docs_select2_country">Select a Color</label>
                            </div>

                            <div id="two-color-selection">
                                <div class="form-floating border rounded mb-3">
                                    <select class="form-select form-select-transparent" placeholder="..." id="combo-color-1">
                                        <option value="red" data-kt-select2-country="/img/color-block?color=FF0000">Red</option>
                                        <option value="green" data-kt-select2-country="/img/color-block?color=32CD32">Green</option>
                                        <option value="blue" data-kt-select2-country="/img/color-block?color=1E90FF">Blue</option>
                                        <option value="orange" data-kt-select2-country="/img/color-block?color=FFA500">Orange</option>
                                        <option value="pink" data-kt-select2-country="/img/color-block?color=FF69B4">Pink</option>
                                        <option value="purple" data-kt-select2-country="/img/color-block?color=8A2BE2">Purple</option>
                                        <option value="white" data-kt-select2-country="/img/color-block?color=FFFFFF">White</option>
                                        <option value="warm-white" data-kt-select2-country="/img/color-block?color=FFD700">Warm White</option>
                                        <option value="cool-white" data-kt-select2-country="/img/color-block?color=F0F8FF">Cool White</option>
                                    </select>
                                    <label for="kt_docs_select2_country">Select First Color</label>
                                </div>

                                <div class="form-floating border rounded">
                                    <select class="form-select form-select-transparent" placeholder="..." id="combo-color-2">
                                        <option value="green" data-kt-select2-country="/img/color-block?color=32CD32">Green</option>
                                        <option value="red" data-kt-select2-country="/img/color-block?color=FF0000">Red</option>
                                        <option value="blue" data-kt-select2-country="/img/color-block?color=1E90FF">Blue</option>
                                        <option value="orange" data-kt-select2-country="/img/color-block?color=FFA500">Orange</option>
                                        <option value="pink" data-kt-select2-country="/img/color-block?color=FF69B4">Pink</option>
                                        <option value="purple" data-kt-select2-country="/img/color-block?color=8A2BE2">Purple</option>
                                        <option value="white" data-kt-select2-country="/img/color-block?color=FFFFFF">White</option>
                                        <option value="warm-white" data-kt-select2-country="/img/color-block?color=FFD700">Warm White</option>
                                        <option value="cool-white" data-kt-select2-country="/img/color-block?color=F0F8FF">Cool White</option>
                                    </select>
                                    <label for="kt_docs_select2_country">Select Second Color</label>
                                </div>
                            </div>

                            <div id="size-spacing" class="row mt-5">
                                <div class="col-6">
                                    <div id="bulb-size" class="form-floating border rounded">
                                        <select class="form-select form-select-transparent" placeholder="..." id="bulb-size-select">
                                            <option value="0.2">0.2</option>
                                            <option value="0.5">0.5</option>
                                            <option value="0.7">0.7</option>
                                            <option value="1">1</option>
                                            <option value="1.2">1.2</option>
                                        </select>
                                        <label for="kt_docs_select2_country">Bulb Size</label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div id="bulb-size" class="form-floating border rounded">
                                        <select class="form-select form-select-transparent select2" placeholder="..." id="bulb-spacing-select">
                                            <option value="17">17</option>
                                            <option value="22">22</option>
                                            <option value="27">27</option>
                                            <option value="32">32</option>
                                            <option value="37">37</option>
                                        </select>
                                        <label for="kt_docs_select2_country">Bulb Spacing</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end::Lights Options-->


                        <!--begin::Draw Type Options-->
                        <div class="d-flex flex-stack fs-4 p-4 border">
                            <div class="fw-bold rotate collapsible active" data-bs-toggle="collapse" href="#draw_type_panel" role="button" aria-expanded="true" aria-controls="draw_type_panel">
                                Drawing Mode
                                <span class="ms-2 rotate-180">
                                    <i class="ki-outline ki-down fs-3"></i> </span>
                            </div>
                        </div>
                        <div id="draw_type_panel" class="collapse p-5">

                            <!--begin::Input group-->
                            <div class="mb-8">
                                <label class="d-flex align-items-center fs-5 fw-semibold mb-4">
                                    <span>Draw Type:</span>
                                </label>
                                <div class="form-check form-check-custom form-check-solid form-check-lg">
                                    <input class="form-check-input" name="drawing-mode" type="radio" id="straight-line" value="straight" checked />
                                    <label class="form-check-label" for="flexCheckboxLg">
                                        <b>Straight Lights</b>
                                    </label>
                                </div>
                                <div class="form-check form-check-custom form-check-solid form-check-lg mt-5">
                                    <input class="form-check-input" name="drawing-mode" type="radio" id="free-form" value="free-form" />
                                    <label class="form-check-label" for="flexCheckboxLg">
                                        <b>Free-Form Mini Lights</b>
                                    </label>
                                </div>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Separator-->
                            <div class="separator separator-dashed mb-8 d-none"></div>
                            <!--end::Separator-->

                        </div>
                        <!--end::Draw Type  Options-->

                        <!--begin::Decorations Options-->
                        <div class="d-flex flex-stack fs-4 p-4 border">
                            <div class="fw-bold rotate collapsible active" data-bs-toggle="collapse" href="#decorations_panel" role="button" aria-expanded="true" aria-controls="decorations_panel">
                                Decorations
                                <span class="ms-2 rotate-180">
                                    <i class="ki-outline ki-down fs-3"></i> </span>
                            </div>
                        </div>
                        <div id="decorations_panel" class="collapse p-5">

                            <!--begin::Input group-->
                            <!--begin::Row-->
                            <div class="row mw-500px mb-5" data-kt-buttons="true" data-kt-buttons-target=".form-check-image, .form-check-input">
                                <!--begin::Col-->
                                <div class="col-6">
                                    <label class="form-check-image active">
                                        <div class="form-check-wrapper">
                                            <img src="/img/wreath.png" />
                                        </div>

                                        <div class="form-check form-check-custom form-check-solid">
                                            <input class="form-check-input" type="radio" value="wreath" name="decorations" checked />
                                            <div class="form-check-label">
                                                Wreath
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <!--end::Col-->

                                <!--begin::Col-->
                                <div class="col-6">
                                    <label class="form-check-image">
                                        <div class="form-check-wrapper">
                                            <img src="/img/garland.png" />
                                        </div>

                                        <div class="form-check form-check-custom form-check-solid me-10">
                                            <input class="form-check-input" type="radio" value="garland" name="decorations" />
                                            <div class="form-check-label">
                                                Garland
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <!--end::Col-->

                                <!--begin::Col-->
                                <div class="col-6">
                                    <label class="form-check-image">
                                        <div class="form-check-wrapper">
                                            <img src="/img/red_bow.png" />
                                        </div>

                                        <div class="form-check form-check-custom form-check-solid me-10">
                                            <input class="form-check-input" type="radio" value="red_bow" name="decorations" id="text_wow" />
                                            <div class="form-check-label">
                                                Red Bow
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <!--end::Col-->

                                <!--begin::Col-->
                                <div class="col-6">
                                    <label class="form-check-image">
                                        <div class="form-check-wrapper">
                                            <img src="/img/bow-striped.png" />
                                        </div>

                                        <div class="form-check form-check-custom form-check-solid me-10">
                                            <input class="form-check-input" type="radio" value="striped_bow" name="decorations" />
                                            <div class="form-check-label">
                                                Bow Striped
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <!--end::Col-->

                            </div>
                            <!--end::Row-->
                            <!--end::Input group-->

                            <!--begin::Separator-->
                            <div class="separator separator-dashed mb-8"></div>
                            <!--end::Separator-->

                            <!--begin::Actions-->
                            <div class="mb-0">
                                <label for="upload-decoration" class="btn btn-primary w-100"><i class="ki-duotone ki-add-files fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i> Upload Decoration</label>
                                <input type="file" id="upload-decoration" accept="image/*" style="display: none;">
                            </div>
                            <!--end::Actions-->
                        </div>
                        <!--end::Decorations Options-->

                        <!--begin::Exposure Options-->
                        <div class="d-flex flex-stack fs-4 p-4 border">
                            <div class="fw-bold rotate collapsible active" data-bs-toggle="collapse" href="#exposure_panel" role="button" aria-expanded="true" aria-controls="exposure_panel">
                                Darken Image
                                <span class="ms-2 rotate-180">
                                    <i class="ki-outline ki-down fs-3"></i> </span>
                            </div>
                        </div>
                        <div id="exposure_panel" class="collapse p-5">
                            <!--begin::Row-->
                            <div class="row mw-500px mb-5" data-kt-buttons="true" data-kt-buttons-target=".form-check-image, .form-check-input">
                                <!--begin::Col-->
                                <div class="col-6">
                                    <label class="form-check-image active">
                                        <div class="form-check-wrapper">
                                            <img src="/img/darken-10.png" />
                                        </div>

                                        <div class="form-check form-check-custom form-check-solid">
                                            <input class="form-check-input" type="radio" value="1" name="option2" checked id="darken-0" />
                                            <div class="form-check-label">
                                                Original
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <!--end::Col-->

                                <!--begin::Col-->
                                <div class="col-6">
                                    <label class="form-check-image">
                                        <div class="form-check-wrapper">
                                            <img src="/img/darken-10.png" />
                                        </div>

                                        <div class="form-check form-check-custom form-check-solid me-10">
                                            <input class="form-check-input" type="radio" value="1" name="option2" id="darken-10" />
                                            <div class="form-check-label">
                                                10% Darken
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <!--end::Col-->

                                <!--begin::Col-->
                                <div class="col-6">
                                    <label class="form-check-image">
                                        <div class="form-check-wrapper">
                                            <img src="/img/darken-25.png" />
                                        </div>

                                        <div class="form-check form-check-custom form-check-solid me-10">
                                            <input class="form-check-input" type="radio" value="1" name="option2" id="darken-25" />
                                            <div class="form-check-label">
                                                25% Darken
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <!--end::Col-->

                                <!--begin::Col-->
                                <div class="col-6">
                                    <label class="form-check-image">
                                        <div class="form-check-wrapper">
                                            <img src="/img/darken-50.png" />
                                        </div>

                                        <div class="form-check form-check-custom form-check-solid me-10">
                                            <input class="form-check-input" type="radio" value="1" name="option2" id="darken-50" />
                                            <div class="form-check-label">
                                                50% Darken
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <!--end::Col-->

                            </div>
                            <!--end::Row-->
                        </div>
                        <!--end::Exposure Options-->

                        <!--begin::Branding Options-->
                        <div class="d-flex flex-stack fs-4 p-4 border">
                            <div class="fw-bold rotate collapsible active" data-bs-toggle="collapse" href="#branding_panel" role="button" aria-expanded="true" aria-controls="branding_panel">
                                Branding
                                <span class="ms-2 rotate-180">
                                    <i class="ki-outline ki-down fs-3"></i> </span>
                            </div>
                        </div>
                        <div id="branding_panel" class="collapse p-5">
                            <!--begin::Row-->
                            <div class="row mw-500px mb-5" data-kt-buttons="true" data-kt-buttons-target=".form-check-image, .form-check-input">
                                <label for="upload-logo" class="btn btn-primary">Upload Logo</label>
                                <input type="file" id="upload-logo" accept="image/*" style="display: none;">

                            </div>
                            <!--end::Row-->
                        </div>
                        <!--end::Branding Options-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->

                <!--begin::Actions-->
                <div class="mt-10 mb-0">
                    <!--begin::Row-->
                    <div class="row mb-5">
                        <!--begin::Col-->
                        <div class="col">
                            <button id="undo" class="btn btn-light btn-active-light-primary w-100">Undo</button>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col">
                            <button id="reset" class="btn btn-light btn-active-light-primary w-100">Reset</button>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Row-->

                    <button class="btn btn-primary w-100" id="save-image"><i class="ki-duotone ki-triangle fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i> Save Image
                    </button>
                </div>
                <!--end::Actions-->
            </div>
            <!--end::Sidebar-->
        </div>
        <!--end::Layout-->
    </div>
    <!--end::Content container-->
</div>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
<script src="js/app.js?v=1.19"></script>

<script>
    // Format options
    var optionFormat = function(item) {
        if (!item.id) {
            return item.text;
        }

        var span = document.createElement('span');
        var imgUrl = item.element.getAttribute('data-kt-select2-country');
        var template = '';

        template += '<img src="' + imgUrl + '" class="rounded-circle h-20px me-2" alt="image"/>';
        template += item.text;

        span.innerHTML = template;

        return $(span);
    }

    // Init Select2 --- more info: https://select2.org/
    $('#light-color-select').select2({
        templateSelection: optionFormat,
        templateResult: optionFormat
    });
    $('#combo-color-1').select2({
        templateSelection: optionFormat,
        templateResult: optionFormat
    });
    $('#combo-color-2').select2({
        templateSelection: optionFormat,
        templateResult: optionFormat
    });
</script>
@endsection