@extends('cms.master')

@section('content')
<script src="{{asset('assets/js/jquery-1.9.1.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.12.1/ckeditor.js"></script>

<div class="container-fluid">
    <div class="row">


        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row justify-content-between">
                        <div class="col-md-4">
                            <ul id="breadcrumbs-one" style="margin: 0;padding: 0;list-style: none;">
                                <li><a href="{{url('dashboard/section')}}"> Section </a></li>
                                <li class="disable"><a href="" class="current">Detail</a></li>
                            </ul>
                        </div>
                        <div class="col-md-8">
                            <div class="d-flex flex-wrap align-items-center justify-content-sm-end text-center">
                                <a type="button" href="{{url('dashboard/section')}}" class="btn btn-warning waves-effect waves-light">
                                    <i class="mdi mdi-arrow-left-circle"></i>
                                    Back
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if ($errors->any())
    @foreach ($errors->all() as $error)
    <div class="col-12">
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            {{ $error }}
        </div>
    </div>
    @endforeach
    @endif
    @if(Session::has('failed'))
    <div class="col-12">
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            {{Session::get('failed')}}
        </div>
    </div>
    @endif
    <form action="{{url('dashboard/section').'/'.$section->id}}" id="FormId" method="POST" enctype="multipart/form-data">
        {{ method_field('PUT') }}
        {{csrf_field()}}
        <div class="row">
            <div class="col-lg-9">
                <div class="card">
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Page *</label> <br />
                            <input type="text" value="{{$section->title}}" class="form-control" name="page" id="page" disabled>
                        </div>
                        <div class="mb-3">
                            <label for="title" class="form-label">Title *</label>
                            <input type="text" value="{{$section->title}}" class="form-control" name="title" id="title" disabled>
                        </div>
                        <div class="mb-3" id="description-div">
                            <label for="description" class="form-label">Description *</label>
                            <textarea id="editor" name="description" disabled>{{$section->description}}</textarea>
                        </div>
                        <div class="mb-3" id="image-div">
                            <label for="image" class="form-label">Image *</label>
                            <input type="file" disabled="disabled" data-default-file="{{asset('file/image/')}}/{{$section->image}}" name="image" id="image" data-plugins="dropify" />
                        </div>
                        <div class="mb-3" id="video-div">
                            <label for="video" class="form-label">Video *</label>
                            <input type="file" disabled="disabled" data-default-file="{{asset('file/video/')}}/{{$section->video}}" id="video" data-plugins="dropify" />
                            <!-- <input type="file" data-plugins="dropify" disabled="disabled" data-default-file="{{asset('file/video/')}}/{{$section->video}}" /> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Author</label> <br />
                            <input type="text" class="form-control" name="author" value="{{Auth::user()->name}}" disabled>
                        </div>
                        <input type="text" name="type" value="{{$type}}" style="display: none;">
                        <input type="submit" id="submit-form" style="display: none;" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- type -->
<script>
    $(document).ready(function() {
        var type = "{{$type}}";

        console.log(type);
        if (type == "image") {
            $('#image-div').show();
            $('#video-div').hide();
        } else if (type == "video") {
            $('#video-div').show();
            $('#image-div').hide();
        } else {
            $('#image-div').hide();
            $('#video-div').hide();
        }
    });
</script>

<!-- editor -->
<script>
    CKEDITOR.replace('editor', {
        extraPlugins: 'justify',
        extraPlugins: 'colorbutton',
        extraAllowedContent: 'span',
        colorButton_colors: "F49800,B9B9B9,75A75A"
    });
</script>

@endsection