@extends('admin.layouts.app')
@section('title', 'Edit Section')
@section('section')

    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Section Editor</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">Home</a></li>
                            <li class="breadcrumb-item active">CMS</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <!-- <div class ="card-header py-3"><h6 class="m-0 font-weight-bold text-primary">Add Course</h6></div> -->
                            <form class="form" method="POST" action="{{ url('/admin/cms/update-section/'.$component->id) }}" enctype="multipart/form-data">
                                <div class="card-header py-3">

                                </div>
                                <div class="card-body">
                                    @csrf
                                    <div class="form-group">
                                        <strong>Section Title:</strong>
                                        <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" id="title" value="{{$component->title ?? old('title')}}" required>
                                        @error('title')
                                        <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                        @enderror
                                    </div>
                                    @if(isset($component->sub_title))
                                        <div class="form-group">
                                            <strong>Section Subtitle:</strong>
                                            <textarea type="text" class="form-control editText" name="subtitle" id="subtitle">{{$component->sub_title ?? old('subtitle')}}</textarea>
                                        </div>
                                    @endif
                                    @if(isset($component->description))
                                        <div class="form-group">
                                            <strong>Section Description: </strong>
                                            <textarea class="form-control ckeditor @error('description') is-invalid @enderror" name="description" id="description" required>{{$component->description ?? old('description')}}</textarea>
                                            @error('description')
                                            <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                            @enderror
                                        </div>
                                    @endif
                                    @if(isset($component->description2))
                                        <div class="form-group">
                                            <strong>Section Description2:</strong>
                                            <textarea type="text" class="form-control ckeditor" name="description2" id="description2">{{$component->description2 ?? old('description2')}}</textarea>
                                        </div>
                                    @endif
                                    @if(isset($component->button_text))
                                        <div class="form-group">
                                            <strong>Button Text:</strong>
                                            <input type="text" class="form-control @error('button_text') is-invalid @enderror" name="button_text" id="button_text" value="{{$component->button_text ?? old('button_text')}}">
                                        </div>
                                    @endif


                                    @forelse($component->pageComponentMedia as $media)
                                        <div class="row mediaFiles mt-2">
                                            <div class="col-md-2">
                                                @if($media->file_type == 'image')
                                                    <img src="{{getCmsImage($media->file_name)}}" width="100" height="100">
                                                @else
                                                    <video width="100" height="100" controls>
                                                        <source src="{{getCmsImage($media->file_name)}}" type="video/mp4" />
                                                        <source src="{{getCmsImage($media->file_name)}}" type="video/ogg" />
                                                        Your browser does not support the video tag.
                                                    </video>
                                                @endif
                                            </div>
                                            @if($media->title != null)
                                            <div class="col-md-10">
                                                <div class="row">
                                                <div class="form-group col-md-5">
                                                    <strong>Image/Video: </strong>
                                                    <input type="file" name="files[]" class="form-control">
                                                    <input type="hidden" name="fileIds[]" value="{{$media->id}}" class="form-control">
                                                </div>
                                                <div class="form-group  col-md-7">
                                                    <strong>Image Title: </strong>
                                                    <input type="text" name="image_titles[]" class="form-control" value="{{$media->title ?? ''}}">
                                                </div>
                                                </div>
                                            </div>
                                            @else
                                                <div class="col-md-10">
                                                    <div class="form-group">
                                                        <strong>Image/Video: </strong>
                                                        <input type="file" name="files[]" class="form-control">
                                                        <input type="hidden" name="fileIds[]" value="{{$media->id}}" class="form-control">
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    @empty

                                    @endforelse


                                </div>
                                <div class="card-footer text-center col-md-12">
                                    <div class="row">
                                        <div class="col-md-6"><button type="submit" class="btn btn-primary btn-user btn-block">Submit</button></div>
                                        <div class="col-md-6"><a href="{{url('/admin/cms/page/'.$page->slug)}}" class="btn btn-primary btn-user btn-block">Back</a></div>
                                    </div>

                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            </div>
        </section>
    </div>


<script src="{{ asset('admin/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('admin/dropzone/dist/dropzone.js') }}"></script>


<script>
    $(document).ready(function() {
        $(document).on('click', ".add-field" ,function() {
            var lastField = $(".form .card-body .row:last");

            var html = '<div class="row mediaFiles mt-2"><div class="col-md-4"> <img src="/images/placeholder.png" height="100" width="100"> </div><div class="col-md-6"><div class="form-group"><strong>Image/Video: </strong>\n' +
                '   <input type="file" name="files[]" class="form-control"> <input type="hidden" name="fileIds[]" value="" class="form-control"></div></div><div class="col-md-2 mt-4 text-right">\n' +
                '    <span class="add-field"><i class="fa fa-plus-circle" aria-hidden="true"></i></span>\n' +
                '    <span class="remove-field"><i class="fa fa-minus-circle" aria-hidden="true"></i></span></div></div>';
            lastField.parent().append(html);
        });

        $(document).on('click', ".remove-field" ,function() {
            var fields = $(".form .card-body .row");
            var isLast = fields.length;
            $(this).parent().parent().remove();


        });
    });

</script>
@endsection