@extends('layout')

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

@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">
		<header>
			<h1>{{ $id }}:{{ $optKey }}</h1>

			<a href="/{{ $db }}/manage/{{ $id }}"><i class="bi bi-arrow-left-circle"></i> Back</a>
		</header>

		@if ($errors->any())
		    <div class="alert alert-danger">
		        <ul>
		            @foreach ($errors->all() as $error)
		                <li>{{ $error }}</li>
		            @endforeach
		        </ul>
		    </div>
		@endif

		<form id="mc-form" method="post" action="/{{ $db }}/manage/{{ $id }}{{ !empty($mc->uid) ? '/'.$mc->uid:'' }}" enctype="multipart/form-data">
			<input type="hidden" name="id" value="{{ $id }}">
			@csrf

			<div class="form-group">
				<label>Title</label>
				<input type="text" name="title" class="form-control" autocomplete="off" placeholder="Title" value="{{ isset($mc->title) ? $mc->title:'' }}" required>
			</div>

            <div class="form-group">
                <label>Description</label>
                <textarea name="description" class="form-control" placeholder="Description">{{ isset($mc->description) ? $mc->description:'' }}</textarea>
            </div>

            <hr>

			<div class="form-group">
				{{-- menu selector --}}
				<label>Menu</label>
				<select name="menu_uid" class="form-select" onchange="setTarget(this)">
					<option value="">Select</option>
					@foreach($menus as $m)
						<option value="{{ $m->uid }}" data-type="{{ $m->type }}" @selected(!empty($mc->menu_uid) and $m->uid == $mc->menu_uid)>
							<br />
