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

@section('page_level_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" href="{{getAURL('site-content')}}">
                                    <span class="nav-text">LabPair Daily</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="javascript::void(0)">
                                    <span class="nav-text">Content Editor</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 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="some-custom-datatable">
                                    <div class="kt-portlet__body">
                                        <!--begin: Datatable -->
                                        <div class="row">
                                            @php
                                            $url = getAURL('site-content');
                                            if(isset($data->id)) {$url = getAURL('site-content/' . $data->id);}
                                            @endphp
                                            <div class="col-lg-12 custom-height-manage">
                                                <div class="bg-white w-100 h-100">
                                                    <div class="managment-form">
                                                        <div class="dark-title">
                                                            <h5>Update Site Content</h5>
                                                        </div>
                                                        <form class="kt-form kt-form--label-right" id="addEditForm" method="POST" action="{{$url}}" enctype="multipart/form-data">
                                                            @csrf
                                                            @if(isset($data->id))
                                                            {{ method_field('PUT') }}
                                                            @endif
                                                            <div class="form-group">
                                                                <div class="label col-lg-2">
                                                                    <label class="text-left">Title:</label>
                                                                </div>
                                                                <div class="input-group col-lg-7">
                                                                    <input type="text" class="form-control inputModule" name="title" id="title" value="{{$data->title ?? ''}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="col-lg-9">
                                                                    <!--<label class="col-form-label col-lg-12 text-lg-left ">Image Placeholder</label>-->
                                                                    <!--<label class="col-form-label col-lg-12 text-lg-left"><span class="text-danger">* Mandatory</span>: Uploaded image.</label>-->
                                                                    <!--<label class="col-form-label col-lg-12 text-lg-left">Uploading image referencing "888". The image must be exactly 400 pixels width and 800 pixels height. The image should be either .PNG or .JPG format. Both will be output correctly to the we interface. </label>-->
                                                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                                                        <div class="dropzone dropzone-default dropzone-success" id="imageDropZone">
                                                                            <div class="dropzone-msg dz-message needsclick">
                                                                                <i class="flaticon-upload-1" style="font-size: 72px"></i>
                                                                                <header>Drag & Drop file here</header>
                                                                                <span>or</span><br>
                                                                                <a href="javascript:Void(0)" class="btn btn-outline-success mr-2">Browse File</a>
                                                                            </div>
                                                                            <!--<img id="img1Preview" src="" alt="pic" style="width: 100px; display: none;"/>-->
                                                                            <div class="dz-preview dz-processing dz-image-preview dz-success dz-complete" style="display: none;"> 
                                                                                <div class="dz-image">
                                                                                    <img data-dz-thumbnail="" alt="" src="">
                                                                                </div> 
                                                                            </div>
                                                                        </div>
                                                                        <input type="hidden" name="image" id="image" class="form-control"/>
                                                                    </div>
                                                                    <!--<button type="submit" class="btn btn-brand formSubmitButton website-button" >Save</button>-->
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="input-group col-lg-9">
                                                                    <textarea class="form-control inputModule" name="description" id="description">{{$data->description ?? ''}}</textarea>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="input-group col-lg-12">
                                                                    <div class="submit-btn">
                                                                        <input type="submit" class="btn btn-primary formSubmitButton" value="Update Content">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                        <!--end: Datatable -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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"></h5>
                    <button type="button" class="close deleteModelHide" 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">
                            <div class="icon text-center mb-4" id="modalDeleteIcon"><i class="fas fa-exclamation-triangle"></i></div>
                            <h3 id="modalDeleteTitle"></h3>
                            <p id="modalDeleteDescription"></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-primary btn-wide yes-sure" data-id="{{$data->id ?? ''}}" id="confirmDeleteTitle"></button>
                            </div>
                            <div class="button mr-2 ml-2">
                                <button type="button" class="btn btn-primary btn-wide" data-dismiss="modal" aria-label="Close" id="cancelDeleteTitle"></button>
                            </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>

@endsection

@section('page_level_js')
<script src="{{asset('assets/js/admin/site-content.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script>

$(document).on("blur", '#addEditForm .inputModule', function () {
    checkRequired(ex);
});
$(document).on("change", '#addEditForm select.inputModule', function () {
    checkRequired(ex);
});
checkRequired(ex);
</script>
@endpush