@extends('layouts.app')

@section('page_css')
    @parent
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/flatpickr/flatpickr.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/jquery-timepicker/jquery-timepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/pickr/pickr-themes.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/dropzone/dropzone.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/typography.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/katex.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/editor.css') }}" />
    <style>
        
    </style>
@endsection

@section('content')
@php
    $available_tags=[
        "{startup_name}",
        "{cohort_name}",
        "{user_name}",
        "{form_link}",
        "{form_last_date}",
        "{join_url}",
        "{meeting_date}",
        "{meeting_time}",
        "{meeting_topic}",
        "{meeting_code}",
        "{login_expire_date}",
        "{request_title}",
        "{request_detail}",
        "{feedback_title}",
        "{feedback_detail}",
        "{mentor_name}",
        "{investor_name}",
        "{vendor_name}",
        "{benefit_name}",
        "{response_title}",
        "{response_message}",
        "{user_registration_link}",
        "{due_diligence_link}",
        "{credits_to_invest}",
        "{entity_name}",
        "{contribution_agreement_url}",
        "{login_username}",
        "{login_password}",
        "{login_url}",
        "{rejected_documents}"
    ];
@endphp
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- breadcrumb start -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
              <a href="#">Master</a>
            </li>
            <li class="breadcrumb-item active">Mail Configuration</li>
            <li class="breadcrumb-item active">Add</li>
        </ol>
    </nav>
    <!-- breadcrumb end -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div
                  class="card-header sticky-element bg-label-secondary d-flex justify-content-sm-between align-items-sm-center flex-column flex-sm-row"
                >
                    <h5 class="card-title mb-sm-0 me-2">Add New</h5>
                    <div class="action-btns">
                        <a href="{!! route('admin.master.mail_configuration') !!}" 
                            class="btn btn-sm btn-label-primary me-3">
                            <span class="align-middle">
                                Back to Listing
                            </span>
                        </a>
                        <button 
                            type="submit" 
                            id="mail_config_add_submit" 
                            form="mail_config_add_form" 
                            class="btn btn-sm btn-primary">  
                            Save
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-8 mx-auto">      
                            <form id="mail_config_add_form" action="{{ route('admin.master.mail_configuration.store') }}" method="post" enctype="multipart/form-data">
                             @csrf
                                <div class="mb-3">
                                    <label for="mail_config_content" class="h5">
                                        Available Tags=>
                                        {{ implode(" , ",array_slice($available_tags,0,10)) }} 
                                        
                                        @if( count($available_tags) > 10 )
                                            @php
                                                $tags_list = implode(" , ",$available_tags);
                                            @endphp
                                            <a href='javascript:void(0);'
                                                class="readMore"
                                                data-title="Available Tags" 
                                                data-description="{{ $tags_list }}"
                                            >
                                               <span class = "badge bg-label-primary">
                                                    read more
                                               </span>
                                            </a>
                                        @endif     
                                    </label>
                                </div>

                                <div class="mb-3 control-group">
                                    <label for="mail_config_title" class="form-label">Mail Title
                                        <span id="mail_config_title_error" class="text-danger">*</span>
                                    </label> 
                                    <div class="input-group input-group-merge">
                                        <span id="mail_config_title2" class="input-group-text"
                                          ><i class="ti ti-user"></i
                                        ></span>
                                        <input
                                          type="text"
                                          class="form-control"
                                          id="mail_config_title"
                                          name="mail_config_title"
                                          placeholder="Mail Title"
                                          aria-label="Mail Title"
                                          aria-describedby="mail_config_title2"
                                        />
                                    </div>
                                </div>  

                                <div class="mb-3 control-group">
                                    <label for="mail_config_subject" class="form-label">Mail Subject
                                        <span id="mail_config_subject_error" class="text-danger">*</span>
                                    </label> 
                                    <div class="input-group input-group-merge">
                                        <span id="mail_config_subject2" class="input-group-text"
                                          ><i class="ti ti-user"></i
                                        ></span>
                                        <input
                                          type="text"
                                          class="form-control"
                                          id="mail_config_subject"
                                          name="mail_config_subject"
                                          placeholder="Mail Subject"
                                          aria-label="Mail Subject"
                                          aria-describedby="mail_config_subject2"
                                        />
                                    </div>
                                </div>    

                                <div class="col-md-12 mb-3 control-group">
                                    <label for="mail_config_mail_type" class="form-label">Mail Type
                                        <span class="text-danger">*</span>
                                    </label>
                                    <select id="mail_config_mail_type" name="mail_config_mail_type" class="select2 form-select form-select-lg" data-allow-clear="true"
                                    data-placeholder="select mail type">
                                        <option value= "" ></option>
                                        @foreach($type_trans as $_type_trans)
                                            <option value= "{{$_type_trans['id']}}" >{{ $_type_trans['name'] }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3 control-group" id="send_mail_placeholder">
                                </div>

                                <div class="mb-3 control-group" id="days_field_placeholder">
                                </div>  

                                <div class="mb-3 control-group">
                                    <input type="hidden" id="mail_config_mail_content" name="mail_config_mail_content" value="">
                                    <label for="mail_config_content" class="form-label">Mail Content 
                                        <span id="mail_config_content_error" class="text-danger">*</span>
                                    </label>
                                    <div class="mt-2">
                                        <div id="full-editor" class="full-editor"></div>
                                    </div>
                                </div>    
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / Content -->  
@endsection

@section('page_scripts')
@parent
<script src="{{ asset('assets/js/form-layouts.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/jquery-sticky/jquery-sticky.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/jquery-timepicker/jquery-timepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/pickr/pickr.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/quill/katex.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/quill/quill.js') }}"></script>
<script src="{{ url('plugins/jquery-validation/dist/jquery.validate.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js" integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function(){
        let _LOGIN_EXPIRED_ = @JSON(_LOGIN_EXPIRED_);

        $("#mail_config_add_submit").click(function(e){
            let content=$('#full-editor').find('.ql-editor').html();
            if(content=='<p><br></p>')
            {
                $('#mail_config_mail_content').val("");
            }
            else
                $('#mail_config_mail_content').val(content);
        });

        $('#mail_config_mail_type').change(function(){
            let html_content = "";
            let selected_value = $('#mail_config_mail_type').val();
            if(selected_value == _LOGIN_EXPIRED_)
            {
                html_content=`
                <label for="send_auto_mail" class="form-label">send auto mail
                    <span class="text-danger">*</span>
                </label>
                <div class="d-flex">
                    <div class="form-check me-4">
                        <input class="form-check-input" 
                            type="radio" 
                            name="send_auto_mail"
                            id="send_auto_mail_y" 
                            value="Y"
                            onclick="addDaysField('Y','days_field_placeholder')"
                        />
                        <label class="form-check-label" for="send_auto_mail_y">
                            yes
                        </label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" 
                            type="radio" 
                            name="send_auto_mail" 
                            id="send_auto_mail_n" 
                            value="N"
                            onclick="addDaysField('N','days_field_placeholder')"
                        />
                        <label class="form-check-label" for="send_auto_mail_n">
                            no
                        </label>
                    </div>
                </div>          
                `;
            }
            else
            {
                document.getElementById("days_field_placeholder").innerHTML = "";
            }
            document.getElementById("send_mail_placeholder").innerHTML = html_content;
        });

        $('.readMore').click(function(){
            readMore($(this).data('title'),$(this).data('description'));
        }); 

        //function definition

        function readMore(title="",description="")
        {
            $("#readMoreModalTitle").text(title);
            $("#readMoreModalContent").html(description);
            $("#readMoreModal").modal('show');
        }
      
        addDaysField = function(send_auto_mail="",placeholder_id="",initial_value = "")
        {
            let html_content = "";
            if(placeholder_id)
            {
                if(send_auto_mail == 'Y')
                {
                    html_content = `
                    <label for="days" class="form-label">days
                        <span class="text-danger">*</span>
                    </label> 
                    <input
                        type="number"
                        class="form-control"
                        id="days"
                        name="days"
                        min="1"
                        max="99"
                        style="width:200px;"
                    />
                    `
                    document.getElementById(placeholder_id).innerHTML = html_content;
                }
                else
                {
                   document.getElementById(placeholder_id).innerHTML = html_content;
                }
            }
        }   
    });
</script>
<script src="{{ asset('dist/js/master/master_validate.js') }}"></script>
@endsection
<!--/ END PAGE CONTENT -->