@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">Kuponlar</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">Kuponlar
                                </li>
                            </ol>
                        </div>
                        </div>
                    </div>
                </div>
            </div>

        <div class="content-body">

            <!-- 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 -->

                            <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#add-coupon-modal">Kupon Ekle</button>
                            <div class="modal fade" id="add-coupon-modal" tabindex="-1" role="dialog" aria-labelledby="add-coupon-modal-label" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="add-coupon-modal-label">Kupon Ekle</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <form id="coupon-form">
                                                {{csrf_field()}}
                                                <div class="form-group">
                                                    <label>Kupon Kodu</label>
                                                    <input type="text" name="code" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <label>İndirim</label>
                                                    <input type="number" min="1" name="discount" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <label>İndirim Tipi</label>
                                                    <select name="type" class="form-control">
                                                        <option value="rate">Yüzde</option>
                                                        <option value="value">Sabit</option>
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label>Kullanım Tipi</label>
                                                    <select name="use_type" class="form-control">
                                                        <option value="unlimited">Sınırsız</option>
                                                        <option value="once-per-user">Kayıtlı Kullanıcı Başına Kullanım Adedi</option>
                                                        <option value="total-using-count">Toplam Kullanım Adedi</option>
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label>Maksimum Kullanım Adedi(Sınırsız seçenekte 0 Girebilirsiniz )</label>
                                                    <input type="number" min="0" name="use_count" class="form-control">
                                                </div>

                                                <div class="form-group">
                                                    <label>Durum</label>
                                                    <select name="status" class="form-control">
                                                        <option value="active">Aktif</option>
                                                        <option value="passive">Pasif</option>
                                                    </select>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
                                            <button type="button" class="btn btn-primary" id="add-coupon-post">Ekle</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Kupon Kodu</th>
                                        <th>Kullanım Tipi</th>
                                        <th>İndirim Tipi</th>
                                        <th>İndirim Oranı</th>
                                        <th>Eklenme Tarihi</th>
                                        <th>Maks. Kullanım Adedi</th>
                                        <th>Durum</th>
                                        <th>Aksiyon</th>
                                    </tr>
                                    </thead>
                                    <tbody id="coupon-table-body">
                                    @if(isset($coupons) && $coupons)
                                    @foreach($coupons as $coupon)
                                        <tr id="coupon-{{$coupon->id}}">
                                            <td>{{$coupon->id}}</td>
                                            <td>{{$coupon->code}}</td>
                                            <td>{{__('admin.'.$coupon->use_type)}}</td>
                                            <td>{{__('admin.'.$coupon->type)}}</td>
                                            <td>{{$coupon->discount}}</td>
                                            <td>{{date('d-m-Y H:i:s',strtotime($coupon->created_at))}}</td>
                                            <td>{{$coupon->use_count}}</td>
                                            <td>@if($coupon->status == 'active')<label
                                                    class="btn btn-sm bg-gradient-success status-label"
                                                    id="status-label-{{$coupon->id}}" data-id="{{$coupon->id}}"
                                                    data-change="passive">Açık</label>@else <label
                                                    class="btn btn-sm bg-gradient-danger status-label"
                                                    id="status-label-{{$coupon->id}}" data-id="{{$coupon->id}}"
                                                    data-change="active">Kapalı</label> @endif</td>
                                            <td>
                                                <div class="btn-group">
                                                    <button
                                                        onclick="removeGroup({{$coupon->id}})" class="btn btn-md btn-danger waves-effect waves-light"><i
                                                            class="feather icon-delete"></i></button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                        @endif
                                    </tbody>
                                </table>
                                <div style="text-align: center">
                                    {{$coupons->links()}}

                                </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')}}">
@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>
    <script>
        $('#add-coupon-post').on('click',function () {
           $.post('{{route('add-coupon-post')}}',$('#coupon-form').serialize(),function (response) {
               if(response.status == 'success'){
                   var html = ' <tr>\n' +
                       '                                            <td>'+response.id+'</td>\n' +
                       '                                            <td>'+response.code+'</td>\n' +
                       '                                            <td>'+response.use_type+'</td>\n' +
                       '                                            <td>'+response.type+'</td>\n' +
                       '                                            <td>'+response.discount+'</td>\n' +
                       '                                            <td>'+response.date+'</td>\n' +
                       '                                            <td>'+response.use_count+'</td>\n' +
                       '                                            <td>'+response.cstatus+'<td>\n' +
                       '                                                <div class="btn-group">\n' +
                       '                                                    <button\n' +
                       '                                                       onclick="removeGroup('+response.id+')" class="btn btn-md btn-danger waves-effect waves-light"><i\n' +
                       '                                                            class="feather icon-delete"></i></button>\n' +
                       '                                                </div>\n' +
                       '                                            </td>\n' +
                       '                                        </tr>';
                   $('#coupon-table-body').prepend(html);
                   toastr.success(response.msg, 'Başarılı!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
                   $('#coupon-form').trigger("reset");
                   $('#add-coupon-modal').modal('hide');
               }else{
                   toastr.warning(response.msg, 'Hata!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
               }
           }).fail(function (response) {

               if(response.responseJSON.message){
                   toastr.warning(response.responseJSON.message, 'Hata!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
               }else{
                   toastr.warning('Kupon Eklenemedi.', 'Hata!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
               }
           });
        });
        function removeGroup(id) {

            if (window.confirm("Silmek istediğinize emin misinz?")) {
                $.get('{{route('delete-coupon',[''])}}/' + id, function (response) {
                    if (response.status == 'success') {
                        $('#coupon-' + response.id).fadeOut();
                        toastr.success(response.msg, 'Başarılı!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    } else {
                        toastr.warning(response.msg, 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    }
                }).fail(function (response) {

                    if (response.responseJSON.message) {
                        toastr.warning(response.responseJSON.message, 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    } else {
                        toastr.warning('İşlem Yapılamadı.', 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    }
                });
            }
        }
    </script>
@endsection