@extends('layouts.admin')
@section('title','LabPair News')
@section('page_title','')

@section('page_level_css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor pt-2" id="kt_content">

    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">

        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="top_main_title">
                <div class="labpair-title">
                    <p>
                        <span class="title">LABPAIR NEWS MANAGER</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- end:: Page -->

        <div class="inner-main-section mt-3 pt-3">

            <div class="row">
                <div class="col-12">
                    <div class="example-preview">
                        <ul class="nav nav-pills mb-0 pl-md-5" id="myTab1" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" href="javascript::void(0)">
                                    <span class="nav-text">LabPair News</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent1">
                            <div class="tab-pane fade show active" id="home-1" role="tabpanel" aria-labelledby="home-tab-1">
                                <div class="info-section">
                                    <p>
                                        <strong>EXPLANATION:</strong>
                                        Use this component to create and manage LabPair news and article content, whether created by staff within the company, or by individuals, bloggers and third-parties outside of LabPair.
                                    </p>
                                </div>
                                <div class="row" style="padding: 10px 0px 10px 0px;">
                                    <div class="col-12">
                                        <button type="button" title="Save" id="create_news" class="primary-btn btn-wide mb-4" style="max-width: 200px !important;">Create LabPair News Post</button>
                                    </div>

                                </div>


                                <div class="some-custom-datatable">
                                    <div class="kt-portlet__body">
                                        <!--begin: Datatable -->
                                        <div class="row">
                                            <div class="col-lg-12 custom-height-manage">
                                                <div class="bg-white adding-table w-100 h-100 th-white">
                                                    <div class="kt-portlet kt-portlet--mobile mb-0 h-100">
                                                        <div class="kt-portlet__body data-table-list p-0 h-100">
                                                            <table class="table">
                                                                <tr>
                                                                    <td scope="col" width="40%"><input type="text" class="form-control filter_news" placeholder="Article Title" id="search_title"></td>
                                                                    <td scope="col" width="15%"><input type="text" class="form-control filter_news" placeholder="Author's First Name" id="search_first_name"></td>
                                                                    <td scope="col" width="15%"><input type="text" class="form-control filter_news" placeholder="Author's Last Name" id="search_last_name"></td>
                                                                    <td scope="col" width="15%">
                                                                        <div class="input-group">
                                                                            <input type="text" class="form-control" placeholder="MM/DD/YY" name="name" id="SearchCreatedDate">
                                                                            <div class="input-group-append search_start_date">
                                                                                <span class="input-group-text">
                                                                                    <i class="la la-calendar-check-o"></i>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </td>

                                                                    <td scope="col" width="15%">
                                                                        <div class="input-group">
                                                                            <input type="text" class="form-control" placeholder="MM/DD/YY" name="name" id="SearchScheduledDate">
                                                                            <div class="input-group-append search_end_date">
                                                                                <span class="input-group-text">
                                                                                    <i class="la la-calendar-check-o"></i>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>

                                                                </tbody>
                                                            </table>
                                                            <table class="table table-striped" id="dataTableList">
                                                                <thead>
                                                                    <tr>
                                                                        <th scope="col" width="40%">Article Title</th>
                                                                        <th scope="col" width="15%">Author's First Name</th>
                                                                        <th scope="col" width="15%">Author's Last Name</th>
                                                                        <th scope="col" width="15%">Creation Date</th>
                                                                        <th scope="col" width="15%">Scheduled Date</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>

                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Datatable -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- end:: Content -->
    <button type="button" class="showDeleteModel" data-toggle="modal" data-target="#showDeleteModel" style="display: none;">Show Delete Model</button>
</div>

<div class="modal fade" id="addEditNews" data-backdrop="false">
    <div class="modal-dialog edit-popup pop-up style-2">
        <div class="modal-content">
            <div class="modal-header blue-header">
                <h5 class="modal-title" id="exampleModalLabel">LabPair News Post</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body padd-left-10 padd-right-10 pt-0 pb-0">
                <div class="kt-section__body">
                    <form class="kt-form kt-form--label-right" id="addEditForm" method="POST" action="{{getAURL('news-manager')}}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id_for_update" id="id_for_update">
                        <input type="hidden" name="preview_id" id="preview_id" value="{{$preview_id}}">
                        <p class="required text-danger">* Required field</p>
                        <div class="side-button text-right">
                            <button type="button" class="primary-btn btn-wide mb-4 viewPostAsMemberButton" id="view_post" name="view_post" value="view_post">View Post as Member</button>
                            <!-- <label class="text-right label">Post ID: 191 265 912</label> -->
                        </div>
                        <div class="row mb-4 align-items-center">
                            <label class="col-md-3 text-lg-right label">Author's First Name <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-5">
                                <input type="text" name="user_name" id="user_name" class="form-control inputNewsModule" placeholder="Author's First Name" value="">
                            </div>
                        </div>

                        <div class="row mb-4 align-items-center">
                            <label class="col-md-3 text-lg-right label">Author's Last Name <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-5">
                                <input type="text" name="user_last_name" id="user_last_name" class="form-control inputNewsModule" placeholder="Author's Last Name" value="">
                            </div>
                        </div>
                        <div class="row mb-4 align-items-center">
                            <label class="col-md-3 text-lg-right label">Author's Institution/Company <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-5">
                                <input type="text" name="company_name" id="company_name" class="form-control inputNewsModule" placeholder="Author's Institution/Company" value="">
                            </div>
                        </div>
                        <div class="row mb-4 align-items-center">
                            <label class="col-md-3 text-lg-right label">Scheduled Post Date <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-3 datepicker">
                                <input type="text" class="form-control datePicker" readonly placeholder="Scheduled Post Date" name="scheduled_date" id="scheduled_date" autocomplete="off" value="">
                                <i class="fas fa-calendar-check icon"></i>
                            </div>
                            <label class="label col-md-1 text-center">OR</label>
                            <div class="form-detail col-md-5">
                                <input type="radio" class="" name="not_scheduled" id="not_scheduled"> Don't schedule yet
                                <br>
                                <div style="margin-bottom: -10px; display:none" id="not_scheduled_message">
                                    <span class="error" style="font-weight:bold ;">Can't select! The original scheduled Post Date has already passed,</span><br>
                                    <span class="error" style="font-weight:bold ;">you can't unschedule a post that's already posted! </span>
                                </div>

                            </div>
                        </div>
                        <div class="row mb-4 align-items-center">
                            <label class="col-md-3 text-lg-right label">Article's Title <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-8">
                                <input type="text" class="form-control inputNewsModule" name="title" id="title" placeholder="Article's Title" value="">
                            </div>
                        </div>

                        <div class="row" id="displayAdsImageBox" style="display: none;">
                            <div class="form-group mt-3 mb-2 offset-3">
                                <a href="" target="_blank" id="adsImageURL">
                                    <img src="" alt="Image" class="img-fluid" id="displayAdsImage">
                                </a>
                            </div>
                        </div>
                        <div class="row" id="displayAdsVideoBox" style="display: none;">
                            <div class="form-group mt-3 mb-2 offset-3" id="displayAdsVideo">
                            </div>
                        </div>

                        <div class="row mb-4">
                            <label class="col-md-3 text-lg-right label">Article's Image/Video <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-3">
                                <input type="hidden" name="image_preview" id="image_preview">
                                <input type="hidden" name="image_type_preview" id="image_type_preview">
                                <input type="file" name="image" id="image" class="form-control browse" placeholder="Article's Image/Video" accept="image/*,video/*">
                                <span class="d-block error-message mt-2">Images must be 800 x 800 pixels</span>
                            </div>
                            <div class="col-sm-3 post-type-selector-image" style="max-width:10% ;">
                                <img src="" alt="Image" class="img-fluid" id="image-news" style="display:none ;">
                            </div>
                        </div>
                        <div class="row mb-4">
                            <label class="col-md-3 text-lg-right label">Article's Body <span class="text-danger">*</span>:</label>
                            <div class="form-detail col-md-8">
                                <textarea name="description" id="description" cols="30" placeholder="Article's Body" rows="3" class="form-control inputNewsModule summernote"></textarea>
                                <span class="pull-right label label-default">&nbsp;characters remaining</span>
                                <span class="pull-right label label-default RemainingCharacters">10,000</span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="button-left col-sm-8 col-md-6 col-lg-4 text-lg-right">
                                <button type="button" class="primary-btn disabled mr-2 mb-2 resetPostButton" data-dismiss="modal" aria-label="Close" name="save" value="Save">Cancel</button>
                                <button type="submit" class="primary-btn mb-2 formSubmitButton" name="save" value="Save">Save</button>
                            </div>
                            <div class="button-right col-sm-4 col-md-6 col-lg-8 text-right">
                                <button type="button" class="primary-btn mb-2 formSubmitButton" data-toggle="modal" data-target="#showDeleteModel" id="delete-news" style="background-color: #de0202 !important;color: #fff !important;border-color: #de0202 !important;">Delete Post</button>
                            </div>
                        </div>
                        <div class="row justify-content-between">


                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="showDeleteModel" role="dialog" data-backdrop="false">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content dark-color">
            <div class="modal-header">
                <h5 class="modal-title" id="modalDeleteHerderTitle">Delete News</h5>
                <button type="button" class="close cancelDeleteTitle" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body gray-background">
                <div class="kt-section__body">
                    <div class="text-center max-width-560">
                        <p id="modalDeleteDescription">Once delete this news from LabPair, they cannot be recovered. If you are sure they should be permanently removed, click the "Delete News".</p>
                    </div>
                    <div class="btn-group d-flex align-items-center justify-content-center mt-4 mb-4">
                        <div class="button mr-2 ml-2">
                            <button type="button" class="btn btn-danger btn-wide yes-sure" data-id="" id="confirmDeleteTitle">Delete News</button>
                        </div>
                        <div class="button mr-2 ml-2">
                            <button type="button" class="btn btn-primary btn-wide disabled cancelDeleteTitle" data-dismiss="modal" aria-label="Close" id="cancelDeleteTitle">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('page_level_js')
<script src="{{asset('assets/js/admin/news.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/demo1/pages/crud/datatables/basic/paginations.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script>
    var imageUrl = "{{asset('storage/')}}"

    function checkNewsRequired(exclude = []) {
        //var exclude = ['password', 'password_confirmation'];
        var count = 0;
        $('.inputNewsModule').each(function(index, value) {
            count++;
            $(".formSubmitButton").removeClass("disabled");
            $(".formSubmitButton").removeAttr("disabled");
            var idName = $(this).attr('id');
            if ($(this).val() == "" && jQuery.inArray(idName, exclude) == -1) {
                $(".formSubmitButton").addClass("disabled");
                $(".formSubmitButton").prop("disabled", true);
                return false;
            }
        });
        if ($("#not_scheduled").prop('checked') == false && $("#scheduled_date").val() == "") {
            return false;
        }
    }
    $(document).on("blur", '#addEditForm .inputNewsModule', function() {
        checkNewsRequired(ex);
    });
    $(document).on("change", '#addEditForm select.inputNewsModule', function() {
        checkNewsRequired(ex);
    });
    checkNewsRequired(ex);

    function getPreviewData(id) {
        $.ajax({
            type: 'get',
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            url: url + 'news-manager/preview-post/' + id,
            success: function(data) {
                if (data.status == 1) {
                    $("#title").val(data.data.title);
                    $('#description').summernote('code', data.data.description);
                    // $('#description').val(data.data.description);
                    if (data.data.ad_news != '' && data.data.ad_news != null) {
                        var ad_news = data.data.ad_news;
                        $("#id_for_update").val(ad_news.id);
                        $("#company_name").val(ad_news.company_name);
                        if (data.data.ad_news != '' && data.data.ad_news != null) {
                            $("#scheduled_date").val(ad_news.start_date);
                            $("#not_scheduled").prop("checked", "");
                        } else {
                            $("#scheduled_date").val('');
                            $("#not_scheduled").prop("checked", "true");
                        }
                        $("#user_name").val(ad_news.user_name);
                        $("#user_last_name").val(ad_news.user_last_name);

                        $('#image-news').attr("src", imageUrl + "/" + ad_news.image);
                    } else {

                    }


                    $("#addEditNews").modal("show");
                }
                checkRequired(ex);
            }
        });
    }

    $(document).ready(function() {
        $(document).on('change', '#not_scheduled', function() {
            $("#not_scheduled_message").hide();
            if ($(this).is(":checked")) {
                if ($("#scheduled_date").val() != "") {
                    var SpecialTo = moment($("#scheduled_date").val(), "YYYY/MM/DD")
                    if (moment().diff(SpecialTo, 'days') > 0) {
                        $("#not_scheduled_message").show();
                        $(this).prop('checked', false);
                    } else {
                        $("#scheduled_date").val('');
                    }

                } else {
                    $("#scheduled_date").val('');
                }
            } else {

            }
        });
        if ($("#preview_id").val() != "") {
            getPreviewData($("#preview_id").val());
            window.history.replaceState({}, url, url + "news-manager");
        }

    })
</script>
@endpush