@extends('admin.index')
@section('title')Özellik Ayarları - @endsection
@section('header')

@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <form action="" method="POST" enctype="multipart/form-data">
                @csrf
    
                <input type="hidden" name="parent_id" value="0">
                <input type="hidden" name="icon" value="">
    
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-12">
    
                        <ul class="nav nav-tabs" id="languages_list" role="tablist">
                            @foreach (languages() as $item)
                            <li class="nav-item" role="presentation">
                    
                                <a class="nav-link" id="{{$item->lang_code}}-tab" data-toggle="tab" href="#{{$item->lang_code}}" role="tab"
                                    aria-controls="{{$item->lang_code}}" aria-selected="true">{{$item->lang_name}} <span
                                        class="badge badge-danger" style="display: none">1</span></a>
                            </li>
                            @endforeach
                        </ul>
                    
                        <div class="tab-content" id="languages_content">
                            @foreach (languages() as $item)
                            <div class="tab-pane fade" id="{{$item->lang_code}}" role="tabpanel" aria-labelledby="{{$item->lang_code}}-tab">
                    
                                <div class="row">
                                    <div class="col-12">
                                        <div class="content">
                    
                                            <div class="form-group">
                                                <label for="name[{{$item->lang_code}}]">Özellik Adı</label>
                                                <input type="text"
                                                    class="form-control required @error('name.'.$item->lang_code) is-invalid @enderror"
                                                    id="name[{{$item->lang_code}}]" name="name[{{$item->lang_code}}]"
                                                    placeholder="Örn: Renk" value="{{ old('name.'.$item->lang_code) ?? $option->options_language->where('language_id', $item->id)->first()->name ?? '' }}"
                                                    data-lang-id="{{$item->id}}">
                                                @if ($errors->has('name.'.$item->lang_code))
                                                <div class="invalid-feedback">
                                                    <ul>
                                                        @foreach ($errors->messages('name.'.$item->lang_code) as $error)
                                                        @foreach ($error as $err)
                                                        <li>{{ $err }}</li>
                                                        @endforeach
                                                        @endforeach
                                                    </ul>
                                                </div>
                                                @endif
                                            </div>
                    
                                        </div><!-- content -->
                                    </div>
                                </div><!-- row -->
                    
                            </div><!-- content lang -->
                            @endforeach
                        </div><!-- tab-content -->
    
                    </div>
                </div>
    
                <button type="submit" class="btn btn-primary btn-save">Kaydet</button>
            </form>
        </div>
    </div>




    <div class="row pt-5">
        <div class="col-12">
    
            <h4>Değer Listesi</h4>

            <div class="card card-body">
                <div class="toolbar">
                    <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop">Yeni Değer Ekle</button>
                </div>
                <table class="table" id="table1" data-locale="tr-TR" data-toolbar=".toolbar" data-search="true"
                    data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-pagination="true"
                    data-resizable="true" data-sortable="true" data-show-search-clear-button="true"
                    data-side-pagination="server" data-url="{{ secure_url('admin/option-value/list/ajax/'.$option->id) }}">
                    <thead>
                        <tr>
                            <th data-sortable="true" data-field="content.name">Adı</th>
                            <th data-sortable="true" data-field="created_at" data-formatter="dateFormatter">Kayıt Tarihi</th>
                            <th data-formatter="buttonFormatter">Düzenle</th>
                        </tr>
                    </thead>
                </table>
            </div>
    
        </div>
    </div>


    @include('admin.components.option-value.add-offcanvas')

    
@endsection
@section('footer')
<script>
    function buttonFormatter(id,row) {
        var url = "{{ url('admin/option-value/edit') }}" + "/" + row.id;
        return '<div class="btn-group btn-block" role="group" aria-label="editremove"><a href="'+ url +'" class="btn btn-sm btn-primary"> <i class="far fa-edit"></i> </a> <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item" data-id="'+row.id+'" data-item-type="option-value"> <i class="fas fa-trash-alt"></i> </button></div>';
    }
    function dateFormatter(date) {
        var date = new Date(date);
        var newDate = ("0" + (date.getDate())).slice(-2) + "/" + ("0" + (date.getMonth()+1)).slice(-2) + "/" + date.getFullYear() + " " + ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2) + ":" + ("0" + date.getMilliseconds()).slice(-2);
        return newDate;
    }
</script>
@endsection