@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="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>Kategori</th>
                                            <th>Trendyol Kategori</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($categories as $category)
                                            <tr id="product-td-{{$category->id}}">
                                                <td id="category-p-{{$category->id}}" class="categories-td" data-toggle="modal" data-target="#category-modal-{{$category->id}}">
                                                    {{$category->name}}
                                                </td>
                                                <td>
                                                    <select id="gm-{{$category->id}}"  class="select2 form-control google_merchant_id-live-edit" data-id="{{$category->id}}">
                                                        <option>Seçiniz</option>
                                                        @foreach($trendyolCategories as $gc)
                                                            <option id="gmo-{{$category->id}}-{{$gc->id}}" @if(!empty($matched[$category->id]) && $matched[$category->id] == $gc->id) selected @endif value="{{$gc->id}}">{{$gc->name}}</option>
                                                        @endforeach
                                                    </select>

                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                    <div style="text-align: center">
                                        {{$categories->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('/panel/ajax/update-product/' + $(this).attr('data-id') + '/gm_status/' + $(this).attr('data-change'), function (response) {
                if (response.status == 'success') {
                    $('#status-label-' + response.product_id).removeClass('bg-gradient-success');
                    $('#status-label-' + response.product_id).removeClass('bg-gradient-danger');
                    if (response.gm_status == 'active') {
                        $('#status-label-' + response.product_id).text('Açık');
                        $('#status-label-' + response.product_id).toggleClass('bg-gradient-success');
                        $('#status-label-' + response.product_id).attr('data-change', 'passive');
                    } else {
                        $('#status-label-' + response.product_id).text('Kapalı');
                        $('#status-label-' + response.product_id).toggleClass('bg-gradient-danger');
                        $('#status-label-' + response.product_id).attr('data-change', 'active');
                    }
                }
            });
        });
        $('.google_merchant_id-live-edit').on('change',function () {
            $.get('/trendyol/ajax/update-category/' + $(this).attr('data-id') + '/' + $(this).children('option:selected').val(), function (response) {
                if (response.status == 'success') {
                    $('#gm-'+response.product_id).children('option:selected').removeAttr('selected');
                    $('#gmo-'+response.product_id+'-'+response.google_merchant_id).attr('selected','selected');
                }
            });
        });
    </script>

@endsection