@extends('layout.admin')

@section('title')
    Home Banners
@endsection

@section('content')
    <main class="page-content">
        <!--breadcrumb-->
        <x-breadcrumb first="Home Page" second="Banners" :url="route('admin.homebanners.add')" button-text="Add Banner" />
        <!--end breadcrumb-->


        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <h5 class="mb-0">Banner List</h5>
                    {{-- <form class="ms-auto position-relative">
                        <div class="position-absolute top-50 translate-middle-y search-icon px-3"><i
                                class="bi bi-search"></i></div>
                        <input class="form-control ps-5" type="text" placeholder="search">
                    </form> --}}
                </div>
                <div class="table-responsive mt-3">
                    <table class="table align-middle">
                        <thead class="table-secondary">
                            <tr>
                                <th>#</th>
                                <th>Banner Image</th>
                                <th>Banner Text</th>
                                <th>Alt Text</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        @if ($data->count() > 0)
                            <tbody>
                                @php $i = 1; @endphp
                                @foreach ($data as $banner)
                                    <tr>
                                        <td>{{ $i }}</td>
                                        <td>
                                            <img src="{{ asset('admin/assets/upload/banners/') }}/{{ $banner->banner_image }}"
                                                alt="{{ $banner->alt_text }}" style="width: 200px">
                                        </td>
                                        <td><p style="width: 300px;word-wrap: wrap;">{!! $banner->banner_text !!}</p></td>
                                        <td>{{ $banner->alt_text }}</td>
                                        <td>
                                            <div class="table-actions d-flex align-items-center gap-3 fs-6">
                                                <a href="{{ route('admin.homebanners.edit', Helper::encript($banner->id)) }}"
                                                    class="text-warning" data-bs-toggle="tooltip" data-bs-placement="bottom"
                                                    title="Edit"><i class="bi bi-pencil-fill"></i></a>
                                                <a href="javascript:void(0)"
                                                    data-url="{{ route('admin.homebanners.delete', Helper::encript($banner->id)) }}"
                                                    class="text-danger delete-btn" data-bs-toggle="tooltip"
                                                    data-bs-placement="bottom" title="Delete"><i
                                                        class="bi bi-trash-fill"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    @php $i++ @endphp
                                @endforeach
                            </tbody>
                        @else
                            <tbody>
                                <tr>
                                    <td colspan="4">
                                        <p class="text-center mt-3">No data found</p>
                                    </td>
                                </tr>
                            </tbody>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('js-add')
    <script>
        $(document).ready(function() {
            $('.delete-btn').on('click', function() {
                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        let url = $(this).data('url');
                        window.location.href = url;
                    } else {
                        Swal.fire({
                            title: "Safe!",
                            text: "Your file is safe.",
                            icon: "success"
                        });
                    }
                });
            });
        });
    </script>
@endsection