@extends('layout.header')
@section('title')
ALIAN | Add New Plugin & Theme
@endsection

@section('main')
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-sm-flex align-items-center subheader_border_bottom">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Plugin & Theme
                </h3>
                <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                    <li class="m-nav__item m-nav__item--home">
                        <a href="#" class="m-nav__link m-nav__link--icon">
                            <i class="m-nav__link-icon la la-home"></i>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li> 
                    <li class="m-nav__item">
                        <a href="{{URL::to('new-plugin-theme')}}" class="m-nav__link">
                            <span class="m-nav__link-text">
                                Add New Plugin & Theme
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- END: Sub header -->
    <!-- START :: main Content-->
    <div class="m-content Add-New-Store">
        <div class="m-portlet m-portlet--mobile margin_bottom_60">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Add New Plugin & Theme
                        </h3>
                    </div>
                </div>
                <div class="">
                    <li class="m-portlet__nav-item">
                        <a href="{{URL::to('listing-plugin-theme')}}" class="new_order_btn d_btn_cancel_plugin_theme">
                            <span>
                                <span>
                                    Cancel
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="m-portlet__nav-item" >
                        <a href="javascript:;" class="new_order_btn d_btn_save_plugin_theme">
                            <span>
                                <i class="fa fa-check"></i>
                                <span>
                                    Save
                                </span>
                            </span>
                        </a>
                    </li>
                </div>
            </div>

            <!-- Admin-Add New Plugin Theme-->
            <div class="m-portlet__body">
                <form id="frm_theme_plugin" name="frm_theme_plugin" action="save-plugin-theme" method="post" enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <div class="container">
                        <div class="form-group row">
                            <label for="ept_tech_id" class="col-sm-3  col-form-label">*Select Technologies:</label>
                            <div class="col-sm-9 ">
                                <select class="form-control d_ept_tech_id" name="ept_tech_id">
                                    <option value="-1">Select Technology</option> 
                                    @foreach($technologies as $techList)
                                    <option value="{{$techList->tech_id}}">{{$techList->technology_name}}</option>
                                    @endforeach
                                </select>                               
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="ept_type" class="col-sm-3  col-form-label">*Select Item Type:</label>
                            <div class="col-sm-9 ">
                                <select class="form-control d_ept_type" name="ept_type">                                   
                                    <option value="-1">Select Type</option>
                                    <option value="0">Theme/Template</option>
                                    <option value="1">Plugin</option>
                                    <option value="2">App</option>
                                </select>                                
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="ept_title" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Title:</label>
                            <div class="col-lg-9 ">
                                <input type="text" class="form-control d_ept_title" name="ept_title" maxlength="200">                               
                            </div>                          
                        </div>

                        <div class="form-group row">
                            <label for="ept_image" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Image:</label>
                            <div class="col-lg-9">
                                <input type="file" class="form-control d_ept_image" name="ept_image" accept="image/*">                               
                            </div>                          
                        </div>

                        <div class="form-group row">
                            <label for="ept_price" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Price (In {{env('APP_MONEY_SYMBOL')}}):</label>
                            <div class="col-lg-9 ">
                                <input type="text" class="form-control d_ept_price" name="ept_price" maxlength="6">                               
                            </div>                          
                        </div>

                        <div class="form-group row">
                            <label for="ept_from_where" class="col-sm-3  col-form-label">*From Where:</label>
                            <div class="col-sm-9 ">
                                <select class="form-control d_ept_form_where" name="ept_from_where">                                   
                                    <option value="-1">Select Site Name</option>
                                    <option value="wordpress">Wordpress</option>
                                    <option value="codecanyon">Codecanyon</option>
                                    <option value="themeforest">Themeforest</option>
                                </select>                                
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="ept_title_url" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Item URL:</label>
                            <div class="col-lg-9 ">
                                <input type="text" class="form-control d_ept_title_url" name="ept_title_url" maxlength="200">                               
                            </div>                          
                        </div>

                        <div class="form-group row">
                            <label for="ept_description" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Description:</label>
                            <div class="col-lg-9 ">
                                <textarea name="ept_description" class="form-control d_ept_description" style="height: 100px; max-height: 100px"></textarea>                                                           
                            </div>                          
                        </div>

                    </div>
                </form>
            </div>
        </div>
        <!-- Admin-Add_store From End-->
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
    <!-- END :: main Content-->
