@extends('Frontend.partials.layout')
{{-- @dd($mail_msg, $mail_title); --}}
@section('styles')
<style>
    ul#lang-items-wrapper {
        box-shadow: 0 1px 4px rgb(24 28 33 / 9%);
        max-width: fit-content;
        border: 1px solid #cdcdcda8;
        border-radius: 6px;
        margin: 0px auto;
        padding: 0px;
    }

    ul#lang-items-wrapper li.nav-item a.nav-link{
        transition: .4s ease;
        margin: 0px;
        padding: 10px 20px;
        border-radius: 0px;
        border: none;
        min-width: 90px;
        text-align: center;
        cursor: pointer;
    }

    ul#lang-items-wrapper li.nav-item:first-child a.nav-link {
        border-radius: 6px 0px 0px 6px;
    }

    ul#lang-items-wrapper li.nav-item:last-child a.nav-link {
        border-radius: 0px 6px 6px 0px;
    }

    ul#lang-items-wrapper li.nav-item:not(:last-child) a.nav-link {
        border-right: 1px solid #cdcdcda8;
    }
    
    ul#lang-items-wrapper li.nav-item a.nav-link.active {
        background-color: #ebebeb;
        font-weight: 600;
    }
    
    ul#lang-items-wrapper li.nav-item .nav-link {
        color: dimgray;
    }
    .swal2-popup.swal2-modal.swal2-show {
        width: auto;
        padding: 25px 60px;
    }
    #swal2-title {
        margin: 0px;
        font-size: 25px;
    }
    .swal2-content {
        margin: 0px !important;
    }
</style>
@endsection

@section('content')

{{-- Main Section --}}
<section class="pdf-view-mail-temp">
    <div class="row">
        {{-- col-6 content header --}}
        <div class="col-md-6">
            <div class="analysis-content-header d-flex align-items-center">
                <div class="logo">
                    <i class="fa fa-envelope fa-fw primary-color"></i>
                </div>
                <div class="heading primary-color">
                    <h2>{{ trans("action.email_template") }}</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="" id="email-temp-container">
        <div class="card">
            <h5 class="card-header font-weight-bold"><i class="fa fa-envelope fa-fw"></i>{{ trans("action.email_template") }}</h5>
            <div class="lang-contents-container card-body">
                <ul class="nav selected_lang mb-4 red" id="lang-items-wrapper">
                    @foreach ($languages as $lang)
                        <li class="nav-item">
                            <a class="nav-link {{ ($lang->id == auth()->user()->language_id) ? 'active' : '' }}" data-langcode="{{$lang->short_code}}">{{ $lang->name }}</a>
                        </li>
                    @endforeach
                </ul>
                <div class="form-group">
                    <h5 class="d-inline-block">{{  trans('action.subjct_line_title') }}</h5>

                    <input type="text" id="subject-line" name="email_template_title_blank" class="form-control" value="{{ $mail_title }}">
                </div>
                <div class="form-group">
                    <div class="d-flex justify-content-between mb-3">
                        <h5 class="d-inline-block">{{ trans('action.cron_blank_placeholder')}}</h5>
                        <span class="d-none d-sm-inline-block cursor-pointer mr-1" data-toggle="modal" data-target="#placeholderModal">
                            <i class="fa fa-hand-point-right fa-fw"></i>{{trans('action.cron_available_placeholder')}}                
                        </span>                                   
                    </div>
                    
                    <textarea name="email_template_blank" id="email-temp" class="editor">{{ $mail_msg }}</textarea>

                    <span class="d-inline-block d-sm-none cursor-pointer mb-2" data-toggle="modal"
                    data-target="#placeholderModal">{{ trans('action.cron_available_placeholder')}}</span>
                </div>
            </div>
            <div class="card-footer text-right">
                <a id="temp-update-btn" class="btn btn-success m-0 text-white">{{trans('action.update')}}</a>
            </div>
        </div>
    </div>

    {{-- placeholders modal --}}
    <div class="modal modal-top fade" id="placeholderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="top: 70px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">{{ trans('action.available_placeholders')}}</h4>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                </div>
    
                <div class="modal-body">
                    <p><i class="fas fa-check-circle text-success"></i> {{ "{first_name}" }}</p>
                    <p><i class="fas fa-check-circle text-success"></i> {{ "{last_name}" }}</p>
                    {{-- <p><i class="fas fa-check-circle text-success"></i> {{ "{start_date_time}" }}</p> --}}
                    {{-- <p><i class="fas fa-check-circle text-success"></i> {{ "{end_date_time}" }}</p> --}}
                    {{-- <p><i class="fas fa-check-circle text-success"></i> {{ "{link}" }}</p> --}}
                    {{-- <p><i class="fas fa-check-circle text-success"></i> {{ "{time_before}" }}</p> --}}
                    {{-- <p><i class="fas fa-check-circle text-success"></i> {{ "{client_note}" }}</p> --}}
                    <p><i class="fas fa-check-circle text-success"></i> {{ "{pdf_link}" }}</p>
                </div>
    
                <div class="modal-footer">
                   <button type="button" class="btn btn-default icon" data-dismiss="modal">{{  trans('action.close') }}</button>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- /Main Section --}}

@endsection

@section('scripts')
    <script src="{!! asset('/vendor/js/tinymce/tinymce.min.js') !!}"></script>
    <script>tinymce.init({ selector:'.editor' });</script>
    <script src="{{ asset('/vendor/libs/bootstrap-select/bootstrap-select.js') }}"></script>
    <script src="{{ asset('/vendor/libs/select2/select2.js') }}"></script>
    <script>
        $(document).ready(function(){
            $("#lang-items-wrapper .nav-link").click(function () {
                $("#lang-items-wrapper .nav-link").removeClass("active");
                $(this).addClass("active");
                
                let lastLangId = $(this).data('langcode');
                
                $.ajax({
                    url: '{{ route("get-mail-template") }}',
                    type: "GET",
                    dataType: "json",
                    data: {
                        langCode:lastLangId
                    },
                    beforeSend: function(){
                        Swal.fire({
                            title: `{{ trans('action.processing')}}`,
                            imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                            showConfirmButton: false,
                            allowOutsideClick: false,
                            confirm: true,
                            showLoaderOnConfirm: true,
                            width: '300px',
                            height: '180px'
                        })
                    },
                    success:function(data){
                        Swal.close()
                        $("#subject-line").val(data.title);
                        tinymce.get("email-temp").setContent(data.msg);
                    },
                    error:function(data){Swal.close();console.log(data);}
                });
            });
            
            $("#temp-update-btn").click(function () {
                let langCode = $('#lang-items-wrapper .nav-item').find('.active').data('langcode');
                let mailTitle = $("#subject-line").val();
                let mailMsg = tinymce.get("email-temp").getContent();

                $.ajax({
                    url: '{{ route("store-resend-mail-temp") }}',
                    type: "POST",
                    data: {
                        lang_code: langCode,
                        mail_title: mailTitle,
                        mail_msg: mailMsg
                    },
                    dataType: "json",
                    beforeSend: function(){
                        Swal.fire({
                            title: `{{ trans('action.processing')}}`,
                            imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                            showConfirmButton: false,
                            allowOutsideClick: false,
                            confirm: true,
                            showLoaderOnConfirm: true,
                            width: '300px',
                            height: '180px'
                        })
                    },
                    success:function(data){
                        Swal.close();
                        toastr.success(data.message);
                    },
                    error:function(data){}
                });
            })
        });
    </script>
@endsection