@extends('backend.layouts.app')
@section('title', $title)
@section('content')
    @include('frontend.shipping-info.partials.add-slide-modal', ['adsBanner' => $adsBanner])

    <div class="row">
        <div class="col">
            <div class="card overflow-scroll">
                <form action="#" method="get" id="bulkForm">
                    <div class="card-body">
                        <div class="pb-4">
                            <div class="card-widgets">
                                <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                    id="animated-preview"><i class="ri-more-2-fill fs-3"></i></a>
                                <div class="dropdown btn-group">
                                    <div class="dropdown-menu dropdown-menu-animated">
                                        <a class="dropdown-item" href="#"
                                            onclick="document.querySelector('#bulkForm').submit();">
                                            <i class="ri-delete-bin-line text-danger"></i>
                                            <span class="text-danger">Bulk Delete</span>
                                        </a>
                                        <a class="dropdown-item" href="#" data-bs-toggle='modal'
                                            data-bs-target='#addSlideModal'>
                                            <i class="ri-plus"></i>
                                            <span class="text-info">Add Slide</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <h5 class="header-title mb-0">
                                {{ $title }}
                            </h5>
                        </div>
                        <div id="yearly-sales-collapse" class="collapse show">
                            <div class="">
                                <table class="table table-nowrap table-hover mb-0" id="ads-table">
                                    <thead>
                                        <tr>
                                            <th>
                                                <div class="d-flex align-items-center gap-2 form-checkbox-success">
                                                    <input type="checkbox" class="form-check-input check-all"
                                                        id="adsIds">
                                                    <label class="form-check-label" for="adsIds">Image</label>
                                                </div>
                                            </th>
                                            <th>
                                                Extension
                                            </th>
                                            <th>
                                                Size
                                            </th>
                                            <th>
                                                File name
                                            </th>
                                            <th>
                                                Link
                                            </th>
                                            <th>
                                                Action
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($media as $key => $mediaItem)
                                            <tr>
                                                <td>
                                                    <div
                                                        class='d-flex align-items-center gap-2 form-checkbox-dark align-items-center'>
                                                        <input type='checkbox' name='images_ids[]'
                                                            value='{{ $mediaItem->id }}' class='form-check-input check-one'
                                                            id='image-{{ $mediaItem->id }}'>
                                                        <label class='text-capitalize' for='image-{{ $mediaItem->id }}'>
                                                            <img src="{{ $mediaItem->original_url }}" width="80px"
                                                                alt="{{ $mediaItem->file_name }}" />
                                                        </label>
                                                        <div>
                                                        </div>
                                                    </div>

                                                </td>
                                                <td>
                                                    {{ $mediaItem->extension }}
                                                </td>
                                                <td>
                                                    {{ $mediaItem->human_readable_size }}
                                                </td>
                                                <td>
                                                    {{ $mediaItem->file_name }}
                                                </td>
                                                <td>
                                                    <a href="{{ $mediaItem->getCustomProperty('link') ?? '' }}"
                                                        target="_blank">
                                                        {{ $mediaItem->getCustomProperty('link') ?? '' }}
                                                    </a>
                                                </td>
                                                <td>
                                                    <div class='btn-group-vertical mb-2'>
                                                        <button type='button' class='btn btn-light'
                                                            data-bs-toggle='dropdown' aria-expanded='false'><i
                                                                class='bi bi-three-dots-vertical'></i></button>
                                                        <div class='dropdown-menu dropdown-menu-animated'>
                                                            <a href="{{ route('admin.ads.destroy', ['ads_banner' => $adsBanner->id, 'media' => $mediaItem->id]) }}"
                                                                class="dropdown-item text-danger fw-bold">
                                                                <i class="ri-delete-bin-line me-1"></i> Delete
                                                            </a>

                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div> <!-- end card-->
        </div>
    </div>
@endsection