@extends('cms.layouts.app')

@section('pre-styles')
    <x-cms.css-helper :bootstrap="true" />
@endsection

@section('contents')
    <!-- Hero -->

    <x-cms.bread-crumb title="<i class='fa fa-plus'></i> Add New Video">

        <li class="breadcrumb-item">Cms</li>
        <li class="breadcrumb-item" aria-current="page">
            Video
        </li>
    </x-cms.bread-crumb>
    <!-- END Hero -->


    <!-- Page Content -->
    <div class="content">

        <x-cms.common-message />

        <div class="block">
            <div class="block-content block-content-full">
                <form action="{{ route('videos.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="PRODUCT_TYPE" value="Videos">
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="title">Video Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="title" name="title"
                                    value="{{ old('title') }}" maxlength="100" required placeholder="Title..." autofocus
                                    autocomplete="title">
                                <span class="text-danger">{{ validationError($errors->get('title')) }}</span>
                            </div>

                            <div class="form-group">
                                <label for="title">Youtube Video URL <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="contents" name="contents"
                                    value="{{ old('contents') }}" maxlength="100" required placeholder="Video URL...">
                                <span class="text-danger">{{ validationError($errors->get('contents')) }}</span>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-check">
                                        <input class="form-check-input" id="isPublic" type="checkbox" name="is_public"
                                            value="1" checked>
                                        <label class="form-check-label" for="isPublic">Public</label>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-check">
                                        <input class="form-check-input" id="isActive" type="checkbox" name="is_active"
                                            value="1" checked>
                                        <label class="form-check-label" for="isActive">Active</label>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-check">
                                        <input class="form-check-input" id="isNoindex" type="checkbox" name="is_noindex"
                                            value="1" checked>
                                        <label class="form-check-label" for="isNoindex">No Index</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="display_order">Display Order</label>
                                <input type="number" class="form-control" id="display_order" name="display_order"
                                    value="{{ old('display_order', 1) }}" min=0 oninput="validity.valid||(value='');"
                                    placeholder="Display Order...">
                            </div>
                        </div>
                    </div>

                    <div class="text-left mt-4">
                        <a class="btn btn-danger" href="/cms/videos"><i class="fa fa-angle-double-left"></i>
                            Cancel</a>
                        <button type="submit" class="btn btn-primary"><i class="fa fa-plus"></i> Save Video</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- END Page Content -->
@endsection