@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
                <li class="breadcrumb-item active">Background Image</li>
            </ol>
            <!-- end breadcrumb -->
            <!-- begin page-header -->
            <h1 class="page-header">Background Image</small></h1>
            <!-- end page-header -->
            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('background_imgs.create') }}" class="btn btn-custom"><i class="fa fa-plus"></i>
                            Add Background Image</a>
                    </div>
                </div>
                <div class="panel-body">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fa fa-check-circle me-2"></i>
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <div id="alert-container"></div>

                    <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Image</th>
                                <th>Active</th>
                                <th>Slide</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($backgroundImgs as $backgroundImg)
                                <tr>
                                    <td>{{ $backgroundImg->name }}</td>
                                    <td>
                                        <button type="button" class="btn btn-custom btn-view-images"
                                            data-images="{{ json_encode(
                                                collect(explode(',', $backgroundImg->path))->map(function ($imagePath, $index) use ($backgroundImg) {
                                                    return [
                                                        'url' => asset('storage/background_imgs/' . trim($imagePath)),
                                                        'name' => $backgroundImg->name . ' - Image ' . ($index + 1),
                                                    ];
                                                }),
                                            ) }}">
                                            View Images ({{ count(explode(',', $backgroundImg->path)) }})
                                        </button>
                                    </td>
                                    <td>
                                        <div class="switcher">
                                            <input type="checkbox" name="active_status"
                                                id="switcher_checkbox_{{ $backgroundImg->id }}"
                                                {{ $backgroundImg->is_active ? 'checked' : '' }}
                                                onchange="updateActiveStatus({{ $backgroundImg->id }}, this.checked)">
                                            <label for="switcher_checkbox_{{ $backgroundImg->id }}"></label>
                                        </div>
                                    </td>
                                    <td>
                                        @if ($backgroundImg->is_slide == 1)
                                            <span class="label label-green">Yes</span>
                                        @else
                                            <span class="label label-warning">No</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('background_imgs.edit', $backgroundImg->id) }}"
                                            class="btn btn-custom"><i class="fa fa-edit"></i></a>
                                        <a href="{{ route('background_imgs.destroy', $backgroundImg->id) }}"
                                            class="btn btn-custom"
                                            onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this?')) { document.getElementById('delete-channel-{{ $backgroundImg->id }}').submit(); }">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                        <form id="delete-channel-{{ $backgroundImg->id }}"
                                            action="{{ route('background_imgs.destroy', $backgroundImg->id) }}"
                                            method="POST" style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <!-- Modal for image carousel -->
                    <div class="modal fade" id="imageCarouselModal" tabindex="-1" role="dialog"
                        aria-labelledby="imageCarouselModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-xl" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="imageCarouselModalLabel">Background Images</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body p-0">
                                    <div id="imageCarousel" class="carousel slide" data-ride="carousel">
                                        <div class="carousel-inner" id="carouselContent">
                                            <!-- Carousel items will be inserted here -->
                                        </div>
                                        <a class="carousel-control-prev" href="#imageCarousel" role="button"
                                            data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="carousel-control-next" href="#imageCarousel" role="button"
                                            data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                        <ol class="carousel-indicators" id="carouselIndicators">
                                            <!-- Indicators will be inserted here -->
                                        </ol>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-custom" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i
                class="fa fa-angle-up"></i></a>
        <!-- end scroll to top btn -->

        <style>
            /* Carousel controls positioning - vertically centered */
            #imageCarousel .carousel-control-prev,
            #imageCarousel .carousel-control-next {
                top: 50%;
                transform: translateY(-50%);
                height: 60px;
                width: 5%;
                opacity: 0.8;
            }

            /* Custom carousel arrow styling */
            #imageCarousel .carousel-control-prev-icon,
            #imageCarousel .carousel-control-next-icon {
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 50%;
                width: 40px;
                height: 40px;
                background-image: none;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Font Awesome arrows */
            #imageCarousel .carousel-control-prev-icon::after {
                content: "\f104";
                /* Font Awesome left arrow */
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                color: white;
                font-size: 20px;
            }

            #imageCarousel .carousel-control-next-icon::after {
                content: "\f105";
                /* Font Awesome right arrow */
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                color: white;
                font-size: 20px;
            }

            /* Fallback arrows for systems without Font Awesome */
            #imageCarousel .carousel-control-prev-icon::before {
                color: white;
                font-size: 24px;
                font-weight: bold;
                font-family: Arial, sans-serif;
            }

            #imageCarousel .carousel-control-next-icon::before {
                color: white;
                font-size: 24px;
                font-weight: bold;
                font-family: Arial, sans-serif;
            }

            /* Hover effects */
            #imageCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
            #imageCarousel .carousel-control-next:hover .carousel-control-next-icon {
                background-color: rgba(0, 0, 0, 0.9);
                transform: scale(1.1);
                transition: all 0.3s ease;
            }

            #imageCarousel .carousel-control-prev:hover,
            #imageCarousel .carousel-control-next:hover {
                opacity: 1;
            }

            /* Carousel indicators styling */
            #imageCarousel .carousel-indicators {
                bottom: 15px;
            }

            #imageCarousel .carousel-indicators li {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: rgba(255, 255, 255, 0.5);
                border: 2px solid rgba(255, 255, 255, 0.8);
            }

            #imageCarousel .carousel-indicators li.active {
                background-color: white;
            }
        </style>

        <script>
            function updateActiveStatus(id, isActive) {
                // Disable the checkbox during the request
                const checkbox = document.getElementById(`switcher_checkbox_${id}`);
                checkbox.disabled = true;

                // Deactivate all other checkboxes if this one is being activated
                if (isActive) {
                    document.querySelectorAll('input[name="active_status"]').forEach(cb => {
                        if (cb.id !== checkbox.id) {
                            cb.checked = false;
                        }
                    });
                }

                // Create FormData object
                const formData = new FormData();
                formData.append('_method', 'PATCH');
                formData.append('is_active', isActive ? 1 : 0);

                // Send AJAX request to update the active status
                fetch(`{{ route('background_imgs.updateStatus', '') }}/${id}`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: formData
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            // Show the success message from backend
                            showAlertMessage('success', data.message);
                        } else {
                            throw new Error(data.message || 'Failed to update status');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        // Revert the checkbox
                        checkbox.checked = !isActive;
                        showAlertMessage('danger', error.message || 'An error occurred while updating status');
                    })
                    .finally(() => {
                        // Re-enable the checkbox
                        checkbox.disabled = false;
                    });
            }

            document.addEventListener('DOMContentLoaded', function() {
                // Handle view images button click
                document.querySelectorAll('.btn-view-images').forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        showImageCarousel(this);
                    });
                });

                // Auto-dismiss session alerts after 3 seconds
                const sessionAlert = document.querySelector('.alert.alert-success');
                if (sessionAlert) {
                    setTimeout(() => {
                        $(sessionAlert).alert('close');
                    }, 3000);
                }
            });

            function showImageCarousel(button) {
                try {
                    const images = JSON.parse(button.getAttribute('data-images'));

                    if (!images || images.length === 0) {
                        showAlertMessage('warning', 'No images to display.');
                        return;
                    }

                    buildCarousel(images);
                    $('#imageCarouselModal').modal('show');
                } catch (error) {
                    console.error('Error parsing images data:', error);
                    showAlertMessage('danger', 'Error loading images.');
                }
            }

            function buildCarousel(images) {
                const carouselContent = document.getElementById('carouselContent');
                const carouselIndicators = document.getElementById('carouselIndicators');

                // Clear existing content
                carouselContent.innerHTML = '';
                carouselIndicators.innerHTML = '';

                // Build carousel items and indicators
                images.forEach((image, index) => {
                    // Create carousel item
                    const carouselItem = document.createElement('div');
                    carouselItem.className = `carousel-item ${index === 0 ? 'active' : ''}`;
                    carouselItem.innerHTML = `
                        <div class="d-flex justify-content-center align-items-center" style="min-height: 400px; background-color: #f8f9fa;">
                            <img src="${image.url}" class="d-block img-fluid" alt="${image.name}" 
                                 style="max-height: 70vh; max-width: 100%; object-fit: contain;">
                        </div>
                        <div class="carousel-caption d-none d-md-block" style="background-color: rgba(0,0,0,0.7); border-radius: 5px;">
                            <h5>${image.name}</h5>
                        </div>
                    `;
                    carouselContent.appendChild(carouselItem);

                    // Create indicator
                    const indicator = document.createElement('li');
                    indicator.setAttribute('data-target', '#imageCarousel');
                    indicator.setAttribute('data-slide-to', index);
                    if (index === 0) {
                        indicator.className = 'active';
                    }
                    carouselIndicators.appendChild(indicator);
                });

                // Hide controls and indicators if only one image
                const prevControl = document.querySelector('.carousel-control-prev');
                const nextControl = document.querySelector('.carousel-control-next');

                if (images.length <= 1) {
                    prevControl.style.display = 'none';
                    nextControl.style.display = 'none';
                    carouselIndicators.style.display = 'none';
                } else {
                    prevControl.style.display = 'block';
                    nextControl.style.display = 'block';
                    carouselIndicators.style.display = 'flex';
                }
            }

            // Helper function to show Bootstrap alert messages
            function showAlertMessage(type, message) {
                const alertContainer = document.getElementById('alert-container');

                // Remove any existing alerts
                alertContainer.innerHTML = '';

                // Create new alert
                const alertDiv = document.createElement('div');
                alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
                alertDiv.setAttribute('role', 'alert');
                alertDiv.innerHTML = `
                    <i class="fa ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} me-2"></i>
                    ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                `;

                alertContainer.appendChild(alertDiv);

                // Auto-dismiss after 3 seconds
                setTimeout(function() {
                    $(alertDiv).alert('close');
                }, 3000);
            }
        </script>
    </div>
@endsection