@extends('layouts.app')

@section('content')
    <div class="container mt-5">

        <!-- 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 text-left">
            <h2 class="h4 font-weight-bold">Albums</h2>
        </div>
        <div class="card shadow-sm">
            <div class="card-body">
                <form id="galleryForm" action="{{ route('gallery.add-album') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <h4 class="mb-3">Add Album</h4>

                    <!-- Album Name -->
                    <div class="mb-3">
                        <label for="album_name" class="form-label">Album Name*</label>
                        <input type="text" id="album_name" name="album_name" class="form-control" required
                            placeholder="Enter album name">
                    </div>
                    <!-- Cover Photo -->
                    <div class="mb-3">
                        <label for="cover_photo" class="form-label">Cover Photo*</label>
                        <div class="border p-4 rounded text-center bg-light" id="drop-zone">
                            <div id="upload-prompt">
                                <i class="bi bi-cloud-upload display-6 text-secondary"></i>
                                <p class="text-muted">Upload a file or drag and drop</p>
                                <input id="cover_photo" name="cover_photo" type="file" class="form-control" required
                                    onchange="validateGalleryImage(event)" accept="image/*">
                                <p class="small text-muted">PNG, JPG, GIF (up to 300*300px)</p>
                            </div>
                            <div id="preview-container" class="d-none text-center">
                                <img id="preview-image" class="img-thumbnail mb-3" src="" alt="Preview">
                                <p id="file-name" class="text-muted"></p>
                                <button type="button" id="remove-file" class="btn btn-danger btn-sm"
                                    onclick="removeGalleryFile()">Remove file</button>
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea id="album_description" name="description" class="form-control" rows="4" required
                            placeholder="Describe your album"></textarea>
                    </div>


                    <!-- Submit Button -->
                    <div class="text-end">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>

                @if (session('success'))
                    <div class="alert alert-success mt-4">
                        <i class="bi bi-check-circle"></i> {{ session('success') }}
                    </div>
                @endif
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            tinymce.init({
                selector: '#album_description',
                plugins: 'lists link image table code help wordcount',
                toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                menubar: false,
                height: 200,
                setup: function(editor) {
                    editor.on('change', function() {
                        tinymce
                            .triggerSave(); // Ensures TinyMCE updates the underlying textarea
                    });
                }

            });
            document.getElementById('galleryForm').addEventListener('submit', function() {
                tinymce.triggerSave();
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dropZone = document.getElementById('drop-zone');
            const fileInput = document.getElementById('cover_photo');
            const uploadPrompt = document.getElementById('upload-prompt');
            const previewContainer = document.getElementById('preview-container');
            const previewImage = document.getElementById('preview-image');
            const fileName = document.getElementById('file-name');
            const removeButton = document.getElementById('remove-file');

            function handleFile(file) {
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImage.src = e.target.result;
                        fileName.textContent = file.name;
                        uploadPrompt.classList.add('d-none');
                        previewContainer.classList.remove('d-none');
                    };
                    reader.readAsDataURL(file);
                }
            }

            fileInput.addEventListener('change', function(e) {
                if (this.files && this.files[0]) {
                    handleFile(this.files[0]);
                }
            });

            dropZone.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.classList.add('border-primary');
            });

            dropZone.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.classList.remove('border-primary');
            });

            dropZone.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('border-primary');
                if (e.dataTransfer.files && e.dataTransfer.files[0]) {
                    fileInput.files = e.dataTransfer.files;
                    handleFile(e.dataTransfer.files[0]);
                }
            });

            removeButton.addEventListener('click', function() {
                fileInput.value = '';
                previewImage.src = '';
                fileName.textContent = '';
                previewContainer.classList.add('d-none');
                uploadPrompt.classList.remove('d-none');
            });
        });
    </script>

    <script>
        function validateGalleryImage(event) {
            const file = event.target.files[0];
            if (!file) return;
            const previewContainer = document.getElementById('preview-container');
            const previewImage = document.getElementById('preview-image');
            const fileName = document.getElementById('file-name');

            const img = new Image();
            const reader = new FileReader();

            reader.onload = function(e) {
                img.onload = function() {
                    if (img.width === 300 && img.height === 300) {
                        if (fileName && previewImage && previewContainer) {
                            fileName.textContent = `File: ${file.name}`;
                            previewImage.src = e.target.result;
                            previewContainer.classList.remove('d-none');
                        }
                    } else {
                        alert(`❌ Image must be exactly 300x300 pixels. Yours is ${img.width}x${img.height}px.`);
                        event.target.value = "";
                        previewContainer.classList.add('d-none');
                    }
                };
                img.src = e.target.result;
            };

            reader.readAsDataURL(file);
        }

        function removeGalleryFile() {
            document.getElementById('cover_photo').value = "";
            const previewContainer = document.getElementById('preview-container');
            if (previewContainer) {
                previewContainer.classList.add('d-none');
            }
        }
    </script>

    <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