@extends('backend.app')
@section("content")
    <div class="content-header row">
        <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
            <h3 class="content-header-title mb-0 d-block">Video Ekle</h3>
            <div class="row breadcrumbs-top d-inline-block">
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('panel')}}">Anasayfa</a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{url('panel/videolar')}}">Videolar</a>
                        </li>
                        <li class="breadcrumb-item active">Video Ekle
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="content-header-right col-md-6 col-12">
            <div class="dropdown float-md-right">
                <a href="{{url('panel/videolar')}}" class="btn btn-dark round btn-glow px-2">Geri Dön</a>
            </div>
        </div>
    </div>

    <div class="content-body">
        <div class="row">
            <div id="recent-sales" class="col-12 col-md-12">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    @foreach ($errors->all() as $error)
                                        <p class="mb-0">{{ $error }}</p>
                                    @endforeach
                                </div>
                            @endif
                            <form class="form form-horizontal row-separator" action="{{route('panel.videolar.video.ekle')}}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="form-body">
                                    <h4 class="form-section"><i class="la la-video-camera"></i> Video Bilgileri</h4>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control" for="kategori">Kategori:</label>
                                        <div class="col-md-5">
                                            <select id="kategori" name="kategori" class="form-control" required>
                                                <option value="0">Kategori Seçiniz</option>
                                                @foreach($kategoriler as $kategori)
                                                    <option value="{{$kategori->id}}">{{$kategori->baslik}}</option>
                                                @endforeach
                                            </select>
                                            <small class="text-muted">Eğer boş ise 'Video Kategorisi' eklemeniz gerekmektedir.</small>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control" for="baslik">Başlık:</label>
                                        <div class="col-md-9">
                                            <input type="text" id="baslik" class="form-control" name="baslik" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-md-3 label-control" for="metadesc">Detay:</label>
                                        <div class="col-md-9">
                                            <textarea id="metadesc" rows="5" class="form-control" name="metadesc"></textarea>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-md-3 label-control" for="resim">Resim:<br><small class="text-danger">Resim boyut olarak 640x480px olarak yüklemeniz tavsiye edilir.</small></label>
                                        <div class="col-md-9">
                                            <input type="file" name="resim" class="dropify" data-height="480" data-width="640" accept="image/*"/>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control pt-1">Video Türü:</label>
                                        <div class="col-md-9">
                                            <div class="d-inline-block custom-control custom-radio mr-1">
                                                <input type="radio" class="custom-control-input" name="videotur" id="embed" value="1" checked>
                                                <label class="custom-control-label" for="embed">Video Kodu</label>
                                            </div>
                                            <div class="d-inline-block custom-control custom-radio mr-1">
                                                <input type="radio" class="custom-control-input" name="videotur" id="mp4" value="2">
                                                <label class="custom-control-label" for="mp4">Mp4 Video</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row" id="mp4row">
                                        <label for="video" class="col-md-3 label-control">Video (mp4):</label>
                                        <div class="col-md-9">
                                            <input type="file" id="video" name="mp4" accept="video/mp4,video/x-m4v,video/*">
                                            <small class="text-muted d-block mt-1">Video boyutunun 30 MB geçmemesi tavsiye edilir.</small>
                                        </div>
                                    </div>
                                    <div class="form-group row" id="embedrow">
                                        <label class="col-md-3 label-control" for="embed">Video Kodu:</label>
                                        <div class="col-md-9">
                                            <textarea id="embed" rows="5" class="form-control" name="embed" placeholder="Video embed kodunuzu buraya yapıştırın."></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control" for="hit">Hit:</label>
                                        <div class="col-md-3">
                                            <input type="number" id="hit" class="form-control" value="1" name="hit">
                                        </div>
                                    </div>

                                    <div class="form-group row last">
                                        <label class="sr-only" for="durum">Durum</label>
                                        <div class="col-md-9 offset-md-3">
                                            <label for="durum" class="mr-1 mb-0">Durum</label>
                                            <input type="checkbox" id="durum" class="switchery" name="durum" data-size="sm" checked />
                                        </div>
                                    </div>
                                </div>

                                <div class="form-actions right mt-0">
                                    <button type="submit" class="btn btn-success">
                                        <i class="la la-check"></i> Kaydet
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push("customJs")
    <script src="{{asset('assets/backend/app-assets/vendors/js/editors/ckeditor/ckeditor.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/backend/app-assets/vendors/js/dropify/js/dropify.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/backend/app-assets/vendors/js/forms/toggle/switchery.min.js')}}" type="text/javascript"></script>
    <script>
        CKEDITOR.replace('metadesc', {
            height: '325px',
            extraPlugins: 'forms',
            customConfig: '{{asset('/js/custom.js?v=1.7')}}'
        });
        $('.dropify').dropify({
            messages: {
                'default': '640x480px video fotosunu buraya sürükleyin veya tıklayıp yükleyin.',
                'replace': '640x480px video fotosunu değiştirmek için buraya sürükleyin veya tıklayıp yükleyin.',
                'remove':  'Sil',
                'error':   'Hata, lütfen tekrar deneyin!'
            }
        });
        // Switchery
        var i = 0;
        if (Array.prototype.forEach) {

            var elems = $('.switchery');
            $.each( elems, function( key, value ) {
                var $size="", $color="",$sizeClass="", $colorCode="";
                $size = $(this).data('size');
                var $sizes ={
                    'lg' : "large",
                    'sm' : "small",
                    'xs' : "xsmall"
                };
                if($(this).data('size')!== undefined){
                    $sizeClass = "switchery switchery-"+$sizes[$size];
                }
                else{
                    $sizeClass = "switchery";
                }

                $color = $(this).data('color');
                var $colors ={
                    'primary' : "#967ADC",
                    'success' : "#37BC9B",
                    'danger' : "#DA4453",
                    'warning' : "#F6BB42",
                    'info' : "#3BAFDA"
                };
                if($color !== undefined){
                    $colorCode = $colors[$color];
                }
                else{
                    $colorCode = "#37BC9B";
                }

                var switchery = new Switchery($(this)[0], { className: $sizeClass, color: $colorCode });
            });
        } else {
            var elems1 = document.querySelectorAll('.switchery');

            for (i = 0; i < elems1.length; i++) {
                var $size = elems1[i].data('size');
                var $color = elems1[i].data('color');
                var switchery = new Switchery(elems1[i], { color: '#37BC9B' });
            }
        }
        let embed = $('#embedrow');
        let upload = $('#mp4row');

        if($('input[name=videotur]:checked').val() == "1"){
            embed.show();
            upload.hide();
        } else {
            embed.hide();
            upload.show();
        }


        $('input[name=videotur]').click(function() {
            if ($('input[name=videotur]:checked').val() == "1") {
                embed.show();
                upload.hide();
            } else {
                embed.hide();
                upload.show();
            }
        });
    </script>
@endpush

@push("customCss")
    <link rel="stylesheet" type="text/css" href="{{asset('assets/backend/app-assets/vendors/js/dropify/css/dropify.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/backend/app-assets/vendors/css/forms/toggle/switchery.min.css')}}">
@endpush