@extends('admin.app')
@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">Ürünler</h2>
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Gösterge Paneli</a>
                                    </li>
                                    <li class="breadcrumb-item active">Ürünler
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <section id="multiple-column-form">
                    <div class="row match-height">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Filtre</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <form id="filter-form" class="form" action="{{route('trendyol-match-products')}}">
                                            <div class="form-body">
                                                <div class="row">
                                                    <div class="col-md-2 col-12">
                                                        <div class="form-label-group">
                                                            <input type="text" class="form-control"
                                                                   placeholder="Ürün Adı"
                                                                   value="{{isset($_GET['filter']['name']) ? $_GET['filter']['name'] : ''}}"
                                                                   name="filter[name]">
                                                            <label for="first-name-column">Ürün Adı</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 col-12">
                                                        <div class="form-label-group">
                                                            <input type="text" class="form-control"
                                                                   placeholder="Stok Kodu & Barkod"
                                                                   value="{{isset($_GET['filter']['stock_code']) ? $_GET['filter']['stock_code'] : ''}}"
                                                                   name="filter[stock_code]">
                                                            <label for="first-name-column">Stok Kodu & Barkod</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 col-12">
                                                        <div class="form-group">
                                                            <select class="select2 form-control"
                                                                    name="filter[category]">
                                                                <option value="">Kategori</option>
                                                                @foreach($categories as $category)
                                                                    <option @if(isset($_GET['filter']['category']) && $category->id == $_GET['filter']['category']) selected @endif
                                                                    value="{{$category->id}}">{{$category->name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1 col-12">
                                                        <div class="form-group">
                                                            <select class="select2 form-control" name="filter[brand]">
                                                                <option value="">Marka</option>
                                                                @foreach($brands as $brand)
                                                                    <option value="{{$brand->id}}"
                                                                            @if(isset($_GET['filter']['brand']) && $_GET['filter']['brand'] == $brand->id) selected @endif >{{$brand->brand_name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1 col-12">
                                                        <div class="form-label-group">
                                                            <select class="form-control" name="filter[status]">
                                                                <option value="">Durum</option>
                                                                <option value="active"
                                                                        @if(isset($_GET['filter']['status']) && $_GET['filter']['status'] == 'active') selected @endif >
                                                                    Aktif
                                                                </option>
                                                                <option value="passive"
                                                                        @if(isset($_GET['filter']['status']) && $_GET['filter']['status'] == 'passive') selected @endif >
                                                                    Pasif
                                                                </option>
                                                                <option value="template"
                                                                        @if(isset($_GET['filter']['status']) && $_GET['filter']['status'] == 'template') selected @endif >
                                                                    Taslak
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 col-12">
                                                        <div class="form-label-group">
                                                            <select class="form-control" name="filter[stock]">
                                                                <option value="">Stok</option>
                                                                <option value=">"
                                                                        @if(isset($_GET['filter']['stock']) && $_GET['filter']['stock'] == '>') selected @endif >
                                                                    Stokta Var
                                                                </option>
                                                                <option value="<="
                                                                        @if(isset($_GET['filter']['stock']) && $_GET['filter']['stock'] == '=<') selected @endif >
                                                                    Stokta Yok
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 col-12">
                                                        <div class="form-label-group">
                                                            <select class="form-control" name="filter[pagination]">
                                                                <option value="">Listeleme Sayısı</option>
                                                                <option value="20"
                                                                        @if(isset($_GET['filter']['pagination']) && $_GET['filter']['pagination'] == 20) selected @endif >
                                                                    20
                                                                </option>
                                                                <option value="100"
                                                                        @if(isset($_GET['filter']['pagination']) && $_GET['filter']['pagination'] == 100) selected @endif >
                                                                    100
                                                                </option>
                                                                <option value="500"
                                                                        @if(isset($_GET['filter']['pagination']) && $_GET['filter']['pagination'] == 500) selected @endif >
                                                                    500
                                                                </option>
                                                                <option value="1000"
                                                                        @if(isset($_GET['filter']['pagination']) && $_GET['filter']['pagination'] == 1000) selected @endif >
                                                                    1000
                                                                </option>
                                                            </select>
                                                        </div>
                                                        <input type="hidden" name="sort" id="input-sort" value="">
                                                    </div>
                                                </div>
                                                <div class="row pull-right">
                                                    <div class="btn-group">
                                                        <button type="submit" class="btn btn-md bg-gradient-info mb-1">
                                                            Gönder
                                                        </button>
                                                        <button type="button"
                                                                onclick="window.location.replace('{{route('admin-products')}}')"
                                                                class="btn btn-md bg-gradient-warning mb-1">Sıfırla
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Data list view starts -->
                <section id="data-list-view" class="data-list-view-header">

                    <div class="card">

                        <div class="card-content">
                            <div class="card-body">

                                <!-- Table with outer spacing -->
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox" class="select-product" id="select-all"></th>
                                            <th>Resim</th>
                                            <th>Ürün Adı</th>
                                            <th>Fiyatı</th>
                                            <th>Barkod</th>
                                            <th>Durum</th>
                                            <th>Güncelleme</th>

                                        </tr>
                                        </thead>
                                        <tbody>
                                        <form action="javascript:;" id="selected-products">
                                            @foreach($products as $product)
                                                <tr id="product-td-{{$product->id}}">
                                                    <td>
                                                        <input type="checkbox" class="select-product"
                                                               name="product_selected[]"
                                                               value="{{$product->id}}">
                                                    </td>
                                                    <th scope="row">
                                                        <div class="avatar mr-1 avatar-xl">
                                                            <img
                                                                src="@if(isset($product->images) && $product->images->count()) {{asset($product->images[0]->image_dest)}} @else {{asset('/app-assets/images/backgrounds/chat-bg-2.png')}} @endif"
                                                                alt="avtar img holder">
                                                        </div>
                                                    </th>
                                                    <td>
                                                     <span class="name-live-edit" data-type="name"
                                                           id="name-span-{{$product->id}}"
                                                           data-id="{{$product->id}}">{{$product->name}}</span>
                                                        <input
                                                            class="form-control edit-name-input" type="hidden"
                                                            value="{{$product->name}}" name="name"
                                                            id="name-{{$product->id}}"
                                                            data-id="{{$product->id}}">

                                                    </td>

                                                    <td>
                                                     <span class="trendyol_price-live-edit" data-type="name"
                                                           id="trendyol_price-span-{{$product->id}}"
                                                           data-id="{{$product->id}}">{{$product->trendyol_price}}</span>
                                                        <input
                                                                class="form-control edit-trendyol_price-input" type="hidden"
                                                                value="{{$product->trendyol_price}}" name="trendyol_price"
                                                                id="name-{{$product->id}}"
                                                                data-id="{{$product->id}}">

                                                    </td>
                                                    <td>{{$product->ean}}</td>

                                                    <td>@if($product->trendyol_state)<label
                                                            class="btn btn-sm bg-gradient-success status-label"
                                                            id="trendyol_state-label-{{$product->id}}"
                                                            data-id="{{$product->id}}"
                                                            data-change="0"
                                                            data-column="trendyol_state">Açık</label>@else <label
                                                            class="btn btn-sm bg-gradient-danger status-label"
                                                            data-column="trendyol_state"
                                                            id="trendyol_state-label-{{$product->id}}"
                                                            data-id="{{$product->id}}"
                                                            data-change="1">Kapalı</label> @endif
                                                    </td>
                                                    <td>@if($product->use_diff)<label
                                                            class="btn btn-sm bg-gradient-warning status-label"
                                                            data-column="use_diff"
                                                            id="use_diff-label-{{$product->id}}"
                                                            data-id="{{$product->id}}"
                                                            data-change="0">Manuel</label>@else <label
                                                            class="btn btn-sm bg-gradient-success status-label"
                                                            data-column="use_diff"
                                                            id="use_diff-label-{{$product->id}}"
                                                            data-id="{{$product->id}}"
                                                            data-change="1">Otomatik</label> @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </form>
                                        </tbody>
                                    </table>
                                    <div style="text-align: center">
                                        {{$products->appends(request()->query())->render()}}
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </section>
                <!-- Data list view end -->

            </div>
        </div>
    </div>



@endsection
@section('css')

    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/plugins/extensions/toastr.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/vendors.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/extensions/toastr.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/forms/select/select2.min.css')}}">
@endsection
@section('js')

    <!-- BEGIN: Page Vendor JS-->
    <script src="{{asset('app-assets/vendors/js/ui/jquery.sticky.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/extensions/toastr.min.js')}}"></script>
    <!-- END: Page Vendor JS-->
    <!-- BEGIN: Page JS-->
    <script src="{{asset('app-assets/js/scripts/extensions/toastr.js')}}"></script>
    <!-- END: Page JS-->

    <!-- BEGIN: Page JS-->
    <script src="{{asset('app-assets/vendors/js/forms/select/select2.full.min.js')}}"></script>
    <script src="{{asset('app-assets/js/scripts/forms/select/form-select2.js')}}"></script>
    <!-- END: Page JS-->
    <script>

        $('.status-label').on('click', function () {
            $.get('/trendyol/ajax/update-product/' + $(this).attr('data-id') + '/' + $(this).data('column') + '/' + $(this).attr('data-change'), function (response) {
                if (response.status == 'success') {
                    $('#'+response.column+'-label-' + response.product_id).removeClass('bg-gradient-' + response.old_type);
                    $('#'+response.column+'-label-' + response.product_id).text(response.text_val);
                    $('#'+response.column+'-label-' + response.product_id).toggleClass('bg-gradient-' + response.type);
                    $('#'+response.column+'-label-' + response.product_id).attr('data-change', response.change);

                }
            });
        });
        $('td span').on('click', function () {

            $('#' + $(this).attr('data-type') + '-' + $(this).attr('data-id')).attr('type', 'text');
            $('#' + $(this).attr('data-type') + '-span-' + $(this).attr('data-id')).hide()
        });
        $('td input').on('keypress', function (e) {
            if (e.which === 13) {
                $.get('/trendyol/ajax/update-product/' + $(this).attr('data-id') + '/' + $(this).attr('name') + '/' + $(this).val(), function (response) {
                    if (response.status == 'success') {
                        $.each(response.data, function (index, value) {
                            $('#' + index + '-' + response.product_id).val(value);
                            $('#' + index + '-span-' + response.product_id).text(value);
                        });
                    }
                });

                $('#' + $(this).attr('name') + '-' + $(this).attr('data-id')).attr('type', 'hidden');
                $('#' + $(this).attr('name') + '-span-' + $(this).attr('data-id')).show();
            }
        });
    </script>
    <script>
        $(function () {
            $('.del-product').click(function (e) {
                e.preventDefault();
                if (window.confirm("Silmek istediğinize emin misinz?")) {
                    location.href = this.href;
                }
            });
        });
        $('#select-all').on('click', function () {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });
        $('.select-product').on('change', function () {
            $('.selecteds-input').val($('#selected-products').serialize());
        })
    </script>
@endsection