@extends('admin/institute-management/institute-profile/index')

@section('main-content-tab')
<form action="{{route('institute.profile.news-and-blog.store', $slug)}}" name="institute" class="form mb-15" method="POST" id="kt_contact_form" enctype="multipart/form-data">
    @csrf
    <h1 class="fw-bolder text-dark mb-9">Create News & Blog</h1>
    <!--begin::Input group-->
    <div class="row mb-3">
    <!--begin::Col-->
        <div class="col-md-6 pe-lg-10">
            <!--begin::Form-->
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="required fs-5 fw-bold mb-2">Title (EN)</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input  type="text" class="form-control form-control-solid" placeholder="Enter Title (EN)" value="{{old('title')}}" name="title" autocomplete="off"/>
                @if($errors->has('title'))
                    <span class="text-danger">{{ $errors->first('title') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="fs-5 fw-bold mb-2">Title (BN)</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input  type="text" class="form-control form-control-solid" placeholder="Enter Title (BN)" value="{{old('title_bn')}}" name="title_bn" autocomplete="off"/>
                @if($errors->has('title_bn'))
                    <span class="text-danger">{{ $errors->first('title_bn') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <label class="required fs-6 fw-bold mb-2">Type</label>
                    <select id="type" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select a Type" name="type">
                        <option selected disabled>Select Type</option>
                        <option @if(old('type') == 1) selected @endif value="1">News</option>
                        <option @if(old('type') == 2) selected @endif value="2">Blog</option>
                    </select>
                    @if($errors->has('type'))
                        <span class="text-danger">{{ $errors->first('type') }}</span>
                    @endif
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class=" fs-5 fw-bold mb-2">Posted Date</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input type="date" class="form-control form-control-solid" placeholder="Enter Posted Date" value="{{old('posted_date')}}" name="posted_date" autocomplete="off"/>
                @if($errors->has('posted_date'))
                    <span class="text-danger">{{ $errors->first('posted_date') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class=" fs-5 fw-bold mb-2">Short Description (EN)</label>
                <!--end::Label-->
                <!--begin::Input-->
                <textarea name="short_description" id="short_description" class="form-control form-control-solid" placeholder="Enter Short Description (EN)" autocomplete="off">{{old('short_description', '')}}</textarea>
                @if($errors->has('short_description'))
                    <span class="text-danger">{{ $errors->first('short_description') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="fs-5 fw-bold mb-2">Short Description (BN)</label>
                <!--end::Label-->
                <!--begin::Input-->
                <textarea name="short_description_bn" id="short_description_bn" class="form-control form-control-solid" placeholder="Enter Short Description (BN)" autocomplete="off">{{old('short_description_bn', '')}}</textarea>
                @if($errors->has('short_description_bn'))
                    <span class="text-danger">{{ $errors->first('short_description_bn') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <label class=" fs-5 fw-bold mb-2">Long Description (EN)</label>
                <textarea name="long_description" id="long_description" class="summernote form-control form-control-solid" placeholder="Enter Long Description (EN)" autocomplete="off">{{old('long_description', '')}}</textarea>
                @if($errors->has('long_description'))
                    <span class="text-danger">{{ $errors->first('long_description') }}</span>
                @endif
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <label class="fs-5 fw-bold mb-2">Long Description (BN)</label>
                <textarea name="long_description_bn" id="long_description_bn" class="summernote form-control form-control-solid" placeholder="Enter Long Description (BN)" autocomplete="off">{{old('long_description_bn', '')}}</textarea>
                @if($errors->has('long_description_bn'))
                    <span class="text-danger">{{ $errors->first('long_description_bn') }}</span>
                @endif
            </div>
            <div class="d-flex mb-5 fv-row">
                <label class="form-check form-switch form-check-custom form-check-solid">
                    <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Status</span>
                    <input class="form-check-input radio-btn" name="status" type="checkbox" value="{{old('status', 1)}}" checked="checked" />
                </label>
                <!--end::Switch-->
            </div>
            <div class="d-flex">
                <a style="margin-right:5px;" href="{{route('institute.profile.news-and-blog', $slug)}}" class="btn btn-secondary">Back</a>
                <button type="submit" class="btn btn-primary" id="kt_contact_submit_button">
                    <!--begin::Indicator-->
                    <span class="indicator-label">Create</span>
                </button>
            </div>
            <!--end::Form-->
        </div>

        <div class="col-md-6 pe-lg-10">
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class=" fs-5 fw-bold mb-2">Thumbnail</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input accept="image/*" type="file" id="thumbnail" name="thumbnail" class="form-control dropify" placeholder="Enter Thumbnail">
                <span style="font-size: 12px;color: red;">Suggested Image ratio: 330 x 330 | max-size: 1 MB</span>
                @if($errors->has('thumbnail'))
                    <span class="text-danger">{{ $errors->first('thumbnail') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class=" fs-5 fw-bold mb-2">Banner</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input accept="image/*" type="file" id="banner" name="banner" class="form-control dropify" placeholder="Enter Banner">
                <span style="font-size: 12px;color: red;">Suggested Image ratio: 1170 x 550 | max-size: 1 MB</span>
                @if($errors->has('banner'))
                    <span class="text-danger">{{ $errors->first('banner') }}</span>
                @endif

                <!--end::Input-->
            </div>
        </div>
    </div>

    <!--end::Submit-->
</form>
@endsection

@section('extra-extra-css')
    <link rel="stylesheet" href="{{ asset('summernote/summernote.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dropify.min.css') }}">
@endsection

@section('extra-extra-script')
    <script src="{{ asset('summernote/summernote.min.js') }}"></script>
{{--    <script src="{{ asset('js/popper.min.js') }}"></script>--}}
    <script src="{{ asset('js/jquery.validate.js') }}"></script>

    //validate form
    <script>
        $(function() {
            $("form[name='institute']").validate({
                ignore: ".note-editable.panel-body",
                rules: {
                    title:'required',
                    type:'required',
                    // posted_date:'required',
                    // short_description:'required',
                    // long_description:'required',
                    // thumbnail:'required',
                    // banner:'required',
                },
                messages: {
                    title: "Title is required.",
                    type: "Type is required.",
                    posted_date: "Posted date is required.",
                    short_description: "Short description is required.",
                    long_description: "Long description is required.",
                    thumbnail: "Thumbnail is required.",
                    banner: "Banner is required.",
                },
                submitHandler: function(form) {
                form.submit();
                }
            });
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
          $('.summernote').summernote({
            height: 200,
            popover: {
                image: [],
                link: [],
                air: []
            }
          });
        });
    </script>
    <script src="{{ asset('js/dropify.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var drEvent = $('#thumbnail').dropify();
            drEvent = drEvent.data('dropify');
            drEvent.resetPreview();
            drEvent.clearElement();

            var drEvent = $('#banner').dropify();
            drEvent = drEvent.data('dropify');
            drEvent.resetPreview();
            drEvent.clearElement();
        });
    </script>
    <script>
        $(document).ready(function(){
            $('.institute-profile-tab-news-and-blog').addClass('active');
        });
    </script>
@endsection