@extends('layout.header')
@section('title')
ALIAN | All Projects Portfolio List
@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">
                    Projects Portfolio List
                </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-project-portfolio')}}" class="m-nav__link">
                            <span class="m-nav__link-text">
                                Projects Portfolio List
                            </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">
                            Projects Portfolio List
                        </h3>
                    </div>
                </div>
                <div class="">
                    <li class="m-portlet__nav-item">
                        <a href="{{URL::to('AddProjectPortfolio')}}" 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_ProjectPortfolio_table')
            </div>

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

<div id="myPortfolioModel" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <form method="post" action="" id="frm_portfolio_update" autocomplete="off">
            <input type="hidden" value="{{csrf_token()}}" class="tkn_portfolio" name="_token">
            <div class="modal-content">
                <div class="modal-header">        
                    <h4 class="modal-title">Update Portfolio Details</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <img class="d_portfolio_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 row">
                        <label for="d_portfolio_title" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Title:</label>                           
                        <input type="text" class="form-control d_portfolio_title" name="d_portfolio_title" maxlength="200">
                    </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>                              
                                <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 class="form-group row">
                        <label for="d_portfolio_image" class="col-xl-3 col-lg-3 col-md-3 col-form-label">*Image:</label>
                        <input type="file" class="form-control d_portfolio_image" name="d_portfolio_image" accept="image/*"> 
                    </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>
                        <input type="text" class="form-control d_portfolio_url" name="d_portfolio_url" maxlength="200">
                    </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>
                        <textarea name="portfolio_description" class="form-control d_portfolio_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_portfolio_model" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary d_btn_update_portfolio_model">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // for get row data  in model box
    $(document).on('click', '.d_edit_portfolio_info', function () {
        debugger;
        var Portfolio_Id = $(this).attr('data-ept-id');
        $('.d_hdn_ept_id').val($(this).attr('data-ept-id'));
        $.ajax({
            url: 'EditPortfolioInfo',
            type: 'GET',
            data: {Portfolio_Id: Portfolio_Id},
            success: function (data) {               
                $('.d_portfolio_title').val(data[0]['prop_pfolio_title']);              
                $('select[name="d_portfolio_tech"]').val(data[0]['prop_pfolio_tech_id']);               
                $('.d_portfolio_url').val(data[0]['prop_pfolio_url']);
                $('.d_portfolio_description').val(data[0]['prop_pfolio_desc']);
                $('.d_portfolio_icon').attr('src','ProposalHTML/img/'+data[0]['prop_pfolio_image']);
            }
        });
    });

    //update portfolio data 
    $('.d_btn_update_portfolio_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_portfolio_update');
        var fd = new FormData(form);
        fd.append('token', $('input[name=_token]').val());
        fd.append('portfolio_id', $('.d_hdn_ept_id').val());       
        fd.append('d_portfolio_title', $('.d_portfolio_title').val());
        fd.append('d_portfolio_tech', $('.d_portfolio_tech').val());
        fd.append('d_portfolio_image', $('.d_portfolio_image').val().replace("C:\\fakepath\\", ""));       
        fd.append('d_portfolio_url', $('.d_portfolio_url').val());
        fd.append('d_portfolio_description', $('.d_portfolio_description').val());
        var error = false;
        $('.err_msg').empty();
        
        if ($('.d_portfolio_title').val() === '') {
            $('.d_portfolio_title').after('<span class="err_msg" style="color:#CD5C5C;">Please enter title</span>');
            error = true;
        }
        if ($('.d_portfolio_tech').val() === '-1') {
            $('.d_portfolio_tech').after('<span class="err_msg" style="color:#CD5C5C;">Please select valid technology</span>');
            error = true;
        }
        if ($('.d_portfolio_url').val() === '') {
            $('.d_portfolio_url').after('<span class="err_msg" style="color:#CD5C5C;">Please enter itme URL</span>');
            error = true;
        } else {
            if (!chkURL.test($('.d_portfolio_url').val())) {
                $('.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 ($('.d_portfolio_description').val() === '') {
            $('.d_portfolio_description').after('<span class="err_msg" style="color:#CD5C5C;">Please enter short description</span>');
            error = true;
        }
        if (error === true) {
            return false;
        }
        else
        {
            $.ajax({
                url: 'UpdatePortfolioInfo',
                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_portfolio_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: 'DeletePortfolioInfo/' + Id,
                type: 'GET',
                dataType: 'JSON',
                data: {Id: Id},
                success: function () {
                    location.reload();
                },
                error: function () {
                    console.log();
                }
            });
        }
        else
        {
            return false;
        }
    });

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

    //for clear all error message on close
    $('.d_btn_cancel_portfolio_model').on('click', function () {
        $('.error_msg').remove();
        $('.err_msg').remove();
        $('.d_portfolio_image').val('');
    });

    //Ajax pagination 
    $(document).on('click', '.d_portfolio_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-project-portfolio/PaginateData?page=" + page,
            type: 'GET',
            success: function (data)
            {
                $('.paginate_data').html(data);
            }
        });
    }

    //Search record in portfolio
    $('#generalSearch').on('keyup', function () {
        var query = $(this).val();
        $.ajax({
            url: 'SearchPortfolioItem',
            type: 'GET',
            data: {query: query},
            success: function (data)
            {
                $('.paginate_data').html(data);
                if ($.trim($('.d_portfolio_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