@extends('admin.admin_app')

@section('content')
<style>
    .border-box {
    border: 1px solid #E4E7EC;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    background-color: white;
}
.pt-12 {
    padding-top: 12px;
}
.pb-10 {
    padding-bottom: 102px;
}
.pb-16 {
    padding-bottom: 16px;
}
.pr-6{padding-right: 6px;}
.pb-9 {
    padding-bottom: 9px;
}
.pr-16 {
    padding-right: 16px;
}
.pl-16 {
    padding-left: 16px;
}
.pt-16 {
    padding-top: 18px;
}
.pr-8 {
    padding-right: 8px;
}
.c-10 {
    color: #101828;
}
.bb-0 {
    border-bottom: 0 !important;
}
.fw-500 {
    font-style: normal;
    font-weight: 500;
}

.lh-24 {
    line-height: 24px;
}
.fs-16 {
    font-size: 16px;
}
.pb-12 {
    padding-bottom: 12px;
}
.pt-12 {
    padding-top: 12px;
}
.bor-8 {
    border-radius: 8px;
}
.bor-8.text-center.pt-16.pb-16{
    padding-bottom: 14px;
}
.link {
    color: #101828;
    text-decoration: none;
}
.pb-6 {
    padding-bottom: 6px;
}
.c-66 {
    color: #667085;
}
.fw-400 {
    font-style: normal;
    font-weight: 400;
}
.lh-18 {
    line-height: 18px;
}
.fs-12 {
    font-size: 12px;
    padding-top: 8px;
}
.input_box .text {
    width: 100%;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 6px 10px;
    font-style: normal;
    color: #344054;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
.input_box .text {
    width: 100%;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 6px 10px;
    font-style: normal;
    color: #344054;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
.more_phone .text, .more_email .text {
    width: 89%;
}
.more_phone .input-arrow-right, .more_email .input-arrow-right {
    right: 11%;
}
.input-arrow-right {
    width: 32px;
    padding: 5px 6px;
    float: right;
    background: #F9FAFB;
    border: 1px solid #E4E7EC;
    position: absolute;
    right: 0px;
    border-radius: 0 8px 8px 0px;
}
.b-1-e4 {
    border: 1px solid #E4E7EC;
}
.bor-8 {
    border-radius: 8px;
}
.bg-f9 {
    background: #F9FAFB;
}
.p-6 {
    padding: 6px;
}
.ml-4 {
    margin-left: 4px !important;
}
.relative {
    position: relative;
}
.bb-1 {
    border-bottom: 1px solid #F2F4F7;
}
.more_phone .input-arrow-right, .more_email .input-arrow-right {
    right: 11%;
}
#more_phone {
    margin-left: 2px !important;
}
.more_phone .text {
    width: 105% !important;
}

.intl-tel-input input, .intl-tel-input input[type=text], .intl-tel-input input[type=tel] {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 36px;
    margin-right: 0;
}
.intl-tel-input.allow-dropdown input, .intl-tel-input.allow-dropdown input[type=text], .intl-tel-input.allow-dropdown input[type=tel], .intl-tel-input.separate-dial-code input, .intl-tel-input.separate-dial-code input[type=text], .intl-tel-input.separate-dial-code input[type=tel] {
    padding-right: 6px;
    padding-left: 52px;
    margin-left: 0;
}
.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid #D0D5DD;
    border-radius: 4px;
    cursor: text;
    padding-bottom: 5px;
    padding-right: 5px;
    position: relative;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid black 1px;
    outline: 0;
}
.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none;
}
.border-box h2 {
    border-bottom: 1px solid #F2F4F7;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #101828;
    margin: 0;
    padding-bottom: 13px;
}
.btn-gray {
    background: #F2F4F7;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 14px;
    border: 0px;
    color: #1D2939 !important;
}
span.alert_star {
    color: red;
}
.pl-4 {
    padding-left: 4px;
}
.b-1-e4 {
    border: 1px solid #E4E7EC;
}
.bor-12 {
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 12px;
}   
.bg-ff {
    background: #fff;
}
.pb-14 {
    padding-bottom: 14px;
}
.pt-14 {
    padding-top: 14px;
}
.pr-16 {
    padding-right: 16px;
}
.pl-16 {
    padding-left: 16px;
}
.mb-4 {
    margin-top: 14px;
    height: 185px;
}
.hidden {
    display: none;
}
.bb-1 {
    border-bottom: 1px solid #F2F4F7;
}
.ppw {
    border: 1px solid gray;
    padding: 10px 26px;
    border-radius: 10px;
}
.ph {
            width: 100%;
            padding: 9px;
            border-radius: 10px;
        }



