@extends('layout.master')

@push('plugin-styles')
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css">
<link href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/css/phone.css') }}" rel="stylesheet" />
@endpush
@section('title', __('dashboard.Add a new invitation'))
@section('content')


<nav class="page-breadcrumb">
    <div class="row align-items-center">
        <div class="col-md-6">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="#">{{ __('dashboard.Invitations') }}</a></li>
                <li class="breadcrumb-item"><a
                        href="{{ route('invitation-settings.all') }}">{{ __('dashboard.Invitation settings') }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('dashboard.Edit invitation') }}</li>
            </ol>
        </div>
    </div>
</nav>
<div class="row">
    <div class="col-md-12 stretch-card">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title mb-4">{{ __('dashboard.Edit invitation') }}</h6>
                <div class="row">
                    <div class="col-md-12 mt-4">
                        <form action="{{ route('invitation-settings.update', [$invset->id] ) }}" name="myForm" method="POST"
                            class="needs-validation" novalidate enctype="multipart/form-data">
                            @csrf
                            <div class="row ">

                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group"><label
                                                    for="degree2">{{ __('dashboard.Invitation name') }}
                                                    <span class="text-danger">*</span></label>
                                                <input type="text" name="name" class="form-control mb-4"
                                                    value="{{$invset->invitation_name}}" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4" style="display:block;">
                                            <div class="form-group"><label
                                                    for="degree2">{{ __('dashboard.Invitation type') }}
                                                    <span class="text-danger">*</span></label>
                                                <select class="form-control placeholder mb-4 master"
                                                    name="invitation_type" required>
                                                    <option value="public" @if($invset->invitation_type == 'public') selected @endif>{{ __('dashboard.public invitation') }}
                                                    </option>
                                                    <option value="reminder" @if($invset->invitation_type == 'reminder') selected @endif>{{ __('dashboard.Reminder invitation') }}
                                                    </option>
                                                    <option value="custom" @if($invset->invitation_type == 'custom') selected @endif>{{ __('dashboard.Custom invitation') }}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-4">
                                            <div class="form-group"><label for="degree2">{{ __('dashboard.event') }}
                                                    <span class="text-danger">*</span></label>
                                                <select name="event_id" class="form-control" required>
                                                    <option value="">{{ __('dashboard.Please select') }}
                                                    </option>
                                                    @foreach ($events as $event)
                                                    <option value="{{ $event->id }}" @if($invset->event_id == $event->id) selected @endif>{{ $event->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-6" style="display:none;">
                                            <div class="form-group">
                                                <label for="degree2">{{ __('dashboard.secret number') }}
                                                    <span class="text-danger">*</span></label>
                                                <input type="text" name="secret_number" class="form-control mb-4">
                                            </div>
                                        </div>

                                        <div class="row" style="margin:3px; ">

                                            <div class="card card-danger">
                                                <!-- <div class="card-header"> -->

                                                <!-- </div> -->
                                                <div class="card-body" style="margin-top:-30px; ">
                                                    <h5 class="" style="margin-top:-30px; "><i
                                                            data-feather="mail"></i>&emsp;{{ __('dashboard.Customize the first message') }}
                                                    </h5>
                                                    <div class="row" style="margin-top:30px; ">

                                                        <div class="col-5">
                                                            <div class="page">
                                                                <div class="marvel-device nexus5">
                                                                    <div class="top-bar"></div>
                                                                    <div class="sleep"></div>
                                                                    <div class="volume"></div>
                                                                    <div class="camera"></div>
                                                                    <div class="screen">
                                                                        <div class="screen-container">
                                                                            <div class="status-bar">
                                                                                <div class="time"></div>
                                                                                <div class="battery">
                                                                                    <i class="zmdi zmdi-battery"></i>
                                                                                </div>
                                                                                <div class="network">
                                                                                    <i class="zmdi zmdi-network"></i>
                                                                                </div>
                                                                                <div class="wifi">
                                                                                    <i class="zmdi zmdi-wifi-alt-2"></i>
                                                                                </div>
                                                                            </div>
                                                                            <div class="chat">
                                                                                <div class="chat-container">
                                                                                    <div class="user-bar">
                                                                                        <div class="back">
                                                                                            <i
                                                                                                class="zmdi zmdi-arrow-left"></i>
                                                                                        </div>
                                                                                        <div class="avatar">
                                                                                            <img src="{{ asset('assets/images/phone/logo.png') }}"
                                                                                                alt="Avatar">
                                                                                        </div>
                                                                                        <div class="name">
                                                                                            <span>Yamarahib</span>
                                                                                            <span
                                                                                                class="status">online</span>
                                                                                        </div>
                                                                                        <div class="actions more">
                                                                                            <i
                                                                                                class="zmdi zmdi-more-vert"></i>
                                                                                        </div>
                                                                                        <div class="actions attachment">
                                                                                            <i
                                                                                                class="zmdi zmdi-phone"></i>
                                                                                        </div>
                                                                                        <div class="actions">
                                                                                            <img
                                                                                                src="{{ asset('assets/images/phone/ic-action-videocall.png') }}" />
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="conversation">
                                                                                        <div
                                                                                            class="conversation-container">
                                                                                            <div class="message sent">
                                                                                                <div class="UzMP7 _27hEJ _3m5cz"
                                                                                                    id="preview_div" >
                                                                                                    <div
                                                                                                        class="_1BOF7 _2AOIt">
                                                                                                        <div
                                                                                                            class="cm280p3y ktbp76dp ocd2b0bc folpon7g aa0kojfi snweb893 g0rxnol2 jnl3jror copyable-text">
                                                                                                            <div>
                                                                                                                <div id="thumbnail_preview"
                                                                                                                    @if(!$invset->template1->is_image) style="display:none;" @endif
                                                                                                                    class=" l8fojup5 paxyh2gw sfeitywo cqsf3vkf   laorhtua gfz4du6o r7fjleex g0rxnol2">
                                                                                                                    <div style="height: max-content;"
                                                                                                                        class="g0rxnol2 ln8gz9je ppled2lx">
                                                                                                                        <div style="height: max-content;"
                                                                                                                            class="lhggkp7q jnl3jror    ln8gz9je ppled2lx">
                                                                                                                            <img src="{{ '/public'.$invset->image }}"
                                                                                                                                id="thumbnail"
                                                                                                                                class="thumbnail"
                                                                                                                                style="width: 100%;">
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div
                                                                                                                    class="cm280p3y bkoknyjm esbfogcw jfqm35v0 bxcbqipq mhcwslh8">
                                                                                                                    <div
                                                                                                                        class="_21Ahp _1sh49">
                                                                                                                        <span
                                                                                                                            class="_11JPr selectable-text copyable-text"
                                                                                                                            style="min-height: 0px;">
                                                                                                                            <span
                                                                                                                                class="f804f6gw ln8gz9je">
                                                                                                                                <p id="preview_header"
                                                                                                                                    class="introduction">
                                                                                                                                    {{ $invset->template1->salutation }}
                                                                                                                                </p>
                                                                                                                                <p id="text"
                                                                                                                                    class="msg-body">
                                                                                                                                    {{ $invset->text }}
                                                                                                                                </p>
                                                                                                                                <p id="preview_footer"
                                                                                                                                    class="msg-body">
                                                                                                                                    {{ $invset->template1->footer }}
                                                                                                                                </p>
                                                                                                                            </span>
                                                                                                                        </span>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div
                                                                                                                    class="lrw9n60e lhggkp7q fz4q5utg b9fczbqn">
                                                                                                                    <div
                                                                                                                        class="gq1t1y46 o38k74y6 e4p1bexh cr2cog7z le5p0ye3  ">
                                                                                                                        <span
                                                                                                                            class="l7jjieqr fewfhwl7"
                                                                                                                            dir="auto">
                                                                                                                            4:52
                                                                                                                            PM
                                                                                                                        </span>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        </div>

                                                                                                    </div>
                                                                                                    <div
                                                                                                        class="ktbp76dp">
                                                                                                        <div
                                                                                                            class="cm280p3y  lkhkxwyq tt8xd2xn pu8ho3eu mpdn4nr2 q0ffeh1t a303csdi owy6h1o0 ejukfo24 pe3vt9yl">
                                                                                                            <button
                                                                                                                class="cm280p3y   ggj6brxn   t8cglthg epwkujcx f8jlpxt4  dmdq60dq ajgl1lbb jht8oeb6 n1yiu2zv atp9n7ve oq31bsqd e1yunedv g1eqewly i6d2np71 mpdn4nr2 sa0hcjb2 rq6dtfpq aokg6g0y nqm9sais lrpjbpgm f2bw7rpy">
                                                                                                                <span
                                                                                                                    id="preview_accept"
                                                                                                                    class="">{{ $invset->template1->accept_text }}</span>
                                                                                                            </button>
                                                                                                            <button
                                                                                                                class="cm280p3y   ggj6brxn   t8cglthg epwkujcx f8jlpxt4  dmdq60dq ajgl1lbb jht8oeb6 n1yiu2zv atp9n7ve oq31bsqd e1yunedv g1eqewly i6d2np71 mpdn4nr2 sa0hcjb2 rq6dtfpq aokg6g0y nqm9sais lrpjbpgm f2bw7rpy">
                                                                                                                <span
                                                                                                                    id="preview_refuse"
                                                                                                                    class="gfz4du6o r7fjleex lhj4utae le5p0ye3">{{ $invset->template1->reject_text }}</span>
                                                                                                            </button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div id="location_preview"
                                                                                                        class="ktbp76dp"
                                                                                                        style="display:none;">
                                                                                                        <div
                                                                                                            class="cm280p3y  lkhkxwyq tt8xd2xn pu8ho3eu mpdn4nr2 q0ffeh1t a303csdi owy6h1o0 ejukfo24 pe3vt9yl">
                                                                                                            <button
                                                                                                                class="cm280p3y   ggj6brxn   t8cglthg epwkujcx f8jlpxt4  dmdq60dq ajgl1lbb jht8oeb6 n1yiu2zv atp9n7ve oq31bsqd e1yunedv g1eqewly i6d2np71 mpdn4nr2 sa0hcjb2 rq6dtfpq aokg6g0y nqm9sais lrpjbpgm f2bw7rpy"
                                                                                                                style="width: 100%;">
                                                                                                                <span
                                                                                                                    class="gfz4du6o r7fjleex lhj4utae le5p0ye3">موقع
                                                                                                                    المناسبة</span>
                                                                                                            </button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-7">

                                                            <div class="col-md-12 mb-3 mt-4">
                                                                <div class="form-group"><label
                                                                        for="degree2">{{ __('dashboard.Template name') }}
                                                                        <span class="text-danger">*</span></label>
                                                                    <select name="template_id" id="template_id" class="form-control"
                                                                        required onchange="template_change();">
                                                                        <option value="">
                                                                            {{ __('dashboard.Please select') }}
                                                                        </option>
                                                                        @foreach ($templates as $template)
                                                                        <option value="{{ $template->id }}" @if($invset->template_id == $template->id) selected @endif>
                                                                            {{ $template->name }}
                                                                        </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="degree2">{{ __('dashboard.Invitation text') }}
                                                                        <span class="text-danger">*</span></label>
                                                                    <div class="col-md-12 ">
                                                                        <div class="form-group">
                                                                            <div class="form-check form-check-inline">
                                                                                <input type="checkbox" class="form-check-input"
                                                                                    id="include_name" name="include_name"
                                                                                    @if($invset->include_name == 'on') checked @endif
                                                                                    onchange="include_name_change(this)">
                                                                                <label class="form-check-label"
                                                                                    for="include_name">
                                                                                    {{ __('dashboard.include name') }}
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <textarea class="form-control mb-4" name="text"
                                                                        id="text_input" rows="5" required>{{ $invset->text }}</textarea>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12 mb-4" id="photo_div"
                                                                style="display:none;">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="degree2">{{ __('dashboard.Invitation photo') }}</label>
                                                                </div>
                                                                <div class="form-group" style="margin-right:15px;">
                                                                    <div class="row">
                                                                        <div class="form-check col-3">
                                                                            <input class="form-check-input" type="radio"
                                                                                name="image_radio" id="is_image"
                                                                                value="is_image" @if($invset->is_image == 'on') checked @endif>
                                                                            <label
                                                                                class="form-check-label">{{ __('dashboard.fixed photo') }}</label>
                                                                        </div>
                                                                        <div class="form-check col-3">
                                                                            <input class="form-check-input" type="radio"
                                                                                name="image_radio" id="is_location"
                                                                                value="is_location" @if($invset->is_location == 'on') checked @endif>
                                                                            <label
                                                                                class="form-check-label">{{ __('dashboard.location') }}</label>
                                                                        </div>
                                                                        <div class="form-check col-3">
                                                                            <input class="form-check-input" type="radio"
                                                                                name="image_radio" id="is_qrcode"
                                                                                value="is_qrcode" @if($invset->is_qrcode == 'on') checked @endif>
                                                                            <label class="form-check-label">QR
                                                                                Code</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group" id="photo_file_div"
                                                                    style="display:none;">
                                                                    <input type="file" class="myDropify" name="photo"
                                                                        id="photo" data-default-file="{{ '/public'.$invset->image }}" />
                                                                </div>
                                                            </div>

                                                            <!--<div class="col-md-12">-->
                                                            <!--    <div class="form-group">-->
                                                            <!--        <label-->
                                                            <!--            for="degree2">{{ __('dashboard.The salutation and text before the title') }}-->
                                                            <!--            <span class="text-danger">*</span></label>-->
                                                            <!--        <input type="text" name="salutation" class="form-control mb-4"-->
                                                            <!--            required>-->
                                                            <!--    </div>-->
                                                            <!--</div>-->

                                                            <div id="location_text_div" class="col-md-12 "
                                                                style="display:block;">
                                                                <div class="form-group">
                                                                    <div class="form-check form-check-inline">
                                                                        <input type="checkbox" class="form-check-input"
                                                                            id="location_text" name="location_text"
                                                                            @if($invset->location_text == 'on') checked @endif
                                                                            onchange="location_text_change(this)">
                                                                        <label class="form-check-label"
                                                                            for="location_text">
                                                                            {{ __('dashboard.location text') }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                            <div class="col-md-12 mb-4" id="location_div"
                                                                style="display:none;">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="degree2">{{ __('dashboard.Event location') }}</label>
                                                                    <br>
                                                                    <button type="button"
                                                                        class="btn btn-outline-primary w-100 select-location mb-4">
                                                                        اختيار الموقع
                                                                    </button>
                                                                    <div class="map-info d-none2 h-200"
                                                                        style="height: 300px;     margin-bottom: 60px;">
                                                                        <input id="pac-input"
                                                                            class="controls form-control mb-4"
                                                                            onkeypress="return event.keyCode != 13;"
                                                                            type="text"
                                                                            placeholder="{{ __('dashboard.search In Map') }}" />

                                                                        <div id="map" class="map-div"
                                                                            style="width: 100%;height: 100%;">
                                                                        </div>
                                                                        <div> <i
                                                                                class="fa fa-crosshairs fa-2x crosshairs"></i>
                                                                        </div>
                                                                        <input id="lat" name="lat" type="text"
                                                                            @if($invset->location !== null) value="{{$location->lat}}" @else value="23.8859" @endif hidden>
                                                                        <input id="lng" name="lng" type="text"
                                                                            @if($invset->location !== null) value="{{$location->lng}}" @else value="45.0792" @endif hidden>
                                                                        <input id="zoom" name="zoom" type="text"
                                                                            @if($invset->location !== null) value="{{$location->zoom}}" @else value="5" @endif hidden>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-12 " style="display:none;">
                                                                <div class="form-group">
                                                                    <div class="form-check form-check-inline">
                                                                        <input type="checkbox" class="form-check-input"
                                                                            id="checkInline"
                                                                            name="additional_customization">
                                                                        <label class="form-check-label"
                                                                            for="checkInline">
                                                                            {{ __('dashboard.Additional customization') }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6 button-content d-none2">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="degree2">{{ __('dashboard.Accept button text') }}
                                                                        <span class="text-danger">*</span></label>
                                                                    <input type="text" name="accept_text"
                                                                        class="form-control mb-4">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 button-content d-none2">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="degree2">{{ __('dashboard.reject button text') }}
                                                                        <span class="text-danger">*</span></label>
                                                                    <input type="text" name="reject_text"
                                                                        class="form-control mb-4">
                                                                </div>
                                                            </div>

                                                            
                                                        </div>

                                                        

                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="row second-message" style="display:none; margin:3px; ">

                                            <div class="card card-danger">
                                                <!-- <div class="card-header"> -->

                                                <!-- </div> -->
                                                <div class="card-body" style="margin-top:-30px; ">
                                                    <h5 class="" style="margin-top:-30px; "><i
                                                            data-feather="mail"></i>&emsp;{{ __('dashboard.Customize the second message') }}
                                                    </h5>
                                                    <div class="row" style="margin-top:30px; ">

                                                        <div class="col-5">
                                                            <div class="page">
                                                                <div class="marvel-device nexus5">
                                                                    <div class="top-bar"></div>
                                                                    <div class="sleep"></div>
                                                                    <div class="volume"></div>
                                                                    <div class="camera"></div>
                                                                    <div class="screen">
                                                                        <div class="screen-container">
                                                                            <div class="status-bar">
                                                                                <div class="time"></div>
                                                                                <div class="battery">
                                                                                    <i class="zmdi zmdi-battery"></i>
                                                                                </div>
                                                                                <div class="network">
                                                                                    <i class="zmdi zmdi-network"></i>
                                                                                </div>
                                                                                <div class="wifi">
                                                                                    <i class="zmdi zmdi-wifi-alt-2"></i>
                                                                                </div>
                                                                            </div>
                                                                            <div class="chat">
                                                                                <div class="chat-container">
                                                                                    <div class="user-bar">
                                                                                        <div class="back">
                                                                                            <i
                                                                                                class="zmdi zmdi-arrow-left"></i>
                                                                                        </div>
                                                                                        <div class="avatar">
                                                                                            <img src="{{ asset('assets/images/phone/logo.png') }}"
                                                                                                alt="Avatar">
                                                                                        </div>
                                                                                        <div class="name">
                                                                                            <span>Yamarahib</span>
                                                                                            <span
                                                                                                class="status">online</span>
                                                                                        </div>
                                                                                        <div class="actions more">
                                                                                            <i
                                                                                                class="zmdi zmdi-more-vert"></i>
                                                                                        </div>
                                                                                        <div class="actions attachment">
                                                                                            <i
                                                                                                class="zmdi zmdi-phone"></i>
                                                                                        </div>
                                                                                        <div class="actions">
                                                                                            <img
                                                                                                src="{{ asset('assets/images/phone/ic-action-videocall.png') }}" />
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="conversation">
                                                                                        <div
                                                                                            class="conversation-container">
                                                                                            <div class="message sent">
                                                                                                <div class="UzMP7 _27hEJ _3m5cz"
                                                                                                    id="preview_div2"
                                                                                                    style="display:none;">
                                                                                                    <div
                                                                                                        class="_1BOF7 _2AOIt">
                                                                                                        <div
                                                                                                            class="cm280p3y ktbp76dp ocd2b0bc folpon7g aa0kojfi snweb893 g0rxnol2 jnl3jror copyable-text">
                                                                                                            <div>
                                                                                                                <div id="thumbnail2_preview"
                                                                                                                    @if($invset->template2 && !$invset->template2->is_image2) style="display:none;" @endif
                                                                                                                    class=" l8fojup5 paxyh2gw sfeitywo cqsf3vkf   laorhtua gfz4du6o r7fjleex g0rxnol2">
                                                                                                                    <div style="height: max-content;"
                                                                                                                        class="g0rxnol2 ln8gz9je ppled2lx">
                                                                                                                        <div style="height: max-content;"
                                                                                                                            class="lhggkp7q jnl3jror    ln8gz9je ppled2lx">
                                                                                                                            <img src="{{ '/public'.$invset->image2 }}"
                                                                                                                                id="thumbnail2"
                                                                                                                                class="thumbnail"
                                                                                                                                style="width: 100%;">
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div
                                                                                                                    class="cm280p3y bkoknyjm esbfogcw jfqm35v0 bxcbqipq mhcwslh8">
                                                                                                                    <div
                                                                                                                        class="_21Ahp _1sh49">
                                                                                                                        <span
                                                                                                                            class="_11JPr selectable-text copyable-text"
                                                                                                                            style="min-height: 0px;">
                                                                                                                            <span
                                                                                                                                class="f804f6gw ln8gz9je">
                                                                                                                                <p id="preview_header2"
                                                                                                                                    class="introduction">
                                                                                                                                    {{$invset->template2 &&  $invset->template2->salutation }}
                                                                                                                                </p>
                                                                                                                                <p id="text2"
                                                                                                                                    class="msg-body">
                                                                                                                                    {{$invset->template2 &&  $invset->text2 }}
                                                                                                                                </p>
                                                                                                                                <p id="preview_footer2"
                                                                                                                                    class="msg-body">
                                                                                                                                    {{$invset->template2 &&  $invset->template2->footer }}
                                                                                                                                </p>
                                                                                                                            </span>
                                                                                                                        </span>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div
                                                                                                                    class="lrw9n60e lhggkp7q fz4q5utg b9fczbqn">
                                                                                                                    <div
                                                                                                                        class="gq1t1y46 o38k74y6 e4p1bexh cr2cog7z le5p0ye3  ">
                                                                                                                        <span
                                                                                                                            class="l7jjieqr fewfhwl7"
                                                                                                                            dir="auto">
                                                                                                                            4:52
                                                                                                                            PM
                                                                                                                        </span>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        </div>

                                                                                                    </div>
                                                                                                    
                                                                                                    <div id="location2_preview"
                                                                                                        class="ktbp76dp"
                                                                                                        style="display:none;">
                                                                                                        <div
                                                                                                            class="cm280p3y  lkhkxwyq tt8xd2xn pu8ho3eu mpdn4nr2 q0ffeh1t a303csdi owy6h1o0 ejukfo24 pe3vt9yl">
                                                                                                            <button
                                                                                                                class="cm280p3y   ggj6brxn   t8cglthg epwkujcx f8jlpxt4  dmdq60dq ajgl1lbb jht8oeb6 n1yiu2zv atp9n7ve oq31bsqd e1yunedv g1eqewly i6d2np71 mpdn4nr2 sa0hcjb2 rq6dtfpq aokg6g0y nqm9sais lrpjbpgm f2bw7rpy"
                                                                                                                style="width: 100%;">
                                                                                                                <span
                                                                                                                    class="gfz4du6o r7fjleex lhj4utae le5p0ye3">موقع
                                                                                                                    المناسبة</span>
                                                                                                            </button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-7">

                                                            <div class="col-md-12 mb-3 mt-4">
                                                                <div class="form-group"><label
                                                                        for="degree2">{{ __('dashboard.Template name') }}
                                                                        <span class="text-danger">*</span></label>
                                                                    <select name="template_id2" id="template_id2" class="form-control"
                                                                         onchange="template_change2();">
                                                                        <option value="">
                                                                            {{ __('dashboard.Please select') }}
                                                                        </option>
                                                                        @foreach ($templates as $template)
                                                                        @if($template->is_buttons != 'on')
                                                                        <option value="{{ $template->id }}" @if($invset->template_id2 == $template->id) selected @endif>
                                                                            {{ $template->name }}
                                                                        </option>
                                                                        @endif
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="degree2">{{ __('dashboard.Invitation text') }}
                                                                        <span class="text-danger">*</span></label>
                                                                    <div class="col-md-12 ">
                                                                        <div class="form-group">
                                                                            <div class="form-check form-check-inline">
                                                                                <input type="checkbox" class="form-check-input"
                                                                                    id="include_name2" name="include_name2"
                                                                                    @if($invset->include_name2 == 'on') checked @endif
                                                                                    onchange="include_name_change2(this)">
                                                                                <label class="form-check-label"
                                                                                    for="include_name2">
                                                                                    {{ __('dashboard.include name') }}
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <textarea class="form-control mb-4" name="text2"
                                                                        id="text_input2" rows="5" >{{ $invset->text2 }}</textarea>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12 mb-4" id="photo_div2"
                                                                style="display:none;">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="degree2">{{ __('dashboard.Invitation photo') }}</label>
                                                                </div>
                                                                <div class="form-group" style="margin-right:15px;">
                                                                    <div class="row">
                                                                        <div class="form-check col-3">
                                                                            <input class="form-check-input" type="radio" name="image_radio2"
                                                                                id="is_image2" value="is_image2" @if($invset->is_image2 == 'on') checked @endif>
                                                                            <label
                                                                                class="form-check-label">{{ __('dashboard.fixed photo') }}</label>
                                                                        </div>
                                                                        <div class="form-check col-3">
                                                                            <input class="form-check-input" type="radio" name="image_radio2"
                                                                                id="is_location2" value="is_location2" @if($invset->is_location2 == 'on') checked @endif>
                                                                            <label
                                                                                class="form-check-label">{{ __('dashboard.location') }}</label>
                                                                        </div>
                                                                        <div class="form-check col-3">
                                                                            <input class="form-check-input" type="radio" name="image_radio2"
                                                                                id="is_qrcode2" value="is_qrcode2" @if($invset->is_qrcode2 == 'on') checked @endif>
                                                                            <label class="form-check-label">QR Code</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group" id="photo_file_div2"
                                                                    style="display:none;">
                                                                    <input type="file" class="myDropify" name="photo2"
                                                                        id="photo2" data-default-file="{{ '/public'.$invset->image2 }}" />
                                                                </div>
                                                            </div>

                                                            <div id="location_text_div2" class="col-md-12 "
                                                                style="display:block;">
                                                                <div class="form-group">
                                                                    <div class="form-check form-check-inline">
                                                                        <input type="checkbox" class="form-check-input"
                                                                            id="location_text2" name="location_text2"
                                                                            @if($invset->location_text2 == 'on') checked @endif
                                                                            onchange="location_text_change2(this)">
                                                                        <label class="form-check-label"
                                                                            for="location_text">
                                                                            {{ __('dashboard.location text') }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        
                                        
                                        <div class="row third-message" style="display:none; margin:3px; ">

                                            <div class="card card-danger">
                                                <!-- <div class="card-header"> -->

                                                <!-- </div> -->
                                                <div class="card-body" style="margin-top:-30px; ">
                                                    <h5 class="" style="margin-top:-30px; "><i
                                                            data-feather="mail"></i>&emsp;{{ __('dashboard.Customize the third message') }}
                                                    </h5>
                                                    <div class="row" style="margin-top:30px; ">

                                                        <div class="col-5">
                                                            <div class="page">
                                                                <div class="marvel-device nexus5">
                                                                    <div class="top-bar"></div>
                                                                    <div class="sleep"></div>
                                                                    <div class="volume"></div>
                                                                    <div class="camera"></div>
                                                                    <div class="screen">
                                                                        <div class="screen-container">
                                                                            <div class="status-bar">
                                                                                <div class="time"></div>
                                                                                <div class="battery">
                                                                                    <i class="zmdi zmdi-battery"></i>
                                                                                </div>
                                                                                <div class="network">
                                                                                    <i class="zmdi zmdi-network"></i>
                                                                                </div>
                                                                                <div class="wifi">
                                                                                    <i class="zmdi zmdi-wifi-alt-2"></i>
                                                                                </div>
                                                                            </div>
                                                                            <div class="chat">
                                                                                <div class="chat-container">
                                                                                    <div class="user-bar">
                                                                                        <div class="back">
                                                                                            <i
                                                                                                class="zmdi zmdi-arrow-left"></i>
                                                                                        </div>
                                                                                        <div class="avatar">
                                                                                            <img src="{{ asset('assets/images/phone/logo.png') }}"
                                                                                                alt="Avatar">
                                                                                        </div>
                                                                                        <div class="name">
                                                                                            <span>Yamarahib</span>
                                                                                            <span
                                                                                                class="status">online</span>
                                                                                        </div>
                                                                                        <div class="actions more">
                                                                                            <i
                                                                                                class="zmdi zmdi-more-vert"></i>
                                                                                        </div>
                                                                                        <div class="actions attachment">
                                                                                            <i
                                                                                                class="zmdi zmdi-phone"></i>
                                                                                        </div>
                                                                                        <div class="actions">
                                                                                            <img
                                                                                                src="{{ asset('assets/images/phone/ic-action-videocall.png') }}" />
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="conversation">
                                                                                        <div
                                                                                            class="conversation-container">
                                                                                            <div class="message sent">
                                                                                                <div class="UzMP7 _27hEJ _3m5cz"
                                                                                                    id="preview_div3"
                                                                                                    style="display:none;">
                                                                                                    <div
                                                                                                        class="_1BOF7 _2AOIt">
                                                                                                        <div
                                                                                                            class="cm280p3y ktbp76dp ocd2b0bc folpon7g aa0kojfi snweb893 g0rxnol2 jnl3jror copyable-text">
                                                                                                            <div>
                                                                                                                <div id="thumbnail3_preview"
                                                                                                                    @if($invset->template3 && !$invset->template3->is_image) style="display:none; @endif
                                                                                                                    class=" l8fojup5 paxyh2gw sfeitywo cqsf3vkf   laorhtua gfz4du6o r7fjleex g0rxnol2">
                                                                                                                    <div style="height: max-content;"
                                                                                                                        class="g0rxnol2 ln8gz9je ppled2lx">
                                                                                                                        <div style="height: max-content;"
                                                                                                                            class="lhggkp7q jnl3jror    ln8gz9je ppled2lx">
                                                                                                                            <img src="{{ '/public'.$invset->image }}"
                                                                                                                                id="thumbnail3"
                                                                                                                                class="thumbnail"
                                                                                                                                style="width: 100%;">
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div
                                                                                                                    class="cm280p3y bkoknyjm esbfogcw jfqm35v0 bxcbqipq mhcwslh8">
                                                                                                                    <div
                                                                                                                        class="_21Ahp _1sh49">
                                                                                                                        <span
                                                                                                                            class="_11JPr selectable-text copyable-text"
                                                                                                                            style="min-height: 0px;">
                                                                                                                            <span
                                                                                                                                class="f804f6gw ln8gz9je">
                                                                                                                                <p id="preview_header3"
                                                                                                                                    class="introduction">
                                                                                                                                    {{ $invset->template3 &&  $invset->template3->salutation }}
                                                                                                                                </p>
                                                                                                                                <p id="text3"
                                                                                                                                    class="msg-body">
                                                                                                                                    {{ $invset->template3 &&  $invset->text3 }}
                                                                                                                                </p>
                                                                                                                                <p id="preview_footer3"
                                                                                                                                    class="msg-body">
                                                                                                                                    {{ $invset->template3 && $invset->template3->footer3 }}
                                                                                                                                </p>
                                                                                                                            </span>
                                                                                                                        </span>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div
                                                                                                                    class="lrw9n60e lhggkp7q fz4q5utg b9fczbqn">
                                                                                                                    <div
                                                                                                                        class="gq1t1y46 o38k74y6 e4p1bexh cr2cog7z le5p0ye3  ">
                                                                                                                        <span
                                                                                                                            class="l7jjieqr fewfhwl7"
                                                                                                                            dir="auto">
                                                                                                                            4:52
                                                                                                                            PM
                                                                                                                        </span>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        </div>

                                                                                                    </div>
                                                                                                    
                                                                                                    <div id="location3_preview"
                                                                                                        class="ktbp76dp"
                                                                                                        style="display:none;">
                                                                                                        <div
                                                                                                            class="cm280p3y  lkhkxwyq tt8xd2xn pu8ho3eu mpdn4nr2 q0ffeh1t a303csdi owy6h1o0 ejukfo24 pe3vt9yl">
                                                                                                            <button
                                                                                                                class="cm280p3y   ggj6brxn   t8cglthg epwkujcx f8jlpxt4  dmdq60dq ajgl1lbb jht8oeb6 n1yiu2zv atp9n7ve oq31bsqd e1yunedv g1eqewly i6d2np71 mpdn4nr2 sa0hcjb2 rq6dtfpq aokg6g0y nqm9sais lrpjbpgm f2bw7rpy"
                                                                                                                style="width: 100%;">
                                                                                                                <span
                                                                                                                    class="gfz4du6o r7fjleex lhj4utae le5p0ye3">موقع
                                                                                                                    المناسبة</span>
                                                                                                            </button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-7">

                                                            <div class="col-md-12 mb-3 mt-4">
                                                                <div class="form-group"><label
                                                                        for="degree2">{{ __('dashboard.Template name') }}
                                                                        <span class="text-danger">*</span></label>
                                                                    <select name="template_id3" id="template_id3" class="form-control"
                                                                         onchange="template_change3();">
                                                                        <option value="">
                                                                            {{ __('dashboard.Please select') }}
                                                                        </option>
                                                                        @foreach ($templates as $template)
                                                                        @if($template->is_buttons != 'on')
                                                                        <option value="{{ $template->id }}" @if($invset->template_id3 == $template->id) selected @endif>
                                                                            {{ $template->name }}
                                                                        </option>
                                                                        @endif
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="degree2">{{ __('dashboard.Invitation text') }}
                                                                        <span class="text-danger">*</span></label>
                                                                    <div class="col-md-12 ">
                                                                        <div class="form-group">
                                                                            <div class="form-check form-check-inline">
                                                                                <input type="checkbox" class="form-check-input"
                                                                                    id="include_name3" name="include_name3"
                                                                                    @if($invset->include_name3 == 'on') checked @endif
                                                                                    onchange="include_name_change3(this)">
                                                                                <label class="form-check-label"
                                                                                    for="include_name3">
                                                                                    {{ __('dashboard.include name') }}
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <textarea class="form-control mb-4" name="text3"
                                                                        id="text_input3" rows="5" >{{ $invset->text3 }}</textarea>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12 mb-4" id="photo_div3"
                                                                style="display:none;">
                                                                <div class="form-group">
                                                                    <label
                                                                        for="degree2">{{ __('dashboard.Invitation photo') }}</label>
                                                                </div>
                                                                <div class="form-group" style="margin-right:15px;">
                                                                    <div class="row">
                                                                        <div class="form-check col-3">
                                                                            <input class="form-check-input" type="radio" name="image_radio3"
                                                                                id="is_image3" value="is_image3" @if($invset->is_image3 == 'on') checked @endif>
                                                                            <label
                                                                                class="form-check-label">{{ __('dashboard.fixed photo') }}</label>
                                                                        </div>
                                                                        <div class="form-check col-3">
                                                                            <input class="form-check-input" type="radio" name="image_radio3"
                                                                                id="is_location3" value="is_location3" @if($invset->is_location3 == 'on') checked @endif>
                                                                            <label
                                                                                class="form-check-label">{{ __('dashboard.location') }}</label>
                                                                        </div>
                                                                        <div class="form-check col-3">
                                                                            <input class="form-check-input" type="radio" name="image_radio3"
                                                                                id="is_qrcode3" value="is_qrcode3" @if($invset->is_qrcode3 == 'on') checked @endif>
                                                                            <label class="form-check-label">QR Code</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group" id="photo_file_div3"
                                                                    style="display:none;">
                                                                    <input type="file" class="myDropify" name="photo3"
                                                                        id="photo3" data-default-file="{{ '/public'.$invset->image3 }}" />
                                                                </div>
                                                            </div>

                                                            <div id="location_text_div3" class="col-md-12 "
                                                                style="display:block;">
                                                                <div class="form-group">
                                                                    <div class="form-check form-check-inline">
                                                                        <input type="checkbox" class="form-check-input"
                                                                            id="location_text3" name="location_text3"
                                                                            @if($invset->location_text3 == 'on') checked @endif
                                                                            onchange="location_text_change3(this)">
                                                                        <label class="form-check-label"
                                                                            for="location_text">
                                                                            {{ __('dashboard.location text') }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        
                                        
                                        
                                    </div>
                                </div>
                            </div>
                            
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit"
                                        class="btn btn-primary pull-left">{{ __('dashboard.save') }}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
function check_location_div(){
    other_radio = false;
    if(document.querySelector('input[name="image_radio"]:checked')){
        other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
    }
    other_radio2 = false;
    if(document.querySelector('input[name="image_radio2"]:checked')){
        other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
    }
    other_radio3 = false;
    if(document.querySelector('input[name="image_radio3"]:checked')){
        other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
    }
    if (other_radio === false && other_radio2 === false && other_radio3 === false &&
        document.getElementById('location_text2').checked === false &&
        document.getElementById('location_text2').checked === false && 
        document.getElementById('location_text3').checked === false) {
        $('#location_div').css('display', 'none');
    }
}

function change_text(){
    if (document.getElementById('include_name').checked && document.getElementById('location_text').checked === false) {
        $('#text').html('السيد ....... ....... '+$('#text_input').val());
    } else if (document.getElementById('include_name').checked === false && document.getElementById('location_text').checked ) {
        $('#text').html($('#text_input').val()+' '+'<a href="#">https://maps.google.com/?q=24.766846391469194,46.585700244140625</a>');
    } else if (document.getElementById('include_name').checked && document.getElementById('location_text').checked ) {
        $('#text').html('السيد ....... ....... '+$('#text_input').val()+' '+'<a href="#">https://maps.google.com/?q=24.766846391469194,46.585700244140625</a>');
    } else {
        $('#text').html($('#text_input').val());
    }
}

function change_text2(){
    if (document.getElementById('include_name2').checked && document.getElementById('location_text2').checked === false) {
        $('#text2').html('السيد ....... ....... '+$('#text_input2').val());
    } else if (document.getElementById('include_name2').checked === false && document.getElementById('location_text2').checked ) {
        $('#text2').html($('#text_input2').val()+' '+'<a href="#">https://maps.google.com/?q=24.766846391469194,46.585700244140625</a>');
    } else if (document.getElementById('include_name2').checked && document.getElementById('location_text2').checked ) {
        $('#text2').html('السيد ....... ....... '+$('#text_input2').val()+' '+'<a href="#">https://maps.google.com/?q=24.766846391469194,46.585700244140625</a>');
    } else {
        $('#text2').html($('#text_input2').val());
    }
}

function change_text3(){
    if (document.getElementById('include_name3').checked && document.getElementById('location_text3').checked === false) {
        $('#text3').html('السيد ....... ....... '+$('#text_input3').val());
    } else if (document.getElementById('include_name3').checked === false && document.getElementById('location_text3').checked ) {
        $('#text3').html($('#text_input3').val()+' '+'<a href="#">https://maps.google.com/?q=24.766846391469194,46.585700244140625</a>');
    } else if (document.getElementById('include_name3').checked && document.getElementById('location_text3').checked ) {
        $('#text3').html('السيد ....... ....... '+$('#text_input3').val()+' '+'<a href="#">https://maps.google.com/?q=24.766846391469194,46.585700244140625</a>');
    } else {
        $('#text3').html($('#text_input3').val());
    }
}

function include_name_change(element) {
    change_text();
}

function include_name_change2(element) {
    change_text2();
}

function include_name_change3(element) {
    change_text3();
}

function location_text_change(element) {
    if (element.checked) {
        $('#location_div').css('display', 'block');
    } else {
        check_location_div();
    }
    change_text();
}

function location_text_change2(element) {
    if (element.checked) {
        $('#location_div').css('display', 'block');
    } else {
        check_location_div();
    }
    change_text2();
}

function location_text_change3(element) {
    if (element.checked) {
        $('#location_div').css('display', 'block');
    } else {
        check_location_div();
    }
    change_text3();
}

addEventListener(`input`, (evt) => {
    const elRadio = evt.target.closest(`[name="image_radio"]`);
    const elRadio2 = evt.target.closest(`[name="image_radio2"]`);
    if (!elRadio && !elRadio2) return; // Not a radio element. Do nothing

    // console.log(`${elRadio.id} ${elRadio.checked}`);
    if (`${elRadio.id}` == 'is_image') {
        $('#thumbnail').attr('src', "{{ asset('assets/images/phone/thumbnail.png') }}");
        $('#photo_file_div').css('display', 'block');
        other_radio2 = false;
        if(document.querySelector('input[name="image_radio2"]:checked')){
            other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
        }
        other_radio3 = false;
        if(document.querySelector('input[name="image_radio3"]:checked')){
            other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
        }
        if (other_radio2 === false && other_radio3 === false &&
            document.getElementById('location_text').checked === false &&
            document.getElementById('location_text2').checked === false &&
            document.getElementById('location_text3').checked === false) {
            $('#location_div').css('display', 'none');
        }
    }
    if (`${elRadio.id}` == 'is_location') {
        $('#thumbnail').attr('src', "{{ asset('assets/images/others/map_example.jpg') }}");
        $('#photo_file_div').css('display', 'none');
        $('#location_div').css('display', 'block');
    }
    if (`${elRadio.id}` == 'is_qrcode') {
        $('#thumbnail').attr('src', "{{ asset('assets/images/others/qrcode_example.jpg') }}");
        $('#photo_file_div').css('display', 'none');
        other_radio2 = false;
        if(document.querySelector('input[name="image_radio2"]:checked')){
            other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
        }
        other_radio3 = false;
        if(document.querySelector('input[name="image_radio3"]:checked')){
            other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
        }
        if (other_radio2 === false && other_radio3 === false &&
            document.getElementById('location_text').checked === false &&
            document.getElementById('location_text2').checked === false &&
            document.getElementById('location_text3').checked === false) {
            $('#location_div').css('display', 'none');
        }
    }
});

addEventListener(`input`, (evt) => {
    const elRadio = evt.target.closest(`[name="image_radio2"]`);
    if (!elRadio) return; // Not a radio element. Do nothing

    console.log(`${elRadio.id} ${elRadio.checked}`);
    if (`${elRadio.id}` == 'is_image2') {
        $('#thumbnail2').attr('src', "{{ asset('assets/images/phone/thumbnail.png') }}");
        $('#photo_file_div2').css('display', 'block');
        other_radio = false;
        if(document.querySelector('input[name="image_radio"]:checked')){
            other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
        }
        other_radio3 = false;
        if(document.querySelector('input[name="image_radio3"]:checked')){
            other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
        }
        if (other_radio === false && other_radio3 === false &&
            document.getElementById('location_text').checked === false &&
            document.getElementById('location_text2').checked === false &&
            document.getElementById('location_text3').checked === false) {
            $('#location_div').css('display', 'none');
        }
    }
    if (`${elRadio.id}` == 'is_location2') {
        $('#thumbnail2').attr('src', "{{ asset('assets/images/others/map_example.jpg') }}");
        $('#photo_file_div2').css('display', 'none');
        $('#location_div').css('display', 'block');
    }
    if (`${elRadio.id}` == 'is_qrcode2') {
        $('#thumbnail2').attr('src', "{{ asset('assets/images/others/qrcode_example.jpg') }}");
        $('#photo_file_div2').css('display', 'none');
        other_radio = false;
        if(document.querySelector('input[name="image_radio"]:checked')){
            other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
        }
        other_radio3 = false;
        if(document.querySelector('input[name="image_radio3"]:checked')){
            other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
        }
        if (other_radio === false && other_radio3 === false &&
            document.getElementById('location_text').checked === false &&
            document.getElementById('location_text2').checked === false &&
            document.getElementById('location_text3').checked === false) {
            $('#location_div').css('display', 'none');
        }
    }
});

addEventListener(`input`, (evt) => {
    const elRadio = evt.target.closest(`[name="image_radio3"]`);
    if (!elRadio) return; // Not a radio element. Do nothing

    // console.log(`${elRadio.id} ${elRadio.checked}`);
    if (`${elRadio.id}` == 'is_image3') {
        $('#thumbnail3').attr('src', "{{ asset('assets/images/phone/thumbnail.png') }}");
        $('#photo_file_div3').css('display', 'block');
        other_radio = false;
        if(document.querySelector('input[name="image_radio"]:checked')){
            other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
        }
        other_radio2 = false;
        if(document.querySelector('input[name="image_radio2"]:checked')){
            other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
        }
        if (other_radio === false && other_radio2 === false &&
            document.getElementById('location_text').checked === false &&
            document.getElementById('location_text2').checked === false &&
            document.getElementById('location_text3').checked === false) {
            $('#location_div').css('display', 'none');
        }
    }
    if (`${elRadio.id}` == 'is_location3') {
        $('#thumbnail3').attr('src', "{{ asset('assets/images/others/map_example.jpg') }}");
        $('#photo_file_div3').css('display', 'none');
        $('#location_div').css('display', 'block');
    }
    if (`${elRadio.id}` == 'is_qrcode3') {
        $('#thumbnail3').attr('src', "{{ asset('assets/images/others/qrcode_example.jpg') }}");
        $('#photo_file_div3').css('display', 'none');
        other_radio = false;
        if(document.querySelector('input[name="image_radio"]:checked')){
            other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
        }
        other_radio2 = false;
        if(document.querySelector('input[name="image_radio2"]:checked')){
            other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
        }
        if (other_radio === false && other_radio2 === false &&
            document.getElementById('location_text').checked === false &&
            document.getElementById('location_text2').checked === false &&
            document.getElementById('location_text3').checked === false) {
            $('#location_div').css('display', 'none');
        }
    }
});

window.onload = function () {
    template_change();
    @if($invset->template2)
    template_change2();
    @endif
    @if($invset->template3)
    template_change3();
    @endif
    if (document.querySelector('input[name="image_radio"]:checked').value == 'is_image') {
        // $('#thumbnail').attr('src', "{{ asset('assets/images/phone/thumbnail.png') }}");
        $('#photo_file_div').css('display', 'block');
        other_radio2 = false;
        if(document.querySelector('input[name="image_radio2"]:checked')){
            other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
        }
        other_radio3 = false;
        if(document.querySelector('input[name="image_radio3"]:checked')){
            other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
        }
        if (other_radio2 === false && other_radio3 === false &&
            document.getElementById('location_text').checked === false &&
            document.getElementById('location_text2').checked === false &&
            document.getElementById('location_text3').checked === false) {
            $('#location_div').css('display', 'none');
        }
    }
    if (document.querySelector('input[name="image_radio"]:checked').value == 'is_location') {
        $('#thumbnail').attr('src', "{{ asset('assets/images/others/map_example.jpg') }}");
        $('#photo_file_div').css('display', 'none');
        $('#location_div').css('display', 'block');
        set_loc();
    }
    if (document.querySelector('input[name="image_radio"]:checked').value == 'is_qrcode') {
        $('#thumbnail').attr('src', "{{ asset('assets/images/others/qrcode_example.jpg') }}");
        $('#photo_file_div').css('display', 'none');
        other_radio2 = false;
        if(document.querySelector('input[name="image_radio2"]:checked')){
            other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
        }
        other_radio3 = false;
        if(document.querySelector('input[name="image_radio3"]:checked')){
            other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
        }
        if (other_radio2 === false && other_radio3 === false &&
            document.getElementById('location_text').checked === false &&
            document.getElementById('location_text2').checked === false &&
            document.getElementById('location_text3').checked === false) {
            $('#location_div').css('display', 'none');
        }
    }
    
    if(document.querySelector('input[name="image_radio2"]:checked')){
        if (document.querySelector('input[name="image_radio2"]:checked').value == 'is_image2') {
            // $('#thumbnail').attr('src', "{{ asset('assets/images/phone/thumbnail.png') }}");
            $('#photo_file_div2').css('display', 'block');
            other_radio = false;
            if(document.querySelector('input[name="image_radio"]:checked')){
                other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
            }
            other_radio3 = false;
            if(document.querySelector('input[name="image_radio3"]:checked')){
                other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
            }
            if (other_radio === false && other_radio3 === false &&
                document.getElementById('location_text').checked === false &&
                document.getElementById('location_text2').checked === false &&
                document.getElementById('location_text3').checked === false) {
                // $('#location_div').css('display', 'none');
            }
        }
        if (document.querySelector('input[name="image_radio2"]:checked').value == 'is_location2') {
            $('#thumbnail2').attr('src', "{{ asset('assets/images/others/map_example.jpg') }}");
            $('#photo_file_div2').css('display', 'none');
            $('#location_div').css('display', 'block');
            set_loc();
        }
        if (document.querySelector('input[name="image_radio2"]:checked').value == 'is_qrcode2') {
            $('#thumbnail2').attr('src', "{{ asset('assets/images/others/qrcode_example.jpg') }}");
            $('#photo_file_div2').css('display', 'none');
            other_radio = false;
            if(document.querySelector('input[name="image_radio"]:checked')){
                other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
            }
            other_radio3 = false;
            if(document.querySelector('input[name="image_radio3"]:checked')){
                other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
            }
            if (other_radio === false && other_radio3 === false &&
                document.getElementById('location_text').checked === false &&
                document.getElementById('location_text2').checked === false &&
                document.getElementById('location_text3').checked === false) {
                // $('#location_div').css('display', 'none');
            }
        }
    }
    
    if(document.querySelector('input[name="image_radio3"]:checked')){
        if (document.querySelector('input[name="image_radio3"]:checked').value == 'is_image3') {
            // $('#thumbnail').attr('src', "{{ asset('assets/images/phone/thumbnail.png') }}");
            $('#photo_file_div3').css('display', 'block');
            other_radio2 = false;
            if(document.querySelector('input[name="image_radio2"]:checked')){
                other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
            }
            other_radio = false;
            if(document.querySelector('input[name="image_radio"]:checked')){
                other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
            }
            if (other_radio2 === false && other_radio === false &&
                document.getElementById('location_text').checked === false &&
                document.getElementById('location_text2').checked === false &&
                document.getElementById('location_text3').checked === false) {
                // $('#location_div').css('display', 'none');
            }
        }
        if (document.querySelector('input[name="image_radio3"]:checked').value == 'is_location3') {
            $('#thumbnail3').attr('src', "{{ asset('assets/images/others/map_example.jpg') }}");
            $('#photo_file_div3').css('display', 'none');
            $('#location_div').css('display', 'block');
            set_loc();
        }
        if (document.querySelector('input[name="image_radio3"]:checked').value == 'is_qrcode3') {
            $('#thumbnail3').attr('src', "{{ asset('assets/images/others/qrcode_example.jpg') }}");
            $('#photo_file_div3').css('display', 'none');
            other_radio2 = false;
            if(document.querySelector('input[name="image_radio2"]:checked')){
                other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
            }
            other_radio = false;
            if(document.querySelector('input[name="image_radio"]:checked')){
                other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
            }
            if (other_radio2 === false && other_radio === false &&
                document.getElementById('location_text').checked === false &&
                document.getElementById('location_text2').checked === false &&
                document.getElementById('location_text3').checked === false) {
                // $('#location_div').css('display', 'none');
            }
        }
    }
    
    
    if (document.querySelector('input[name="location_text"]:checked') ||
        document.querySelector('input[name="location_text2"]:checked') ||
        document.querySelector('input[name="location_text3"]:checked')
        ) 
    {
        $('#location_div').css('display', 'block');
        set_loc();
    }
    
    // if (document.querySelector('input[name="location_text"]:checked')){
    //     $('#text').html($('#text_input').val()+' '+'<a href="#">https://maps.google.com/?q=24.766846391469194,46.585700244140625</a>');
    // }
    // if (document.querySelector('input[name="location_text2"]:checked')){
    //     $('#text2').html($('#text_input2').val()+' '+'<a href="#">https://maps.google.com/?q=24.766846391469194,46.585700244140625</a>');
    // }
    // if (document.querySelector('input[name="location_text3"]:checked')){
    //     $('#text3').html($('#text_input3').val()+' '+'<a href="#">https://maps.google.com/?q=24.766846391469194,46.585700244140625</a>');
    // }
    
    change_text();
    change_text2();
    change_text3();
    
    function set_loc(){
        
        $('.map-info').show();
        $('.select-location').hide();
       
        var map;
        const lat = parseFloat(document.getElementById('lat').getAttribute('value'));
        const lng = parseFloat(document.getElementById('lng').getAttribute('value'));
        const zoom = parseFloat(document.getElementById('zoom').getAttribute('value'));
        map = new google.maps.Map(document.getElementById('map'), {
        center: {
                lat: lat,
                lng: lng
            },
            zoom: zoom
        });
        marker_loc = new google.maps.LatLng(lat, lng);
        marker = new google.maps.Marker({
            map: map,
            draggable: true, // Allow the marker to be dragged
            title: 'Selected Location',
            position: marker_loc,
        });
    
        doSearch(map);
    }
}


function template_change() {
    var e = document.querySelector("#template_id");
    var id = e.value;

    $('#preview_div').css('display', 'none');
    $('#preview_header').html('');
    $('#preview_footer').html('');
    $('#preview_accept').html('');
    $('#preview_refuse').html('');
    var url = "{{ url('invitation-settings/templates/get_template_by_id') }}" + '/' + id;
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type: 'GET',
        url: url,
        cache: false,
        contentType: false,
        processData: false,
        success: (data) => {
            if (data.is_buttons == 'on') {
                $(document).find('.second-message').css('display', 'flex');
                $(document).find('.third-message').css('display', 'flex');
            }else{
                $(document).find('.second-message').css('display', 'none');
                $(document).find('.third-message').css('display', 'none');
            }
            
            $('#preview_header').html(data.salutation);
            $('#preview_footer').html(data.footer);
            const obj = JSON.parse(data.actions_buttons);
            if (obj) {
                $('#preview_accept').html(obj['accept_text']);
                $('#preview_refuse').html(obj['reject_text']);
            }
            if (data.is_image == 'on') {
                $('#thumbnail_preview').css('display', 'block');
                $('#photo_div').css('display', 'block');
            } else {
                $('#thumbnail_preview').css('display', 'none');
                $('#photo_div').css('display', 'none');
            }
            if (data.is_location == 'on') {
                $('#location_preview').css('display', 'block');
                $('#location_div').css('display', 'block');
            } else {
                $('#location_preview').css('display', 'none');
                other_radio2 = false;
                if(document.querySelector('input[name="image_radio2"]:checked')){
                    other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
                }
                other_radio3 = false;
                if(document.querySelector('input[name="image_radio3"]:checked')){
                    other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
                }
                if (
                    other_radio2 === false && other_radio3 === false &&
                    document.getElementById('location_text').checked === false &&
                    document.getElementById('location_text2').checked === false &&
                    document.getElementById('location_text3').checked === false) {
                    $('#location_div').css('display', 'none');
                }
            }
            $('#preview_div').css('display', 'block');
        }
    });
}

function template_change2() {
    var e = document.querySelector("#template_id2");
    var id = e.value;
    $('#preview_div2').css('display', 'none');
    $('#preview_header2').html('');
    $('#preview_footer2').html('');
    $('#preview_accept2').html('');
    $('#preview_refuse2').html('');
    var url = "{{ url('invitation-settings/templates/get_template_by_id') }}" + '/' + id;
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type: 'GET',
        url: url,
        cache: false,
        contentType: false,
        processData: false,
        success: (data) => {
            $('#preview_header2').html(data.salutation);
            $('#preview_footer2').html(data.footer);
            const obj = JSON.parse(data.actions_buttons);
            if (obj) {
                $('#preview_accept2').html(obj['accept_text']);
                $('#preview_refuse2').html(obj['reject_text']);
            }
            if (data.is_image == 'on') {
                $('#thumbnail2_preview').css('display', 'block');
                $('#photo_div2').css('display', 'block');
            } else {
                $('#thumbnail2_preview').css('display', 'none');
                $('#photo_div2').css('display', 'none');
            }
            if (data.is_location == 'on') {
                $('#location_preview').css('display', 'block');
                $('#location_div').css('display', 'block');
            } else {
                $('#location_preview').css('display', 'none');
                other_radio = false;
                if(document.querySelector('input[name="image_radio"]:checked')){
                    other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
                }
                other_radio3 = false;
                if(document.querySelector('input[name="image_radio3"]:checked')){
                    other_radio3 = document.querySelector('input[name="image_radio3"]:checked').value !== 'is_location3';
                }
                if (
                    other_radio === false && other_radio3 === false &&
                    document.getElementById('location_text').checked === false &&
                    document.getElementById('location_text2').checked === false &&
                    document.getElementById('location_text3').checked === false) {
                    $('#location_div').css('display', 'none');
                }
            }
            $('#preview_div2').css('display', 'block');
        }
    });
}

function template_change3() {
     var e = document.querySelector("#template_id3");
    var id = e.value;
    $('#preview_div3').css('display', 'none');
    $('#preview_header3').html('');
    $('#preview_footer3').html('');
    $('#preview_accept3').html('');
    $('#preview_refuse3').html('');
    var url = "{{ url('invitation-settings/templates/get_template_by_id') }}" + '/' + id;
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type: 'GET',
        url: url,
        cache: false,
        contentType: false,
        processData: false,
        success: (data) => {
            $('#preview_header3').html(data.salutation);
            $('#preview_footer3').html(data.footer);
            const obj = JSON.parse(data.actions_buttons);
            if (obj) {
                $('#preview_accept3').html(obj['accept_text']);
                $('#preview_refuse3').html(obj['reject_text']);
            }
            if (data.is_image == 'on') {
                $('#thumbnail3_preview').css('display', 'block');
                $('#photo_div3').css('display', 'block');
            } else {
                $('#thumbnail3_preview').css('display', 'none');
                $('#photo_div3').css('display', 'none');
            }
            if (data.is_location == 'on') {
                $('#location_preview').css('display', 'block');
                $('#location_div').css('display', 'block');
            } else {
                $('#location_preview').css('display', 'none');
                other_radio = false;
                if(document.querySelector('input[name="image_radio"]:checked')){
                    other_radio = document.querySelector('input[name="image_radio"]:checked').value !== 'is_location';
                }
                other_radio2 = false;
                if(document.querySelector('input[name="image_radio2"]:checked')){
                    other_radio2 = document.querySelector('input[name="image_radio2"]:checked').value !== 'is_location2';
                }
                if (
                    other_radio === false && other_radio2 === false &&
                    document.getElementById('location_text').checked === false &&
                    document.getElementById('location_text2').checked === false &&
                    document.getElementById('location_text3').checked === false) {
                    $('#location_div').css('display', 'none');
                }
            }
            $('#preview_div3').css('display', 'block');
        }
    });
}
</script>

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/dropify/js/dropify.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/dropify.js') }}"></script>
<script src="{{ asset('assets/js/invitation-settings/create.js') }}"></script>
<script
    src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDfmO7kuPEzGkJdDBAi0CDmpL7DXVV4oos&libraries=places&language=ar&callback=initMap&libraries=&v=weekly&libraries=places'
    async></script>
@endpush