@extends('layouts.admin')

@section('content')
    <div class="container">
        <h1>Banner Management</h1>

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <a href="{{ route('banners.create') }}" class="btn btn-primary mb-2">Add New Banner</a>

        @if($banners->count())
            <div class="banners-list" id="bannersList">
                @foreach($banners as $banner)
                    <div class="banner-card card" data-id="{{ $banner->id }}">
                        <div class="ribbon"><span>{{ $banner->clicks }}</span></div>
                        <img style="max-height: 200px" class="card-img-top" src="{{ asset('storage/' . $banner->image) }}" alt="Banner image">
                        <div class="card-body">
                            <p class="card-text"><a href="{{ $banner->url }}" target="_blank">{{ $banner->url }}</a></p>
                            <div class="group-circle">{{ $banner->group_id }}</div>
                            <form action="{{ route('banners.destroy', $banner->id) }}" method="POST" onsubmit="return confirm('Are you sure?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="remove-button">&times;</button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p>No banners found.</p>
        @endif
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const bannersList = document.getElementById('bannersList');
            new Sortable(bannersList, {
                animation: 150,
                onEnd: function (evt) {
                    const order = Array.from(bannersList.children).map((child, index) => ({
                        id: child.getAttribute('data-id'),
                        rank: index
                    }));

                    fetch('{{ route('banners.updateOrder') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ranks: order.map(item => item.id)})
                    });
                }
            });
        });
    </script>
@endsection

@section('scripts')
    <script src="{{ asset('js/Sortable.min.js') }}"></script>
@endsection