@extends('layouts.admin.admin')

@section('content')

<style>
    .btn-sm, .btn-group-sm > .btn {
        font-size: 12px;
    }
</style>

<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Add New</h3>
    </div>
    <div class="col-md-7 align-self-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active">Add New</li>
        </ol>
    </div>
    <div>
        <button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">

        <div class="my-2">
            <a class="btn btn-primary" href="{{ route('events.index') }}"> Back</a>
        </div>
    
        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="card"> 
            <div class="card-body">
                <h4 class="card-title">Add New Video</h4>
                <form action="{{ route('embed-video.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-body">
                        <div class="row p-t-20">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Name</label>
                                    <input type="text" id="title" name="title" class="form-control" placeholder="Video Name" required>  
                                    <small class="form-control-feedback"> </small> </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">URL</label>
                                    <input type="text" id="embeed_url" name="embeed_url" class="form-control" placeholder="Embed Url" required>  
                                    <small class="form-control-feedback"> </small> </div>
                            </div>
                        </div>
                        <div class="row p-t-20">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Publish</label>
                                    <select class="form-control" name="status" id="status">
                                        <option>Select any one</option>
                                        <option value="1">Publish</option>
                                        <option value="0">Draft</option>
                                    </select>
                                    <small class="form-control-feedback"> </small> </div>
                            </div>
                        </div>
                        <hr/>
                        <div class="row p-t-20">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Meta Tile</label>
                                    <input type="text" id="meta_title" name="meta_title" class="form-control" placeholder="Meta Title" required>  
                                    <small class="form-control-feedback"> </small> </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Meta Tag</label>
                                    <input type="text" id="meta_tag" name="meta_tag" class="form-control" data-role="tagsinput" required>  
                                    <small class="form-control-feedback"> </small> </div>
                            </div>
                        </div>
                        <div class="row p-t-20">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label">Meta description</label>
                                    <textarea id="meta_description" name="meta_description" class="form-control" placeholder="Meta Description"></textarea>  
                                    <small class="form-control-feedback"> </small> </div>
                            </div>
                            <!--/span-->
                        </div>
                        
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i> Save</button>
                        <a href="{{ route('embed-video.index') }}" class="btn btn-inverse">Cancel</a>
                    </div>
                </form>
            </div>    
        </div>
</div>
<script type="text/javascript">
    var predefined_list = ["Linux", "Mac", "Windows"];
    $('#meta_tag').tagsInput({
        'autocomplete': {
            source: predefined_list
        },
        freeInput: false,
        trimValue: true,
    });
</script>


@endsection