@media (min-width: 1190px) and (max-width: 1215px) {
    .more_phone .text {
    width: 98% !important;
}
.select2-search__field{
    width: 20rem !important;
}

  }
  @media (min-width: 1215px) and (max-width: 1300px) {
    .more_phone .text {
    width: 100% !important;
}
.select2-search__field{
    width: 20rem !important;
}}
  .w-84{width: 84%;}
.select2-search__field{
    width: 20rem !important;
} </style>
    <script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
    <div id="main">
       
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if (Session::has('flash_message'))
            <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                {{ Session::get('flash_message') }}
            </div>
        @endif

        <div class="row m-0 g-0 pt-16">
            <input type="hidden" name="_token" value="TwoZZyWZIFMwFpV8YoPxhovLOwqCQ34OrMymGNXy">
            <div class="col-7 pr-8">
                {!! Form::open(array('url' => array('admin/email/emailer'),'class'=>'form-horizontal padding-15','name'=>'email_form','id'=>'email_form','role'=>'form','enctype' => 'multipart/form-data')) !!} 
                <input type="hidden" name="id" value="{{ isset($email->id) ? $email->id : null }}">
                <div class="row m-0 g-0 border-box pt-12">
                    <h2 class="pl-16 pb-12">Emailer Form</h2>

                    <div class="row pt-16 pb-16 pl-16 pr-16 m-0">
                     

                        <div class="col-6 pr-8">
                            <div class="input_box pb-6 relative w-100 ">
                            <label class="fw-400 fs-12 lh-18 c-66 pb-2 w-100 m-0">Project</label>
                            <select name="project_id" id="project_id" class="form-select text select2 ">
                              <option value="">Select Project</option>
                              @foreach($get_project_data as $pd)
                                <option value="{{ $pd->id}}">  {{$pd->ProjectName}}</option>
                              @endforeach
                            </select>
                            </div>
                            <div class="input_box pb-6 relative w-100 ">
                                <label class="fw-400 fs-12 lh-18 c-66 pb-2 w-100 m-0">Contact date</label>
                                <input type="date" class="w-100 text" name="contact_date" value="{{ isset($emailer->contact_date) ? $email->contact_date : null }}" placeholder="Contact date">
                            </div>
                            <div class="input_box pb-6 relative w-100 ">
                            <label class="fw-400 fs-12 lh-18 c-66 pb-2 w-100 m-0">Template</label>
                            <select class="form-select ph" name="template" id="template"> 
                        <option value =""> Select Template </option>
                        <option value="AVA-at-Palm" href="https://www.acasa.ae/dubai/wasl-gate/apartments-for-sale-in-1-residence-at-wasl-1" > AVA-at-Palm </option>
                        <option value="Camal-Front-residence" href="https://www.acasa.ae/dubai/uptown-dubai/apartments-for-sale-in-so-uptown-tower" > Camal-Front-residence </option>
                        <option value="Ellington-House" href="https://www.acasa.ae/dubai/mohammed-bin-rashid-city/the-sanctuary" > Ellington-House </option>
                        <option value="Ocean-House" href="https://www.acasa.ae/dubai/business-bay/apartments-for-sale-in-15-northside" >  Ocean-House</option>
                        <option value="Orla-By-The-dorchestra" href="https://www.acasa.ae/dubai/dubai-creek-harbour-(the-lagoons)/apartments-for-sale-in-17-icon-bay" >Orla-By-The-dorchestra </option>
                        <option value="So-uptown" href="https://www.acasa.ae/dubai/downtown-dubai/apartments-for-sale-in-act-one-act-two" > So-uptown </option>
                        <option value="The-highbury" href="" > The-highbury </option>
                        <option value="The-quayside" href="" >  The-quayside</option>
                        <option value="The-sanctuary" href="" >  The-sanctuary</option>

                    </select> 
</div>
						</div>
                        <div class="col-6">
                            <div class="input_box pb-6 relative w-100 ">
                                <label class="fw-400 fs-12 lh-18 c-66 pb-2 w-100 m-0">Contact Source</label>
                                <select name="contact" id="contact" class="form-select text select2">
                                <option value="">Select Conatct</option>
                                <option value="Contact">Contact</option>
                                <option value="Email" >Email</option>
                                <option value="WhatsApp" >WhatsApp</option>
                                 
                             </select>
                            </div>
                            <div class="input_box pb-6 relative w-100 ">
                                <label class="fw-400 fs-12 lh-18 c-66 pb-2 w-100 m-0">Comment</label>
                                <textarea rows="4" class="w-100 text" name="message" placeholder="Comment"  value="{{ isset($emailer->message) ? $emailer->message : null }}" style="height: 106px;"></textarea>
                            </div>
                            </div>
                     </div>
                     <div class="form-group">
                        <div class="col-md-offset-3 col-sm-9 ">
                            <button type="submit" class="btn btn-primary" style="float: right;">{{ isset($email->title) ? 'Assign' : 'Add page' }}</button>
                    </div>
                    </div>   
               </div>
 {!! Form::close() !!} 
 </div>
 <div class="col-5 pl-8" style="margin-top: 17px;">
                <div class="row m-0 g-0 border-box pt-12 pb-10" style="padding-bottom: 30px;">
                    <h2 class="pl-16 pb-12">Assign Contact</h2>
                    <div class="row bb-1 m-0 g-0 pl-16 pt-16 pb-8 pr-16">
                        <div class="col-4 c-66 fs-12 lh-18 fw-400 pt-10">Sharing with</div>
                        <div class="col-8 p-0">
                        <ul class="list-inline pull-right">
                            <li class="list-inline-item pl-0 pr-0 m-0" style="width: 220px;">
                                <select name="sharing_with[]" multiple="" class="form-control getcontacts select2-hidden-accessible form-select text" style="border-radius: 6px; padding: 4px 6px;" tabindex="-1" aria-hidden="true"><option value="125">Kushal singh</option></select><span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 12.75rem;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                            </li>
                       </ul>
                    </div>
