@extends('master', ['title' => __('dashboard.banners')])

@section('content')
<div class="container">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="mb-0">{{ __('dashboard.all_banners') }}</h4>
            <a href="{{ route('banners.create') }}" class="btn btn-primary">
                <i data-feather="plus"></i>
                {{ __('dashboard.add_banner') }}
            </a>
        </div>

        <div class="card-body">
            <table id="banners-table" class="table table-bordered table-hover text-center align-middle">
                <thead>
                    <tr>
                        <th class="text-center">{{ __('dashboard.id') }}</th>
                        <th class="text-center">{{ __('dashboard.image') }}</th>
                        <th class="text-center">{{ __('dashboard.title') }}</th>
                        <th class="text-center">{{ __('dashboard.product') }}</th>
                        <th class="text-center">{{ __('dashboard.actions') }}</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($banners as $banner)
                        <tr>
                            <td class="text-center">{{ $loop->iteration }}</td>
                            <td class="text-center">
                                @if ($banner->image)
                                    <img src="{{ getPath('banners', $banner->id, $banner->image->path) }}"
                                         width="90" class="rounded">
                                @else
                                    —
                                @endif
                            </td>
                            <td class="text-center">{{ $banner->title }}</td>
                            <td class="text-center">{{ $banner->product ? $banner->product->name : '—' }}</td>
                            <td class="text-center">
                                <a href="{{ route('banners.edit', $banner->id) }}"
                                   class="btn btn-warning btn-sm"
                                   title="{{ __('dashboard.edit_banner') }}">
                                    <i class="fas fa-edit"></i>
                                </a>

                                <form id="delete-form-{{ $banner->id }}"
                                      action="{{ route('banners.destroy', $banner->id) }}"
                                      method="POST"
                                      class="d-inline">
                                    @csrf
                                    @method('DELETE')

                                    <button type="button"
                                            class="btn btn-danger btn-sm"
                                            id="confirm-delete-text"
                                            data-form-id="delete-form-{{ $banner->id }}"
                                            title="{{ __('dashboard.delete') }}">
                                       <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center fw-bold text-muted">{{ __('dashboard.no_banners') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            <div class="mt-2">
                {{ $banners->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
@if ($banners->count())
<script>
    $(document).ready(function () {
        $('#banners-table').DataTable({
            paging: false,
            info: false,
            ordering: true,
            searching: true,
            columnDefs: [
                { orderable: false, targets: [1, 4] }
            ],
            language: {
                search: "{{ __('dashboard.search') }}",
            }
        });
    });
</script>
@endif
@endpush