@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">Seçenekler</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">Seçenekler
                                </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">Seçenek</h4>
                                <a href="{{route('get-option-detail',['id'=>0])}}" class="btn btn-md btn-primary pull-right">Seçenek Ekle</a>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form" action="{{route('get-option-list')}}">
                                        <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="Seçenek Adı" value="{{isset($_GET['filter']['name']) ? $_GET['filter']['name'] : ''}}" name="filter[name]">
                                                        <label for="first-name-column">Seçenek Adı</label>
                                                    </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 class="col-md-2 col-12 btn-group">
                                                    <button type="submit" class="btn btn-md bg-gradient-info mb-1 waves-effect waves-light">Gönder</button>
                                                    <a href="{{route('get-option-list')}}" class="btn btn-md bg-gradient-warning mb-1 waves-effect waves-light">Sıfırla</a>
                                                </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>Adı</th>
                                            <th>Aksiyon</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($options as $option)
                                        <tr id="option-tr-{{$option->id}}">
                                            <td>{{$option->id}}</td>
                                            <td>{{$option->name}}</td>
                                            <td>
                                                <div class="btn-group"><a href="{{route('get-option-detail',['id' => $option->id])}}" class="btn btn-md btn-success waves-effect waves-light"><i class="feather icon-eye"></i></a></div>
                                                <div class="btn-group"><button href="javascript:;" data-href="{{route('delete-option',['id' => $option->id])}}" class="btn btn-md btn-danger waves-effect waves-light del-option"><i class="feather icon-delete"></i></button></div>
                                            </td>
                                        </tr>
                                       @endforeach
                                    </tbody>
                                </table>
                                <div style="text-align: center">
                                    {{$options->links()}}

                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </section>
            <!-- Data list view end -->

        </div>
    </div>
</div>

@endsection
@section('css')
@endsection
@section('js')
<script>
    $(function() {
        $('.del-option').click(function(e) {
            e.preventDefault();
            if (window.confirm("Silmek istediğinize emin misinz?")) {
                $.get($(this).attr('data-href'),function (response) {
                    if(response.status == 'success'){
                        $('#option-tr-'+response.id).fadeOut();
                    }
                })
            }
        });
    });
</script>
@endsection