<script type="text/javascript" src="<?php echo SITE_URL ?>libs/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("#frm-offer").submit(function(e){
            if(!validate_offer()){
                e.preventDefault();
            }
    });
        
    
});

function validate_offer(){
    
    var offer_domain = $("#offer_domain_id");var offer_domainmsg = $("#msg_offer_domain_id");
    var offer_title = $("#offer_title");var offer_titlemsg = $("#msg_offer_title");
    var offer_image = $("#offer_image");var offer_imagemsg = $("#msg_offer_image");
    // var offer_link = $("#offer_link");var offer_linkmsg = $("#msg_offer_link");
    var offer_desc = $("#offer_desc");var offer_descmsg = $("#msg_offer_desc");
    var offer_button = $("#offer_button");var offer_buttonmsg = $("#msg_offer_button");
    var offer_expire = $("#offer_expire");var offer_expiremsg = $("#msg_offer_button");
    
    if(offer_domain.val()=='')
    {
        offer_domain.addClass('error');
        offer_domain.focus();
        offer_domainmsg.html('Please select Doamin').show();
        return false;
    }else
    {
        offer_domain.removeClass('error');
        offer_domainmsg.hide();
    }
    if(offer_title.val()=='')
    {
        offer_title.addClass('error');
        offer_title.focus();
        offer_titlemsg.html('Please enter title').show();
        return false;
    }else
    {
        offer_title.removeClass('error');
        offer_titlemsg.hide();
    }

    <?php if($xcare_offerDetail->xcare_offer_id ==0 && $xcare_offerDetail->xcare_offer_image == '') { ?>
    if(offer_image.val()=='')
    {
        offer_image.addClass('error');
        offer_image.focus();
        offer_imagemsg.html('Please select image').show();
        return false;
    }else
    {
        offer_image.removeClass('error');
        offer_imagemsg.hide();
    }
    <?php  } ?>
    if(offer_desc.val()=='')
    {
        offer_desc.addClass('error');
        offer_desc.focus();
        offer_descmsg.html('Please enter description').show();
        return false;
    }else
    {
        offer_desc.removeClass('error');
        offer_descmsg.hide();
    }
    if(offer_link.val()=='')
    {
        offer_link.addClass('error');
        offer_link.focus();
        offer_linkmsg.html('Please enter link').show();
        return false;
    }else
    {
        offer_link.removeClass('error');
        offer_linkmsg.hide();
    }
    if(offer_button.val()=='')
    {
        offer_button.addClass('error');
        offer_button.focus();
        offer_buttonmsg.html('Please enter button title').show();
        return false;
    }else
    {
        offer_button.removeClass('error');
        offer_buttonmsg.hide();
    }
    if(offer_expire.val()=='')
    {
        offer_expire.addClass('error');
        offer_expire.focus();
        offer_expiremsg.html('Please enter date').show();
        return false;
    }else
    {
        offer_expire.removeClass('error');
        offer_expiremsg.hide();
    }

    return true;
}    
</script>
<div class="breadcrumb">
    <h1>Offer</h1>
    <ul>
        <li><a href="<?php echo SITE_URL.ADMIN_DIR ?>">Dashboard</a></li>
        <li>Add New Offer</li>
    </ul>
