@extends('layouts.app')
@section('bodyClass', 'form-builder form-builder-overview')
@section('content')
@section('PageHeading', 'Form Builder')
@php
        // Url Fetching 
        // $urlSegments = request()->segments();
        
        // $encodedStudioId = $urlSegments[count($urlSegments) - 4];
        // $encodedFormId = $urlSegments[count($urlSegments) - 3];
        
       
        $studioId = $studioId;
        //$formId = $formId;

        $studioDetails = FormHelper::getStudioConfig($studioId);
       // $primaryColor = ($studioDetails->primary_color) ?? '#1E1545';
        //$secondaryColor = ($studioDetails->secondary_color) ?? '#CF0D20';
        $franchisePrimaryColor = $franchiseSecondaryColor = '';
        if(isset($studioDetails->franchise_id)  && isset($studioDetails) && $studioDetails->franchise_id != '' && $studioDetails->franchise_id != 0) {
                 
                 $franchisePrimaryColor = $studioDetails->franchise->franchise_primary_color;
                 $franchiseSecondaryColor = $studioDetails->franchise->franchise_secondary_color;
            }
            $primaryColor =($franchisePrimaryColor != '') ? $franchisePrimaryColor : ($studioDetails->primary_color ??  config('app.non_franchise_primary_color')) ; 
            $secondaryColor =($franchiseSecondaryColor != '') ? $franchiseSecondaryColor : ($studioDetails->secondary_color ?? config('app.non-franchise_secondary_color')) ;   
            
    @endphp

    <script>
        $(document).ready(function() {
            const PrimaryColor = "";
            document.documentElement.style.setProperty("--theme-primary-color", PrimaryColor);
            const SecondaryColor = "";
            document.documentElement.style.setProperty("--theme-secondary-color", SecondaryColor);
        });
    </script>@php
        // Url Fetching 
        // $urlSegments = request()->segments();
        
        // $encodedStudioId = $urlSegments[count($urlSegments) - 4];
        // $encodedFormId = $urlSegments[count($urlSegments) - 3];
        
       
        $studioId = $studioId;
        //$formId = $formId;

        $studioDetails = FormHelper::getStudioConfig($studioId);
        $primaryColor = ($studioDetails->primary_color) ?? '#1E1545';
        $secondaryColor = ($studioDetails->secondary_color) ?? '#CF0D20';
    @endphp

    <script>
        $(document).ready(function() {
            const PrimaryColor = "";
            document.documentElement.style.setProperty("--theme-primary-color", PrimaryColor);
            const SecondaryColor = "";
            document.documentElement.style.setProperty("--theme-secondary-color", SecondaryColor);
        });
    </script>
<link rel="stylesheet" href="{{ asset('css/forms/global_form_design.css')}} ">
<link rel="stylesheet" href="{{ asset('css/forms/custom-style.css')}} ">
<link rel="stylesheet" href="{{ asset('scss/global.min.css')}} ">
<style type="text/css">
 #single-modal-in-the-page{
    display: none!important
} 
.components-list-left-drag {
        position: absolute;
        width: 100%;
        height: 100%;
        max-width: 100% !important;
        opacity: 0;
        top: 0;
        left: 0;
        cursor: pointer;
    }
.image-container {
    display: flex;
    overflow-x: auto; /* Add a horizontal scrollbar if needed */
    white-space: nowrap; /* Prevent wrapping to the next line */
}

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        .wheel-container {
            position: relative;
        }

        .wheel {
            width: 400px;
            height: 400px;
            border: 10px solid #1E1545;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
        }

        .wheel::before {
            /* content: '';
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 100%;
            background-color: #333; */
        }

        .wheel .wheel-section {
            position: absolute;
            width: 100%;
            height: 100%;
            /* clip-path: polygon(0 0, 100% 0, 50% 100%);
            transform-origin: 50% 100%; */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .wheel .wheel-section:nth-child(odd) {
            background-color: #f00;
            color: #fff;
        }

        .wheel .wheel-section:nth-child(even) {
            background-color: #00f;
            color: #fff;
        }

        #spinBtn {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        .scratch-card {
            position: relative;
            width: 300px;
            height: 150px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        .scratch-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://placekitten.com/300/150') no-repeat center center;
            background-size: cover;
            mix-blend-mode: multiply;
        }

        .scratch-overlay:hover {
            opacity: 0;
            transition: opacity 0.5s;
        }

        .message {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
        }
        .card{
         width: 300px;
         height: 60px;
         position: relative;
         box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
        }    
        
        .base {
            cursor: default;
            height: 60px;
            width: 300px;
            position: absolute;
            top: 0;
            left: 0;
            cursor: grabbing;
        }
        .base {
            line-height: 60px;
            text-align: center;
        }
        #scratch {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }
        .div1parent{
            height: calc(100vh - 120px);    
            padding-bottom: 50px;
            overflow: auto;
        } 
        #div1 {
            min-height: calc(100vh - 170px) !important;
        }
        .preview_template_close:hover {
        cursor: pointer;
    }   
    #map {
        height: 400px;
    }
    </style>
 
