@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">Reklam 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/reklamlar')}}">Reklamlar</a>
                        </li>
                        <li class="breadcrumb-item active">Reklam 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/reklamlar')}}" 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.reklamlar.reklam.ekle')}}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="form-body">
                                    <h4 class="form-section"><i class="la la-bullhorn"></i> Reklam Bilgileri</h4>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control" for="konum">Konum / Kategori</label>
                                        <div class="col-md-9">
                                            <div class="row">
                                                <div class="col-md-7">
                                                    <select class="select2 form-control" id="yer" name="yer" required>
                                                        <option></option>
                                                        <optgroup label="Genel Reklamlar">
                                                            <option value="g1">Popup Reklam - Max Genişlik: 800px</option>
                                                            <option value="g2">Saniyeli Açılış Reklamı - Max Genişlik: 1024px</option>
                                                            <option value="g3">Site En Üst Reklam - Max Genişlik: 970px</option>
                                                            <option value="g4">Logo Yanı Reklam - Max Boyut: 728x90</option>
                                                            <option value="g5">Sol Sabit Reklam - Max Genişlik: 160px</option>
                                                            <option value="g6">Sağ Sabit Reklam - Max Genişlik: 160px</option>
                                                            <option value="g7">Scroll Reklam - Max Boyut: 300x250px</option>
                                                            <option value="g8">Sayfa Giydirme Pageskin Reklam</option>
                                                        </optgroup>
                                                        <optgroup label="Anasayfa Reklamlar">
                                                            <option value="a1">Anasayfa Masthead Reklam - Max Genişlik: 970px</option>
                                                            <option value="a2">Anasayfa Alt Reklam - Max Genişlik: 970px</option>
                                                            <option value="a3">Anasayfa Büyük Manşet Reklam</option>
                                                            <option value="a4">Anasayfa Normal Manşet Reklam</option>
                                                            <option value="a5">Anasayfa Yatay Manşet Reklam</option>
                                                            <option value="a6">Anasayfa Büyük Manşet Altı - Max Genişlik: 970px</option>
                                                            <option value="a7">Anasayfa Yatay Manşet Altı - Max Genişlik: 970px</option>
                                                            <option value="a8">Anasayfa Normal Manşet Altı - Max Genişlik: 970px</option>
                                                            <option value="a9">Anasayfa Öne Çıkan Reklam</option>
                                                            <option value="a10">Anasayfa Sürmanşet Altı - Max Genişlik: 970px</option>
                                                            <option value="a11">Anasayfa Çok Okunanlar Altı - Max Genişlik: 970px</option>
                                                            <option value="a12">Anasayfa Yazarlar Üstü - Max Genişlik: 300px</option>
                                                            <option value="a13">Anasayfa Yazarlar Altı - Max Genişlik: 300px</option>
                                                            <option value="a14">Anasayfa Foto Galeri Üstü - Max Genişlik: 970px</option>
                                                            <option value="a15">Anasayfa Foto Galeri Altı - Max Genişlik: 970px</option>
                                                            <option value="a16">Anasayfa Video Galeri Üstü - Max Genişlik: 645px</option>
                                                            <option value="a17">Anasayfa Gündem Altı - Max Genişlik: 645px</option>
                                                        </optgroup>
                                                        <optgroup label="Sağ Blok Modül Reklamlar">
                                                            <option value="s1">Çok Okunanlar Üstü - Max Genişlik: 300px</option>
                                                            <option value="s2">Puan Durumu Üstü - Max Genişlik: 300px</option>
                                                            <option value="s3">Anket Üstü - Max Genişlik: 300px</option>
                                                            <option value="s4">Namaz Vakitleri Üstü - Max Genişlik: 300px</option>
                                                            <option value="s5">Yazarlar Üstü - Max Genişlik: 300px</option>
                                                        </optgroup>
                                                        <optgroup label="Haber Reklamları">
                                                            <option value="h1">Kategori Sayfa Üstü - Max Genişlik: 970px</option>
                                                            <option value="h2">Kategori Sayfa Altı - Max Genişlik: 970px</option>
                                                            <option value="h3">Haber Sayfa Üstü - Max Genişlik: 970px</option>
                                                            <option value="h4">Haber Sayfa Altı - Max Genişlik: 970px</option>
                                                            <option value="h5">Haber Başlık Üstü - Max Genişlik: 615px</option>
                                                            <option value="h6">Haber Resim Altı - Max Genişlik: 615px</option>
                                                            <option value="h7">Haber Özet Altı  - Max Genişlik: 615px</option>
                                                            <option value="h8">Haber Detay İçi  - Max Genişlik: 300px</option>
                                                            <option value="h9">Haber 1. Paragraf Arası - Max Genişlik: 615px</option>
                                                            <option value="h10">Haber İlişkili Haberler Altı - Max Genişlik: 615px</option>
                                                            <option value="h11">Haber Yorum Üstü - Max Genişlik: 645px</option>
                                                            <option value="h12">Haber Yorum Altı - Max Genişlik: 645px</option>
                                                        </optgroup>
                                                        <optgroup label="Makale Reklamları">
                                                            <option value="y1">Yazarlar Sayfa Üstü - Max Genişlik: 970px</option>
                                                            <option value="y2">Yazarlar Sayfa Altı - Max Genişlik: 970px</option>
                                                            <option value="y3">Makale Detay Sayfa Üstü - Max Genişlik: 970px</option>
                                                            <option value="y4">Makale Detay Sayfa Altı - Max Genişlik: 970px</option>
                                                            <option value="y5">Makale Detay Başlık Üstü - Max Genişlik: 615px</option>
                                                            <option value="y6">Makale Detay İçi - Max Genişlik: 300px</option>
                                                            <option value="y7">Makale Detay 1. Paragraf Arası - Max Genişlik: 615px</option>
                                                            <option value="y8">Makale Detay Yorum Üstü - Max Genişlik: 645px</option>
                                                            <option value="y9">Makale Detay Yorum Altı - Max Genişlik: 645px</option>
                                                        </optgroup>
                                                        <optgroup label="Foto Galeri Reklamları">
                                                            <option value="f1">Galeri Sayfa Üstü - Max Genişlik: 970px</option>
                                                            <option value="f2">Galeri Sayfa Altı - Max Genişlik: 970px</option>
                                                            <option value="f3">Galeri Detay Resim Üstü - Max Genişlik: 615px</option>
                                                            <option value="f4">Galeri Detay Resim Altı - Max Genişlik: 615px</option>
                                                            <option value="f5">Galeri Detay Sağ Blok 1 - Max Genişlik: 300px</option>
                                                            <option value="f6">Galeri Detay Sağ Blok 2 - Max Genişlik: 300px</option>
                                                            <option value="f7">Galeri Detay Son Eklenenler Üstü - Max Genişlik: 970px</option>
                                                        </optgroup>
                                                        <optgroup label="Video Galeri Reklamları">
                                                            <option value="v1">Video Sayfa Üstü - Max Genişlik: 970px</option>
                                                            <option value="v2">Video Sayfa Altı - Max Genişlik: 970px</option>
                                                            <option value="v3">Video Detay Video Üstü - Max Genişlik: 615px</option>
                                                            <option value="v4">Video Detay Video Altı - Max Genişlik: 615px</option>
                                                            <option value="v5">Video Detay Video Önü - Max Genişlik: 615px</option>
                                                            <option value="v6">Video Detay Sağ Blok 1 - Max Genişlik: 300px</option>
                                                            <option value="v7">Video Detay Sağ Blok 2 - Max Genişlik: 300px</option>
                                                            <option value="v8">Video Detay Son Eklenenler Üstü - Max Genişlik: 970px</option>

                                                        </optgroup>
                                                        <optgroup label="Mobil Reklamlar">
                                                            <option value="m1">Mobil Popup Reklam - Max Boyut: 320x480px</option>
                                                            <option value="m2">Mobil En Üst 1 - Max Genişlik: 320px</option>
                                                            <option value="m3">Mobil En Üst 2 - Max Genişlik: 320px</option>
                                                            <option value="m4">Mobil En Alt - Max Genişlik: 320px</option>
                                                            <option value="m5">Mobil Anasayfa Üst Manşet Altı - Max Genişlik: 320px</option>
                                                            <option value="m6">Mobil Anasayfa Normal Manşet Altı - Max Genişlik: 320px</option>
                                                            <option value="m7">Mobil Anasayfa Yazarlar Altı - Max Genişlik: 320px</option>
                                                            <option value="m8">Mobil Anasayfa Diğer Haberler Altı - Max Genişlik: 320px</option>
                                                            <option value="m9">Mobil Anasayfa Galeriler Altı - Max Genişlik: 320px</option>
                                                            <option value="m10">Mobil Anasayfa Videolar Altı - Max Genişlik: 320px</option>
                                                            <option value="m11">Mobil Anasayfa Çok Okunanlar Altı - Max Genişlik: 320px</option>
                                                            <option value="m12">Mobil Anasayfa Son Eklenenler Altı - Max Genişlik: 320px</option>
                                                            <option value="m13">Mobil Haber Detay Resim Üstü - Max Genişlik: 320px</option>
                                                            <option value="m14">Mobil Haber Detay Resim Altı - Max Genişlik: 320px</option>
                                                            <option value="m15">Mobil Haber Detay Özet Altı - Max Genişlik: 320px</option>
                                                            <option value="m16">Mobil Haber Detay Altı - Max Genişlik: 320px</option>
                                                            <option value="m17">Mobil Makale Detay Üstü - Max Genişlik: 320px</option>
                                                            <option value="m18">Mobil Makale Detay Altı - Max Genişlik: 320px</option>
                                                            <option value="m19">Mobil Galeri En Üst - Max Genişlik: 320px</option>
                                                            <option value="m20">Mobil Galeri En Alt - Max Genişlik: 320px</option>
                                                            <option value="m21">Mobil Galeri Detay Resim Altı - Max Genişlik: 320px</option>
                                                            <option value="m22">Mobil Video En Üst - Max Genişlik: 320px</option>
                                                            <option value="m23">Mobil Video En Alt - Max Genişlik: 320px</option>
                                                            <option value="m24">Mobil Video Detay Video Altı - Max Genişlik: 320px</option>
                                                            <option value="m25">Mobil Video Detay Açıklama Altı - Max Genişlik: 320px</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                                <div class="col-md-5">
                                                    <select id="kategori" name="kategori" class="form-control">
                                                        <option value="0" selected>Tüm Kategoriler</option>
                                                        @foreach($kategoriler as $kategori)
                                                            <option value="{{$kategori->id}}">{{$kategori->baslik}}</option>
                                                            @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </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" placeholder="Reklam Başlığı" name="baslik" required>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control" for="link">Reklam Linki:</label>
                                        <div class="col-md-9">
                                            <input type="url" id="link" class="form-control" placeholder="Örn: http://www.site.com" name="link">
                                            <small class="text-muted">Bu alan sadece resim reklamlarda yönlendirilmek üzere kullanılmaktadır.</small>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control pt-1">Reklam 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="tip" id="tip1" value="1" checked>
                                                <label class="custom-control-label" for="tip1">Resim Reklam</label>
                                            </div>
                                            <div class="d-inline-block custom-control custom-radio mr-1">
                                                <input type="radio" class="custom-control-input" name="tip" value="2" id="tip2">
                                                <label class="custom-control-label" for="tip2">Kod Reklam</label>
                                            </div>
                                            <div class="d-inline-block custom-control custom-radio mr-1">
                                                <input type="radio" class="custom-control-input" name="tip" value="3" id="tip3">
                                                <label class="custom-control-label" for="tip3">Flaş Reklam</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control">Reklam Boyutu:</label>
                                        <div class="col-md-4">
                                            <div class="input-group">
                                                <input name="genislik" type="number" class="form-control" id="genislik" placeholder="Genişlik">
                                                <span class="input-group-addon">/</span>
                                                <input name="yukseklik" type="number" class="form-control" id="yukseklik" placeholder="Yükseklik">
                                            </div>
                                            <small class="text-muted">Değerler piksel formatında olmalıdır!</small>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control">Reklam Görseli:</label>
                                        <div class="col-md-9">
                                            <input type="file" id="resim" name="resim" class="dropify" accept="image/*,.swf">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control" for="kod">Reklam Kodu:</label>
                                        <div class="col-md-9">
                                            <textarea id="metin" rows="5" class="form-control" name="metin" placeholder="Reklam kodunuzu buraya yapıştırın."></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 label-control" for="bitis">Bitiş Tarihi:</label>
                                        <div class="col-md-5">
                                            <div class='input-group'>
                                                <input id="bitis" name="bitis" type='text' class="form-control singledate" autocomplete="off" />
                                                <div class="input-group-append">
                            <span class="input-group-text">
                              <span class="la la-calendar"></span>
                            </span>
                                                </div>
                                            </div>
                                            <small class="text-muted">Reklam bitiş tarihini seçin. Eğer sınırsız süre ise boş bırakınız.</small>
                                        </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" name="durum" class="switchery" data-size="sm" checked/>
                                            <label for="donusum" class="mb-0 mr-1 ml-3">Dönüşümlü</label>
                                            <input type="checkbox" id="donusumlu" name="donusumlu" class="switchery" data-size="sm" />
                                            <small class="text-muted d-block mt-1">Dönüşümlü özelliği aktif olan reklamlar her sayfa yenilendiğinde bulunduğu bölgede farklı reklam gösterir</small>
                                        </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/forms/toggle/switchery.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/backend/app-assets/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}"></script>
    <script src="{{asset('assets/backend/app-assets/vendors/js/pickers/daterange/daterangepicker.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/select/select2.full.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/backend/app-assets/vendors/js/forms/select/tr.js')}}" type="text/javascript"></script>
    <script>
        // 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' });
            }
        }

        $('.singledate').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                timePicker: true,
                timePickerIncrement: 10,
                autoApply : true,
                autoUpdateInput: false,
                locale: {
                    format: 'DD-MM-YYYY HH:mm',
                    firstDay:1,
                    separator: " - ",
                    applyLabel: "Onayla",
                    cancelLabel: "İptal",
                    daysOfWeek: ["Paz", "Pzt", "Sal", "Çar", "Per", "Cum", "Cmt"],
                    monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos","Eylül","Ekim","Kasım","Aralık"]
                },
                timePicker24Hour: true
            },
            function(start_date) {
                this.element.val(start_date.format('DD-MM-YYYY HH:mm'));
            });

        $('.dropify').dropify({
            messages: {
                'default': 'Reklam dosyasını buraya sürükleyin veya tıklayıp yükleyin.',
                'replace': 'Reklam dosyasını değiştirmek için buraya sürükleyin veya tıklayıp yükleyin.',
                'remove':  'Sil',
                'error':   'Hata, lütfen tekrar deneyin!'
            }
        });
        $(".select2").select2({
            placeholder:"Reklam Konumu Seçiniz"
        });
    </script>
@endpush

@push("customCss")
    <link rel="stylesheet" type="text/css" href="{{asset('assets/backend/app-assets/vendors/css/forms/toggle/switchery.min.css')}}">
    <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/pickers/daterange/daterangepicker.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/backend/app-assets/vendors/css/forms/selects/select2.min.css')}}">
    <style>
        span.select2-selection.select2-selection--single, .select2-search__field {
            outline: none;
        }
        .select2-results__option {
            padding: 3px;
        }
    </style>
@endpush