@extends('layouts.admin')
@section('content')
<style>
    .ck-editor__editable{
        height: 200px;
    }
</style>
<div class="col-9 main-dash-left">
    <div class="upper-main-user-navigation">
        <div class="user-manage">
            <a href="{{route('admin.content.index')}}">Content management</a>
            <a class="active">Edit</a>
        </div>
    </div>

    <div class="add-user-form">
        <form class="row g-3" action="{{route('admin.admin_settings_update_page',$page_type)}}" method="POST" id="content_manage" enctype="multipart/form-data">
        {{-- <h3>{{ GetMetaData('title',$page_type) }}</h3> --}}
            @csrf

            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="page_title" class="form-label">Title</label>
                    <input type="text" class="form-control" name="page_title" id="page_title" value="{{ GetMetaData('page_title',$page_type) }}" placeholder="Enter Title">
                    @error('page_title') <small class="text-danger">{{ $message }}</small> @enderror
                </div>
            </div>
            <div class="col-md-12">
                <label for="image" class="form-label">Image</label>
                <div class="profile-pic">
                    <label class="-label" for="file">
                        <span class="glyphicon glyphicon-camera">
                            <i class="fas fa-camera"></i>
                        </span>
                    </label>
                    <input name="image" type="file" id="file" class="form-control" accept="image/*" onchange="previewImage(event)">
                    <figure class="profile-img">
                        @if(GetMetaData('image',$page_type))
                        <img id="preview" src="{{ asset('storage/'.GetMetaData('image',$page_type)) }}" alt="Profile Image">
                        @else
                        <img id="preview" src="{{ asset('admin/images/blog.png') }}" alt="Profile Image">

                        @endif
                    </figure>
                </div>
                @error('image') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control" id="description" name="description">{{ GetMetaData('description',$page_type) }}</textarea>
                    @error('description') <small class="text-danger">{{ $message }}</small> @enderror
                </div>
            </div>
            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="title" class="form-label">Sub Title</label>
                    <input type="text" class="form-control" name="sub_title" id="sub_title" value="{{ GetMetaData('sub_title',$page_type) }}" placeholder="Enter Sub Title">
                    @error('title') <small class="text-danger">{{ $message }}</small> @enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" name="email" id="email" value="{{ GetMetaData('email',$page_type) }}" placeholder="Enter Email">
                </div>
            </div>
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="number" class="form-label">Number</label>
                    <input type="text" class="form-control" name="number" id="number" value="{{ GetMetaData('number',$page_type) }}" placeholder="Enter Number">
                </div>
            </div>

            <h3>Contact Us Section</h3>
            <div class="col-md-12">
                <div class="comn-input-select">
                    <label for="contact_title" class="form-label">Title</label>
                    <input type="text" class="form-control" name="contact_title" id="contact_title" value="{{ GetMetaData('contact_title',$page_type) }}" placeholder="Enter Title">
                </div>
            </div>
            <div class="col-md-12">
                <label for="contact_image" class="form-label">Image</label>
                <div class="profile-pic">
                    <label class="-label" for="file2">
                        <span class="glyphicon glyphicon-camera">
                            <i class="fas fa-camera"></i>
                        </span>
                    </label>
                    <input name="contact_image" type="file" id="file2" class="form-control" accept="image/*" onchange="previewImage2(event)">
                    <figure class="profile-img">
                    @if(GetMetaData('contact_image',$page_type))
                        <img id="preview2" src="{{ asset('storage/'.GetMetaData('contact_image',$page_type)) }}" alt="Profile Image">
                        @else
                        <img id="preview2" src="{{ asset('admin/images/blog.png') }}" alt="Profile Image">

                        @endif
                    </figure>
                </div>
                @error('contact_image') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
            <div class="col-md-12">
                <div class="comn-input-select">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" name="is_header" id="is_header" {{ GetMetaData('is_header',$page_type) == 1 ? "checked" :"" }} value="1">
                        <label class="form-check-label" for="is_header">Header</label>
                      </div>
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" name="is_footer" id="is_footer" value="1" {{ GetMetaData('is_footer',$page_type) == 1 ? "checked" :"" }}>
                        <label class="form-check-label" for="is_footer">Footer</label>
                      </div>
                </div>
            </div>
         
            <div class="col-12">
                <div class="upper-main-btn-last-comn d-flex">
                    <button type="submit" class="add-user">Save</button>
                    <button class="cancel-btn"><a href="{{route('admin.content.index')}}">Cancel</a></button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.0/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#description'),{
            height: 300 
        })
        .catch(error => {
            console.error(error);
        });

    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('preview');
            output.src = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }

    function previewImage2(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('preview2');
            output.src = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }
</script>
@endsection