@extends("layouts.admin.app")
@section("css-links")

    <link rel="stylesheet" type="text/css" href="{{asset("css/dataTables.bootstrap4.min.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{asset("css/select.bootstrap4.min.css")}}"/>

@endsection
@section("page-header")
    <div class="section-header">
        <h1>{{__("Categories")}}</h1>
        <div class="section-header-breadcrumb">
            <div class="breadcrumb-item active"><a href="#">{{__("Admin")}}</a></div>
            <div class="breadcrumb-item">{{__("Categories")}}</div>
            <div class="breadcrumb-item active"><a href="{{ route("admin.categories.index") }}">{{ $category->name }}</a></div>
            <div class="breadcrumb-item">{{__("Sub Categories")}}</div>
        </div>
    </div>
@endsection

@section("content")
    @include("includes.dialog")
    <div class="section-body">
        <h2 class="section-title">{{__("Sub Categories")}}</h2>
        <p class="section-lead">
            {{__("View And Control Sub Categories")}}
        </p>

        <div class="mt-3 mb-3">
            <!-- Button trigger modal -->
            <a href="{{route("admin.categories.sub_category.create", $category->id)}}" class="btn btn-primary">
                {{__("Create Sub Category")}}
            </a>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4>All Categories</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped data-table" id="table-categories">
                                <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>{{__("Name")}}</th>
                                    <th>{{__("Activation")}}</th>
                                    <th>{{__("Last Updated")}}</th>
                                    <th>{{__("Created On")}}</th>
                                    <th class="min-width-95">{{__("Control")}}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($subCategories as $subCategory)
                                <tr>
                                    <td>{{$subCategory->id}}</td>
                                    <td>{{$subCategory->name}}</td>
                                    <td>
                                        @if($subCategory->active == 1)
                                            <div class="badge badge-success">{{__("Active")}}</div>
                                        @else
                                            <div class="badge badge-danger">{{__("Not Active")}}</div>
                                        @endif
                                    </td>
                                    <td>{{$subCategory->updated_at->diffForHumans()}}</td>
                                    <td>{{$subCategory->created_at->diffForHumans()}}</td>
                                    <td class="min-width-95">
                                        <!-- Delete -->
                                        <form action="{{route("admin.categories.sub_category.destroy", ["id" => $subCategory->id, "category_id" => $category->id])}}" method="post" id="delete{{$subCategory->id}}" style="display: none" data-swal-title="{{__("Delete Category")}}" data-swal-text="{{__("Are Your Sure To Delete This Category ?")}}" data-yes="{{__("Yes")}}" data-no="{{__("No")}}" data-success-msg="{{__("the category has been deleted successfully")}}">@csrf @method("delete")</form>
                                        <span href="#" class="btn btn-danger form-confirm" data-form-id="#delete{{$subCategory->id}}"><i class="far fa-trash-alt"></i></span>
                                        <!-- Edit -->
                                        <a href="{{route("admin.categories.sub_category.edit", ["id" => $subCategory->id, "category_id" => $category->id])}}" class="btn btn-success"><i class="fas fa-edit"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section("js-scripts")
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="{{asset("js/jquery.dataTables.min.js")}}"></script>
    <script src="{{asset("js/dataTables.bootstrap4.min.js")}}"></script>
    <script src="{{asset("js/select.bootstrap4.min.js")}}"></script>

    <script src="{{asset("assets/js/page/modules-datatables.js")}}"></script>
    <script>
        $("#table-categories").dataTable({
            "columnDefs": [
                { "sortable": false, "targets": [5,8] }
            ]
        });
    </script>
@endsection