@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.Modify the template'))
@section('content')
    @php
        $location = json_decode($template->location);
        $actions_buttons = json_decode($template->actions_buttons);
    @endphp
    <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"><a
                            href="{{ route('templates.all') }}">{{ __('dashboard.Message templates') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ __('dashboard.Modify the template') }}</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.Modify the template') }}</h6>
                    <div class="row">
                        <div class="col-md-12 mt-4">
                            <form action="{{ route('templates.update', [request()->id]) }}" method="POST"
                                class="needs-validation" enctype="multipart/form-data" novalidate>
                                @csrf
                                <div class="row align-items-start">
                                    <div class="col-md-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">
                                                                                <div class="_1BOF7 _2AOIt">
                                                                                    <div
                                                                                        class="cm280p3y ktbp76dp ocd2b0bc folpon7g aa0kojfi snweb893 g0rxnol2 jnl3jror copyable-text">
                                                                                        <div>
                                                                                            <div class=" l8fojup5 paxyh2gw sfeitywo cqsf3vkf   laorhtua gfz4du6o r7fjleex g0rxnol2 thumbnail-div {{ $template->image ? '' : 'd-none2' }} "
                                                                                                style="height: 150px;">
                                                                                                <div
                                                                                                    class="g0rxnol2 ln8gz9je ppled2lx">
                                                                                                    <div
                                                                                                        class="lhggkp7q jnl3jror    ln8gz9je ppled2lx">
                                                                                                        <img src="{{ '/public'.$template->image }}"
                                                                                                            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
                                                                                                                class="introduction">
                                                                                                                {{ $template->salutation }}
                                                                                                            </p>
                                                                                                             <p
                                                                                                                class="msg-body">
                                                                                                                السيد ........ يسرنا دعوتكم لحضور المناسبة
                                                                                                            </p>
                                                                                                            <p
                                                                                                                class="footer-body">
                                                                                                                {{ $template->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="action-btn  {{ $template->actions_buttons ? '' : 'd-none2' }}">
                                                                                    <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 accept-btn">
                                                                                            <span
                                                                                                class="gfz4du6o r7fjleex lhj4utae le5p0ye3">{{ $actions_buttons ? $actions_buttons->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 reject-btn">
                                                                                            <span
                                                                                                class="gfz4du6o r7fjleex lhj4utae le5p0ye3">{{ $actions_buttons ? $actions_buttons->reject_text : '' }}</span>
                                                                                        </button>
                                                                                    </div>
                                                                                </div>
                                                                                <div
                                                                                    class="location-btn {{ $template->location ? '' : 'd-none2' }}">
                                                                                    <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-md-7">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group"><label
                                                        for="degree2">{{ __('dashboard.Template name') }}
                                                        <span class="text-danger">*</span></label>
                                                    <input type="text" name="name" class="form-control mb-4" value="{{ $template->name}}"
                                                        required>
                                                </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" value="{{ $template->salutation}}"
                                                        required>
                                                </div>
                                            </div>
                                            <!--<div class="col-md-12">-->
                                            <!--    <div class="form-group">-->
                                            <!--        <label for="degree2">{{ __('dashboard.Invitation text') }}-->
                                            <!--            <span class="text-danger">*</span></label>-->
                                            <!--        <textarea class="form-control mb-4" name="text" rows="5" required>{{ $template->text}}</textarea>-->
                                            <!--    </div>-->
                                            <!--</div>-->
                                             <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="degree2">{{ __('dashboard.Footer text') }}
                                                        <span class="text-danger">*</span></label>
                                                   <input type="text" name="footer" class="form-control mb-4" value="{{ $template->footer}}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="col-md-12 ">
                                                <div class="form-group">
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input" id="checkInline"
                                                            name="image_customization"
                                                            {{ $template->image ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="checkInline">
                                                            {{ __('dashboard.Customize the image') }}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12 image-div {{ $template->image ? '' : 'd-none2' }} mb-4">
                                                <div class="form-group">
                                                    <label for="degree2">{{ __('dashboard.Image') }}</label>
                                                    <input type="file" class="myDropify" name="photo"
                                                        data-default-file="{{ '/public'.$template->image }}" />
                                                </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="location_customization"
                                                            {{ $template->location ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="checkInline">
                                                            {{ __('dashboard.Customize the location') }}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div 
                                                class="col-md-12  button-location {{ $template->location ? '' : 'd-none2' }} mb-4">
                                                <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  {{ $template->location ? 'd-none2' : '' }}">
                                                        اختيار الموقع
                                                    </button>
                                                    <div class="map-info {{ $template->location ? '' : '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"
                                                            value="{{ $location ? $location->lat : '23.8859' }}" hidden>
                                                        <input id="lng" name="lng" type="text"
                                                            value="{{ $location ? $location->lng : '45.0792' }}" hidden>
                                                        <input id="zoom" name="zoom" type="text"
                                                            value="{{ $location ? $location->zoom : '5' }}" hidden>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input" id="checkInline"
                                                            name="additional_customization"
                                                            {{ $template->actions_buttons ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="checkInline">
                                                            {{ __('dashboard.Additional customization') }}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="col-md-6 button-content {{ $template->actions_buttons ? '' : '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"
                                                        value="{{ $actions_buttons ? $actions_buttons->accept_text : '' }}">
                                                </div>
                                            </div>
                                            <div
                                                class="col-md-6 button-content {{ $template->actions_buttons ? '' : '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"
                                                        value="{{ $actions_buttons ? $actions_buttons->reject_text : '' }}">
                                                </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

@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/message-templates/edit.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