</div>
<div class="separator-breadcrumb border-top"></div>
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-body">
                <div class="card-title mb-3">Add New Offer</div>
                <form action="" id='frm-offer' method="post" enctype="multipart/form-data">
                    <?php if(isset($xcare_offerDetail->xcare_offer_id ) && $xcare_offerDetail->xcare_offer_id !=0) { ?>
                       <input type="hidden" id="xcare_offer_id" name="xcare_offer_id" value="<?php echo $xcare_offerDetail->xcare_offer_id; ?>" />
                    <?php } ?>
                    <div class="row">
                        <div class="col-md-6 form-group mb-3">
                            <label for="offer_domain_id">Domain <span class="asterisk">*</span></label>
                            <select id="offer_domain_id" name="offer_domain_id" class="form-control">
                                <option value="">Select Domain</option>
                                <?php 
                                 if($allDomain && count($allDomain)>0){
                                    foreach($allDomain as $domain){?>
                                    <option value="<?php echo $domain->domain_id ?>" <?php echo ($xcare_offerDetail->xcare_offer_domain_id == $domain->domain_id) ? 'selected="selected"' : '' ?>><?php echo $domain->domain_title ?></option>
                                    <?php }
                                 }
                                ?>

                            </select>
                            <div class="invalid-tooltip" id="msg_offer_domain_id"></div>
                        </div>
                    	<div class="col-md-6 form-group mb-3">
                            <label for="offer_title">Title <span class="asterisk">*</span></label>
                            <input type="text" class="form-control" id="offer_title" name="offer_title" value="<?php echo $xcare_offerDetail->xcare_offer_title; ?>" placeholder="Enter title">
                            <div class="invalid-tooltip" id="msg_offer_title"></div>
                        </div>

                        <!-- <div class="col-md-6 form-group mb-3">
                            <label for="offer_link">Link <span class="asterisk">*</span></label>
                            <input type="text" class="form-control" id="offer_link" name="offer_link" value="<?php echo $xcare_offerDetail->xcare_offer_link; ?>" placeholder="Enter link">
                            <div class="invalid-tooltip" id="msg_offer_link"></div>
                        </div> -->
                        <div class="col-md-6 form-group mb-3">
                            <label for="offer_desc">Description <span class="asterisk">*</span></label>
                            <textarea class="form-control" id="offer_desc" name="offer_desc"  placeholder="Enter description">
                                <?php echo $xcare_offerDetail->xcare_offer_desc; ?>
                            </textarea>
                            <div class="invalid-tooltip" id="msg_offer_desc"></div>
                        </div>
                        <div class="col-md-6 form-group mb-3">
                            <label for="tnc">Term & Conditions <span class="asterisk">*</span></label>
                                <textarea class="form-control" id="tnc" name="tnc"  placeholder="Enter term & condition"><?php echo $xcare_offerDetail->xcare_offer_tnc; ?></textarea><br/>
                                <script type="text/javascript"> 
                                    CKEDITOR.replace( "tnc",
                                        {
                                        toolbar :
                                            [
                                                { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
                                                { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
                                                { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
                                                { name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
                                                { name: 'tools', items : [ 'Maximize','-','About' ] }
                                            ]
                                        });
                                </script>
                                
                            <div class="invalid-tooltip" id="msg_offer_desc"></div>
                        </div>
                        
                        <div class="col-md-6 form-group mb-3">
                            <label for="offer_button">Button Title <span class="asterisk">*</span></label>
                            <input type="text" class="form-control" id="offer_button" name="offer_button" value="<?php echo $xcare_offerDetail->xcare_offer_button; ?>" placeholder="Enter button title">
                            <div class="invalid-tooltip" id="msg_offer_button"></div>
                        </div>
                        <div class="col-md-6 form-group mb-3">
                            <label for="offer_expire">Expired At <span class="asterisk">*</span></label>
                            <input type="date" class="form-control" id="offer_expire" name="offer_expire" value="<?php echo $xcare_offerDetail->xcare_offer_expired_at; ?>" placeholder="Enter button title">
                            <div class="invalid-tooltip" id="msg_offer_expire"></div>
                        </div>
                        <div class="col-md-6 form-group mb-3">
                            <label for="offer_region">Region <span class="asterisk">*</span></label>
                            <input type="text" class="form-control" id="offer_region" name="offer_region" value="<?php echo $xcare_offerDetail->xcare_offer_region; ?>" placeholder="Enter region">
                            <div class="invalid-tooltip" id="msg_offer_region"></div>
                            <input type="hidden" id="city" name="city" value="" >
                            <input type="hidden" id="state" name="state" value="" >
                            <input type="hidden" id="country" name="country" value="" >
                            <input type="hidden" id="zipcode" name="zipcode" value="" >
                        </div>
                        <div class="col-md-6 form-group mb-3">
                            <label for="offer_image">Image <span class="asterisk">*</span></label>
                            <input type="file" class="form-control col-md-6" id="offer_image" name="offer_image" />
                            <?php 
                                $offerimage = json_decode($xcare_offerDetail->xcare_offer_image,1);
                                $imagepath = $offerimage['name']."-100x100.".$offerimage['type'];
                            if($xcare_offerDetail->xcare_offer_image!='' && file_exists(DIR_UPLOAD_OFFER.$imagepath)){
                                 ?>
                                 <br/>
                                <img style="width: 200px;" src="<?php echo DIR_UPLOAD_FORM_OFFER_SHOW.$imagepath ?>" />
                            <?php } ?>
                            
                            <div class="invalid-tooltip" id="msg_offer_image"></div>
                        </div>
                        
                        <div class="col-md-6 form-group mb-3">
                            <label for="offer_points">Points <span class="asterisk">*</span></label>
                            <input type="number" class="form-control" id="offer_points" name="offer_points" value="<?php echo $xcare_offerDetail->xcare_offer_points; ?>" placeholder="Enter points">
                            <div class="invalid-tooltip" id="msg_offer_points"></div>
                        </div>
                        
                        <div class="col-md-3 form-group mb-3">
                            <label class="control-label">Status</label>
                            <div class="controls">

                            <label class="switch switch-primary mr-3">
                                <input type="checkbox" id="offer_status" name="offer_status" <?php echo ($xcare_offerDetail->xcare_offer_status=='1') ? "checked='checked'" : "" ?>>
                                <span class="slider"></span>
                            </label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <input type="submit" class="btn btn-primary" id="submit" name="submit" value="Submit">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class='loader-bubble loader-bubble-secondary m-5' align="center" style="display: none;"></div>

<script type="text/javascript">
let autocomplete;
const googleScript = document.createElement('script');
googleScript.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyDIDMklRxHmFYWU8Vvo1P-dVkB_nbHARj8&libraries=places`
googleScript.id = "googlePlaceScript";
window.document.body.appendChild(googleScript);
googleScript.addEventListener('load', () => {
    try {
        
        this.autocomplete = new window.google.maps.places.Autocomplete(
            document.getElementById('offer_region'),
            {
                types: ['(regions)'],
            }
        );
        this.autocomplete.addListener('place_changed', () => {
            const place = this.autocomplete.getPlace();
            console.log(place);
            console.log(place.address_components);
            const addressComponents =place.address_components;

            addressComponents.forEach(component =>{
                if(component.types.includes('postal_code')){
                    document.getElementById("zipcode").value = component.long_name.replace(/\s/g, "");
                }
                if(component.types.includes('locality')){
                    document.getElementById("city").value = component.long_name;
                }
                if(component.types.includes('administrative_area_level_1')){
                    document.getElementById("state").value = component.long_name;
                }
                if(component.types.includes('country')){
                    document.getElementById("country").value = component.long_name;
                }
            });
        });
    } catch (err) {
        console.log(err);
    }
});
</script>