@extends('admin::layouts.app')
<style>
    .image-container {
        position: relative;
        display: inline-block;
        margin: 10px;
    }

    /* Style for the delete button */
    .delete-image {
        position: absolute;
        background-color: rgba(255, 0, 0, 0.7);
        color: white;
        font-size: 14px;
        border-radius: 50%;
        cursor: pointer;
        opacity: 0;
        margin: 5px;
        transition: opacity 0.2s;
    }

    /* Show the delete button on hover */
    #image-container:hover .delete-image {
        opacity: 1;
    }
</style>
@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            @include('admin::partials.title-pad', [
                'title' => 'Showcase',
                'search' => $search,
                'searchPlaceholder' => 'Search question...',
                'list' => $services,
            ])
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="table-responsive bg-white">
                        <table class="table table-striped table-bordered admintable border-0" cellspacing="0" cellpadding="0">
                            <tbody>
                                <tr>
                                    <th>#</th>
                                    <th>Service</th>
                                    <th>Images</th>
                                </tr>

                                @forelse($services as $key => $service)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $service->name_en }}</td>
                                        <td>
                                            <div id="image-container">
                                                @foreach ($service->getMedia('gallery') as $image)
                                                    <button class="delete-image text-right"
                                                        data-media-id="{{ $image->id }}">x</button>
                                                    <img class="rounded mr-2" src="{{ $image->getUrl() }}" height="100px"
                                                        width="100px" />
                                                @endforeach
                                            </div>


                                        </td>
                                    </tr>
                                @empty
                                    <div class="col-md-12">
                                        <p class="text-danger">{{ __('admin::message.no_records_found') }}</p>
                                    </div>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                </div>


                <div class="pagination_rounded">
                    {{-- Pagination --}}
                    {{ $services->appends(request()->input())->links('admin::partials.pagination') }}
                    {{-- Pagination End --}}
                </div>

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


    <div class="modal fade" id="filter" tabindex="-1" role="dialog" aria-labelledby="loginpopupTitle"
        aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">

            <div class="modal-content bg-light modalPad">
                <form class="needs-validation" novalidate>
                    <div class="modal-header position-relative border-0">
                        <div class="">
                            <button type="button" class="close-btn" data-dismiss="modal" aria-label="Close">
                                <img src="{{ asset('admin-assets/img/close.svg') }}" />
                            </button>
                            <div class="">
                                <h5>List of Offers</h5>
                                <p class="mb-0">Filter</p>
                            </div>

                        </div>
                    </div>
                    <div class="modal-body pt-0">

                        <div class="row">

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="exampleFormControlSelect1">Created Date</label>
                                    <input type="date" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="exampleFormControlSelect1">Select Service</label>
                                    <select class="form-control selectpicker">
                                        <option>Select</option>
                                    </select>
                                </div>
                            </div>


                            <div class="col-md-12 mt-1">
                                <a href="#" class="btn btn-primary">Apply Filters</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('.delete-image').click(function() {

                var mediaId = $(this).data('media-id');
                var token = "{{ csrf_token() }}";

                if (confirm('Are you sure you want to delete this image?')) {
                    $.ajax({
                        url: app_url + '/admin/showcases/delete/' + mediaId,
                        type: 'DELETE',
                        data: {
                            "_token": token,
                        },
                        success: function(response) {
                            Swal.fire(
                                "Success!",
                                "Image Deleted",
                                "success"
                            );
                            location.reload(true);
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                            alert('An error occurred while deleting the image.');
                        }
                    });
                }
            });
        });
    </script>
@endsection