</div>
           </div>

            <div class="b-1-e4 bg-ff bor-12 mb-4" style="height: 180px !important;">
                <div class="row m-0 g-0 bb-1">
                    <div class="col-12 pl-16 pr-16">
                        <h2 class=" bb-0 fs-16 lh-24 fw-500 pt-12 pb-12 m-0 c-10">Template</h2>
                    </div>
                </div>
                <div class="row g-0 m-0 pl-16 pr-16 pt-16 pb-16">
                    <div class="bor-8 text-center pt-16 pb-16" style="border: 1px dashed #175CD3;background: #F5FAFF;color: #1849A9;">
                        <a href="javascript:void(0)" class="link" data-toggle="modal" data-target="#add_documents">
                          
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10" stroke="#1849A9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                            <div class="fs-12 lh-18 fw-400 c-18">Select your template</div>
                        </a>
                    </div>
                </div>
                <div class="document_preview">
                    <div class="accordion accordion-flush pl-16 pr-16" id="accordionFlushExample">
                  </div>
                </div>
            </div>
 </div>


         {{-- Modal --}}
         <div class="modal fade" id="add_documents" tabindex="-1" aria-labelledby="add_documents" aria-hidden="true">
                            <div class="modal-dialog mw-736">
                                <div class="modal-content">
                                    <div class="modal-header pt-14 pb-14 pl-16 pr-16">
                                        <h5 class="modal-title fs-14 lh-24 c-10" id="exampleModalLabel"> Template</h5>
                                        <svg data-dismiss="modal" aria-label="Close" width="22" height="22"
                                            viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z"
                                                stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </svg>
                                    </div>
                                    <div class="modal-body p-20">

                                        <div class="row text-center btn_hover m-0 g-0 pt-16">
                                        
					<div class="w-100 btn_outline p12_20">
                   
                        <select class="form-select ph" name="template" id="template"> 
                        
                            <option value =""> Select Template </option>
                            <option value="AVA-at-Palm" href="https://www.acasa.ae/dubai/wasl-gate/apartments-for-sale-in-1-residence-at-wasl-1"> AVA-at-Palm </option>
                            <option value="Camal-Front-residence.html" href="https://www.acasa.ae/dubai/uptown-dubai/apartments-for-sale-in-so-uptown-tower"> Camal-Front-residence.html </option>
                            <option value="Ellington-House" href="https://www.acasa.ae/dubai/mohammed-bin-rashid-city/the-sanctuary"> Ellington-House </option>
                            <option value="Ocean-House" href="https://www.acasa.ae/dubai/business-bay/apartments-for-sale-in-15-northside">  Ocean-House</option>
                            <option value="Orla-By-The-dorchestra" href="https://www.acasa.ae/dubai/dubai-creek-harbour-(the-lagoons)/apartments-for-sale-in-17-icon-bay">Orla-By-The-dorchestra </option>
                            <option value="So-uptown" href="https://www.acasa.ae/dubai/downtown-dubai/apartments-for-sale-in-act-one-act-two"> So-uptown </option>
                            <option value="The-highbury" href=""> The-highbury </option>
                            <option value="The-quayside" href="">  The-quayside</option>
                            <option value="The-sanctuary" href="">  The-sanctuary</option>

                        </select>    

                        <button type="button" class="btn btn_outline p7_14 fs-14 lh-18 fw-600 c-1d"
                                            data-dismiss="modal" fdprocessedid="4wpl3z"
                                            style="margin-right: 10px;margin-left: 70%;  border: 1px solid gray;
    margin-top: 12px;">Cancel</button>

                                        <button type="submit" class="btn btn-primary"
                                            style="background-color: #12B76A !important;
                                border: none !important; margin-right: 16px;margin-top: 12px;">Save</button>
                        
                       
				</div>
                


</div>
</div>
</div>
</div>
    </div>
@endsection