@extends('layouts.app')

@section('title', 'Edit News')
@section('breadcrumb', 'News')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        Edit News
    </a>
@endsection
@section('news', 'kt-menu__item--active')
@section('content')
    <div class="col-md-12">
        <div class="kt-portlet">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        <i class="fa fa-newspaper"></i> &nbsp; Edit News of  {{Session::get('brands_pick')['name']}}
                    </h3>
                </div>
            </div>
            <div class="kt-portlet__body">
                @include('layouts.notification')
                <div class="row">
                    <div class="col-md-6">
                    <form id="createMasterStock" action="{{route('setting.news.update')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" value="{{$data['id']}}">
                        <div class="form-group">
                            <label>News Date Start<span style="color:red;">*</span></label>
                        <input name="news_start" id="news_start" type="date" class="form-control" value="{{date('Y-m-d', strtotime($data['date_start']))}}">
                        </div>
                        <div class="form-group">
                            <label>News Date End<span style="color:red;">*</span></label>
                            <input name="news_end" id="news_end" type="date" class="form-control" value="{{date('Y-m-d', strtotime($data['date_end']))}}">
                        </div>
                        <div class="form-group">
                            <label>News Title<span style="color:red;">*</span></label>
                            <input name="title" id="title" type="text" class="form-control" value="{{$data['title']}}">
                        </div>
                        <div class="form-group">
                            <label>News Image<span style="color:red;">*</span></label><br>
                            <img src="{{env('AWS_URL').$data['image']}}" alt="" style="height: 150px;">
                            &nbsp; -> &nbsp;
                            <img src="" id="imagepre" alt="" style="height: 150px;">
                            <input name="image" id="image" type="file" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>News Content<span style="color:red;">*</span></label>
                            <textarea name="content" id="content" cols="30" rows="2" class="form-control">{{$data['content']}}</textarea>
                        </div>
                        <div class="form-group">
                            <label>News Video</label><br>
                            <video height="200" width="400" controls>
                            <source src="{{env('AWS_URL').$data['video']}}" type="video/mp4">
                            Your browser does not support HTML5 video.
                            </video>
                            <div style="display: none;" class='video-prev' class="pull-right">
                                <video height="200" width="400" class="video-preview" controls="controls"/>
                            </div>
                            <input name="video" id="video" type="file" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Event Date Start</label>
                            <input name="event_start" id="event_start" type="date" class="form-control" value="{{$data['event_date_start']}}">
                        </div>
                        <div class="form-group">
                            <label>Event Date End</label>
                            <input name="event_end" id="event_end" type="date" class="form-control" value="{{$data['event_date_time']}}">
                        </div>
                        <div class="form-group">
                            <label>Event Date Recuring Days</label>
                            <input name="event_recurring_days" id="event_recuring_days" type="date" class="form-control" value="{{$data['event_recurring_days']}}">
                        </div>
                        <div class="form-group">
                            <label>Event Location</label>
                            <textarea name="event_location" id="event_location" cols="30" rows="2" class="form-control">{{$data['event_location']}}</textarea>
                        </div>
                        <div class="form-group">
                            <label>Event Location Address</label>
                            <textarea name="event_location_address" id="event_location_address" cols="30" rows="2" class="form-control">{{$data['event_location_address']}}</textarea>
                        </div>
                        <div class="form-group pull-right">
                            <button class="btn btn-secondary btn-back" type="button">Back</button>
                            <button class="btn btn-warning">Reset</button>
                            <button type="submit" id="create" class="btn btn-primary"><i class="fa fa-edit"></i> Update</button>
                        </form>
                        </div>
                    </div>
                </div>
                <div class="kt-separator kt-separator--dashed"></div>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')
<script>
    function readImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
            $('#imagepre').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".btn-back").on("click", function(){
         window.history.back();
     });

    $("#image").change(function() {
        readImage(this);
    });

    $(function() {
        $('#video').on('change', function(){
            if (isVideo($(this).val())){
                $('.video-preview').attr('src', URL.createObjectURL(this.files[0]));
                $('.video-prev').show();
            }
            else
            {
                $('#video').val('');
                $('.video-prev').hide();
                swal.fire({
                    type : 'error',
                    title : 'Failed!',
                    text : 'Only video files are allowed to upload.'
                });
            }
        });
    });

        // If user tries to upload videos other than these extension , it will throw error.
        function isVideo(filename) {
            var ext = getExtension(filename);
            switch (ext.toLowerCase()) {
            case 'm4v':
            case 'avi':
            case 'mp4':
            case 'mov':
            case 'mpg':
            case 'mpeg':
                // etc
                return true;
            }
            return false;
        }

        function getExtension(filename) {
            var parts = filename.split('.');
            return parts[parts.length - 1];
        }
</script>
@endsection