@extends('admin.index')
@section('title')
    Ürün Detay -
@endsection
@section('header')
    <style>
        .table tr td {
            vertical-align: middle;
        }

        .height200px {
            height: 142px;
        }
    </style>
@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="content">

                <form action="" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row">
                        <div class="col-md-8 col-sm-7 col-12">
                            <h4>Ürün Bilgileri</h4>
                            <hr>

                            <ul class="nav nav-tabs" id="languages_list" role="tablist">
                                @foreach (languages() as $item)
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="{{ $item->lang_code }}-tab" data-toggle="tab"
                                            href="#{{ $item->lang_code }}" role="tab"
                                            aria-controls="{{ $item->lang_code }}"
                                            aria-selected="true">{{ $item->lang_name }} <span class="badge badge-danger"
                                                style="display: none">1</span></a>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="tab-content" id="languages_content">
                                @foreach (languages() as $item)
                                    <div class="tab-pane fade" id="{{ $item->lang_code }}" role="tabpanel"
                                        aria-labelledby="{{ $item->lang_code }}-tab">

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="content">

                                                    <div class="form-group">
                                                        <label for="name[{{ $item->lang_code }}]">Ürün Adı</label>
                                                        <input type="text"
                                                            class="form-control required @error('name.' . $item->lang_code) is-invalid @enderror"
                                                            id="name[{{ $item->lang_code }}]"
                                                            name="name[{{ $item->lang_code }}]"
                                                            placeholder="Örn: Yatak Odası"
                                                            value="{{ $product->products_language->where('language_id', $item->id)->first()->name ?? old('name.' . $item->lang_code) }}"
                                                            data-lang-id="{{ $item->id }}">
                                                        @if ($errors->has('name.' . $item->lang_code))
                                                            <div class="invalid-feedback">
                                                                <ul>
                                                                    @foreach ($errors->messages('name.' . $item->lang_code) as $error)
                                                                        @foreach ($error as $err)
                                                                            <li>{{ $err }}</li>
                                                                        @endforeach
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        @endif
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="description[{{ $item->lang_code }}]">Ürün
                                                            Açıklaması</label>
                                                        <textarea type="text"
                                                            class="textarea_ckeditor required @error('description.' . $item->lang_code) is-invalid @enderror"
                                                            id="ckeditor_{{ $item->lang_code }}" name="description[{{ $item->lang_code }}]"
                                                            data-lang-id="{{ $item->id }}">{{ $product->products_language->where('language_id', $item->id)->first()->description ?? old('description.' . $item->lang_code) }}</textarea>
                                                        @if ($errors->has('description.' . $item->lang_code))
                                                            <div class="invalid-feedback">
                                                                <ul>
                                                                    @foreach ($errors->messages('description.' . $item->lang_code) as $error)
                                                                        @foreach ($error as $err)
                                                                            <li>{{ $err }}</li>
                                                                        @endforeach
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        @endif
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="ckeditor_second_[{{ $item->lang_code }}]">Kargo
                                                            Bilgisi</label>
                                                        <textarea type="text"
                                                            class="textarea_ckeditor required @error('cargo_info.' . $item->lang_code) is-invalid @enderror"
                                                            id="ckeditor_second_{{ $item->lang_code }}" name="cargo_info[{{ $item->lang_code }}]"
                                                            data-lang-id="{{ $item->id }}">{{ $product->products_language->where('language_id', $item->id)->first()->cargo_info ?? old('cargo_info.' . $item->lang_code) }}</textarea>
                                                        @if ($errors->has('cargo_info.' . $item->lang_code))
                                                            <div class="invalid-feedback">
                                                                <ul>
                                                                    @foreach ($errors->messages('cargo_info.' . $item->lang_code) as $error)
                                                                        @foreach ($error as $err)
                                                                            <li>{{ $err }}</li>
                                                                        @endforeach
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        @endif
                                                    </div>

                                                </div><!-- content -->
                                            </div>
                                        </div><!-- row -->

                                    </div><!-- content lang -->
                                @endforeach
                            </div><!-- tab-content -->

                        </div>
                        <div class="col-md-4 col-sm-5 col-12">
                            <h4>Ürün Ayarları</h4>
                            <hr>

                            <div class="card card-body">
                                <div class="form-group w-100">
                                    <label for="price">Vergiler Dahil Ürün Fiyatı - {{ money($product->price) }}</label>
                                    <div class="input-group">
                                        <select class="form-control form-select" name="currency_id" id="currency_id"
                                            style="max-width: 70px;">
                                            @foreach (get_currencies() as $item)
                                                <option value="{{ $item->id }}"
                                                    @if ($item->id == $product->currency_id) selected @endif>{{ $item->code }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <input type="number" class="form-control @error('price') is-invalid @enderror"
                                            name="price" value="{{ old('price') ?? ($product->price ?? '0.00') }}"
                                            step="0.01">
                                    </div>
                                    <small>Ondalıklı sayıyı nokta ile belirtiniz. (Örn: 1500.90)</small>
                                </div>

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="stock">Stok</label>
                                            <input type="number" class="form-control @error('stock') is-invalid @enderror"
                                                name="stock" value="{{ old('stock') ?? ($product->stock ?? '0') }}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="code">Ürün Kodu</label>
                                            <input type="text" class="form-control @error('code') is-invalid @enderror"
                                                name="code" value="{{ old('code') ?? ($product->code ?? '') }}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="sku">SKU</label>
                                            <input type="text" class="form-control @error('sku') is-invalid @enderror"
                                                name="sku" value="{{ old('sku') ?? ($product->sku ?? '') }}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="sku">Vergi (KDV Oranı)</label>
                                            <input type="number" class="form-control @error('vat') is-invalid @enderror"
                                                name="vat" value="{{ old('vat') ?? ($product->vat ?? '') }}"
                                                max="100">
                                            <small>Yüzdelik oran yazınız.</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="catalog_no">Katalog Sırası</label>
                                    <input type="number" class="form-control @error('catalog_no') is-invalid @enderror"
                                        name="catalog_no" value="{{ old('catalog_no') ?? ($product->catalog_no ?? '') }}"
                                        max="100">
                                    <small>En Son: {{ $last_catalog_no }}</small>
                                </div>

                                <div class="form-group">
                                    <label for="category_id">Kategori</label>
                                    <select class="form-control select2" name="category_id" required>
                                        <option selected disabled value="">Seçiniz...</option>
                                        @if($categories)
                                        @foreach ($categories as $item)
                                            <option value="{{ $item->id }}" @if ($item->id == $product->category_id) selected @endif>

                                                @php
                                                    $topCategories = Site::topCategoryList($item->id);
                                                @endphp
                                                @if ($topCategories != null)
                                                    @foreach ($topCategories as $subCategory)
                                                        <span>{{ $subCategory->content->name }}</span> ->
                                                    @endforeach
                                                @endif

                                                {{ $item->content->name }}
                                            </option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="images">Ürün Fotoğrafları</label>
                                    <input type="file" class="form-control @error('images') is-invalid @enderror"
                                        name="images[]" id="images" multiple>
                                </div>
                            </div>

                            <br>

                            <button class="btn btn-primary btn-sm w-100 mb-3" type="button" data-bs-toggle="offcanvas"
                                data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
                                Özellik Ayarları
                            </button>

                            <!-- Button trigger modal -->
                            <button type="button" class="btn btn-dark w-100" data-bs-toggle="modal"
                                data-bs-target="#productImagesList">
                                Ürün Fotoğraflarını Gör
                            </button>

                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-save">Kaydet</button>
                </form>

            </div>
        </div>
    </div><!-- row -->

    <div class="row mt-5">
        <div class="col-12">
            <div class="content">
                <div class="card card-body">

                    <table class="table table-striped" id="table1" data-locale="tr-TR" data-toolbar=".toolbar"
                        data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true"
                        data-pagination="true" data-resizable="true" data-sortable="true"
                        data-show-search-clear-button="true" data-side-pagination="server"
                        data-url="{{ secure_url('admin/product-variant/list/ajax/' . $product->id) }}">
                        <thead>
                            <tr>
                                <th data-sortable="true" data-field="price">Fiyat</th>
                                <th data-sortable="true" data-field="stock">Stok</th>
                                <th data-sortable="true" data-field="images" data-formatter="imagesFormatter">Fotoğraflar
                                </th>
                                <th data-sortable="true" data-field="options" data-formatter="optionsFormatter">
                                    Seçenekler</th>
                                <th data-field="id" data-formatter="buttonFormatterVariant">Düzenle/Sil</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    @include('admin.components.product.product-images-modal')
    @include('admin.components.product.product-variant-offcanvas')
@endsection
@section('footer')
    <script src="{{ asset('js/jquery-ui.js') }}"></script>

    <script>
        $(document).ready(function() {
            scripts();
        });
    </script>

    <script>
        $(function() {
            var ids = [];
            $("#sortable").sortable({
                change: function(event, ui) {
                    ui.placeholder.css({
                        visibility: 'visible',
                        border: '1px solid yellow',
                        height: "100px",
                        backgroundColor: "#aaa"
                    });
                },
                update: function(event, ui) {
                    $(".preload").show();
                    var tr_length = $("#sortable tr").length;
                    for (let i = 1; i <= tr_length; i++) {
                        $("#sortable tr:nth-child(" + i + ") td:first-child span").text(i);
                        var id = $("#sortable tr:nth-child(" + i + ")").data('id');
                        ids[i] = id;
                    }

                    // Ajax Post
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.post("{{ url('admin/products/images/position/update') }}", {
                        ids: ids
                    }).done(function(data, status) {
                        if (status == "success") {

                        } else {
                            alert("Error");
                        }
                        $(".preload").hide();
                    });
                }
            });
            $("#sortable").disableSelection();
        });
    </script>


    {{-- Özellik Ayarları --}}
    <script>
        var selectedOptions = [];

        function optionsSelectTrigger() {
            $(".option_value_form_group").addClass('d-none');

            selectedOptions = $("#options").select2('data');
            selectedOptions.forEach(element => {
                var optionValueSelected = $("#option_value" + element.id);
                optionValueSelected.removeClass('d-none');
                $(".select2", optionValueSelected).select2();
                if (optionValueSelected.hasClass('d-none')) {
                    optionValueSelected.val(null).trigger('change');
                }
            });
        }
    </script>
    <script>
        $("#options").change(function(e) {
            optionsSelectTrigger();
        });
    </script>
    <script>
        $(document).ready(function() {
            // this is the id of the form
            $("#addProductVariantForm").submit(function(e) {
                e.preventDefault(); // avoid to execute the actual submit of the form.

                var form = $(this);
                // form input product_variant_id is null

                const isUpdate = form.find('input[name="product_variant_id"]').val() != "";

                var actionUrl = isUpdate ?
                    form.attr('update-action') :
                    form.attr('action');

                $.ajax({
                    type: "POST",
                    url: actionUrl,
                    data: form.serialize(), // serializes the form's elements.
                    success: function(data) {},
                    complete: function(data, result) {
                        if (typeof data.responseJSON.message != "undefined") {
                            toastr.error(data.responseJSON.message)
                        } else if (data.responseJSON == 1) {
                            toastr.success('İşlem Başarılı');
                            $("#addProductVariantForm").trigger('reset');
                            $("#options").val(" ");
                            $("#options").trigger('change.select2');
                            optionsSelectTrigger();
                        }

                        if (isUpdate) {
                            $("#staticBackdrop").offcanvas('hide');
                            $("#table1").bootstrapTable('refresh');
                        }

                        button = $("#addProductVariantForm button[type='submit']");
                        button.html("Kaydet");
                        button.prop('disabled', false);
                        button.css({
                            "opacity": "1"
                        });
                    }
                });
            });
        })
    </script>
    <script>
        function optionsFormatter(value, row) {
            var html = "";
            var options = row.options;
            // console.log(options);
            options.forEach(element => {
                console.log(element);
                html += '<span class="badge bg-primary">' + element.option.content.name + ': ' + element
                    .option_value.content.name + '</span> ';
            });
            return html;
        }
    </script>
    <script>
        function buttonFormatter(id, row) {
            var url = "{{ url('admin/products/detail') }}" + "/" + id;

            if (row.showroom == 0) {
                return '<div class="btn-group btn-block" role="group" aria-label="editremove"><button type="button" class="btn btn-sm btn-outline-dark" onclick="showroom(this)" data-id="' +
                    id + '"> <i class="far fa-eye-slash"></i> </button> <a href="' + url +
                    '" class="btn btn-sm btn-primary"> <i class="far fa-edit"></i> </a> <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item" data-id="' +
                    id + '" data-item-type="product"> <i class="fas fa-trash-alt"></i> </button> </div>';
            }
            return '<div class="btn-group btn-block" role="group" aria-label="editremove"><button type="button" class="btn btn-sm btn-dark" onclick="showroom(this)" data-id="' +
                id + '"> <i class="far fa-eye"></i> </button> <a href="' + url +
                '" class="btn btn-sm btn-primary"> <i class="far fa-edit"></i> </a> <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item" data-id="' +
                id + '" data-item-type="product"> <i class="fas fa-trash-alt"></i> </button> </div>';
        }
    </script>
    <script>
        function imagesFormatter(value, row) {
            var html = "";
            var images = row.images;
            if (images.length == 0) {
                return '<span>Resim Yok</span>';
            }
            const first_image = images[0];
            html += '<img src="/uploads/product_images/' + row.product_id + '/small/' + first_image.image.name +
                '" class=" rounded mr-1" height="50" alt="">';
                if(images.length > 1){
                    html += '<span class="badge bg-primary">+' + (images.length - 1) + '</span>';
                }
            return html;
        }
    </script>
    <script>
        function buttonFormatterVariant(id, row) {
            // <button class="btn btn-primary btn-sm w-100 mb-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
            //                     Özellik Ayarları
            //                 </button>
            const edit_button = '<button data-row=\'' + JSON.stringify(row) +
                '\' data-item-type="product-variant-edit" type="button" class="btn btn-sm btn-primary" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop" data-id="' +
                id + '"> <i class="far fa-edit"></i> </button>';
            const delete_button = '<button type="button" class="btn btn-sm btn-outline-danger btn-remove-item"  data-item-type="product-variant" data-id="' + id + '"> <i class="fas fa-trash-alt"></i> </button>';

            return `<div class="btn-group btn-block" role="group" aria-label="editremove">
                    ${edit_button}
                    ${delete_button}
                </div>`;
        }
    </script>
    <script>
        $(document).on('click', '[data-item-type="product-variant-edit"]', function() {
            const id = $(this).data('id');
            let row = $(this).data('row');
            row = JSON.parse(JSON.stringify(row));

            $("[name='variant_price']").val(row.price);
            $("[name='variant_stock']").val(row.stock);

            $("#options").val(row.options.map((item) => item.product_option_id));
            $("#options").trigger('change.select2');
            $("[name='product_variant_id']").val(id);

            //images
            $("#addProductVariantForm [name='image_ids[]']").prop('checked', false);
            console.log({
                row
            });
            if (row.images.length > 0) {
                row.images.forEach((item, index) => {
                    //check if image exists
                    const checkbox = $("#addProductVariantForm #image_checkbox_" + item.image.id);
                    checkbox.prop('checked', true);
                });
            }

            optionsSelectTrigger();
            for (let i = 0; i < row.options.length; i++) {
                const option = row.options[i];
                const option_value = option.option_value_id;

                $("#option_values" + option.product_option_id).val(option_value);
                $("#option_values" + option.product_option_id).trigger('change.select2');
            }
        });
    </script>
    <script>
        $(document).on('#staticBackdrop hidden.bs.offcanvas', function() {
            $("input[name='product_variant_id']").val(null);
        });
    </script>
@endsection