@extends('layouts.app')

@section('content')
<style>
    /* Pagination Styling */
    .pagination {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
    }

    .pagination li {
        margin: 0 5px;
    }

    .pagination li a,
    .pagination li span {
        padding: 8px 12px;
        border-radius: 5px;
        text-decoration: none;
        border: 1px solid #ddd;
        color: #007bff;
        background-color: #fff;
    }

    .pagination li a:hover {
        background-color: #007bff;
        color: #fff;
    }

    .pagination .active span {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

    .pagination .disabled span {
        color: #ccc;
    }
</style>
<div class="container mt-5 px-4">

   <!-- Notification Messages -->
   <div class="container-fluid pt-4 px-4">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert" style="font-size: 18px; padding: 20px; border-left: 6px solid #be3a83; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
            <i class="fa fa-check-circle me-2" style="font-size: 24px;"></i>
            <strong>Success!</strong> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="position: absolute; right: 20px; top: 20px;"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert" style="font-size: 18px; padding: 20px; border-left: 6px solid #dc3545; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
            <i class="fa fa-exclamation-circle me-2" style="font-size: 24px;"></i>
            <strong>Error!</strong> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="position: absolute; right: 20px; top: 20px;"></button>
        </div>
    @endif
</div>

    <div class="bg-light text-dark p-3 rounded shadow-sm">
        <h2 class="h4 font-weight-bold">Albums</h2>
    </div>

    <div class="bg-white shadow rounded-lg overflow-hidden mt-4">
        <div class="p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="h5 text-dark">All Albums</h4>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col" class="text-center align-middle">Cover Photo</th>
                            <th scope="col" class="text-center align-middle">Album Name</th>
                            <th scope="col" class="text-center align-middle">Photos</th>
                            <th scope="col" class="text-center align-middle">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($albums as $album)
                            <tr>
                                <td class="text-center align-middle">
                                    <img src="{{ asset('storage/cover_photos/' . $album->cover->image_name) }}"
                                        alt="Cover Photo"
                                        class="img-thumbnail" style="width: 100px; height: 100px;">
                                </td>
                                <td class="text-center align-middle font-weight-bold">
                                    {{ $album->album_name }}
                                </td>
                                <td class="text-center align-middle">
                                    10 photos
                                </td>
                                <td class="text-center align-middle">
                                    <a href="#" class="btn btn-sm btn-primary mr-2">View Photos</a>
                                    <form id="unpublish-form" action="{{ route('gallery.unpublish', $album->id) }}"
                                        method="POST" class="d-inline-block">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="status" value="archived">
                                        <button type="submit" class="btn btn-sm btn-danger"
                                            onclick="return confirm('Are you sure you want to unpublish this album?')">
                                            Unpublish <i class="fas fa-thumbs-down"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    <em>No albums found.</em>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination Links -->
        <div class="d-flex justify-content-center mt-4">
            {!! $albums->links('vendor.pagination.bootstrap-4') !!}
        </div>
    </div>
</div>

<script>
    // Auto dismiss alerts after 5 seconds
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            var alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                var bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);
    });
</script>
@endsection




<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">