@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>
            <div class="content-body">
                <section class="card">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-content">
                                    <div class="card-body">
                                        @if ($errors->any())
                                            <div class="alert alert-danger">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
                                        @if(Session::get('status') && Session::get('status') == 'success')
                                            <div class="alert alert-success">{{Session::get('msg')}}</div>
                                            @endif
                                        @if(Session::get('status') && Session::get('status') == 'error')
                                            <div class="alert alert-alert">{{Session::get('msg')}}</div>
                                            @endif
                                            <p>Değer eklemeden önce filtre adını girip kaydetmeniz gerekmektedir.</p>
                                        <form action="{{route('save-filter')}}" method="POST" class="number-tab-steps wizard-circle">
                                            {{csrf_field()}}
                                            <fieldset>
                                                <input type="hidden" name="id" value="{{$filter->id}}">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <button type="submit" class="btn btn-primary pull-right">Kaydet</button>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <label class="font-weight-bold" for="firstName1">Filtre Adı</label>
                                                            <input type="text" id="name" name="filter_name" class="form-control" value="{{old('filter_name') ? old('filter_name') : $filter->filter_name}}" >
                                                        </div>
                                                    </div>

                                                </div>

                                            </fieldset>
                                        </form>
                                        <div class="row">
                                            <div class="table-responsive col-12">
                                                <table class="table table-borderless">
                                                    <thead>
                                                    <tr>
                                                        <th>Değer</th>
                                                        <th></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="value-table-body">

                                                    <tr id="addprd">
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td><button type="button" id="add-product" class="btn btn-sm btn-success" ><i class="fa fa-plus"></i></button></td>
                                                    </tr>
                                                    @foreach($filter->values as $value)
                                                        <tr id="tr-value-{{$value->id}}">
                                                            <td> {{$value->value_name}}</td>
                                                            <td><button type="button" onclick="removeValue({{$value->id}})" class="btn btn-sm btn-danger"><i class="fa fa-remove"></i></button></td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                            <!-- Modal -->
                                            <div class="modal fade" id="values-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalLabel">Değer 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="value-form">
                                                                {{csrf_field()}}
                                                                <input type="hidden" name="filter_id" value="{{$filter->id}}">
                                                                <div class="form-group">
                                                                    <label>Değer Adı</label>
                                                                    <input type="text" name="value_name" class="form-control">
                                                                </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-value">Ekle</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </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')
    <script src="{{asset('app-assets/vendors/js/ui/jquery.sticky.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/extensions/toastr.min.js')}}"></script>
  <script>
          $('#add-product').click(function() {
              @if($id == 0)
              alert("Önce Filtreyi Kaydediniz");
              @else
                  $('#values-modal').modal('show');
              @endif
          });
      function removeValue(id) {

          $.get('{{route('delete-filter-value',[''])}}/'+id,function (response) {
              if(response.status == 'success'){
                  $('#tr-value-'+id).fadeOut();
              }else{
                  toastr.danger('Değer Silinemedi.', 'Hata!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
              }
          })
      }
      $('#add-value').on('click',function () {
          $.post('{{route('save-filter-value')}}',$('#value-form').serialize(),function (response) {
              if(response.status){
              var html = '     <tr id="tr-value-'+response.id+'">'+
                  '<td>'+response.name+'</td>'+
                  '<td><button type="button" onclick="removeValue('+response.id+')" class="btn btn-sm btn-danger"><i class="fa fa-remove"></i></button></td>'
              +'</tr>';
              $('#value-table-body').prepend(html);
              toastr.success(response.msg, 'Başarılı!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
              $('#value-form').trigger("reset");
              $('#values-modal').modal('hide');
              }else{
                  toastr.danger(response.msg, 'Başarısız!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
              }
          });
      })
  </script>
@endsection