@extends('layouts.app')

@section('content')

<div class="page_wrapper">
        <div class="main_section">
            <div class="breadcrum">
                <ul>
                <li><a href="{{ url('/home') }}">Contributor Dashboard</a></li>
                <li class="active"><a href="{{ url('/add_contributor') }}">Add Contributor</a></li>
                <li class="active"><a href="javascript:history.back()">Back</a></li>
                </ul>
             
            </div>
            <div class="inner_section">
                <div class="heading_area">
                    <div class="heading_left">
                        <h1>Add Contributor</h1>
                    </div>

                     <input type="button" value="WELCOME EMAIL" class="popup12 welcome_pop" style="display:none"/>
                </div>
                
                <div class="container_inner">
                    <div class="row">
                         
                        <form action="{{ url('add_contributor') }}" method="POST" value="{{ csrf_token() }}"  enctype="multipart/form-data" id="add_contributor_form" files=true>
                        {{ csrf_field() }}
                         <input type="hidden" name="added_by" value="{{ Auth::user()->id }}">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            @if(session()->has('message'))
                                 <div class="alert alert alert-success alert-dismissable fade in">
                                 <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                    {{ session()->get('message') }}
                               </div> 
                             @endif
                             @if(session()->has('error'))
                                 <div class="alert alert alert-danger alert-dismissable fade in">
                                 <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                    {{ session()->get('error') }}
                               </div> 
                             @endif
                             <div class="alert alert alert-success alert-dismissable fade in" style="display:none" id="success_msg">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                    Contributor Added
                                </div>
                            
                        </div>
                        
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>First Name</label>
                                    <div class="input_container">
                                        <input type="text" placeholder="Enter First Name" name="first_name" value="{{ old('first_name') }}"/>
                                        <div class="input_container error first_name_error"> </div>
                                    </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Middle Name</label>
                                <div class="input_container">  
                                    <input type="text" placeholder="Enter Middle Name" name="middle_name" value="{{ old('middle_name') }}"/>
                                     <div class="input_container error middle_name_error"> </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Last Name</label>
                                    <div class="input_container">
                                    <input type="text" placeholder="Enter Last Name" name="last_name"  value="{{ old('last_name') }}" />
                                    <div class="input_container error last_name_error"> </div>
                                    </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Email</label>
                                    <div class="input_container">
                                       <input type="email" placeholder="Enter Email Address" name="email" value="{{ old('email') }}" class="add_email"/>
                                       <div class="input_container error email_error"> </div>
                                    </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Password <i class="fa fa-info-circle red_link" aria-hidden="true" data-toggle="tooltip" data-placement="top" data-title="System generated password" data-html="true"></i></label>
                                <div class="input_container">
                                  <input type="password" placeholder="Enter Password" name="password" value="{{ old('password') }}" disabled="disabled" />
                                   <div class="input_container error password_error"> </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Date of Birth</label>
                                    <div class="input_container">
                                    <input id="date_of_birth" type="text" placeholder="Enter DOB" name="DOB" value="{{ old('DOB') }}" />
                                    <div class="input_container error DOB_error"> </div>
                                    </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Country</label>
                                <div class="input_container select_box">
                                <select id="country" name="country" > 
                                <option value="" >Select</option>
                                @foreach($countries as $country)
                                <option value="{{$country->id}}" >{{ $country->country }}</option>
                                @endforeach
                                </select>
                                <div class="input_container error country_error"> </div>
                               
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>State</label>
                                    <div class="input_container select_box">
                                    <select id="state" name="state" >
                                    </select> 
                                    <div class="input_container error state_error"> </div>
                                    </div>
                                    <input type="hidden" name="state_name" value="" id="state_name">
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>City</label>
                                    <div class="input_container select_box">  
                                    <select id="city" name="city" >
                                    </select>
                                    <div class="input_container error city_error"> </div>
                                    </div>
                                    <input type="hidden" name="city_name" value="" id="city_name">
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Postal code</label>
                                    <div class="input_container">
                                     <input type="text" placeholder="Enter Postal Code" name="postal_code" value="{{ old('postal_code') }}" />
                                     <div class="input_container error postal_code_error"> </div>
                                    </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Phone Number</label>
                                    <div class="input_container">
                                     <input type="text" placeholder="Enter Phone Number" name="phone_number" value="{{ old('phone_number') }}" />
                                     <div class="input_container error phone_number_error"> </div>
                                    </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Date of Contract</label>
                                    <div class="input_container">
                                    <input id="date_of_future" class="date_picker" data-date-start-date="+0d" type="text" placeholder="Enter Date of Contract" name="contract_date" value="{{ old('contract_date') }}" />
                                    <div class="input_container  error contract_date_error"> </div>
                                    </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-md-9 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Address</label>
                                <div class="input_container">
                                <input type="text" placeholder="Enter Address" name="address" value="{{ old('address') }}" />
                                <div class="input_container error address_error"> </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Stage Name</label>
                                <div class="input_container">
                                    <input type="text" placeholder="Enter stage name" name="stage_name" value="{{old('stage_name') }}" />
                                    <div class="input_container error stage_name_error"> </div>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix"></div>

                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Upload Image</label>
                                <div class="file_box">
                                    <span class="file_container">
                                        <input type="file" id="image_type" name="image" value="{{ old('image') }}" accept="image/*">
                                    </span>
                                    <label for="image_type">Browse</label>
                                </div>
                            </div>
                            <div class="input_container error image_error"> </div>
                            <input type="hidden" name="profile_img_type" value="1">
                               
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Upload w9 Form</label>
                                <div class="file_box">
                                    <span class="file_container">
                                        <input type="file" id="w9_form" name="w9form" value="{{ old('w9form') }}" accept="application/msword,application/pdf" />
                                        
                                    </span>
                                    <label for="w9_form">Browse</label>
                                </div>
                                <div class="input_container error w9form_error"> </div>
                            </div>
                            
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="links">Social media links</div>
                        </div>
                        <div class="col-md-4 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Facebook</label>
                                <div class="input_container">
                                <input type="text" placeholder="Enter Facebook Link" name="facebook" value="{{ old('facebook') }}"/>
                                <div class="input_container error facebook_error"> </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Twitter</label>
                                    <div class="input_container">
                                     <input type="text" placeholder="Enter Twitter Link" name="twitter" value="{{ old('twitter') }}"/>
                                      <div class="input_container error twitter_error"> </div>
                                    </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>Instagram</label>
                                    <div class="input_container">
                                   <input type="text" placeholder="Enter Instagram Link" value="{{ old('instagram') }}" name="instagram"/>
                                    <div class="input_container error instagram_error"> </div>
                                    </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="label_field">
                                <label>BIO</label>
                                    <div class="input_container">
                                    <textarea placeholder="Enter Bio" name="bio" >{{ old('bio') }}</textarea>
                                    <div class="input_container error bio_error"> </div>
                                    </div>
                            </div>
                        </div>

                        <!-- email content-->
                        <input type="hidden" name="c_email" value="" />
                        <input type="hidden" name="e_title" value="" />
                        <textarea id="email_content" name="e_title" style="display:none;"></textarea> 
                         <input type="hidden" id="configuration" name="configuration" value="" />
                        <!-- email content ends -->

                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <input type="submit" value="Save" class="save_form"/>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="home_url" style="display:none;"><?php echo url('/');?></div>

     <!-- welcome email pop-up -->
    <div class="modal fade custom_modal" id="welcome_email" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-lg modal_custom_width_xs">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add Welcome Email</h4>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="alert alert-danger error_msg" style="display:none">Please enter all email detail.</div>
                </div>
                <div class="modal-body">
                    <div class="label_field">
                        <label>To</label>
                        <div class="input_container">
                        <input type="email" class="c_email">
                        </div>
                    </div>
                    <div class="label_field">
                        <label>Contributor Credentials</label>
                        <div class="c_credentials"></div>
                    </div>
                    <div class="label_field">
                        <label>Subject</label>
                        <div class="input_container">
                        <input type="text" class="e_title"/>
                        </div>
                    </div>
                    <div class="label_field">
                        <label>Email Content  <i class="fa fa-lightbulb-o red_link" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Please add the Credentials in the email content." ></i> </label>
                        <div class="input_container">
                            <span class="change_wel_content">Please check your email and password as well</span>
                            Keywords : 
                            <input type="button" value="creator name" class="new_text_btn" id="new_text_name" data-keyword="@creator_name">
                            <input type="button" value="email" class="new_text_btn" id="new_emailid" data-keyword="@creator_email">
                            <input type="button" value="password" class="new_text_btn" id="new_pswd" data-keyword="@creator_password">
                            <input type="button" value="link" class="new_text_btn" id="new_link" data-keyword="@login_link">
                            <textarea contenteditable="" id="new_text" class="email_content_txt"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                <input type="button" value="Done" class="close_modal save_form_edit_book">
                </div>
            </div>
        </div>
    </div>
    <!-- welcome email pop-up ends  -->

    <!-- configuration alert email -->
    <div class="modal fade custom_modal" id="confi_popup" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-lg modal_custom_width_xs">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Email Configuration alert!</h4>
                </div>
                <div class="modal-body">
                    <div class="contri_info"><h5><p>You have not set up your email configuration.</p><p> Please set it to send email to the contributor you are adding.</p></h5></div>
                    <div class="red_link"><p> If you choose to skip it, no email will be sent to the contributor.</p></div>
                </div>
                <div class="modal-footer">
                <input type="button" value="Set Configuration" class="from_pop" data-id="from_popup" id="add_confi">
                <input type="button" class="popup_btn" value="Do it later" id="remove_email">
                </div>
            </div>
        </div>
    </div>
    <!-- Generate password  -->
    <script type="text/javascript">

    //onchange of the email, create password and add data into pop-up
    $(document).ready(function(){
        var from_ch_js = <?php echo json_encode($from_check) ?>;
        if(from_ch_js.length===0){
            $("#configuration").val('0');
        }else{
            $("#configuration").val('1');
        }
        // fetch contributor details 
        var creator_name = '';
        $('.add_first_last').bind("change keyup input",function(){
            var email_first_name = $("input[name='first_name']").val();
            var email_last_name = $("input[name='last_name']").val();
            creator_name = email_first_name+" "+" "+email_last_name;
        });

       
        $('.add_email').bind("change keyup input",function() {
            var site_url = $('#home_url').text()+'/login?clogin=1';
            var existing_password = $("input[name='password']").val();
            if(existing_password == ""){
                var chars = "abcdefghijklmnopqrstuvwxyz1234567890";
                var pass = "";
                for (var x = 0; x < 10; x++) {
                    var i = Math.floor(Math.random() * chars.length);
                    pass += chars.charAt(i);
                }
            }else{
                pass = existing_password;
            }
            $('.add_pass').val(pass);
            $('.c_credentials').html('');
            
            $('.c_credentials').html("Email : <span class='credential_email'>"+$(this).val()+"</span><br/> Password : "+pass);
            $('.c_email').val($(this).val());
            $('input[name="c_email"]').val($(this).val());
            $('.add_email').val($(this).val());

            var wel_content = "";
              wel_content ='Hi  '+creator_name+',\n Your account has been set up.\n You can login on the following \n' + site_url +'\n Your credentials are :\n Email : '+$(this).val()+'\nPassword : '+pass; 
           // console.log(wel_content);

           $("input#new_text_name").attr('data-keyword',"");
           $("input#new_text_name").attr('data-keyword',creator_name);
           $("input#new_emailid").attr('data-keyword',"");
           $("input#new_emailid").attr('data-keyword',$(this).val());
           $("input#new_pswd").attr('data-keyword',pass);
           $("input#new_link").attr('data-keyword',site_url);
           $("textarea#new_text").val(wel_content);

          /* if(!$("textarea#new_text").val()){
            $("textarea#new_text").val(wel_content);
           }*/
        });

        //on change fill the hidden field for the email content
        $('.c_email').bind("change keyup input",function() { 
            var data = $(this).val();
            $('input[name="c_email"]').val(data);
            $('.add_email').val(data);
            $('.credential_email').html("");
            $('.credential_email').html(data);
            $("input#new_emailid").attr('data-keyword',"");
            $("input#new_emailid").attr('data-keyword',$(this).val());
        });
        
        $('.e_title').bind("change keyup input",function() { 
            var data = $(this).val();
            $('input[name="e_title"]').val(data);
        });

        $('textarea#new_text').bind("change keyup input",function() {
            var data = $(this).val();
            $('textarea#new_text').val(data);
        });

        //on close of pop-up validate pop-up fields
        $(".close_modal").on("click", function(e){
            var email_data = $.trim($('.c_email').val());
            var email_title = $('input.e_title').val();
            var email_title = email_title.trim();
            var email_content = $.trim($('textarea#new_text').val());
            if(email_data == "" || email_title == "" || email_content ==""){
                $(".error_msg").css("display","block");
                e.preventDefault();
                e.stopImmediatePropagation();
                return false; 
            }else{
                $(".error_msg").css("display","none");
                $('#welcome_email').modal('hide');
            }
        });
        $(".popup12").click(function(){
            $('#welcome_email').modal('show');
        });

        $(document).on("click", ".new_text_btn", function(event){
            var button_id = $(this).attr('id');
            var keyword = $(this).attr('data-keyword');
            //alert(keyword);
            var new_text = 'new_text';
            var caretPos = '';
            caretPos = $('textarea#'+new_text)[0].selectionStart;
            var caretEnd = '';
            caretEnd = $('textarea#'+new_text)[0].selectionEnd;
            var textAreaTxt = '';
            textAreaTxt = $("textarea#"+new_text).val();
            var txtToAdd = '';
            txtToAdd = " "+keyword+" ";
            $("textarea#"+new_text).val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring( caretEnd ) );
            $('textarea#'+new_text).focus();
            $('textarea#'+new_text).selectionStart = caretPos + txtToAdd.length;
            $('textarea#'+new_text).selectionEnd = caretPos + txtToAdd.length;
        });

        $('.c_email').bind("change keyup input",function(){
            //alert("Please check your email and password as well");
            $(".change_wel_content").show();
        });
    });
    </script>
