@extends('backend.layouts.fix')
@section('content')
<div class="main-content app-content mt-0">
    <div class="side-app">

        <!-- CONTAINER -->
        <div class="main-container container-fluid">

            <!-- PAGE-HEADER -->
            <div class="page-header">
                <div>
                    <h1 class="page-title">Kategoriler</h1>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Anasayfa</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Kategoriler</li>
                    </ol>
                </div>

            </div>
            <!-- PAGE-HEADER END -->

            <div class="row">
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Kategori Listesi</h3>
                        </div>
                        <div class="card-body">
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                @foreach ($top as $key)


                                <div class="panel panel-default active">
                                    <div class="panel-heading border" role="tab" id="headingOne1">
                                        <h4 class="panel-title">
                                            <a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapse{{$key->id}}" aria-expanded="true" aria-controls="collapse1" class="active">{{$key->category_title}}
                                                <p style="float: right;    margin-top: -42px;margin-right:7px"><a href="{{route('category_edit',$key->id)}}" class="btn btn-success"><i class="fe fe-edit"></i></a>
                                                    <button type="button" class="btn  btn-danger"
                                                   data-bs-toggle="popover"
                                                   data-bs-html="true" data-bs-sanitize="false"
                                                   data-bs-content='<div class="popover fs-6" role="tooltip">
                                                    <div class="popover-body"> Are you sure you want to delete ? <hr> <a href="{{route('product_category_delete',$key->id)}}" class="btn btn-danger w-100" > Evet, Sil</a> </div></div>'>
                                                      <i class="fe fe-trash"></i>
                                                 </button></p>
                                            </a>
                                        </h4>
                                    </div>

                                    <div id="collapse{{$key->id}}" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingOne1" style="">
                                        @foreach ($sub as $take)
                                        @if($take->top_id == $key->id)
                                        <div class="panel-body">
                                            <li class="list-group-item">{{$take->sub_title}} <p style="float: right;margin-top:-8px;margin-right:-12px"><a href="{{route('sub_category_edit',$take->id)}}" class="btn btn-success"><i class="fe fe-edit"></i></a>

                                                <button type="button" class="btn  btn-danger"
                                                data-bs-toggle="popover"
                                                data-bs-html="true" data-bs-sanitize="false"
                                                data-bs-content='<div class="popover fs-6" role="tooltip">
                                                 <div class="popover-body"> Are you sure you want to delete ? <hr> <a href="{{route('product_sub_category_delete',$take->id)}}" class="btn btn-danger w-100" > Evet, Sil</a> </div></div>'>
                                                   <i class="fe fe-trash"></i>
                                              </button></p></li>
                                        </div>
                                        @endif
                                        @endforeach
                                    </div>

                                </div>
                                @endforeach

                            </div><!-- PANEL-GROUP -->
                        </div>

                    </div>
                </div>



                <div class="col-xl-8">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">New Category</h3>
                        </div>
                        <div class="card-body p-6">
                            <div class="panel panel-primary">
                                <div class=" tab-menu-heading">
                                    <div class="tabs-menu1 ">
                                        <!-- Tabs -->
                                        <ul class="nav panel-tabs">
                                            <li><a href="#tab5" class="active" data-bs-toggle="tab">Yeni Ekle</a></li>
                                            <li><a href="#tab6" data-bs-toggle="tab" class="">Görsel</a></li>
                                            <li><a href="#tab7" data-bs-toggle="tab" class="">Seo</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="panel-body tabs-menu-body">
                                    <div class="tab-content">


                                        <div class="tab-pane active" id="tab5">
                                            <form action="{{route('product_category_insert')}}" method="POST" enctype="multipart/form-data">
                                                @csrf
                                            <div class="col-xl-12 col-lg-12 col-md-12">
                                                <div class="card">

                                                    <div class="card-body">
                                                        <div class="row">
                                                            <div class="col-sm-12 col-md-12">
                                                                <div class="form-group">
                                                                    <label class="form-label">Kategori Adı <span class="text-red">*</span></label>
                                                                    <input type="text" class="form-control" required="required" name="category_title" placeholder="Category Name..">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12 col-md-12">
                                                                <div class="form-group">
                                                                    <label class="form-label">Varsa, Üst Kategori Ekleyiniz</label>
                                                                    <select name="top_id" class="form-control form-select select2" >
                                                                        <option selected disabled>Seçiniz...</option>
                                                                        @foreach ($top as $key)
                                                                        <option value="{{$key->id}}">{{$key->category_title}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12">
                                                                <div class="form-group">
                                                                    <div class="form-label">Anasayfada Göster</div>
                                                                    <label class="custom-switch">
                                                                        <input type="checkbox" name="category_status" class="custom-switch-input">
                                                                        <span class="custom-switch-indicator"></span>

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


                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="tab6">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <div class="form-label">Kategori İkonu</div>
                                                    <div id="preview"></div>
                                                    <label class="custom-switch">

                                                        <input type="file" name="category_image" id="images" class="form-control">

                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="tab7">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12">
                                                    <div class="form-group">
                                                        <label class="form-label">Meta Title <span class="text-red">*</span></label>
                                                        <input type="text" class="form-control" name="meta_title" placeholder="Meta Title">
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-label">Meta Keywords <span class="text-red">*</span></label>
                                                        <input type="text" class="form-control" name="meta_keyw" placeholder="Meta Keywords">
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-label">Meta Description <span class="text-red">*</span></label>
                                                        <input type="text" class="form-control" name="meta_desc" placeholder="Meta Description">
                                                    </div>
                                                </div>




                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-success w-100">Kaydet</button>
                                    </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- CONTAINER END -->
    </div>
</div>
@endsection