@extends('backend.app')
@section('content')

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Pop-up İçerik Ekle</h1>
        <hr>
    </div>

    <div class="col-md-12">

        @if ($errors->any())
            <div class="alert alert-danger">
                <strong> Hata...!</strong> zorunlu alanları giriniz.<br>
                <ul>
                    @foreach($errors as $error)
                        <li>{{$error}}</li>
                    @endforeach
                </ul>
            </div>
        @endif



        <form id="form" method="post" data-parsley-validate class="form-horizontal form-label-left" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Başlık</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" class="form-control col-md-7 col-xs-12" name="baslik">
                </div>
            </div>

            <div class="form-group">
                <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Açıklama / Detay</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <textarea rows="4" class="ckeditor" style="width:100%" name="detay"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Video Link</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" class="form-control col-md-7 col-xs-12" name="link">
                </div>
            </div>

            <div class="form-group">
                <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Resim Yükle</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="file" class="form-control col-md-7 col-xs-12" name="image">
                </div>
            </div>

            <div class="form-group">
                <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Durum</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="radio" name="durum" value="1" checked> Aktif
                    <input type="radio" name="durum" value="0"> Pasif
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                    <button type="submit" class="btn btn-success">Kaydet</button>
                </div>
            </div>

        </form>

    </div>



@endsection

@section('js')
    <script src="/js/ckeditor/ckeditor.js"></script>
    <script src="/js/ckeditor/config.js"></script>
    <script>
        $ (document).ready(function () {
            $('form').validate();
            $('form').ajaxForm({
                beforeSubmit:function() {
                    swal({
                        title: '<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading...</span>',
                        text:'Yükleniyor lütfen bekleyiniz...',
                        showConfirmButton: false
                    })
                },
                beforeSerialize:function() {

                    for (instance in CKEDITOR.instances)CKEDITOR.instances[instance].updateElement();
                },
                success:function (response) {

                    swal(
                        response.baslik,
                        response.icerik,
                        response.durum
                    )

                }
            });
        });
    </script>

@endsection