@extends('layouts.default')
@section('content')
<!-- page content -->
<div class="right_col" role="main">
    <div class="page-title">
      	<div class="title_left">
         	 	<h3>{{ ucwords($title) }}</h3>
       	</div>
       	<div class="pull-right">
       		<a href="{{ url('/create_agrrement') }}" class="btn btn-sm"><i class="fa fa-plus"></i> New</a>
       	</div>
    </div>
 	<div class="row">
    	@if(Session::has('success'))
    	<div class="alert alert-success alert-dismissable">
      	     <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
      	     <strong>Hurray!</strong> {{ Session::get('success') }}.
    	</div>
    	<script>
    		$(".alert").fadeOut('slow/5000');
    	</script>
    	@endif 	

        <div class="col-md-12 col-sm-12 col-xs-12">
            {{ Form::open(['url'=>'save_agreement'], ['class'=>'']) }}
            <div class="x_panel">
          	    <div class="x_content">
                    <div class="row">
                        <div class="col-md-3 col-sm-3 col-xs-12 mui-textfield mui-textfield--float-label form-group">
                            <input type="text" id="agreement_name" name="agreement_name" required="required">
                            <div class="help-block with-errors"></div>
                            <label>Agreement Name<i class="mandatory">*</i></label>
                        </div>
                    </div>
                    <div class="row">
                      <h4>Agreement Header</h4>
                      <textarea name="header" id="header" rows="8">{{ isset($agreement->header)?$agreement->header:'' }}</textarea>
                    </div>
                    <div class="row">
                      <h4>Agreement Footer</h4>
                      <textarea name="footer" id="footer" rows="8">{{ isset($agreement->footer)?$agreement->footer:'' }}</textarea>
                    </div>
          	    </div>
            </div>
            <div class="x_panel">
                <h4>Agreement Pages:</h4>
                <div class="x_content">
                    @for($i=1; $i < 16; $i++)
                    <div class="editor" id="div{{ $i }}">
                        <textarea name="pages[]" id="page{{ $i }}" rows="10"></textarea>
                    </div>
                    @endfor
                </div>
            </div>
            <div class="x_panel"> 
                <h4>Agreement Pages:</h4>
                <button type="button" class="btn btn-secondary page-btn" value="1" id="btn-first">1</button>
                @for($i=2; $i < 16; $i++)
                    <button type="button" class="btn btn-secondary page-btn" value="{{ $i }}">{{ $i }}</button>
                @endfor

                <button type="submit" class="btn btn-success pull-right">Save</button>
            </div>
            {{ Form::close() }}
        </div>
 	</div>
</div> 

<script>
    $(document).ready(function(){
        $(".editor").hide();
        
        /*Header*/
        CKEDITOR.replace(header);
        CKEDITOR.replace(footer);

        for (i = 1; i < 16; i++) {
            var a = "page"+i;
            CKEDITOR.replace(a);
        }

        $("#div1").show();
        $("#btn-first").css({"background-color": "#563D7C", "color":"#FFFFFF"});
    });

    $(".page-btn").on('click', function(){
        var id = $(this).val();
        var hide_div = 'div'+id;

        $(".editor").hide();
        $("#"+hide_div+"").show();

        $(".btn-secondary").css({"background-color": "#DDDDDD", "color":"#2A3F54"});
        $(this).css({"background-color": "#563D7C", "color":"#FFFFFF"});
    });
</script>
@stop