@extends('layouts.app')
@section('content')

@section('cssfiles')
<link href="{{ asset('css/skins/style.css') }}" rel="stylesheet">
@endsection

<div class="container">
	<div class="row">
		<div class="col-xs-12">
			<div class="panel panel-default">
                <div class="panel-heading">List of Skins</div>
                <div class="panel-body">
                    <table id="myTable" class="table table-striped table-hover table-responsive">
                    	<thead>
                    		<tr>
                    			<th>Name</th>
                    			<th>Skin Default</th>
                    			<th>Associated Templates</th>
                    			<th>Updated On</th>
                    			<th class="no-sort"></th>
                    			<th class="no-sort"></th>
                    			<th class="no-sort"></th>
                    		</tr>	
                    	</thead>
                    	<tbody>
                    		@foreach($skins as $skin)
								<tr>
									<td>{{$skin->name}}</td>
									<td>{{$skin->is_default ? 'Yes' : 'No'}}</td>
									<td>
										@foreach($skin->templates()->get() as $temp)
											{{$temp->name}}
										@endforeach
										
									</td>
									<td>{{$skin->updated_at}}</td>
									<td><a href="{{ url('/skins/' . $skin->id . '/edit') }}" class="btn btn-info">Edit</a></td>
									<td><button class="btn btn-primary" type="button" onclick="duplicateModal({{$skin->id}})">Duplicate</button></td>
									<td><button class="btn btn-danger" type="submit" data-toggle="modal" data-target="#deleteModal{{$skin->id}}">Delete</button>
										<!-- Delete Modal -->
										<div id="deleteModal{{$skin->id}}" class="modal fade" role="dialog">
											<div class="modal-dialog">
												<!-- Modal content-->
												<div class="modal-content">
												  	<div class="modal-header">
												    	<button type="button" class="close" data-dismiss="modal">&times;</button>
												    	<h4 class="modal-title">Delete Skin</h4>
												  	</div>
												  	<div class="modal-body">
												    	<form class="form-horizontal" role="form" method="POST" action="{{url('skins/'.$skin->id)}}" enctype="multipart/form-data">
												    		{{ csrf_field() }}
												    		{{ method_field('DELETE')}}
												    		<div class="row">
															<div class="form-group">
																<label class="col-md-4 control-label">Skin Name: </label>
																<div class="col-md-6">
																	<label class="control-label">{{$skin->name}}</label>
																</div>
															</div>
															<div class="form-group">
															@if(count($skin->sites()->get()))
																<p>This Skin has some impact with the following sites and therefore can't be deleted.</p>
															@else
																<p>Go ahead, you can safely delete this Skin!</p>
															@endif
															</div>
																@if(count($skin->sites()->get()))
																<div class="form-group">
																	<label class="col-md-4 control-label">Associated sites: </label>
																	<div class="col-md-6">
																		<ul class="skin-list">
																			@foreach($skin->sites()->get() as $site)
																				<li>{{$site->description}}</li>
																			@endforeach
																		</ul>
																	</div>
																</div>
																@endif
														    	<div class="form-group">
																	<div class="col-12 text-center">
																	@if(!count($skin->sites()->get()))
																		<button type="submit" class="confirm_delete btn btn-danger">Yes, Delete</button>
																	@endif
												                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
												                    </div>
												                </div>
													    	</div>
												    	</form>
												  	</div>
												</div>
											</div>
										</div>
									</td>
								</tr>
                    		@endforeach
                    	</tbody>
                    </table>
                </div>
            </div>
		</div>
	</div>
</div>

<!-- Modal -->
<div id="duplicateModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
	<!-- Modal content-->
	<div class="modal-content">
	  	<div class="modal-header">
	    	<button type="button" class="close" data-dismiss="modal">&times;</button>
	    	<h4 class="modal-title">Duplicate Skin</h4>
	  	</div>
	  	<div class="modal-body">
	    	<form id="duplicateForm" class="form-horizontal" role="form" method="POST" action="" enctype="multipart/form-data">
	    		{{ csrf_field() }}
	    		<input type="hidden" id="skin_id" name="skin_id" value=""/>
	    		<div class="form-group">
                    <label for="name" class="col-md-4 control-label">Duplicate Skin Name</label>
                    <div class="col-md-6">
                        <input id="name" type="text" class="form-control" name="name"/>
                    </div>
                </div>
	    		<div class="form-group">
                    <div class="col-md-6 col-md-offset-4">
                        <button type="button" id="createDuplicate" class="btn btn-primary">
                            Create
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
	    	</form>
	  	</div>
	</div>

	</div>
</div>

<script>
	var skin_id = 0;

	function duplicateModal(id){
		skin_id = id;
		$('#duplicateModal').modal('show');
	}

	$(document).ready(function(){
		var table = $('#myTable').DataTable({
            "order": [ 0, 'asc' ],
            "columnDefs": [ {
                "targets"  : 'no-sort',
                "orderable": false,
            }]
        });
		$('#createDuplicate').click(function(){
			$('#skin_id').val(skin_id);
			$('#duplicateForm').attr('action', '{{url('skins/duplicate')}}');
			$('#duplicateForm').submit();
		});

	});
</script>

@endsection