@extends('layouts.app')
@section('content')
<br/>
<br/>

    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="{{url('home')}}">Home</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <a href="{{url('res_types')}}">Resources</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span> Blocking Resource</span>

                    </li>
                </ul>
                <div class="page-toolbar">
                    <div id="dashboard-report-range" class="pull-right tooltips btn btn-sm" data-container="body" data-placement="bottom" data-original-title="Change dashboard date range">
                        <i class="icon-calendar"></i>&nbsp;
                        <span class="thin uppercase hidden-xs"></span>&nbsp;
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
            </div>
            <br>

            <!---------------------------------------------- CALENDAR MODALs ---------------------------------------------->

            <!-- Calendar Modal -->
            <div class="modal fade" id="calendarModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 id="details-body-title"></h4>
                        </div>
                        <div class="modal-body">
                            <div id="create_event_alert"></div>

                            <div class="loadingDiv"></div>

                            <!-- QuickSave/Edit FORM -->
                            <form id="modal-form-body">
                                <p>
                                    <label>Title: </label>
                                    <input class="form-control" name="title" value="" type="text">
                                </p>
                                <p>
                                    <label>Description: </label>
                                    <textarea class="form-control" name="description"></textarea>
                                </p>

                                <input type="hidden" name="categorie" value="category">
                                {{--<p>--}}
                                    {{--<label>Category: </label>--}}
                                    {{--<select name="categorie" class="form-control">--}}
								        {{--@foreach($resources as $resource)--}}
									        {{--<option value="{{$resource->id}}">{{$resource->res_name}}</option>--}}
								         {{--@endforeach--}}
                                    {{--</select>--}}
                                {{--</p>--}}
                                <p>
                                    <label>Event Color:</label>
                                    <input type="text" class="form-control input-sm" value="#587ca3" name="color" id="colorp">
                                </p>
                                <div class="pull-left mr-10">
                                    <p id="repeat-type-select">
                                        <label>Repeat:</label>
                                        <select id="repeat_select" name="repeat_method" class="form-control">
                                            <option value="no" selected>No</option>
                                            <option value="every_day">Every Day</option>
                                            <option value="every_week">Every Week</option>
                                            <option value="every_month">Every Month</option>
                                        </select>
                                    </p>
                                </div>
                                <div class="pull-left">
                                    <p id="repeat-type-selected">
                                        <label>Times:</label>
                                        <select id="repeat_times" name="repeat_times" class="form-control">
                                            <option value="1" selected>1</option>
									        <option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option>                                        </select>
                                    </p>
                                </div>
                                <div class="clearfix"></div>
                                <p id="event-type-select">
                                    <label>Type: </label>
                                    <select id="event-type" name="all-day" class="form-control">
                                        <option value="true">Make event 24H (all day)</option>
                                        <option value="false">Make event as I wish</option>
                                    </select>
                                </p>
                                <div id="event-type-selected">
                                    <div class="pull-left mr-10">
                                        <p>
                                            <label>Start Date:</label>
                                            <input type="text" name="start_date" class="form-control input-sm" placeholder="Y-M-D" id="startDate">
                                        </p>
                                    </div>
                                    <div class="pull-left">
                                        <p>
                                            <label>Start Time:</label>
                                            <input type="text" class="form-control input-sm" name="start_time" placeholder="HH:MM" id="startTime">
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="pull-left mr-10">
                                        <p>
                                            <label>End Date:</label>
                                            <input type="text" class="form-control input-sm" name="end_date" placeholder="Y-M-D" id="endDate">
                                        </p>
                                    </div>
                                    <div class="pull-left">
                                        <p>
                                            <label>End Time:</label>
                                            <input type="text" class="form-control input-sm" name="end_time" placeholder="HH:MM" id="endTime">
                                        </p>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                                <div class="custom-fields">
							                                        </div>
                            </form>

                            <!-- Modal Details -->
                            <div id="details-body">
                                <div id="details-body-content"></div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" id="export-event" class="btn btn-warning">Export</button>
                            <button type="button" id="delete-event" class="btn btn-danger">Delete</button>
                            <button type="button" id="edit-event" class="btn btn-info">Edit</button>
                            <button type="button" id="add-event" class="btn btn-primary">Add</button>
                            <button type="button" id="save-changes" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Delete Prompt -->
            <div id="cal_prompt" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body"></div>
                        <div class="modal-footer">
                            <a href="#" class="btn btn-danger" data-option="remove-this">Delete this</a>
                            <a href="#" class="btn btn-danger" data-option="remove-repetitives">Delete all</a>
                            <a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Edit Prompt -->
            <div id="cal_edit_prompt_save" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body-custom"></div>
                        <div class="modal-footer">
                            <a href="#" class="btn btn-info" data-option="save-this">Save this</a>
                            <a href="#" class="btn btn-info" data-option="save-repetitives">Save all</a>
                            <a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Import Modal -->
            <div id="cal_import" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body-import" style="white-space: normal;">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4>Import Event</h4>

                            <p class="help-block">Copy & Paste the event code from your .ics file, open it using an text editor</p>
                            <textarea class="form-control" rows="10" id="import_content" style="margin-bottom: 10px;"></textarea>
                            <input type="button" class="pull-right btn btn-info" onClick="calendar.calendarImport()" value="Import" />
                        </div>
                    </div>
                </div>
            </div>

            <!---------------------------------------------- THEME ---------------------------------------------->






            <div  style="margin-top: 0px;">
                {{--<a href="export.php" class="btn btn-warning pull-right" style="margin-right: 10px;">Export</a>--}}
                {{--<a href="#cal_import" class="btn btn-info pull-right" data-toggle="modal" style="margin-right: 10px;">Import</a>--}}



                <!-- search (required if you want to have search) -->
                    <form class="pull-right form-inline" style="margin-top: 8px; margin-left: 20px; margin-bottom: 20px" id="search">
                        <div class="form-group">
                            <input class="form-control" type="text" placeholder="Search..." value="@if(session()->has('search')) {{session()->get('search')}} @endif">
                            <button class="btn" type="button">Search</button>
                        </div>
                    </form>
                <div class="clearfix"></div>

                <!-- Filter by Category (required if you want to have categories filtering) -->
                {{--<div id="cat-holder">--}}
                    {{--<form id="filter-category">--}}
                        {{--<select class="form-control input-sm" style="width: auto;">--}}
					        {{--<option value="all-fields">All</option>--}}
					        {{--@foreach($resources as $resource)--}}
						        {{--<option  value="{{$resource->id}}">{{$resource->res_name}}</option>--}}
					        {{--@endforeach--}}
                        {{--</select>--}}
                    {{--</form>--}}
                {{--</div>--}}

                <div class="box">
                    <div id="alert_tmeassage_area"></div>
                    <div class="header"><h4>Calendar</h4></div>
                    <div class="content">
                        <div id="calendar"></div>
                    </div>
                </div>

            </div> <!-- /container -->


        </div>
    </div>

@endsection



@section('javascript')
    <script type="text/javascript">
    $().FullCalendarExt({
    calendarSelector: '#calendar',
    lang: 'en'
    });
    </script>
@endsection