@extends('admin.layouts.master')
@section('title', 'Dashboard')
@section('content')
<style>
    .error{
        color: red;
    }
</style>
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class=" pull-left">
                    <div class="page-title">Add News Feed</div>
                </div>
                <ol class="breadcrumb page-breadcrumb pull-right">
                    <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                            href="{{ route('admin.deshbord') }}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                    </li>
                    </li>
                    <li class="active">Add News Feed</li>
                </ol>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="card card-topline-aqua">
                <div class="card-head">
                    <header>Add News Feed</header>
                </div>
                <div class="card-body ">
                    <div class="py-3">
                        {{-- <div class=""> --}}
                        <div class="row">
                            <!-- Main Content -->
                            <main class="col col-xl-12 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="home" role="tabpanel"
                                        aria-labelledby="home-tab">
                                         <div class="d-flex"></div>
                                           <form class="form" id="commentForm" action="" enctype="multipart/form-data">
                                               
                                        <div class="job-tags p-3">
                                         @csrf
                                            <div class="row">
                                                <div class="col-md-12">
                                                  
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <label for="newstitle">News Title</label>
                                                                <input type="text" id="title" name="title" minlength="2" class="form-control" placeholder="News Title" value="{{old('title')}}" required>
                                                                <p class="text-danger"><b>@error('title'){{$message}}@enderror</b></p>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label for="selectnewsimage">Attach News Image</label>
                                                                <input type="file" id="news_image" name="news_image" class="btn btn-theme form-control btn-sm col-sm-7 mb-3 w-50 uploadbtn" />
                                                                <p class="text-danger"><b>@error('news_image'){{$message}}@enderror</b></p>
                                                                <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
                                                                <h3 id="status"></h3>
                                                                <p id="loaded_n_total"></p>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <label for="newsdescription">News Description</label>
                                                                <textarea type="text" cols="30" rows="10"
                                                                    id="description" name="description" class="form-control"
                                                                    placeholder="News Description" required>{{old('description')}}</textarea>
                                                                <p class="text-danger"><b>@error('description'){{$message}}@enderror</b></p>
                                                            </div>
                                                            <div class="col-md-12 m-1">
                                                                <input type="submit"
                                                                    class="btn btn-theme float-md-right"
                                                                    value="Add News" onclick="uploadFile(event);" id="upload" disabled>
                                                            </div>
                                                        </div>
                                                 
                                                </div>
                                            </div>
                                        </div>
                                           </form>
                                    </div>
                                </div>
                            </main>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')

<script>
    function _(el) 
        {
            return document.getElementById(el);
        }

        function uploadFile(e) 
        {
            let title = document.getElementById('title').value;
            let news_image = document.getElementById('news_image').value;
            let description = document.getElementById('description').value;

            if (title === "") {
                alert("title field is required");
            }else if(news_image === ""){
                alert("Image | Video is field is required");
            }else if(description === ""){
                alert("description field is required");
            }
            else{

            e.preventDefault();
            var file = _("news_image").files[0];
            // alert(file.name+" | "+file.size+" | "+file.type);
            var formdata = new FormData();
            formdata.append("news_image", file);
            formdata.append("title", title);
            formdata.append("description", description);
            formdata.append('_token', "{{ csrf_token() }}");
            var ajax = new XMLHttpRequest();
            ajax.upload.addEventListener("progress", progressHandler, false);
            ajax.addEventListener("load", completeHandler, false);
            ajax.addEventListener("error", errorHandler, false);
            ajax.addEventListener("abort", abortHandler, false);
            ajax.open("POST", "{{ route('store.news') }}"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
            //use file_upload_parser.php from above url
            ajax.send(formdata);
            }
        }

        function progressHandler(event) 
        {
            _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
            var percent = (event.loaded / event.total) * 100;
            _("progressBar").value = Math.round(percent);
            _("status").innerHTML = Math.round(percent) + "% Uploading";
            document.getElementById('upload').value = "processing";
        }

        function completeHandler(event) 
        {
            _("status").innerHTML = event.target.responseText;
            _("progressBar").value = 100; //wil clear progress bar after successful upload
            _("status").innerHTML = "File Uploaded";
            if(event.target.status == 200)
            {
                console.log(event);
                $("#news_image").prop('disabled', true);
                document.getElementById('upload').value = "Add News";
                window.location.href = "{{ route('get.news.list') }}";
            }
        }

        function errorHandler(event) 
        {
            _("status").innerHTML = "Upload Failed";
        }

        function abortHandler(event) 
        {
            _("status").innerHTML = "Upload Aborted";
        }

</script>

<script>

let title = document.getElementById('title');
let news_image = document.getElementById('news_image');
let description = document.getElementById('description');

if (title !== '' && news_image  !=='' && description !== '') {
    document.getElementById('upload').disabled = false;
    
}else{
    document.getElementById('upload').disabled = true;
}


</script>
@endsection