@extends('Admin.default')

@section('content')

<div class="row page-titles mx-0">
    <div class="col p-md-0">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('Dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('NewsList') }}">News List</a></li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Edit News</a></li>
        </ol>
    </div>
</div>

<div class="container-fluid mt-0">
    <div class="row">
        <span class="col-lg-12" id="ErrorLog">
            @if(Session::has('message'))
                {{ Session::get('message') }}
            @endif
        </span>

        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Edit News</h4>
                    <div class="basic-form">
                        <form id="AddForm" name="AddForm" action="{{ route('EditNewsDetails') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="NID" id="NID" value="{{ $NID }}">

                            <div class="form-group">
                                <label>News Title</label>
                                <input onkeyup="SetSlug();" value="{{ $NewsDetails->title }}" type="text" class="form-control" name="Title" id="Title" placeholder="Enter News Title">
                            </div>

                            <div class="form-group">
                                <label>News Slug</label>
                                <input value="{{ $NewsDetails->slug }}" type="text" class="form-control" name="Slug" id="Slug" placeholder="Enter News Slug">
                            </div>

                            <div class="form-group">
                                <label>Description</label>
                                <textarea id="Description" name="Description" class="form-control" placeholder="Enter News Description">{{ $NewsDetails->description }}</textarea>
                            </div>

                            <div class="form-group">
                                <label>Publish Title</label>
                                <input value="{{ $NewsDetails->publish }}" type="date" class="form-control" name="Publish" id="Publish" placeholder="Enter News Title">
                            </div>

                            <div class="form-group">
                                <label>Image</label>
                                <input type="file" class="form-control" name="Image" id="Image">
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label>Status</label>
                                    <select class="form-control" id="Status" name="Status">
                                        <option value="1" {{ $NewsDetails->status == '1' ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ $NewsDetails->status == '0' ? 'selected' : '' }}>De-Active</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label>Sort Order</label>
                                    <select class="form-control" id="Sort" name="Sort">
                                        @for($i = 1; $i <= $Sort; $i++)
                                            <option value="{{ $i }}" {{ $i == $NewsDetails->sort ? 'selected' : '' }}>{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>

                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label>Featured</label>
                                        <div class="input-group mb-3">
                                            <select id="featured" name="featured" class="form-control integer">
                                                <option value="0" {{ $NewsDetails->featured == "0" ? 'selected' : '' }}>No</option>
                                                <option value="1" {{ $NewsDetails->featured == "1" ? 'selected' : '' }}>Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <button type="submit" id="SubmitBtn" class="btn btn-primary pull-right">Update News</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        

        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">News Image Preview</h4>
                    <div class="basic-form">
                                            <center><img id="ImagePreview" src="{{ $Image }}" width="400" height="350"></center>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@stop

@section('javascript')

<script src="https://cdn.ckeditor.com/4.20.1/standard/ckeditor.js"></script>
<script type="text/javascript">
    function SetSlug() {
        var textValue = $('#Title').val();
        textValue = textValue.toLowerCase().replace(/[\*\^\'\!]/g, '').split(' ').join('-');
        textValue = textValue.replace(/[_\W]+/g, "-");
        $('#Slug').val(textValue);
    }

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#ImagePreview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#Image").change(function() {
        readURL(this);
    });

    $(function() {
        $("#AddForm").validate({
            rules: {
                Title: { required: true },
                Description: { required: true },
                Publish: { required: true },
                Status: { required: true },
                Sort: { required: true }
            },
            messages: {
                Title: { required: "Please enter Title." },
                Description: { required: "Please enter Description." },
                Publish: { required: "Please select Publish Date." },
                Status: { required: "Please select Status." },
                Sort: { required: "Please select Sort Order." }
            },
            submitHandler: function(form) {
                $('#SubmitBtn').prop("disabled", true);
                $('#SubmitBtn').html('Loading..');
                form.submit();
            }
        });
    });

    
</script>
<script>
        ClassicEditor
            .create(document.querySelector('#Description'))
            .catch(error => {
                console.error(error);
            });
    </script>

@stop