@endsection

    <!-- welcome email pop-up -->
    <!-- <div class="modal fade custom_modal" id="welcome_email" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-lg modal_custom_width_xs">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add Welcome Email</h4>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="alert alert-danger error_msg" style="display:none">Please enter all email detail</div> 
                </div>
                <div class="modal-body">
                    <div class="label_field">
                        <label>To</label>
                        <div class="input_container">
                        <input type="email" class="c_email">
                        </div>
                    </div>
                    <div class="label_field">
                        <label>Contributor Credentials</label>
                        <div class="c_credentials"></div>
                    </div>
                    <div class="label_field">
                        <label>Subject</label>
                        <div class="input_container">
                        <input type="text" class="e_title"/>
                        </div>
                    </div>
                    <div class="label_field">
                        <label>Email Content  <i class="fa fa-lightbulb-o red_link" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Please add the Credentials in the email content." ></i> </label>
                        <div class="input_container">
                            <textarea contenteditable="" id="new_text" class="email_content_txt"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                <input type="button" value="Done" class="close_modal save_form_edit_book">
                </div>
            </div>
        </div>
    </div> -->
    <!-- welcome email pop-up ends  -->

    <!-- Generate password  -->
    <script type="text/javascript">

    //onchange of the email, create password and add data into pop-up
    // $(document).ready(function(){

    //     $('input[name="email"]').bind("change keyup input",function() {
    //         var chars = "abcdefghijklmnopqrstuvwxyz1234567890";
    //         var pass = "";
    //         for (var x = 0; x < 10; x++) {
    //             var i = Math.floor(Math.random() * chars.length);
    //             pass += chars.charAt(i);
    //         }
           
    //         $('input[name="password"]').val(pass);
    //         $('.c_credentials').html('');
    //         $('.c_credentials').html("Email : <span class='credential_email'>"+$(this).val()+"</span><br/> Password : "+pass);
    //         $('.c_email').val($(this).val());
    //         $('input[name="c_email"]').val($(this).val());
    //     });

    //     //on change fill the hidden field for the email content
    //     $('.c_email').bind("change keyup input",function() { 
    //         console.log("change here");
    //         var data = $(this).val();
    //         $('input[name="c_email"]').val(data);
    //         $('input[name="email"]').val(data);
    //         $('.credential_email').html("");
    //         $('.credential_email').html(data);
    //     });
        
    //     $('.e_title').bind("change keyup input",function() { 
    //         var data = $(this).val();
    //         $('input[name="e_title"]').val(data);
    //     });

    //     $('textarea#new_text').bind("change keyup input",function() {
    //         var data = $(this).val();
    //         $('textarea#email_content').val(data);
    //     });

    //     //on close of pop-up validate pop-up fields
    //     $(".close_modal").on("click", function(e){
    //         var email_data = $('.c_email').val();
    //         var email_title = $('.email_title').val();
    //         var email_content = $('textarea#new_text').val();

    //         if(email_data == "" || email_title == "" || email_content ==""){
    //             $(".error_msg").css("display","block");
    //             e.preventDefault();
    //             e.stopImmediatePropagation();
    //             return false; 
    //         }else{
    //             $(".error_msg").css("display","none");
    //             $('#welcome_email').modal('hide');
    //         }
    //     });
    // });
    </script>