@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';
    @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>
/*.bootstrap-select .dropdown-toggle .filter-option-inner-inner{
    line-height : 20px;
}*/
.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 ">
                    <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>

                    
                        @include('forms.inputs.membership_options')
                   
                    <div class="btn-section add_mem_option_sec">
                        <a href="javascript:void(0)" id="MemberOptionsAddInput" name="MemberOptionsAddInput" class="btn-link-primary"><img src="{{ asset('images/form_icons/images/icon_plus.svg') }}" alt=""/> Add another option</a>
                    </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"/>
                    <!-- <label>Maximum length: 50 characters</label> -->
                </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>
                <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>
                
                <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">
                <div class="hrlin-head-inst"></div>
                
                <div class="components-parents-list">
                
            </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="