@extends('layouts/ums_layout')
@section('title', '| New {{$idCategory->name}} Definition')
@section('content')

<div class="row add-data-form"  style="padding-bottom: 1%">
    <div class="col-md-12">
        <div class="fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{url('ums/viewStudent Id Generation/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                </i>Id Generation List</a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">{{$idCategory->name}} Definition</div>
                </div>
                <div class="panel-body">
                     {!! Form::open(array('url' => '', 'id' => '', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}
                     <div class="row">
                        <div class="col-md-12">                     
                            <div class="form-group">
                                {!! Form::label('totaldigit', 'Total Digit:', ['class' => 'col-sm-3 control-label']) !!}
                                <div class="col-sm-9">
                                    {!! Form::text('totaldigit', $value = null, ['class' => 'form-control', 'id' => 'totaldigit', 'type' => 'text', 'placeholder' => 'Enter Number']) !!}
                                    <p id='totalDigite' style="max-height:3px;"></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                         <div class="col-md-12">   
                         <select id="source" data-text="ID element list" data-search="Search for options">
                            @foreach($idElements as $idElement)
                                <option value="{{$idElement->id}}">{{$idElement->name}}</option>
                            @endforeach
                        </select>
                        <select id="destination" data-text="Selected ID element list"  data-search="Search for options">
                        </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-8">            
                                <div class="form-group">
                                    {!! Form::label('concatenation', 'Concatenation :', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        <select class ="form-control" id = "concatenation" name="concatenation">
                                                <option value="">Select one</option>
                                                @foreach($concatenationArray as $concatenation)
                                                <option value="{{$concatenation}}">{{$concatenation}}</option>
                                                @endforeach
                                            </select>
                                            <p id='concatenatione' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                 <div class="form-group">
                                    <div class="col-sm-3">Sample {{$idCategory->name}} :</div>
                                    <div class="col-sm-6 defDisplay"></div>
                                    <div class="col-sm-3 defLength"></div>
                                </div>

                                    
                                    <div class="form-group">
                                        
                                        <div class="col-sm-9 text-right">
                                            <input type="hidden" name="idCategoryId" value="2">
                                            
                                            <a href="#" class="btn btn-success showDefinition text-left">Show Definition</a> 
                                            {!! Form::label('submit', ' ', ['class' => 'col-sm-3 control-label']) !!}
                                            {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                                            {{-- Form::reset('Reset', ['class' => 'btn btn-warning']) --}}
                                            <a href="{{url('ums/viewIdCategory/')}}" class="btn btn-danger closeBtn">Close</a>
                                            <span id="success" style="color:green; font-size:16px;" class="pull-right"></span>
                                        </div>
                                    </div>
                                {!! Form::close()  !!}
                             </div>
                            
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10"></div>
                        <div class="col-md-2 emptySpace vert-offset-top-4">
                            <img src="{{ URL::to('/') }}/images/image15.png" width="90%" style="float:right">
                        </div>
                    </div>
                    </div>
             </div>
             <div class="footerTitle" style="border-top:1px solid white"></div>
        </div>
    </div>
</div>
@endsection 
<link rel="stylesheet" href="{{asset('css/listswap.css')}}">

<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<script src="{{asset('js/jquery.listswap.js')}}"></script>
<!-- <script src="{{asset('js/multiselect.js')}}"></script>
 -->
<script type="text/javascript">
jQuery(document).ready(function($) {

   $('#source, #destination').listswap({
        truncate:true, 
        height:135, 
        is_scroll:true, 
    });

    $(document).on('click', '.showDefinition', function() {

        var phrase          = '';
        var defLengthCheck          = 0;
        var destinationList = $('div#listbox_destination_wrapper').find('li.listbox_option');
        var i               = destinationList.length;
        
        destinationList.each(function(){

            var current = $(this);
            var idElement = current.data('value');
            phrase += current.find("input.example").val();
            defLengthCheck += parseInt(current.find("input.stringLength").val());
                    //console.log(defLengthCheck);

            if($('#concatenation').val() && i>1){
                phrase += $('#concatenation').val();
                defLengthCheck += 1;
                i--;
            }
        });

        var totaldigit = parseInt($('#totaldigit').val());

        if(totaldigit != defLengthCheck){
            alert('Total Digit is '+ totaldigit +' .You have entried '+defLengthCheck+' digit');
        }

        $('.defDisplay').text(phrase);
        //console.log(defLengthCheck);
        $('.defLength').text('Length is : '+defLengthCheck);
        //console.log(phrase);
    });



$('form').submit(function( event ) {
    event.preventDefault();

    //console.log($('form').serialize());
    $.ajax({
         type: 'post',
         /*url: './saveIdDefinition',*/

         url: '{{url('ums/saveIdDefinition/')}}',
         data: $('form').serialize(),
         dataType: 'json',
        success: function( _response ){
            if (_response.accessDenied) {
                showAccessDeniedMessage();
                return false;
            }
            //alert(JSON.stringify(_response));
            if (_response.errors) {

                   /* if (_response.errors['buildingId']) {
                        $('#buildingIde').empty();
                        $('#buildingIde').append('<span style="color:red;">'+_response.errors.buildingId+'</span>');
                        return false;
                    }if (_response.errors['floor']) {
                        $('#floore').empty();
                        $('#floore').append('<span style="color:red;">'+_response.errors.floor+'</span>');
                        return false;
                    }*/
            } else {
                    window.location.href = '{{url('ums/viewIdCategory/')}}';
                    }
        },
        error: function( _response ){
            // Handle error
            console.log(_response.error);
        }
    });
});



});
</script>