@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>
 	<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">
        <div class="x_panel">
        	<div class="x_content">
        		<div class="">
        			{{ Form::open(['url'=>'agreement_edit/'.$agreement->id], ['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" value="{{ isset($agreement->agreement_name)?$agreement->agreement_name:'' }}">
                                <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=0; $i <= 16; $i++)
                        <div class="editor" id="div{{ $i }}">
                            <textarea name="pages[]" id="page{{ $i }}" rows="10">{{ isset($pages[$i])?$pages[$i]->page_content:'' }}</textarea>
                        </div>
                        @endfor
                    </div>
                </div>

                <div class="x_panel">
                    <span class="btn">Pages:</span>
                    <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>
    </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