@extends('layout.header')
@section('title')
ALIAN | Add New Project Portfolio
@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">
                    Project Portfolio
                </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('AddProjectPortfolio')}}" class="m-nav__link">
                            <span class="m-nav__link-text">
                                Add New Portfolio
                            </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 Portfolio
                        </h3>
                    </div>
                </div>
                <div class="">
                    <li class="m-portlet__nav-item">
                        <a href="{{URL::to('listing-project-portfolio')}}" class="new_order_btn d_btn_cancel_portfolio">
                            <span>
                                <span>
                                    Cancel
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="m-portlet__nav-item" >
                        <a href="javascript:;" class="new_order_btn d_btn_save_Portfolio">
                            <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_portfolio" name="frm_portfolio" action="save-project-portfolio" method="post" enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <div class="container">
                        
                        <div class="form-group row">
                            <label for="d_portfolio_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_portfolio_title" name="d_portfolio_title" maxlength="200">                               
                            </div>                          
                        </div>
                        
                         <div class="form-group row">
                            <label for="d_portfolio_tech" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Select Technologies:</label>
                              <div class="col-lg-9">
                                <select class="form-control d_portfolio_tech" name="d_portfolio_tech">
                                    <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="d_portfolio_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_portfolio_image" name="d_portfolio_image" accept="image/*">                               
                            </div>                          
                        </div>
                        
                        <div class="form-group row">
                            <label for="d_portfolio_url" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Project URL:</label>
                            <div class="col-lg-9 ">
                                <input type="text" class="form-control d_portfolio_url" name="d_portfolio_url" maxlength="200">                               
                            </div>                          
                        </div>

                        <div class="form-group row">
                            <label for="portfolio_description" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Description:</label>
                            <div class="col-lg-9 ">
                                <textarea name="portfolio_description" class="form-control d_portfolio_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_Portfolio', function () {
            debugger;            
            var d_portfolio_title = $('.d_portfolio_title').val();
            var d_portfolio_tech = $('.d_portfolio_tech').val();
            var d_portfolio_image = $('.d_portfolio_image').val().replace("C:\\fakepath\\", "");            
            var d_portfolio_description = $('.d_portfolio_description').val();            
            var d_portfolio_url = $('.d_portfolio_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_portfolio_title === '') {
                $('.d_portfolio_title').after('<span class="err_msg" style="color:#CD5C5C;">Please enter title</span>');
                error = true;
            }
            if (d_portfolio_tech === '-1') {
                $('.d_portfolio_tech').after('<span class="err_msg" style="color:#CD5C5C;">Please select valid technology</span>');
                error = true;
            }
            if (d_portfolio_image === '') {
                $('.d_portfolio_image').after('<span class="err_msg" style="color:#CD5C5C;">Please upload portfolio image</span>');
                error = true;
            }           
            if (d_portfolio_description === '') {
                $('.d_portfolio_description').after('<span class="err_msg" style="color:#CD5C5C;">Please enter short description</span>');
                error = true;
            }          
            if (d_portfolio_url === '') {
                $('.d_portfolio_url').after('<span class="err_msg" style="color:#CD5C5C;">Please enter project URL</span>');
                error = true;
            } else {
                if (!chkURL.test(d_portfolio_url)) {
                    $('.d_portfolio_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_Portfolio").hide();
                document.getElementById('frm_portfolio').submit();
            }
        });

        //image upload validation
        $('.d_portfolio_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_portfolio_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_portfolio_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