@extends('backend.layout.sidenav-layout')
@section('content')
<div class="container-fluid">
    @if ($errors->any())
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
    @endif
    <h2>{{ Str::headline($key) }}</h2>
    <hr class="bg-secondary"/>
    <form action="{{ route('content.update',$key) }}" method="POST"  enctype="multipart/form-data">
        <div class="row">
            @csrf
            <div class="col-12 p-1">
                <label class="form-label" for="title">Title </label>
                <input type="text" class="form-control" id="title" name="title" value="{{ $data['title'] }}" placeholder="Title">
            </div>
            @if ($key=='about_section_message')
                <div class="col-12 p-1">
                    <label class="form-label" for="name">Name </label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ $data['name']??'' }}" placeholder="Name">
                </div>
                <div class="col-12 p-1">
                    <label class="form-label" for="degree">Degree </label>
                    <input type="text" class="form-control" id="degree" name="degree" value="{{ $data['degree']??'' }}" placeholder="Degree">
                </div>
                <div class="col-12 p-1">
                    <label class="form-label" for="position">Position </label>
                    <input type="text" class="form-control" id="position" name="position" value="{{ $data['position']??'' }}" placeholder="Position">
                </div>
            @endif
            <div class="col-12 p-1">
                <label class="form-label" for="description">Description </label>
                <textarea type="text" class="form-control description" id="description" name="description" placeholder="description">{{ $data['description'] }}</textarea>
            </div>
            <div class="col-12 p-1">
                <br/>
                <img class="w-10" id="newImg" src="{{ $data['image']?asset($data['image']):asset('backend/images/default.jpg')}}"/>
                <br/>
                <label class="form-label" for="image">Image </label>
                <input oninput="newImg.src=window.URL.createObjectURL(this.files[0])" type="file" class="form-control" id="image" name="image" onchange="validateFileType()" accept="image/png, image/jpeg, image/jpg">
                <input type="hidden" name="oldImage" value="{{ $data['image'] }}">
            </div>
            <br>
            <div class="text-center">
                <button type="submit" class="btn btn-sm  btn-success w-20 mt-2"  >Save</button>
            </div>
          
        </div>
    </form> 
</div>
@endsection
@section('script')
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>
<script>
    $('.description').summernote({
        toolbar: [
            // [groupName, [list of button]]
            ['style', ['style','bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['fontsize', ['fontsize']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            //['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            //['view', ['fullscreen', 'codeview', 'help']],
            ] 
        });
    function validateFileType(){
        var fileName = document.getElementById("image").value;
            var idxDot = fileName.lastIndexOf(".") + 1;
            var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
            var allowedExt = ['jpg','jpeg','png'];
            if (allowedExt.indexOf(extFile) != -1 ){
                //successToast('File attachment completed');
            }else{
                errorToast('Only JPG,JPEG,PNG files are allowed');
                document.getElementById("image").value='';
                return;
              }   
        }
     
    $(document).ready(function(){
        new DataTable('#tableData',{
            order:[[0,'desc']],
            lengthMenu:[5,10,15,20,30]
        });
    });
    
</script>
@endsection