</div>
<script>
    $(document).ready(function () {

        //validation for save new plugin and theme details
        $(document).on('click', '.d_btn_save_plugin_theme', function () {
            debugger;
            var d_ept_tech_id = $('.d_ept_tech_id').val();
            var d_ept_type = $('.d_ept_type').val();
            var d_ept_title = $('.d_ept_title').val();
            var d_ept_image = $('.d_ept_image').val().replace("C:\\fakepath\\", "");
            var d_ept_price = $('.d_ept_price').val();
            var d_ept_description = $('.d_ept_description').val();
            var d_ept_form_where = $('.d_ept_form_where').val();
            var d_ept_title_url = $('.d_ept_title_url').val();
            var chkURL = /^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i;
            var error = false;
            $('.err_msg').empty();
            if (d_ept_tech_id === '-1') {
                $('.d_ept_tech_id').after('<span class="err_msg" style="color:#CD5C5C;">Please select valid technology</span>');
                error = true;
            }
            if (d_ept_type === '-1') {
                $('.d_ept_type').after('<span class="err_msg" style="color:#CD5C5C;">Please select valid technology type</span>');
                error = true;
            }
            if (d_ept_title === '') {
                $('.d_ept_title').after('<span class="err_msg" style="color:#CD5C5C;">Please enter title</span>');
                error = true;
            }
            if (d_ept_image === '') {
                $('.d_ept_image').after('<span class="err_msg" style="color:#CD5C5C;">Please upload icon image</span>');
                error = true;
            }
            if (d_ept_price === '') {
                $('.d_ept_price').after('<span class="err_msg" style="color:#CD5C5C;">Please enter price</span>');
                error = true;
            }
            if (d_ept_description === '') {
                $('.d_ept_description').after('<span class="err_msg" style="color:#CD5C5C;">Please enter short description</span>');
                error = true;
            }
            if (d_ept_form_where === '-1') {
                $('.d_ept_form_where').after('<span class="err_msg" style="color:#CD5C5C;">Please select valid site name</span>');
                error = true;
            }
            if (d_ept_title_url === '') {
                $('.d_ept_title_url').after('<span class="err_msg" style="color:#CD5C5C;">Please enter item URL</span>');
                error = true;
            } else {
                if (!chkURL.test(d_ept_title_url)) {
                    $('.d_ept_title_url').after('<span class="err_msg" style="color:#CD5C5C;">Please enter valid item URL in this format "http://sitename.com"</span>');
                    error = true;
                } 
            }
            if (error === true) {
                return false;
            }
            else
            {
                $(".d_btn_save_plugin_theme").hide();
                document.getElementById('frm_theme_plugin').submit();
            }
        });

        //for allow only number with decimal on price field 
        $(document).on('keypress', '.d_ept_price', function (event) {
            return isNumber(event, this);
        });
        function isNumber(evt, element) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (
//            (charCode != 45 || $(element).val().indexOf('-') != -1) &&      // “-” CHECK MINUS, AND ONLY ONE.
                    (charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
                    (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        //image upload validation
        $('.d_ept_image').on('change', function () {
            debugger;
            var ext = $(this).val().split('.').pop().toLowerCase();
            var icon_size = $(this)[0].files[0].size;
            $('.err_msg').empty();
            if ($.inArray(ext, ['x-icon', 'png', 'jpg', 'jpeg']) === -1) {
                $('.d_ept_image').after('<span class="err_msg" style="color:#DC143C;">Please upload valid PNG | JPG | JPEG image file</span>');
                $(this).val('');
                return false;
            }
            else if (icon_size >= 1048000)
            {
                $('.d_ept_image').after('<span class="err_msg" style="color:#DC143C;">Maximum 1 MB upload allow</span>');
                $(this).val('');
                return false;
            }
            else {
                $('.err_msg').empty();
            }
        });
    });
</script>
@endsection