@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">Kategori</h2>
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/panel/gosterge-paneli">Gösterge Paneli</a>
                                </li>
                                <li class="breadcrumb-item active">Kategori
                                </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 class="buttons-group pull-right">
                                    <a href="{{route('get-category-detail',['id' => 0])}}"
                                            class="btn btn-md bg-gradient-primary mr-2 mb-2">Kategori Ekle
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form" action="/panel/kategoriler">
                                        <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="Kategori Adı"
                                                               value="{{isset($_GET['filter']['name']) ? $_GET['filter']['name'] : ''}}"
                                                               name="filter[name]">
                                                        <label for="first-name-column">Kategori Adı</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2 col-12">
                                                    <div class="form-label-group">
                                                        <select class="form-control" name="filter[status]">
                                                            <option value="">Durum</option>
                                                            <option value="active">Aktif</option>
                                                            <option value="passive">Pasif</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-2 col-12">
                                                    <div class="form-label-group">
                                                        <select class="form-control select2" name="filter[category]">
                                                            <option value="">Üst Kategori</option>
                                                            <option value="0">Ana Kategoriler</option>
                                                            @foreach($all as $a)
                                                            <option value="{{$a->id}}">{{$a->name}}</option>
                                                            @endforeach
                                                        </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">20</option>
                                                            <option value="100">100</option>
                                                            <option value="500">500</option>
                                                            <option value="1000">1000</option>
                                                        </select>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="row pull-right">
                                                <div class="btn-group">
                                                    <button type="submit" class="btn btn-md bg-gradient-info mb-1 waves-effect waves-light">Gönder</button>
                                                    <button type="button" onclick="window.location.replace('/panel/kategoriler')" class="btn btn-md bg-gradient-warning mb-1 waves-effect waves-light">Sıfırla</button>
                                                </div>
                                                </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>#</th>
                                            <th>Üst Kategori</th>
                                            <th>Kategori Adı</th>
                                            <th>Öncelik</th>
                                            <th>Durumu</th>
                                            <th>Aksiyon</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($categories as $category)
                                        <tr id="category-td-{{$category->id}}">
                                            <td>{{$category->id}}</td>
                                            <td>@if($category->parents && isset($category->parents()->orderBy('level','DESC')->first()->name) && $category->parents()->orderBy('level','DESC')->first()->name)
                                                    <option selected
                                                            value="{{@$category->parents()->orderBy('level','DESC')->first()->id}}">{{@$category->parents()->orderBy('level','DESC')->first()->name}}</option>
                                                @else Ana Kategori @endif</td>
                                            <td><span id="name-span-{{$category->id}}" data-type="name"
                                                      data-id="{{$category->id}}" style="width: 100%">{{$category->name}}</span>
                                                <input
                                                    class="form-control" type="hidden" name="name"
                                                    value="{{$category->name}}"
                                                    id="name-{{$category->id}}"
                                                    data-id="{{$category->id}}"></td>
                                            <td><span id="priority-span-{{$category->id}}" data-type="priority"
                                                      data-id="{{$category->id}}" style="width: 100%">{{$category->priority}}</span>
                                                <input
                                                    class="form-control" type="hidden" name="priority"
                                                    value="{{$category->priority}}"
                                                    id="priority-{{$category->id}}"
                                                    data-id="{{$category->id}}">
                                            </td>
                                            <td>@if($category->status == 'active')<label
                                                    class="btn btn-sm bg-gradient-success status-label"
                                                    id="status-label-{{$category->id}}" data-id="{{$category->id}}"
                                                    data-change="passive">Açık</label>@else <label
                                                    class="btn btn-sm bg-gradient-danger status-label"
                                                    id="status-label-{{$category->id}}" data-id="{{$category->id}}"
                                                    data-change="active">Kapalı</label> @endif
                                            </td>
                                            <td>
                                                <div class="btn-group">
                                                    <a href="{{route('get-category-detail',['id' => $category->id])}}" class="btn btn-md btn-success" data-toggle="tooltip"
                                                            data-placement="top" title="Kategori Düzenle" onclick=""><i
                                                            class="feather icon-edit" ></i></a>
                                                    <button class="btn btn-md btn-danger category-delete" data-toggle="tooltip"
                                                            data-placement="top" data-id="{{$category->id}}" title="Kategori Sil"><i
                                                            class="feather icon-delete"></i></button>
                                                </div>
                                            </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-category/' + $(this).attr('data-id') + '/status/' + $(this).attr('data-change'), function (response) {
            if (response.status == 'success') {
                $('#status-label-' + response.category_id).removeClass('bg-gradient-success');
                $('#status-label-' + response.category_id).removeClass('bg-gradient-danger');
                if (response.product_status == 'active') {
                    $('#status-label-' + response.category_id).text('Açık');
                    $('#status-label-' + response.category_id).toggleClass('bg-gradient-success');
                    $('#status-label-' + response.category_id).attr('data-change', 'passive');
                } else {
                    $('#status-label-' + response.category_id).text('Kapalı');
                    $('#status-label-' + response.category_id).toggleClass('bg-gradient-danger');
                    $('#status-label-' + response.category_id).attr('data-change', 'active');
                }
            }
        });
    });
    $('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) {
            if ($(this).attr('name') == 'price-tax-include') {

                $.get('/panel/ajax/update-category/' + $(this).attr('data-id') + '/price/' + parseFloat($(this).val()) / ((parseFloat($(this).attr('data-tax')) + 100) / 100), function (response) {
                    if (response.status == 'success') {
                        $.each(response.data, function (index, value) {
                            $('#' + index + '-' + response.category_id).val(value);
                            $('#' + index + '-span-' + response.category_id).text(value);
                        });
                    }
                });
            } else {
                $.get('/panel/ajax/update-category/' + $(this).attr('data-id') + '/' + $(this).attr('name') + '/' + $(this).val(), function (response) {
                    if (response.status == 'success') {
                        $.each(response.data, function (index, value) {
                            $('#' + index + '-' + response.category_id).val(value);
                            $('#' + index + '-span-' + response.category_id).text(value);
                        });
                    }
                });
            }
            $('#' + $(this).attr('name') + '-' + $(this).attr('data-id')).attr('type', 'hidden');
            $('#' + $(this).attr('name') + '-span-' + $(this).attr('data-id')).show();
        }
    });
    $('.select2').select2();
    $('.category-delete').on('click', function () {
        $.get('/panel/ajax/update-category/' + $(this).attr('data-id') + '/status/deleted', function (response) {
            if (response.status == 'success') {
                $('#category-td-'+response.category_id).fadeOut();
            }
        });
    });
</script>
@endsection