<b>Notice</b>:  Undefined variable: m in <b>/home/edmedu/www/hana-edu.co.kr/sf4l/resources/views/component/main/form.blade.php</b> on line <b>61</b><br />
<br />
<b>Notice</b>:  Trying to get property 'depth' of non-object in <b>/home/edmedu/www/hana-edu.co.kr/sf4l/resources/views/component/main/form.blade.php</b> on line <b>61</b><br />
							{{$m->title}} ({{$m->id}})
						</option>
					@endforeach
				</select>

				<div id="article-wrap"></div>
			</div>

            <div class="form-group">
                <label>Link</label>
                <input type="text" name="link" class="form-control" autocomplete="off" placeholder="Link" value="{{ isset($mc->link) ? $mc->link:'' }}">
            </div>

            <hr>

			<div class="form-group">
				<label>Type</label>

				{{-- <div class="choice">
					@foreach($types as $type)
						<div class="item">
							<input type="radio" name="type" value="{{ $type }}" onclick="setTypeForm(this)" @checked(isset($mc->type) and $mc->type==$type)>{{ $type }}
						</div>
					@endforeach

					<div class="item">
						<button type="button" class="btn btn-sm btn-outline-secondary" onclick="$('input[name=type]').prop('checked', false); $('#type-wrap').html('');">reset</button>
					</div>
				</div> --}}

                <div class="choice">
                    @foreach($types as $type)
                        <div class="item">
                            <input type="radio" name="type" value="{{ $type }}" onclick="setTypeForm(this)" {{ (isset($mc->type) && $mc->type == $type) ? 'checked' : '' }}>{{ $type }}
                        </div>
                    @endforeach

                    <div class="item">
                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="$('input[name=type]').prop('checked', false); $('#type-wrap').html('');">reset</button>
                    </div>
                </div>
			</div>

            <div class="form-group">
            	<label>Type Content</label>
            	<div id="type-wrap">
            		@if (!empty($mc->type))
            			@include('component.main.type-'.$mc->type, ['content'=>$mc->content])
            		@endif
            	</div>
            </div>

            <hr>

			<div class="row g-1">
				<div class="col form-group">
					<label>Category</label>
					<input type="text" name="category" class="form-control" autocomplete="off" placeholder="Category" value="{{ isset($mc->category) ? $mc->category:'' }}">
				</div>

				<div class="col form-group">
					<label>Tag <a href="javascript:;" id="add-tag"><i class="bi bi-plus-circle"></i></a></label>

					<div id="tags">
						@if (!empty($mc->tag))
							@php($tags = explode('|', $mc->tag))
							@foreach($tags as $tag)
								<input type="text" name="tag[]" class="form-control" autocomplete="off" value="{{ $tag }}">
							@endforeach
						@endif
					</div>
				</div>
			</div>

			<div class="row g-1">
				<div class="col form-group">
					<label>Image (PC)</label>
					<input type="file" name="image" class="form-control mb-1">
					<input type="hidden" name="image_url">
					@if (!empty($mc->image) and Storage::disk('public')->exists($mc->image))
						<div id="mc-image">
							<img src="{{ Storage::url($mc->image) }}">
							<label><input type="checkbox" name="delete_image" value="1"> Delete</label>
						</div>
					@endif
				</div>

				<div class="col form-group">
					<label>Image 2 (PC)</label>
					<input type="file" name="image2" class="form-control mb-1">
					<input type="hidden" name="image2_url">
					@if (!empty($mc->image2) and Storage::disk('public')->exists($mc->image2))
						<div id="mc-image2">
							<img src="{{ Storage::url($mc->image2) }}">
							<label><input type="checkbox" name="delete_image2" value="1"> Delete</label>
						</div>
					@endif
				</div>
			</div>

			<div class="row g-1">
				<div class="col form-group">
					<label>Image (Mobile)</label>
					<input type="file" name="image_mobile" class="form-control mb-1">
					<input type="hidden" name="image_mobile_url">
					@if (!empty($mc->image_mobile) and Storage::disk('public')->exists($mc->image_mobile))
						<div id="mc-image_mobile">
							<img src="{{ Storage::url($mc->image_mobile) }}">
							<label><input type="checkbox" name="delete_image_mobile" value="1"> Delete</label>
						</div>
					@endif
				</div>

				<div class="col form-group">
					<label>Image 2 (Mobile)</label>
					<input type="file" name="image_mobile2" class="form-control mb-1">
					<input type="hidden" name="image_mobile2_url">
					@if (!empty($mc->image_mobile2) and Storage::disk('public')->exists($mc->image_mobile2))
						<div id="mc-image_mobile2">
							<img src="{{ Storage::url($mc->image_mobile2) }}">
							<label><input type="checkbox" name="delete_image_mobile2" value="1"> Delete</label>
						</div>
					@endif
				</div>
			</div>

            <div class="row g-1">
	            <div class="col form-group">
	            	<label>Option <a href="javascript:;" id="add-option"><i class="bi bi-plus-circle"></i></a></label>

	            	<ul id="options">
							            	</ul>
	            </div>

	            <div class="col-md-4 form-group">
	                <label>Expire</label>
	                <input type="text" name="expired_at" class="form-control" autocomplete="off" placeholder="Expire" value="{{ isset($mc->expired_at) ? $mc->expired_at:'' }}">
	            </div>
	        </div>

	        <hr>

            <div class="form-group submit">
                <button type="submit" class="btn btn-lg btn-outline-danger">Confirm</button>

                <label>Display</label>
                <input type="checkbox" name="display" value="1" @checked((isset($mc->display) and $mc->display=='Y') or empty($mc->display))>
            </div>
		</form>
	</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">
	function setTarget(obj) {
        $.ajax({
            type: 'get',
            url: '/{{ $db }}/get-menu-target/'+obj.options[obj.selectedIndex].value,
            success: function(result) {
                $('#article-wrap').html(result);
            },
            cache: false
        });
	}

	function setTypeForm(obj) {
        $.ajax({
            type: 'get',
            url: '/{{ $db }}/get-type-form/'+obj.value,
            success: function(result) {
                $('#type-wrap').html(result);
            },
            cache: false
        });
	}

	$(document).ready(function(){
		// @if (Session::has('success'))
		// 	msg('{!! Session::get('success') !!}');
		// @endif

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

		$('#add-tag').on('click', function(e){
			e.preventDefault();
			var item = '<input type="text" name="tag[]" class="form-control" autocomplete="off">';
			$('#tags').append(item);
		});

		$('#add-option').on('click', function(e){
			e.preventDefault();
			var item = '<li class="input-group"><input type="text" autocomplete="off" name="option_key[]" class="form-control key" placeholder="Key"><input type="text" autocomplete="off" name="option_val[]" class="form-control" placeholder="Value"></li>';
			$('#options').append(item);
		});

		$('input[name="expired_at"]').datepicker({format: 'yyyy-mm-dd', autoclose: true});
	});
</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