
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner Ads Management</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        /* Toggle styles */
        .toggle {
            display: inline-block;
            width: 60px;
            height: 30px;
            position: relative;
            margin: 0 10px;
        }

        .toggle input {
            display: none;
        }

        .toggle .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 30px;
        }

        .toggle .slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #66bb6a;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 50;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>

    <div class="container mx-auto mt-10 p-6 bg-white shadow-md rounded-lg">
        <h1 class="text-2xl font-bold text-center">Manage Banner Ads</h1>

        

        <!-- Button to Open the Modal -->
<button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" data-bs-toggle="modal" data-bs-target="#bannerModal">
    Add Banner Ad
</button>
<!-- Modal -->
<div class="modal fade" id="bannerModal" tabindex="-1" aria-labelledby="bannerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bannerModalLabel">Add Banner Ad</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="bannerForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-4">
                        <label for="image" class="block text-gray-700">Image:</label>
                        <input type="file" name="image" class="mt-1 block w-full border border-gray-300 rounded-lg p-2" required>
                    </div>
                    <div class="mb-4">
                        <label for="title" class="block text-gray-700">Title:</label>
                        <input type="text" name="title" class="mt-1 block w-full border border-gray-300 rounded-lg p-2" required>
                    </div>
                    <div class="mb-4">
                        <label for="description" class="block text-gray-700">Description:</label>
                        <textarea name="description" class="mt-1 block w-full border border-gray-300 rounded-lg p-2" required></textarea>
                    </div>
                   <div class="mb-4" style="display: none;">
    <label class="block text-gray-700">Status:</label>
    <label class="toggle">
        <input type="checkbox" name="status" value="active" checked hidden>
        <span class="slider"></span>
    </label>
    <span id="status-label" class="ml-2">Active</span>
</div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="submitBannerForm()">Add Banner Ad</button>
            </div>
        </div>
    </div>
</div>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>


        <h2 class="text-xl font-semibold mt-6">Existing Banner Ads</h2>
       <div class="space-y-4 mt-3">
    @foreach ($bannerAds as $bannerAd)
        <div class="bg-white border border-gray-300 rounded-lg shadow-md p-4 flex items-center justify-between">
            <!-- Left section with Image, Title, and Description -->
            <div class="flex items-start space-x-4">
                <!-- Image -->
                <img src="{{ asset('storage/app/public/' . $bannerAd->image) }}" alt="{{ $bannerAd->title }}" class="w-32 h-32 object-cover rounded-lg">

                <!-- Title and Description -->
                <div>
                    <h3 class="text-xl font-bold">{{ $bannerAd->title }}</h3>
                    <p class="text-gray-600">{{ $bannerAd->description }}</p>
                </div>
            </div>

            <!-- Right section with Toggle and Actions -->
            <div class="flex items-center space-x-4">
                <!-- Status Toggle -->
                <td class="border px-4 py-2">
                            <label class="toggle">
                                <input type="checkbox" onchange="toggleStatus({{ $bannerAd->id }}, this)" {{ $bannerAd->status === 'active' ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                            <span>{{ $bannerAd->status === 'active' ? 'Active' : 'Inactive' }}</span>
                        </td>

                <!-- Action Buttons -->
                <div class="space-x-2">
                    <button type="button" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-1 px-4 rounded" onclick="editBanner({{ json_encode($bannerAd) }})"><i class="fas fa-pencil-alt mr-1"></i></button>
                    <button type="button" class="bg-red-500 hover:bg-red-600 text-white font-bold py-1 px-4 rounded" onclick="confirmDelete(event, {{ $bannerAd->id }})"><i class="fas fa-trash mr-1"></i></button>
                </div>
            </div>
        </div>
    @endforeach
</div>


        <!-- Edit Banner Modal -->
        <div id="editModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Banner Ad</h5>
                    <span class="close" onclick="closeModal()">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="editForm" action="" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <div class="mb-4">
                <label for="image" class="block text-gray-700">Image:</label>
                <input type="file" name="image" class="mt-1 block w-full border border-gray-300 rounded-lg p-2" required>
            </div><!-- Include this for the PUT method -->
                        <div class="mb-4">
                            <label for="editTitle" class="block text-gray-700">Title:</label>
                            <input type="text" name="title" class="mt-1 block w-full border border-gray-300 rounded-lg p-2" id="editTitle" required>
                        </div>
                        <div class="mb-4">
                            <label for="editDescription" class="block text-gray-700">Description:</label>
                            <textarea name="description" class="mt-1 block w-full border border-gray-300 rounded-lg p-2" id="editDescription" required></textarea>
                        </div>
                        
                        <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="submitEditForm()">Update Banner</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function submitBannerForm() {
            const form = document.getElementById('bannerForm');
            const formData = new FormData(form);
            $.ajax({
                url: "{{ route('banners.store') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        location.reload(); // Refresh page to see new banner
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON.message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }

        function toggleStatus(id, element) {
            const status = element.checked ? 'active' : 'inactive';
            $.ajax({
                url: `/admin/bannerads/${id}`,
                type: "POST",
                data: { status: status, _token: '{{ csrf_token() }}' },
                success: function(response) {
                    Swal.fire({
                        title: 'Status Updated!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON.message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }

        function confirmDelete(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: "This action cannot be undone!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `/admin/bannerads/${id}`,
                        type: "DELETE",
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(response) {
                            Swal.fire({
                                title: 'Deleted!',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                location.reload(); // Refresh page to see updates
                            });
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Error!',
                                text: xhr.responseJSON.message,
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    });
                }
            });
        }

        function editBanner(bannerAd) {
            $('#editTitle').val(bannerAd.title);
            $('#editDescription').val(bannerAd.description);
            $('#editStatus').prop('checked', bannerAd.status === 'active');
            $('#editStatusLabel').text(bannerAd.status === 'active' ? 'Active' : 'Inactive');
            $('#editForm').attr('action', `/admin/bannerads/${bannerAd.id}`);
            openModal();
        }

        function openModal() {
            document.getElementById('editModal').style.display = "block";
        }

        function closeModal() {
            document.getElementById('editModal').style.display = "none";
        }

        function submitEditForm() {
            const form = document.getElementById('editForm');
            const formData = new FormData(form);
            $.ajax({
                url: form.action,
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    Swal.fire({
                        title: 'Updated!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        location.reload(); // Refresh page to see updates
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON.message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }
    </script>



