{{-- resources/views/pages/idle_screen/edit.blade.php --}}
@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="{{ route('idle_screen.index') }}">Idle Screen</a></li>
                <li class="breadcrumb-item active">Edit Idle Screen</li>
            </ol>
            <!-- end breadcrumb -->
            <!-- begin page-header -->
            <h1 class="page-header">Edit Idle Screen</h1>
            <!-- end page-header -->

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Edit Idle Screen</h4>
                </div>
                <div class="panel-body">
                    <form action="{{ route('idle_screen.update', $idleScreen->id) }}" method="POST"
                        enctype="multipart/form-data" id="idle-screen-form">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title" class="form-label">Title <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="title" id="title" class="form-control"
                                        value="{{ $idleScreen->title }}" maxlength="255"
                                        placeholder="Enter idle screen title">
                                    <small class="form-text text-muted">Maximum 255 characters</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="media_type" class="form-label">Media Type <span
                                            class="text-danger">*</span></label>
                                    <select name="media_type" id="media_type" class="form-control"
                                        onchange="toggleMediaInput(this.value)">
                                        <option value="image" {{ $idleScreen->media_type == 'image' ? 'selected' : '' }}>
                                            Image
                                        </option>
                                        <option value="video" {{ $idleScreen->media_type == 'video' ? 'selected' : '' }}>
                                            Video
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Image Management Section -->
                        <div id="image_inputs" style="display:none;">
                            @if ($idleScreen->media_type == 'image' && $idleScreen->images->count() > 0)
                                <div class="form-group">
                                    <label class="form-label">Current Images</label>
                                    <div class="row" id="current-images">
                                        @foreach ($idleScreen->images as $index => $image)
                                            <div class="col-md-3 mb-3" id="image-{{ $image->id }}">
                                                <div class="card">
                                                    @if ($image->data_url && Storage::disk('public')->exists($image->data_url))
                                                        <img src="{{ asset('storage/' . $image->data_url) }}"
                                                            class="card-img-top" style="height: 150px; object-fit: cover;"
                                                            alt="Current Image {{ $index + 1 }}">
                                                    @else
                                                        <div class="card-img-top d-flex align-items-center justify-content-center bg-light"
                                                            style="height: 150px;">
                                                            <span class="text-muted">Image not found</span>
                                                        </div>
                                                    @endif
                                                    <div class="card-body p-2">
                                                        <div class="form-check">
                                                            <input type="checkbox" name="delete_images[]"
                                                                value="{{ $image->id }}"
                                                                class="form-check-input delete-checkbox"
                                                                id="delete-{{ $image->id }}">
                                                            <label class="form-check-label text-danger"
                                                                for="delete-{{ $image->id }}">
                                                                Delete this image
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="form-group">
                                <label for="new_images" class="form-label">
                                    {{ $idleScreen->images->count() > 0 ? 'Add New Images' : 'Upload Images' }}
                                </label>
                                <input type="file" name="new_images[]" id="new_images" class="form-control" multiple
                                    accept="image/*">
                                <small class="form-text text-muted">
                                    Allowed formats: JPG, JPEG, PNG, GIF, WEBP. Maximum size: 20MB per file.
                                </small>
                                <div id="new_image_preview" class="mt-3"></div>
                            </div>
                        </div>

                        <!-- Video Management Section -->
                        <div class="form-group" id="video_input" style="display:none;">
                            @if ($idleScreen->media_type == 'video' && $idleScreen->data_url)
                                <div class="form-group">
                                    <label class="form-label">Current Video</label>
                                    @if (Storage::disk('public')->exists($idleScreen->data_url))
                                        <div class="card" style="max-width: 400px;">
                                            <video class="card-img-top" controls style="height: 200px;">
                                                <source src="{{ asset('storage/' . $idleScreen->data_url) }}"
                                                    type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                            <div class="card-body p-2">
                                                <small class="text-muted">Current video file</small>
                                            </div>
                                        </div>
                                    @else
                                        <div class="alert alert-warning">Current video file not found.</div>
                                    @endif
                                </div>
                            @endif

                            <label for="data_url_video" class="form-label">Replace Video</label>
                            <input type="file" name="data_url_video" id="data_url_video" class="form-control"
                                accept="video/*">
                            <small class="form-text text-muted">
                                Allowed formats: MP4, MPEG, MOV, AVI, WEBM. Maximum size: 20MB. Leave empty to keep current
                                video.
                            </small>
                            <div id="video_preview" class="mt-3"></div>
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-custom" id="submit-btn">
                                <i class="fa fa-save"></i> Update Idle Screen
                            </button>
                            <a href="{{ route('idle_screen.index') }}" class="btn btn-custom ml-2">
                                <i class="fa fa-arrow-left"></i> Back to List
                            </a>
                        </div>
                    </form>
                </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 -->
    </div>

    <script>
        // Global variable to track file validation status
        let isVideoValid = true;

        function toggleMediaInput(value) {
            const imageInputs = document.getElementById('image_inputs');
            const videoInput = document.getElementById('video_input');

            // Hide all inputs first
            imageInputs.style.display = 'none';
            videoInput.style.display = 'none';

            // Show appropriate input based on media type
            if (value === 'image') {
                imageInputs.style.display = 'block';
            } else if (value === 'video') {
                videoInput.style.display = 'block';
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Initialize based on current media type
            const mediaType = document.getElementById('media_type').value;
            if (mediaType) {
                toggleMediaInput(mediaType);
            }

            // Delete checkbox functionality
            document.querySelectorAll('.delete-checkbox').forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    const imageCard = this.closest('.card');
                    if (this.checked) {
                        imageCard.style.opacity = '0.5';
                        imageCard.style.border = '2px solid #dc3545';
                    } else {
                        imageCard.style.opacity = '1';
                        imageCard.style.border = '';
                    }
                });
            });

            // New image preview functionality
            document.getElementById('new_images').addEventListener('change', function(e) {
                const files = e.target.files;
                const preview = document.getElementById('new_image_preview');
                preview.innerHTML = '';

                if (files.length > 0) {
                    const previewContainer = document.createElement('div');
                    previewContainer.className = 'row';

                    Array.from(files).forEach((file, index) => {
                        if (file.type.startsWith('image/')) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const col = document.createElement('div');
                                col.className = 'col-md-3 mb-3';
                                col.innerHTML = `
                                    <div class="card border-success">
                                        <img src="${e.target.result}" class="card-img-top" 
                                             style="height: 150px; object-fit: cover;" alt="New Image ${index + 1}">
                                        <div class="card-body p-2">
                                            <small class="text-success">New: ${file.name}</small>
                                        </div>
                                    </div>
                                `;
                                previewContainer.appendChild(col);
                            };
                            reader.readAsDataURL(file);
                        }
                    });

                    preview.appendChild(previewContainer);
                }
            });

            // Video preview functionality with validation
            document.getElementById('data_url_video').addEventListener('change', function(e) {
                const file = e.target.files[0];
                const preview = document.getElementById('video_preview');

                // Always clear preview first
                preview.innerHTML = '';

                // Reset validation flag
                isVideoValid = true;

                // If no file selected, just return
                if (!file) {
                    return;
                }

                // Validate file size first - if invalid, clear input and return without preview
                if (!validateFileSize(file)) {
                    e.target.value = '';
                    isVideoValid = false;
                    return; // Exit early - no preview will be shown
                }

                // Only create preview if file passes all validations and is a video
                if (file && file.type.startsWith('video/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.innerHTML = `
                            <div class="card border-success" style="max-width: 400px;">
                                <video class="card-img-top" controls style="height: 200px;">
                                    <source src="${e.target.result}" type="${file.type}">
                                    Your browser does not support the video tag.
                                </video>
                                <div class="card-body p-2">
                                    <small class="text-success">New: ${file.name}</small>
                                </div>
                            </div>
                        `;
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Form validation
            document.getElementById('idle-screen-form').addEventListener('submit', function(e) {
                const title = document.getElementById('title').value.trim();
                const mediaType = document.getElementById('media_type').value;

                if (!title) {
                    alert('Please enter a title.');
                    e.preventDefault();
                    return false;
                }

                // Check if video file is valid before submission
                if (mediaType === 'video') {
                    const videoFile = document.getElementById('data_url_video').files[0];
                    if (videoFile && !isVideoValid) {
                        alert('Please select a valid video file (maximum size: 20MB).');
                        e.preventDefault();
                        return false;
                    }
                }

                // Check if user is trying to delete all images without adding new ones
                if (mediaType === 'image') {
                    const currentImages = document.querySelectorAll('#current-images .card').length;
                    const deletedImages = document.querySelectorAll('.delete-checkbox:checked').length;
                    const newImages = document.getElementById('new_images').files.length;

                    if (currentImages > 0 && currentImages === deletedImages && newImages === 0) {
                        alert(
                            'You cannot delete all images without adding new ones. Please add at least one new image.'
                        );
                        e.preventDefault();
                        return false;
                    }
                }

                // Disable submit button to prevent double submission
                const submitBtn = document.getElementById('submit-btn');
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Updating...';
            });

            // File size validation
            function validateFileSize(file, maxSize = 20 * 1024 * 1024) { // 20MB
                if (file.size > maxSize) {
                    alert(`File "${file.name}" is too large. Maximum size is 20MB.`);
                    return false;
                }
                return true;
            }

            // Add file size validation to image inputs
            document.getElementById('new_images').addEventListener('change', function(e) {
                const files = Array.from(e.target.files);
                for (let file of files) {
                    if (!validateFileSize(file)) {
                        e.target.value = '';
                        document.getElementById('new_image_preview').innerHTML = '';
                        break;
                    }
                }
            });

            // Confirmation for deleting images
            document.querySelectorAll('.delete-checkbox').forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    if (this.checked) {
                        if (!confirm('Are you sure you want to delete this image?')) {
                            this.checked = false;
                            const imageCard = this.closest('.card');
                            imageCard.style.opacity = '1';
                            imageCard.style.border = '';
                        }
                    }
                });
            });
        });
    </script>
@endsection