@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">

                <div class="card">
                    <div class="card-header bg-white">


                        <!-- Second Row: Stats Cards -->
                        <div class="row mt-2">
                            <div class="col d-flex flex-wrap gap-3">
                                <!-- Period Filter -->


                                <div class="col d-flex justify-content-end align-items-center">
                                    <a href="{{ route('admin.category.create')}}"
                                        class="btn btn-success px-3 btn-sm">
                                        <i class="bi bi-plus-circle me-1"></i> Add New Category
                                    </a>
                                </div>


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

                    <div class="card-body">
                        <div id="datatable_internal_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table class="table table-striped my-table2 dataTable no-footer"
                                        id="datatable_internal">
                                        <thead class="thead-dark">
                                            <th>#</th>
                                            <th>Name</th>
                                            <th>Icon</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </thead>
                                        <tbody>
                                            @foreach ($categories as $categorie)
                                                <tr id="partenTr_{{$categorie->id}}">
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $categorie->name }}</td>
                                                    <td><img class="img-thumbnail" style="width: 45px;height:45px" src="{{asset($categorie->icon)}}" alt=""></td>
                                                    <td>
                                                        @if ($categorie->status == 1)
                                                            <span class="badge bg-success">Active</span>
                                                        @else
                                                            <span class="badge bg-danger">Inactive</span>
                                                        @endif
                                                    </td>

                                                    <td><a href="{{route('admin.category.edit',$categorie->id)}}" class="col">
                                                            <button type="button" class="btn btn-primary btn-sm">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                    height="16" fill="currentColor"
                                                                    class="bi bi-pencil-square" viewBox="0 0 16 16">
                                                                    <path
                                                                        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z">
                                                                    </path>
                                                                    <path fill-rule="evenodd"
                                                                        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z">
                                                                    </path>
                                                                </svg>
                                                            </button>
                                                        </a>

                                                        <a href="javascript:void(0)"
                                                            class="btn btn-danger btn-sm deleteButton" data-parentid="partenTr_{{$categorie->id}}" data-url={{route('admin.category.delete',$categorie->id)}}  >
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                height="16" fill="currentColor" class="bi bi-trash3-fill"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5">
                                                                </path>
                                                            </svg>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection