@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-option')}}" method="POST" class="number-tab-steps wizard-circle">
                                            {{csrf_field()}}
                                            <fieldset>
                                                <input type="hidden" name="id" value="{{$option->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">Seçenek Adı</label>
                                                            <input type="text" id="name" name="name" class="form-control" value="{{old('name') ? old('name') : $option->name}}" >
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="font-weight-bold" for="firstName1">Seçenek Tipi</label>
                                                            <select class="form-control" name="type">
                                                                <option value="button" @if($option->type == 'button') selected @endif>Buton</option>
                                                                <option value="select" @if($option->type == 'select') selected @endif>Aşağı Açılır Seçenek</option>
                                                                <option value="text" @if($option->type == 'text') selected @endif>Yazı</option>
                                                                <option value="file" @if($option->type == 'file') selected @endif>Dosya</option>
                                                            </select>
                                                        </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($option->values as $value)
                                                        <tr id="tr-value-{{$value->id}}">
                                                            <td> {{$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="option_id" value="{{$option->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 Seçeneği Kaydediniz");
              @else
                  $('#values-modal').modal('show');
              @endif
          });
      function removeValue(id) {
          if (window.confirm("Silmek istediğinize emin misinz?")) {
              $.get('{{route('delete-option-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 (e) {
          e.preventDefault();

              $.post('{{route('save-option-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