@extends('layout.header')
@section('title')
ALIAN | Plugins & Themes
@endsection
<!--<link rel="stylesheet" type="text/css" href="{{URL::asset('css/datatables.css')}}/>-->
@section('main')
<meta name="csrf-token" content="{{ csrf_token() }}">
<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('listing-plugin-theme')}}" class="m-nav__link">
                            <span class="m-nav__link-text">
                                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">
                            Plugin & Theme
                        </h3>
                    </div>
                </div>
                <div class="">
                    <li class="m-portlet__nav-item">
                        <a href="{{URL::to('new-plugin-theme')}}" class="new_order_btn">
                            <span>
                                <span>
                                    Add New
                                </span>
                            </span>
                        </a>
                    </li>                  
                </div>
            </div>
            <div class="row" style="margin-left: 2%; margin-top: 2%">
                <div class="col-sm-1"><label for="search" class=" col-form-label">Search Item</label></div>
                <div class="col-sm-3"><input type="text" class="form-control" name="search_item" id="generalSearch"></div>
            </div>     
            <!-- Admin-Add New Plugin Theme-->
            <div class="m-portlet__body paginate_data">
                @include('Listing_PluginTheme_table')
            </div>

        </div>        
        <!-- Admin-Add_store From End-->
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
    <!-- END :: main Content-->
</div>


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <form method="post" action="" id="frm_theme_plugin_update" autocomplete="off">
            <input type="hidden" value="{{csrf_token()}}" class="tkn_ThemePluginInfo" name="_token">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update Details</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <img class="d_ept_icon" alt="" width="100" height="100" style="margin-left: auto; margin-right: auto; display: block;">
                    </div>
                    <input type="hidden"  class="d_hdn_ept_id">
                    <div class="form-group">    
                        <label class="col-form-label">*Select Technologies:</label>
                        <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 class="form-group">
                        <label for="ept_type" class="col-form-label">*Select Item Type:</label>                  
                        <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 class="form-group">
                        <label for="ept_title" class=" col-form-label">*Title:</label>                    
                        <input type="text" class="form-control d_ept_title" name="ept_title" maxlength="200">
                    </div>
                    <div class="form-group">
                        <label for="ept_image" class="col-form-label">*Image:</label>                    
                        <input type="file" class="form-control d_ept_image" name="ept_image" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label for="ept_price" class="col-form-label">*Price (in {{env('APP_MONEY_SYMBOL')}}):</label>                  
                        <input type="text" class="form-control d_ept_price" name="ept_price" maxlength="6">    
                    </div> 
                    <div class="form-group">
                        <label for="ept_from_where" class="col-form-label">*From Where:</label>
                        <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 class="form-group">
                        <label for="ept_title_url" class="col-form-label">*Item URL:</label>
                        <input type="text" class="form-control d_ept_title_url" name="ept_title_url" maxlength="200">  
                    </div>
                    <div class="form-group">
                        <label for="ept_description" class="col-form-label">*Description:</label>                         
                        <textarea name="ept_description" class="form-control d_ept_description" style="height: 100px; max-height: 100px"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <span class="msg" style="margin-right: auto;"></span>
                    <button type="button" class="btn btn-default d_btn_cancel_plugin_theme_model" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary d_btn_update_plugin_theme_model">Update</button>
                </div>
            </div>
        </form>  
    </div>
