@extends('backend.layouts.app')
@section('title', $title)
@section('content')

    <x-back-button :route="route('admin.categories.index')">Back to categories</x-back-button>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{ $title }}
                    </h5>
                </div>
                <div class="card-body">
                    <form
                        action="{{route('admin.categories.store-slider-image', $category->slug)}}"
                        method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row mt-3">
                            <div class="col">
                                <label class="form-label" for="image">Image <span class="text-danger">*</span></label>
                                <input class="form-control" name="image" type="file" id="image" required/>
                            </div>
                        </div>
                        <div class="form-group row mt-3">
                            <div class="col">
                                <label class="form-label" for="category">Category <span
                                        class="text-danger">*</span></label>
                                <select class="form-select select2" name="category_slug" id="category_slug" required>
                                    @foreach($categories as $key => $categoryData)
                                        <option value="{{$categoryData->slug}}">
                                            {{$categoryData->name}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row mt-3">
                            <div class="col">
                                <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        Images of {{$category->name}}
                    </h5>
                </div>
                <div class="card-body">
                    <table class="table-striped table table-hover">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($category->getMedia(\Helper::CATEGORY_SLIDER_COLLECTION) as $media)
                            <tr>
                                <td>
                                    <img class="img-fluid rounded-3" src="{{$media->getUrl()}}" width="100px"
                                         height="100px" alt="Category Slider image">
                                </td>
                                <td>
                                    <a href="{{route('admin.categories.delete-image-from-slider', [$category->slug, $media->id])}}"
                                       class="btn btn-danger btn-sm">
                                        <i class="bi bi-trash3"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')

@endsection