@extends('admin.layout.layout')
@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-0 pt-5">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>{{ $post ? 'Edit post' : 'Add post' }}</h1>
                    </div>
                </div>
            </div>
        </section>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header p-2"></div>
                            <div class="card-body">
                                @if ($message = Session::get('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        <strong>{{ $message }}</strong>
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endif

                                @if (Session::has('error'))
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        <strong>Error:</strong> {{ Session::get('error') }}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endif

                                <form method="post"
                                    action="{{ $post ? route('posts.update', $post->id) : route('posts.store') }}"
                                    enctype="multipart/form-data">
                                    @csrf
                                    @if ($post)
                                        @method('PUT')
                                    @endif

                                    <div class="form-group">
                                        <label for="title">Title</label>
                                        <input type="text" class="form-control" name="title" placeholder="Enter Title"
                                            value="{{ old('title', $post->title ?? '') }}">
                                        @error('title')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea class="form-control" name="description" placeholder="Enter Description">{{ old('description', $post->description ?? '') }}</textarea>
                                        @error('description')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Existing Media Section -->
                                    @if ($post && $post->media->count() > 0)
                                        <div class="form-group">
                                            <label>Existing Media</label>
                                            <div class="row">
                                                @foreach ($post->media as $media)
                                                    <div class="col-md-4">
                                                        @if ($media->media_type == 'image')
                                                            <img src="{{ asset('storage/uploads/posts/' . $media->media_url) }}"
                                                                alt="image" width="100%" />
                                                        @elseif ($media->media_type == 'video')
                                                            <video width="100%" controls>
                                                                <source
                                                                    src="{{ asset('storage/uploads/posts/' . $media->media_url) }}"
                                                                    type="video/mp4">
                                                                Your browser does not support the video tag.
                                                            </video>
                                                        @elseif ($media->media_type == 'audio')
                                                            <audio controls>
                                                                <source
                                                                    src="{{ asset('storage/uploads/posts/' . $media->media_url) }}"
                                                                    type="audio/mpeg">
                                                                Your browser does not support the audio tag.
                                                            </audio>
                                                        @elseif ($media->media_type == 'doc')
                                                            <a href="{{ asset('storage/uploads/posts/' . $media->media_url) }}"
                                                                target="_blank">{{ $media->media_url }}</a>
                                                        @endif

                                                        <a href="{{ route('posts.removeMedia', $media->id) }}"
                                                            target="_blank"><i class="fas fa-trash-alt"></i> Remove</a>
                                                        

                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif

                                    <!-- New Media Upload Section -->
                                    <div class="form-group">
                                        <label for="media">New Media (Select up to 3 files)</label>
                                        <input type="file" class="form-control" id="media" name="media[]"
                                            accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.txt" multiple
                                            onchange="previewFiles()">
                                        <div id="filePreview" class="mt-3"></div>
                                        @error('media')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <button type="submit" class="btn btn-outline-success">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

<script>
    function previewFiles() {
        const fileInput = document.getElementById('media');
        const preview = document.getElementById('filePreview');
        const files = fileInput.files;

        // Clear any existing previews
        preview.innerHTML = '';

        // Limit the number of files to 3
        const limit = 3;
        const fileCount = Math.min(files.length, limit);

        for (let i = 0; i < fileCount; i++) {
            const file = files[i];
            const fileType = file.type;

            const listItem = document.createElement('div');
            listItem.classList.add('mb-2');
            listItem.classList.add('position-relative'); // For positioning the remove button

            // Create a container for the media preview
            const mediaContainer = document.createElement('div');
            mediaContainer.classList.add('d-inline-block');

            if (fileType.startsWith('image/')) {
                // Image file
                const img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                img.width = 150; // Set the preview size
                img.classList.add('mr-2');
                mediaContainer.appendChild(img);
            } else if (fileType.startsWith('video/')) {
                // Video file
                const video = document.createElement('video');
                video.src = URL.createObjectURL(file);
                video.width = 200; // Set the preview size
                video.controls = true;
                mediaContainer.appendChild(video);
            } else if (fileType.startsWith('audio/')) {
                // Audio file
                const audio = document.createElement('audio');
                audio.src = URL.createObjectURL(file);
                audio.controls = true;
                mediaContainer.appendChild(audio);
            } else if (fileType === 'application/pdf') {
                // PDF file
                const pdfLink = document.createElement('a');
                pdfLink.href = URL.createObjectURL(file);
                pdfLink.target = "_blank";
                pdfLink.textContent = `PDF: ${file.name}`;
                mediaContainer.appendChild(pdfLink);
            } else {
                // For other files, just display the name
                const fileLink = document.createElement('a');
                fileLink.href = URL.createObjectURL(file);
                fileLink.target = "_blank";
                fileLink.textContent = `File: ${file.name}`;
                mediaContainer.appendChild(fileLink);
            }

            // Add file name and remove button
            const fileName = document.createElement('span');
            fileName.textContent = ` ${file.name}`;
            mediaContainer.appendChild(fileName);

            const removeButton = document.createElement('button');
            removeButton.textContent = 'Remove';
            removeButton.classList.add('btn', 'btn-danger', 'btn-sm', 'ml-2');
            removeButton.onclick = function() {
                removeFile(i);
            };
            mediaContainer.appendChild(removeButton);

            listItem.appendChild(mediaContainer);
            preview.appendChild(listItem);
        }

        if (files.length > limit) {
            const warning = document.createElement('p');
            warning.classList.add('text-danger');
            warning.textContent =
                `You have selected more than ${limit} files. Only the first ${limit} will be uploaded.`;
            preview.appendChild(warning);
        }
    }

    function removeFile(index) {
        const fileInput = document.getElementById('media');
        const dataTransfer = new DataTransfer();

        // Add all files except the one to be removed
        for (let i = 0; i < fileInput.files.length; i++) {
            if (i !== index) {
                dataTransfer.items.add(fileInput.files[i]);
            }
        }

        // Update file input with new files list
        fileInput.files = dataTransfer.files;
        previewFiles();
    }
</script>