@extends('layouts.app')
@section('bodyClass', 'form-builder form-builder-overview')
@section('content')
@section('sidebar', 'true')
@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';
    @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>
    #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;
    }
    .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">
        <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 disabled">
                    <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">
                        <h2>Drop in Components</h2>
                        <p>Drag and drop in segments using the toolbar on the right</p>
                        <div class="drag-comp-icon">
                            <svg width="234" height="88" viewBox="0 0 234 88" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="1" y="25" width="178" height="62" rx="7" stroke="#AAAAAA" stroke-width="2" stroke-dasharray="7"/>
                                <rect x="54" width="180" height="64" rx="8" fill="#CCCCCC"/>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M191.73 18.0118C189.407 18.5911 187.995 20.9771 188.582 23.3315L192.04 37.2036L190.494 36.2606C189.497 35.6525 188.329 35.472 187.203 35.7525C186.078 36.033 185.131 36.7409 184.537 37.746C183.942 38.751 183.771 39.9321 184.055 41.0722C184.339 42.2123 185.045 43.1749 186.042 43.783L197.086 50.5192C199.532 52.0109 202.4 52.4537 205.161 51.7651L206.568 51.4144C212.27 49.9928 215.737 44.1348 214.296 38.3569L212.264 30.2064C211.677 27.852 209.31 26.4083 206.987 26.9876C206.099 27.2088 205.346 27.6944 204.786 28.3398C203.743 27.1458 202.096 26.5579 200.471 26.963C199.782 27.135 199.175 27.4682 198.674 27.912L197.008 21.2306C196.421 18.8761 194.054 17.4324 191.73 18.0117L191.73 18.0118ZM201.052 29.2918C202.108 29.0284 203.184 29.6845 203.451 30.7549L204.128 33.4717C204.288 34.1145 204.933 34.5077 205.567 34.3496C206.202 34.1914 206.586 33.5415 206.426 32.8987L206.136 31.7344C205.869 30.664 206.511 29.5797 207.567 29.3163C208.623 29.053 209.699 29.7091 209.966 30.7794L211.998 38.9299C213.118 43.4235 210.421 47.9801 205.987 49.0857L204.581 49.4364C202.432 49.9721 200.201 49.6282 198.299 48.468L187.254 41.7318C186.803 41.4563 186.482 41.0178 186.353 40.4993C186.223 39.9807 186.301 39.4445 186.572 38.9873C186.841 38.5305 187.272 38.2088 187.784 38.0812C188.295 37.9536 188.826 38.0355 189.28 38.3121L192.861 40.4965L193.323 42.3491C193.483 42.9919 194.128 43.3852 194.762 43.227C195.397 43.0688 195.781 42.419 195.621 41.7762L190.879 22.7584C190.612 21.6881 191.254 20.6037 192.31 20.3403C193.367 20.077 194.442 20.7331 194.709 21.8035L197.999 34.9995C198.16 35.6423 198.804 36.0355 199.439 35.8773C200.073 35.7192 200.458 35.0693 200.298 34.4265L199.62 31.7097C199.353 30.6393 199.995 29.555 201.051 29.2916L201.052 29.2918Z" fill="#EA545F"/>
                            </svg>
                        </div>
                        <div class="btn-section">
                            <form name="form" id="form">
                                <div id="droppable"></div>
                            </form>
                        </div>
                    </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..." onblur="showEndofForm()" name="form[title]" id="formName"/>
                </div>
                @if(Session::get('form_type') == '1' || Session::get('form_type') == '4')
                    <div class="form-group">
                        <label>Subtitle</label>
                        <input type="text" class="form-control" placeholder="Enter here..." name="subtitle[title]" id="subtitle"/>
                    </div>
                @endif
                <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>
                @if(Session::get('form_type') == '1' || Session::get('form_type') == '4')
                <div class="form-group">
                    <label>Header Copy</label>
                    <input type="text" class="form-control" placeholder="Enter here..." name="form[headrcopy]" id="formHeader"/>
                </div>
                <div class="form-group">
                    <label>Header Instructions / Description</label>
                    <textarea class="form-control" id="formDescription" name="form[description]" placeholder="Enter here..."></textarea>
                </div>
                @endif
                <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 class="box_checkbox d-flex align-items-center">
                        <input type="checkbox" class="sign_flag" id="checkbox_title" name="form[sign_flag]">
                        <label for="checkbox_title"></label>
                        <span class="grey-clr">Send confirmation email once form is submitted</span>
                    </div>
                </div>
                <input type="hidden" id="stepbystepadd" name="stepbystepadd" value="0">
                <input type="hidden" id="sectiongroupadd" name="sectiongroupadd" value="0">
                <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" id="myModal">
    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">
            <div class="modal-header">
                <div class="row w-100 align-items-center">
                    <div class="col-7 col-sm-5 admin_modal_header">
                        <h1>Template Preview</h1>
                    </div>
                    <div class="col-5 col-sm-7">
                        <div class="d-flex align-items-center float-end">
                            <div class="preview_template_close" editaccess="0" aria-label="Close">
                                <svg class="no-stroke" width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.3332 1.24128L10.2589 0.166992L5.99984 4.42604L1.74079 0.166992L0.666504 1.24128L4.92555 5.50033L0.666504 9.75937L1.74079 10.8337L5.99984 6.57461L10.2589 10.8337L11.3332 9.75937L7.07412 5.50033L11.3332 1.24128Z" fill="#000000"></path>
                                </svg>
                                Close
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <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" 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 need help or would like to change memberships</p>
                        <div class="sm">
                            @if(isset($medias) && !empty($medias))
                            @foreach($medias as $media)
                            @if ($media->id == 1)
                            
                            <a target="_blank" 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" 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" 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" 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" 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="