<div class="container_fluid">
    <div class="box_content">
        <div class="box_overlayout">
            <div class="box_innerlayout">
    <div class="form-create-mainpg prizeform-section">
        <div class="form-create-content" id="maindiv">
            <div class="form-create-content-top-flex">

                <a href="{{ route('form.form_library') }}" class="back-top-temp-arrow btn-theme btn-small dark custom-confirm-link" data-confirmation="Are you sure? Any unsaved changes will be lost.">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="#000000"/>
                    </svg> Back To All Forms
                </a>
               <button type="button" class=" sde_bttn_clk form_submit btn-theme dark-active btn-small" value="Publish" name="form_submit">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7 0.333008C3.32 0.333008 0.333336 3.31967 0.333336 6.99967C0.333336 10.6797 3.32 13.6663 7 13.6663C10.68 13.6663 13.6667 10.6797 13.6667 6.99967C13.6667 3.31967 10.68 0.333008 7 0.333008ZM5.66667 10.333L2.33334 6.99967L3.27334 6.05967L5.66667 8.44634L10.7267 3.38634L11.6667 4.33301L5.66667 10.333Z" fill="#FEFEFE"/>
                    </svg> Save
                </button>
                <button type="button" id="template_preview_button" name="template_preview_button" class="sde_bttn_clk btn-theme dark btn-small ">
                    <img src="{{ asset('images/eye-white.svg') }}" alt="Preview"> Preview
                </button>
                <a href="{{ route('form.form_library') }}" class="gray_cancel_btn btn-theme light-active btn-small custom-confirm-link" data-confirmation="Are you sure? Any unsaved changes will be lost." >
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.2664 2.17635L12.9236 0.833496L7.59977 6.15731L2.27596 0.833496L0.933105 2.17635L6.25692 7.50016L0.933105 12.824L2.27596 14.1668L7.59977 8.84302L12.9236 14.1668L14.2664 12.824L8.94263 7.50016L14.2664 2.17635Z" fill="white"/>
                </svg>  Cancel</a>

            </div>    
            <div class="div1parent">
                <div id="div1" ondragenter="dragEnter(event,this)" ondrop="drop(event,this)" ondragover="allowDrop(event)" style="height: 100%;">
                    <div id="droppablePoint" class="form-create-begin hide">
                        
                        <div class="btn-section">
                            <form name="form" id="form">
                                <div id="droppable"></div>
                            </form>
                        </div>
                    </div>
                                        <!--*section group start */-->
                    @include('forms.inputs.section_prize_details',compact('prizeForm'))
                    @include('forms.inputs.heading_large',compact('prizeForm')) 
                    @include('forms.inputs.body_copy',compact('prizeForm'))
                    @include('forms.inputs.text_field_small',['firstLoad' => '1'])
                    @include('forms.inputs.text_field_email',['firstLoad' => '1'])
                    @include('forms.inputs.text_field_mobile',['firstLoad' => '1'])
                    @include('forms.inputs.prize_game_rules')
                    <!--*section group end */-->
                    <!--*section group prizes start */-->
                    @include('forms.inputs.section_prize_options')
                    <div id="prizeoptionsApppend">
                        @if($prizeType == '1')

                        @for($i = 0; $i < 7; $i++)
                            @include('forms.inputs.prize_options_spin')
                        @endfor
                            <!-- @include('forms.inputs.prize_options_spin')
                            @include('forms.inputs.prize_options_spin')
                            @include('forms.inputs.prize_options_spin')
                            @include('forms.inputs.prize_options_spin')
                            @include('forms.inputs.prize_options_spin')
                            @include('forms.inputs.prize_options_spin') -->
                            
                        @elseif($prizeType == '2')
                            @for($i = 0; $i < 7; $i++)
                                @include('forms.inputs.prize_options_scratch')
                            @endfor
                        @endif
                    </div>
                    <div class="btn-section mb-15 btn-add-another-options">
                        <a href="javascript:void(0)" id="PrizeOptionsAddInput" prizeType={{$prizeType}} name="PrizeOptionsAddInput" class="btn-link-primary"><img src="{{ asset('images/form_icons/images/plus-icon-new.svg') }}" alt=""/> Add another option</a>
                    </div>
                                        @include('forms.inputs.prize_probability',compact('totalprobability'))
                    @include('forms.inputs.section_prize_success')
                    @include('forms.inputs.prize_success_heading')
                    <!--*section group prizes end */-->
                <!--*section group start */-->
                <div id="chartPreview" ></div>
  
        <div id="question"><h1></h1></div>
                </div>
                <div class="endofform-sec" style="display:none;">
                    <a href="javascript:void(0)" id="" class="endofform">End of</a>
                </div>
            </div>
        </div>

        <input type="hidden" id="homeUrl" value="[Insert Home URL]"/>

        <div class="page-right-sidebar" id="hide_bar">
            <div class="page-right-sidebar-content">
                <h3>Form Details</h3>
                <div class="form-group">
                    @csrf
                    <label>Form Name *</label>
                    <input type="text" class="form-control" placeholder="Enter here..." name="form[title]" onblur="showEndofForm()" id="formName"/>
                    <!-- <label>Maximum length: 50 characters</label> -->
                </div>
                <input type="hidden" name="editId" id="editId" value="">
                <div class="form-group">
                    <label>Header Background Image</label>
                    @if (isset($images['studio_images']))
                    <img src="{{ asset('images/studio_images/'. $images['studio_images'][0]['img_name']) }}" alt="" class="mCS_img_loaded" id="imagenew" width="410px" height="300px">
                    <input type="hidden" name="studio-image-id" value="{{ $images['studio_images'][0]['studio_library_id'] }}">
                    <input type="hidden" name="image-id" id="old-image-id" value="{{ $images['studio_images'][0]['id'] }}">
                    <div class="form-overlay" style="background:none;">
                        <button id="editImage">Edit</button>
                    </div> 
                <input type="hidden" id="formimg" name="form[image]" value="{{ $images['studio_images'][0]['id'] }}">
            @endif
                </div>
                
                
                <div class="form-group">
                    <input type="hidden" id="formtype" name="form['form_type]" value="{{ Session::get('form_type'); }}">
                    <input type="hidden" id="prizetype" name="form['prize_type]" value="{{ Session::get('prize_type'); }}">
                    <input type="hidden" id="studioId" name="form['studioId]" value="{{ $studioId }}">
                    
                </div>
                <input type="hidden" id="stepbystepadd" name="stepbystepadd" value="0">
                <input type="hidden" id="sectiongroupadd" name="sectiongroupadd" value="0">
                <input type="hidden" id="prizeformadd" name="prizeformadd" value="1">
                
                <div class="prizeform-type-section">
                    <label>Prize Form Type</label>
                    
                    <div class="prize-form-radio-toolbar-link">
                        
                    <a class="prizeformtype{{ (Session::get('prize_type') == 1) ? ' active-toolbar' : '' }}" href="{{ route('form-create.createTemplate',['formType' => '3','prizeType' => '1']) }}">Spin the Wheel</a>
                    <a class="prizeformtype{{ (Session::get('prize_type') == 2) ? ' active-toolbar' : '' }}" href="{{ route('form-create.createTemplate',['formType' => '3','prizeType' => '2']) }}">Scratchie</a>

                        <!-- <a class="prizeformtype" href="{{ route('form-create.createTemplate',['formType' => '3','prizeType' => '2']) }}">Scratchie</a> -->
                    </div>
                   
                </div>

                <div class="hrlin-head-inst"></div>
                <div>
                    <h3>Drag and Drop Components</h3>
                </div>
                <div class="components-parents-list">
                @if (!empty($components))
                    @foreach ($components as $compKey => $compValue)
                        @php
                            $componentId = $compValue->id;
                            $compName = $compValue->component_name;
                            $compCode = $compValue->component_code;
                            $compDesc = $compValue->component_desc;
                            $isListComp = $compValue->is_list_component;
                        @endphp
                        
                        @if($isListComp == '1')
                               
                            @if ($compValue->id == 1 || $compValue->id == 2)
                                <div class="components-list">
                                    <div class="components-list-left" id="drag{{ $componentId }}" draggable="true" ondragend="dragEnd(event)" ondragstart="drag(event)">
                                @php
                                $imagePath = public_path('images/form_icons/' . $compValue->component_image);
                                @endphp
                                @if(File::exists($imagePath))
                                    <img class="components-list-left-drag" id="drag{{ $componentId }}_{{ $componentId }}" src="{{ asset('images/form_icons/' . $compValue->component_image) }}" alt="" />
                                    <img src="{{ asset('images/form_icons/' . $compValue->component_image) }}" alt="" />
                                @else
                                    <img src="{{ asset('images/form_icons/section_title.svg') }}" alt="Default Image">
                                @endif

                                                    
                                    </div>
                                    <div class="components-list-right" style="float: right; right: 0; position: relative !important;">
                                        <h4>{{ $compName }}</h4>
                                        <p>{{ $compDesc }}</p>
                                    </div>
                                </div>
                            @else
                                <div class="components-list">
                                    <div class="components-list-left" id="drag{{ $componentId }}" draggable="true" ondragend="dragEnd(event)" ondragstart="drag(event)">
                                        <img class="components-list-left-drag" id="drag{{ $componentId }}_{{ $componentId }}" alt="" src="{{ asset('images/form_icons/' . $compValue->component_image) }}" />
                                        <img src="{{ asset('images/form_icons/' . $compValue->component_image) }}" alt="" />
                                    </div>
                                    <div class="components-list-right" style="float: right; right: 0; position: relative !important;">
                                        <h4>{{ $compName }}</h4>
                                        <p>{{ $compDesc }}</p>
                                    </div>
                                </div>
                            @endif
                        @endif
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</div>
            </div>
        </div>
    </div>
