@extends('layouts.admin')

@section('title', 'Slides')

@section('content')
<div class="container">
    <!-- Drobečková navigace -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Slides</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1>Slides</h1>

        @if (session('status'))
        <div class="alert alert-success alert-dismissable fade show" role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            {{ session('status') }}
        </div>
        @endif

        <div>
            <a href="{{ route('admin.slides.create') }}" class="btn btn-primary">Add New Slide</a>          
            <form id="deleteSelectedForm" action="{{ route('admin.slides.deleteSelected') }}" method="POST" class="d-inline-block ms-2">
                @csrf
                <input type="hidden" name="ids" id="selectedIds">
                <button type="button" class="btn btn-danger" onclick="submitDeleteSelectedForm()">Delete Selected</button>
            </form>
        </div>
    </div>

    <form action="{{ route('admin.slides.index') }}" method="GET" class="mb-3">
        <div class="input-group">
            <input type="text" class="form-control" name="search" placeholder="Search Slides" value="{{ request('search') }}">
            <button class="btn btn-primary" type="submit">Search</button>
        </div>
    </form>

    <!-- Seznam Slides -->
    <!--button id="enableSorting" class="btn btn-secondary mb-3">Enable Sorting</button-->

    <table class="table table-striped">
        <thead>
            <tr>
                <th><input type="checkbox" id="select-all"></th>
                <th style="width:60px;">ID</th>
                <th>Title</th>
                <th style="width:120px;">Actions</th>
            </tr>
        </thead>
        <tbody id="sortable">
            @foreach ($slides as $slide)
            <tr id="slide-{{ $slide->id }}">
                <td><input type="checkbox" name="slide_ids[]" value="{{ $slide->id }}"></td>
                <td>{{ $slide->id }}</td>
                <td>{{ $slide->name }}</td>
                <td>
                    <a href="{{ route('admin.slides.edit', $slide->id) }}" class="btn btn-warning btn-sm">Edit</a>
                    <form action="{{ route('admin.slides.destroy', $slide->id) }}" method="POST" style="display:inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Stránkování -->
    <div class="d-flex justify-content-between">
        <div>
            Showing {{ $slides->firstItem() }} to {{ $slides->lastItem() }} of {{ $slides->total() }} items
        </div>
        <div class="pagination-info">
            {{ $slides->appends(['search' => request('search')])->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>

<!-- Include jQuery and jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {
        $('#select-all').on('click', function() {
            var checkboxes = $('#sortable input[type="checkbox"]');
            checkboxes.prop('checked', this.checked);
        });

        $('#enableSorting').on('click', function() {
            $( "#sortable" ).sortable({
                update: function(event, ui) {
                    var order = $(this).sortable('toArray');
                    $.ajax({
                        url: '{{ route('admin.slides.updateOrder') }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            order: order
                        },
                        success: function(response) {
                            alert('Order updated successfully.');
                        },
                        error: function(xhr) {
                            alert('An error occurred while updating the order.');
                        }
                    });
                }
            }).disableSelection();
        });

        window.submitDeleteSelectedForm = function() {
            const selectedCheckboxes = document.querySelectorAll('input[name="slide_ids[]"]:checked');
            const ids = Array.from(selectedCheckboxes).map(checkbox => checkbox.value);

            if (ids.length === 0) {
                alert('No Slide selected!');
                return;
            }

            document.getElementById('selectedIds').value = JSON.stringify(ids);
            document.getElementById('deleteSelectedForm').submit();
        }
    });
</script>
@endsection