@extends('admin.layouts.app')
@section('content')


<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css" integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw==" crossorigin="anonymous" />
<link href="/assets/node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" />
<script src="/assets/node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<style>
    .bootstrap-tagsinput {
        width: 100% !important;
        height: 38px !important;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #e9ecef;
        border-radius: 0.25rem;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .bootstrap-tagsinput input {
        margin-top: 3px !important;
    }

    .label-info {
        margin-top: 6px !important;
    }
</style>

<div class="row page-titles">
    <div class="col-md-12">
        <h4 class="text-white">YSİİD</h4>
    </div>
    <div class="col-md-6">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">AnaÜrün</a></li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Ürün Listesi</a></li>
            <li class="breadcrumb-item active">Yeni Ürün Oluştur</li>
        </ol>
    </div>
    <div class="col-md-6 text-right">
        <form class="app-search d-none d-md-block d-lg-block">
            <input type="text" class="form-control" placeholder="Search &amp; enter">
        </form>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Yeni Ürün Oluştur</h4>
                <h6 class="card-subtitle">Yeni oluşturulan Ürünleri menü üzerine eklemek için Panel üzerinden menü
                    düzenleme alanından ekleyebilirsiniz. </h6>
                <hr class="hr">



                <form id="prForm" method="POST" action="{{ route('product.newproduct_save') }}" enctype="multipart/form-data">
                    @csrf
                    <button type=submit onclick="return false;" style="display:none;"></button>
                    <div class="row mt-4">
                        <div class="col-6">
                            <div class="form-group">
                                <label for="title" class="form-label">Ürün Başlığı</label>
                                <input type="text" onkeyup="slugGenerator(this)" class="form-control" name="product_title" id="title" placeholder="Bir başlık giriniz..." required>
                            </div>

                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label for="title" class="form-label">Ürün Başlığı İngilizce</label>
                                <input type="text" class="form-control" name="product_title_en" id="title_en" placeholder="İngilizce başlık giriniz..." required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group seo_input">
                                <label for="title" class="form-label">Seo Uyumlu Adres Alanı</label>
                                <input type="text" onkeyup="slugGenerator(this)" class="form-control" name="product_title_seo" id="slug" placeholder="Bu alana girilen değer türkçe karakter boşluk ve - dışında sembol içermemelidir." required>
                                <span style="color:red;font-weight:700;display:block;display:none" class="">Bu url kullanımda, bu url kullanılamaz. Bu alanı değiştirmeniz gerekmektedir.</span>
                                <small id="emailHelp" class="form-text text-muted">Buraya girilen adres
                                    https://netelsan.com/urun/[XXX] alanını temsil etmektedir.</small>

                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label for="title" class="form-label">Ürün Kategori Alanı</label>
                                <select name="cat_id" class="form-control" required>
                                    <option value="0" selected disabled>Kategorisiz</option>
                                    <br />
<b>Warning</b>:  Undefined variable $category in <b>/home/ysiidorg/public_html/resources/views/admin/pages/newProduct.blade.php</b> on line <b>110</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/ysiidorg/public_html/resources/views/admin/pages/newProduct.blade.php</b> on line <b>7</b><br />
                                </select>
                                <small id="emailHelp" class="form-text text-muted">Ürün kategorisi seçtiğinizde
                                    içerisinde yer alan kategoriler birlikte listelenecektir.</small>

                            </div>
                        </div>

                    </div>

                    <div class="row mt-4">
                        <div class="col-6">
                            <label for="title" class="form-label">Breadcrumb Fotoğrafı</label>
                            <input type="file" name="BreadcrumbBG" class="dropify" data-allowed-file-extensions="png jpg jpeg">
                        </div>

                        <div class="col-6">
                            <label for="title" class="form-label">Ürün Fotoğrafı</label>
                            <input type="file" name="product_images" class="dropify" data-allowed-file-extensions="png jpg jpeg" required>
                        </div>
                    </div>



                    <div class="row mt-4">
                        <div class="col-6">
                            <div class="form-group">
                                <label for="title" class="form-label">Seo Description</label>
                                <input type="text" class="form-control" maxlength="160" name="product_description" id="slug" placeholder="" required>
                                <small id="emailHelp" class="form-text text-muted">Bu alana eklemiş olduğunuz bilgiler
                                    google'ın arama sonuçlarında gözükecektir. 160 karakter ile sınırlıdır.</small>

                            </div>
                        </div>
                        <div class="col-6">
                            <div class="tags-default" style="width:100% !important;">
                                <label for="title" class="form-label">Etiket Ekleyin</label><br>
                                <input type="text" style="width:100% !important;height:40px" value="" name="product_keywords" data-role="tagsinput" placeholder="Etiket Ekleyin" class="form-control" style="display: none;" required />
                            </div>
                        </div>
                    </div>







                    <hr>


                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="title" class="form-label">Türkçe İçerik</label>
                                <textarea class="ckeditor form-control" name="content" required></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="title" class="form-label">İngilizce İçerik</label>
                                <textarea class="ckeditor form-control" name="content_en" required></textarea>
                            </div>
                        </div>
                    </div>






                    <div class="row">
                        <div class="col-12 text-right">
                            <input type="submit" value="Kaydet" title="Kaydet" class="btn btn-primary">
                        </div>
                    </div>

                </form>



            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function blockSubmit() {
        Swal.fire({
            position: 'center-center',
            type: 'error',
            title: 'Kaydetmek için slug alanını düzenlemeniz gerekmektedir.',
            showConfirmButton: false,
            timer: 3000,
            function() {
                
            }
        });
        return false;
    }

    function slugGenerator(e) {
        var text = $(e).val();
        var trMap = {
            'çÇ': 'c',
            'ğĞ': 'g',
            'şŞ': 's',
            'üÜ': 'u',
            'ıİ': 'i',
            'öÖ': 'o'
        };
        for (var key in trMap) {
            text = text.replace(new RegExp('[' + key + ']', 'g'), trMap[key]);
        }


        let seo_data = {
            "seo_data": text.replace(/[^-a-zA-Z0-9\s]+/ig, '').replace(/\s/gi, "-").replace(/[-]+/gi, "-").toLowerCase(),
            "_token": "{{ csrf_token() }}"
        }

        $.ajax({
            type: "POST",
            url: "{{route('product.ajaxSluq')}}",
            data: seo_data,
            success: function(response) {
                response = JSON.parse(response);
                if (response.status) {
                    $(".seo_input").find('input').css('border', '1px solid #e9ecef');
                    $(".seo_input").find('span').css('display', 'none');
                    $("#prForm").removeAttr('onsubmit');
                } else {
                    $(".seo_input").find('input').css('border', '1px solid red');
                    $(".seo_input").find('span').css('display', 'block');
                    $("#prForm").attr('onsubmit', 'return blockSubmit()');
                }

            }
        });



        $("#slug").val(text.replace(/[^-a-zA-Z0-9\s]+/ig, '').replace(/\s/gi, "-").replace(/[-]+/gi, "-").toLowerCase());
    }




    CKEDITOR.plugins.addExternal('BootstrapEditor', '/ckeditor/bootstrap/plugins/BootstrapEditor/plugin.js');

    CKEDITOR.replace('content', {
        filebrowserUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token()]) }}",
        filebrowserUploadMethod: 'form',
        allowedContent: true,
        extraPlugins: 'BootstrapEditor',
        apiKey: "EZAODFLT",

        removePlugins: "iframe"
    });
    CKEDITOR.replace('content_en', {
        filebrowserUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token()]) }}",
        filebrowserUploadMethod: 'form',
        allowedContent: true,
        extraPlugins: 'BootstrapEditor',
        apiKey: "EZAODFLT",

        removePlugins: "iframe"
    });



    $(document).ready(function() {
        $('.dropify').dropify({
            "messages": {
                'default': 'Bir dosyayı buraya sürükleyip bırakın veya tıklayın',
                'replace': 'Değiştirmek için sürükleyip bırakın veya tıklayın',
                'remove': 'Kaldır',
                'error': 'Hay aksi, yanlış bir şey oldu.'
            },
            "error": {
                'fileSize': 'Dosya boyutu çok büyük).',
                'minWidth': 'Görüntü genişliği çok küçük ).',
                'maxWidth': 'Görüntü genişliği çok büyük ).',
                'minHeight': 'Görüntü yüksekliği çok küçük ).',
                'maxHeight': 'Görüntü yüksekliği çok büyük ).',
                'imageFormat': 'Görüntü formatına izin verilmiyor ).'
            }
        });
        //   $('.dropify-clear').click(function(e){
        //      e.preventDefault();
        //      alert('Remove Hit');
        //   });
    });
</script>
@endsection