<div class="modal common-modal-new fade preview-modal-view modal-padding-none" id="myModal">
    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">
            <!-- <div class="modal-header">
                <button type="button" class="preview_template_close" data-bs-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="preview_template_name">Template Preview</h4>
            </div> -->
            <div class="modal-body">
                <div class="common-preview-modal @if(Session::get('form_type') == 2) form-link-preivew-bg @endif @if(Session::get('form_type') == 3) prize-form @endif" id="modal_preview_show">
                    <!-- Your modal content goes here -->
                </div>
                <div class="ffe-footer">
                    <div class="ffe-footer-left">
                        <div id="map"></div>
                    </div>
                    <div class="ffe-footer-right">
                        <h3>HAVE A QUESTION?</h3><h2>CONTACT US</h3><p>Please reach out to our Support Team if you have any questions.</p>
                        <div class="sm">
                            @if(isset($medias) && !empty($medias))
                            @foreach($medias as $media)
                            @if ($media->id == 1)
                            
                            <a target="_blank" rel="noopener" href="{{$media->pivot->link ? (Illuminate\Support\Str::startsWith($media->pivot->link, ['http://', 'https://']) ? $media->pivot->link : 'http://' . $media->pivot->link) : '#' }}">
                                <img src="{{ asset('images/social-media/fb-icon.svg') }}" alt="" class="mCS_img_loaded">
                            </a>
                            @elseif($media->id == 2)
                            <a target="_blank" rel="noopener" href="{{$media->pivot->link ? (Illuminate\Support\Str::startsWith($media->pivot->link, ['http://', 'https://']) ? $media->pivot->link : 'http://' . $media->pivot->link) : '#' }}">
                                <img src="{{ asset('images/social-media/insta-icon.svg') }}" alt="" class="mCS_img_loaded">
                            </a>
                            @elseif($media->id == 3)
                            <a target="_blank" rel="noopener" href="{{$media->pivot->link ? (Illuminate\Support\Str::startsWith($media->pivot->link, ['http://', 'https://']) ? $media->pivot->link : 'http://' . $media->pivot->link) : '#' }}">
                                <img src="{{ asset('images/social-media/tik-tok.svg') }}" alt="" class="mCS_img_loaded">
                            </a>
                            @elseif($media->id == 4)
                            <a target="_blank" rel="noopener" href="{{$media->pivot->link ? (Illuminate\Support\Str::startsWith($media->pivot->link, ['http://', 'https://']) ? $media->pivot->link : 'http://' . $media->pivot->link) : '#' }}">
                                <img src="{{ asset('images/social-media/youtube-icon.svg') }}" alt="" class="mCS_img_loaded">
                            </a>
                            @else
                            <a target="_blank" rel="noopener" href="{{$media->pivot->link ? (Illuminate\Support\Str::startsWith($media->pivot->link, ['http://', 'https://']) ? $media->pivot->link : 'http://' . $media->pivot->link) : '#' }}">
                                <img src="{{ asset('images/social-media/link-icon.svg') }}" alt="" class="mCS_img_loaded">
                            </a>
                            @endif
                            @endforeach
                            @endif
                        </div>
                    </div>
                </div>
                <div class="ffe-footer-info">
                    <div class="ffe-footer-info-text">Powered by</div>
                    <a href="