</div>
<script>
    // for get row data  in model box
    $(document).on('click', '.d_edit_theme_plugin_info', function () {
        debugger;
        var ept_Id = $(this).attr('data-ept-id');
        $('.d_hdn_ept_id').val($(this).attr('data-ept-id'));
        $.ajax({
            url: 'EditThemePluginsInfo',
            type: 'GET',
            data: {ept_Id: ept_Id},
            success: function (data) {               
                $('.d_ept_title').val(data[0]['ept_title']);
                $('.d_ept_price').val(data[0]['ept_price']);
                $('select[name="ept_tech_id"]').val(data[0]['ept_tech_id']);
                $('select[name="ept_type"]').val(data[0]['ept_type']);
                $('select[name="ept_from_where"]').val(data[0]['ept_from_where']);
                $('.d_ept_title_url').val(data[0]['ept_title_url']);
                $('.d_ept_description').val(data[0]['ept_description']);
                $('.d_ept_icon').attr('src','/theme_plugin/'+data[0]['ept_image']);
            }
        });
    });

    //update theme and plugin data 
    $('.d_btn_update_plugin_theme_model').on('click', function () {
        debugger;
        var chkURL = /^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i;
        var form = document.getElementById('frm_theme_plugin_update');
        var fd = new FormData(form);
        fd.append('token', $('input[name=_token]').val());
        fd.append('ept_id', $('.d_hdn_ept_id').val());
        fd.append('ept_tech_id', $('.d_ept_tech_id').val());
        fd.append('ept_type', $('.d_ept_type').val());
        fd.append('ept_title', $('.d_ept_title').val());
        fd.append('ept_image', $('.d_ept_image').val().replace("C:\\fakepath\\", ""));
        fd.append('ept_price', $('.d_ept_price').val());
        fd.append('ept_from_where', $('.d_ept_form_where').val());
        fd.append('ept_title_url', $('.d_ept_title_url').val());
        fd.append('ept_description', $('.d_ept_description').val());
        var error = false;
        $('.err_msg').empty();

        if ($('.d_ept_tech_id').val() === '-1') {
            $('.d_ept_tech_id').after('<span class="err_msg" style="color:#CD5C5C;">Please select valid technology</span>');
            error = true;
        }
        if ($('.d_ept_type').val() === '-1') {
            $('.d_ept_type').after('<span class="err_msg" style="color:#CD5C5C;">Please select valid technology type</span>');
            error = true;
        }
        if ($('.d_ept_title').val() === '') {
            $('.d_ept_title').after('<span class="err_msg" style="color:#CD5C5C;">Please enter title</span>');
            error = true;
        }
//        if ($('.d_ept_image').val() === '') {
//            $('.d_ept_image').after('<span class="err_msg" style="color:#CD5C5C;">Please upload icon image</span>');
//            error = true;
//        }
        if ($('.d_ept_price').val() === '') {
            $('.d_ept_price').after('<span class="err_msg" style="color:#CD5C5C;">Please enter price</span>');
            error = true;
        }
        if ($('.d_ept_form_where').val() === '-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').val() === '') {
            $('.d_ept_title_url').after('<span class="err_msg" style="color:#CD5C5C;">Please enter itme URL</span>');
            error = true;
        } else {
            if (!chkURL.test($('.d_ept_title_url').val())) {
                $('.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 ($('.d_ept_description').val() === '') {
            $('.d_ept_description').after('<span class="err_msg" style="color:#CD5C5C;">Please enter short description</span>');
            error = true;
        }
        if (error === true) {
            return false;
        }
        else
        {
            $.ajax({
                url: 'UpdateThemePluginInfo',
                method: 'POST',
                processData: false,
                contentType: false,
                data: fd,
                success: function (res) {
                    if (res === 1) {
                        $('.msg').empty();
                        $('.msg').text('Information updated successfully..');
                        $('.msg').css('color', '#27AE60');
                        window.setTimeout(function () {
                            $('.msg').fadeTo(500, 0).slideUp(500, function () {
                                $(this).hide();
                            });
                            location.reload();
                        }, 2000);
                    }
                }
            });
        }
    });

    //delete
    $(document).on('click', '.d_delete_theme_plugin_info', function () {
        debugger;
        var Id = $(this).attr('data_id_delete');
        var confirmation = confirm("Are you sure you want to remove the item?");
        if (confirmation) {
            $.ajax({
                url: 'DeleteThemePluginInfo/' + Id,
                type: 'GET',
                dataType: 'JSON',
                data: {Id: Id},
                success: function () {
                    location.reload();
                },
                error: function () {
                    console.log();
                }
            });
        }
        else
        {
            return false;
        }
    });

    //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:#CD5C5C;">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:#CD5C5C;">Maximum 1 MB upload allow</span>');
            $(this).val('');
            return false;
        }
        else {
            $('.err_msg').empty();
        }
    });

    //for accept only number in mobile number field in model
    $(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;
    }

    //for clear all error message on closessss
    $('.d_btn_cancel_plugin_theme_model').on('click', function () {
        $('.error_msg').remove();
        $('.err_msg').remove();
        $('.d_ept_image').val('');
    });

    //Ajax pagination for team mamber report table
    $(document).on('click', '.d_theme_plugin_paginate a', function (event) {
        debugger;
        event.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        paginate_data(page);
    });

    function paginate_data(page)
    {
        $.ajax({
            url: "listing-plugin-theme/PaginateData?page=" + page,
            type: 'GET',
            success: function (data)
            {
                $('.paginate_data').html(data);
            }
        });
    }

    //Search record in team member report on super admin dashboard
    $('#generalSearch').on('keyup', function () {
        var query = $(this).val();
        $.ajax({
            url: 'SearchItem',
            type: 'GET',
            data: {query: query},
            success: function (data)
            {
                $('.paginate_data').html(data);
                if ($.trim($('.d_theme_plugin_filter').html()) == '')
                {
                    $('.msg_today_data').html('No item found').css({'color': '#CD5C5C', 'display': 'inline-block', 'width': '100%', 'text-align': 'center', 'font-family': 'calibri', 'font-size': '15px', 'margin-top': '25px'});
                }
            },
        });
    });
</script>@endsection