@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>
    .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;
    }
    /*.bootstrap-select .dropdown-toggle .filter-option-inner-inner{
        line-height : 20px;
    }*/
    #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 form-edit-content-section" 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_edit 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%;">
                @if(!empty($form_datas))
                                @endif
                <div id="droppablePoint" class="form-create-begin hide">
                    <div class="btn-section">
                        <form name="form" id="form">
                        <div id="droppable"></div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="endofform-sec">
                <a href="javascript:void(0)" id="" class="endofform">End of {{$form_datas->form_name}}</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" value="{{$template_detail->form_name??''}}"/>
                </div>
                @if($form_datas->form_type == '1' || $form_datas->form_type == '4')
                    <div class="form-group">
                        <label>Subtitle</label>
                        <input type="text" class="form-control" placeholder="Enter here..." name="subtitle[title]" id="subtitle" value="{{$template_detail->subtitle??''}}" />
                    </div>
                @endif
                <input type="hidden" name="editId" id="editId" value="{{$id}}">
                <input type="hidden" name="remove_components[]" id="remove_components">
               
                
                <div class="form-group">
                    <label>Header Background Image</label>
                   
                    @if (isset($images['studio_images']))
                        <img src="{{ asset('images/studio_images/'. $selected_studio_images[0]['img_name']) }}" alt="" class="mCS_img_loaded" id="imagenew" width="410px" height="300px">
                        <input type="hidden" name="studio-image-id" value="{{ $selected_studio_images[0]['studio_library_id'] }}">
                        <input type="hidden" name="image-id" id="old-image-id" value="{{ $selected_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="{{ $selected_studio_images[0]['id'] }}">
                @endif
                </div>
                @if($form_datas->form_type == '1' || $form_datas->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" value="{{$template_detail->form_header??''}}"/>
                </div>
                <div class="form-group">
                    <label>Header Instructions / Description</label>
                    <textarea class="form-control" id="formDescription" placeholder="Enter here..." name="form[description]">{{$template_detail->form_desc??''}}</textarea>
                </div>
                @endif
                <div class="form-group">
                    <input type="hidden" id="formtype" name="form['form_type]" value="{{$form_datas->form_type??''}}">
                    <input type="hidden" id="prizetype" name="form['prize_type]" value="{{ $form_datas->prizeform_type }}">
                    <input type="hidden" id="stepbystepadd" name="stepbystepadd" value="{{ $form_datas->is_stepsform }}">
                <input type="hidden" id="sectiongroupadd" name="sectiongroupadd" value="0">
                    <input type="hidden" id="studioId" name="form['studioId]" value="{{ $form_datas->studio_id??'' }}">
                    @if($form_datas->prizeform_type > 0)

                    <div class="prizeform-type-section">
                        <label>Prize Form Type</label>
                        
                        <div class="prize-form-radio-toolbar-link">
                            
                        <a class="prizeformtype{{ ($form_datas->prizeform_type == 1) ? ' active-toolbar' : '' }}" href="{{ route('form-create.createTemplate',['formType' => '3','prizeType' => '1']) }}">Spin the Wheel</a>
                        <a class="prizeformtype{{ ($form_datas->prizeform_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>
                    @elseif($form_datas->form_type == '1')
                        <div class="box_checkbox d-flex align-items-center">
                            <input type="checkbox" class="sign_flag" id="checkbox_title" name="form[sign_flag]" {{ $template_detail->is_email == '1' ? 'checked' : '' }}>
                             <label for="checkbox_title"></label>
                            <span class="grey-clr">Send confirmation email once form is submitted</span>
                        </div>
                    @endif
                </div>
                @if($form_datas->form_type != '4')
                <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>
            @endif
        </div>
    </div>
</div>
            </div>
        </div>
    </div>
    <div class="modal common-modal-new fade" 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" style="height: calc(100% - 60px); overflow: auto;">
                <div class="common-preview-modal {{ ($form_datas->form_type == 2) ? ' form-link-preivew-bg' : '' }}" 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="