@extends('layout')

@section('title', 'Main Content Management')

@push('head')
	{!! resource('css/main-content.css') !!}
@endpush

@section('content')
<div class="grid">
	<nav>
		<ul>
			@foreach($categories as $category)
				<li class="{{ $category->id == $id ? 'active':'' }}">
					<a href="/{{ $db }}/manage/{{ $category->id }}">{{ $category->id }}</a>
				</li>
			@endforeach
		</ul>
	</nav>

	<main class="main-content">
		@if(!empty($id))
		<header>
			<h1>{{ $id }}</h1>

			<div>
				<a class="btn btn-danger remove" href="/{{ $db }}/manage/{{ $id }}/remove"><i class="bi bi-trash3"></i> Remove</a>

				<a class="btn btn-primary" href="/{{ $db }}/manage/{{ $id }}/add"><i class="bi bi-plus-circle-dotted"></i> Add</a>
			</div>
		</header>
		@endif

		<ul class="mc-list">
			@foreach($contents as $content)
				@if ($content->display=='N')
					<li id="mc-{{ $content->uid }}" class="hidden">
				@else
					<li id="mc-{{ $content->uid }}">
				@endif
					<div class="d-flex align-items-center">
						<div class="handle">
							<i class="bi bi-arrows-expand"></i>
							<input type="hidden" name="sort[]" value="{{ $content->uid }}">
						</div>

						@if (!empty($content->image) and Storage::disk('public')->exists($content->image))
							<img src="{{ Storage::url($content->image) }}">
						@endif

						<a href="/{{ $db }}/manage/{{ $id }}/edit/{{ $content->uid }}">{{ $content->title }}</a>
					</div>

					<div>
						<a class="btn btn-secondary display" href="#" data-uid="{{ $content->uid }}">
							@if ($content->display=='Y')
								<i class="bi bi-eye"></i>
							@else
								<i class="bi bi-eye-slash"></i>
							@endif
						</a>

						<a class="btn btn-danger delete" href="#" data-uid="{{ $content->uid }}"><i class="bi bi-trash3"></i></a>
					</div>
				</li>
			@endforeach
		</ul>
	</main>
	@if(session('success'))
    <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p>{{ session('success') }}</p>
                </div>
            </div>
        </div>
    </div>
    @elseif(session('error'))
    <div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p>{!! session('error') !!}</p>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<script type="text/javascript">
	$(document).ready(function(){
		// @if (Session::has('success'))
		// 	msg('{!! Session::get('success') !!}');
		// @endif

        // @if (Session::has('error'))
        //     msg('{!! Session::get('error') !!}');
        // @endif

        $('.mc-list').sortable({
            axis: "y",
            handle: ".handle",
            placeholder: "sort-holder",
            update: function(e,ui){
                var order = '';
                $('input[name="sort[]"]').map(function(){
                    order += $(this).val()+',';
                });
                var eurl = '/{{ $db }}/update-sequence/{{ $id }}?sort='+order;
                $.ajax({
                    type: 'get',
                    url: eurl,
                    success: function(result) {
                        msg('sorted');
                    }
                });
            }
        });

        $('a.remove').on('click', function(e){
        	e.preventDefault();

        	if (confirm('Sure?')) {
        		location.href = $(this).attr('href');
        	}
        });

        $('a.delete').each(function(){
            $(this).on('click', function(e){
                e.preventDefault();
                var uid = $(this).attr('data-uid');

				if (confirm('Sure?')) {
					$.ajax({
						url: '/{{ $db }}/manage/'+uid,
						type: 'DELETE',
		                headers: {
		                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
		                },
						success: function(result) {
							$('#mc-'+uid).remove();
						},
			            error: function(jqXHR, exception) {
			            	alert(exception+': '+jqXHR.responseText);
			            }
					});
				}
			});
        });

        $('a.display').each(function(){
            $(this).on('click', function(e){
                e.preventDefault();
                var uid = $(this).attr('data-uid');

				$.ajax({
					url: '/{{ $db }}/manage/set-display/'+uid,
					type: 'PATCH',
	                headers: {
	                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
	                },
					success: function(result) {
						if (result == 'Y') {
							$('#mc-'+uid).removeClass('hidden');
						} else {
							$('#mc-'+uid).addClass('hidden');
						}
					},
		            error: function(jqXHR, exception) {
		            	alert(exception+': '+jqXHR.responseText);
		            }
				});

			});
        });
	});
</script>

@if(session('success'))
<script>
    $(document).ready(function() {
        $('#successModal').modal('show');
    });
</script>
@elseif(session('error'))
<script>
    $(document).ready(function() {
        $('#errorModal').modal('show');
    });
</script>
@endif

@endsection