@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('hotel_videos.index') }}">Hotel Videos</a></li>
                <li class="breadcrumb-item active">Edit Video</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">Edit Welcome Video</h1>
            <!-- end page-header -->

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Edit Video: {{ $hotelVideo->title }}</h4>
                </div>
                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('hotel_videos.update', $hotelVideo->id) }}" method="POST"
                        enctype="multipart/form-data" id="video-edit-form">
                        @csrf
                        @method('PUT')

                        <div class="form-group">
                            <label for="title" class="required">Video Title</label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" id="title"
                                name="title" value="{{ old('title', $hotelVideo->title) }}" required maxlength="255"
                                placeholder="Enter video title">
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Current Video Info -->
                        <div class="form-group">
                            <label>Current Video</label>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-md-6">
                                            <h6 class="mb-1">{{ $hotelVideo->original_filename }}</h6>
                                            <small class="text-muted">
                                                Size: {{ $hotelVideo->formatted_file_size }} |
                                                Status:
                                                @if ($hotelVideo->status === 'active')
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-secondary">Inactive</span>
                                                @endif
                                            </small>
                                        </div>
                                        <div class="col-md-6 text-right">
                                            @if ($hotelVideo->fileExists())
                                                <video width="200" height="120" controls class="rounded">
                                                    <source src="{{ \App\Helpers\UrlHelper::getStorageUrl($hotelVideo->video_path, request()) }}"
                                                        type="{{ $hotelVideo->mime_type }}">
                                                    Your browser does not support the video tag.
                                                </video>
                                            @else
                                                <div class="alert alert-warning mb-0">
                                                    <i class="fa fa-exclamation-triangle"></i>
                                                    Video file not found
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="video">Replace Video File (Optional)</label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input @error('video') is-invalid @enderror"
                                    id="video" name="video"
                                    accept="video/mp4,video/mpeg,video/quicktime,video/x-msvideo,video/webm">
                                <label class="custom-file-label" for="video">Choose new video file...</label>
                            </div>
                            <small class="form-text text-muted">
                                <i class="fa fa-info-circle"></i>
                                Allowed formats: MP4, MPEG, MOV, AVI, WebM. Maximum size: 100MB. Leave empty to keep current
                                video.
                            </small>
                            @error('video')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror

                            <!-- File size indicator -->
                            <div id="file-size-info" class="mt-2" style="display: none;">
                                <small class="text-info">
                                    <i class="fa fa-file-video-o"></i>
                                    Selected file: <span id="file-name"></span> (<span id="file-size"></span>)
                                </small>
                            </div>
                        </div>

                        <!-- Upload Progress -->
                        <div id="upload-progress" class="mb-3" style="display: none;">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                    style="width: 0%" id="progress-bar">
                                    <span id="progress-text">0%</span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-0">
                            <button type="submit" class="btn btn-custom" id="submit-btn">
                                <i class="fa fa-save"></i> Update
                            </button>
                            <a href="{{ route('hotel_videos.index') }}" class="btn btn-custom">
                                <i class="fa fa-arrow-left"></i> Back
                            </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-custom btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
        <!-- end scroll to top btn -->
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const videoInput = document.getElementById('video');
            const fileLabel = document.querySelector('.custom-file-label');
            const fileSizeInfo = document.getElementById('file-size-info');
            const fileName = document.getElementById('file-name');
            const fileSize = document.getElementById('file-size');
            const form = document.getElementById('video-edit-form');
            const submitBtn = document.getElementById('submit-btn');
            const progressContainer = document.getElementById('upload-progress');
            const progressBar = document.getElementById('progress-bar');
            const progressText = document.getElementById('progress-text');

            const maxFileSize = 100 * 1024 * 1024; // 100MB in bytes

            // File input change handler
            videoInput.addEventListener('change', function() {
                const file = this.files[0];

                if (file) {
                    // Update file label
                    fileLabel.textContent = file.name;

                    // Show file info
                    fileName.textContent = file.name;
                    fileSize.textContent = formatFileSize(file.size);
                    fileSizeInfo.style.display = 'block';

                    // Validate file size
                    if (file.size > maxFileSize) {
                        showAlert('danger', 'File size exceeds maximum allowed size of 100MB.');
                        this.value = '';
                        fileLabel.textContent = 'Choose new video file...';
                        fileSizeInfo.style.display = 'none';
                        return;
                    }

                    // Validate file type
                    const allowedTypes = ['video/mp4', 'video/mpeg', 'video/quicktime', 'video/x-msvideo',
                        'video/webm'
                    ];
                    if (!allowedTypes.includes(file.type)) {
                        showAlert('danger', 'Invalid file type. Please select a valid video file.');
                        this.value = '';
                        fileLabel.textContent = 'Choose new video file...';
                        fileSizeInfo.style.display = 'none';
                        return;
                    }

                    // Clear any existing alerts
                    const existingAlerts = document.querySelectorAll('.alert');
                    existingAlerts.forEach(alert => {
                        if (!alert.classList.contains('alert-warning')) {
                            alert.remove();
                        }
                    });
                } else {
                    fileLabel.textContent = 'Choose new video file...';
                    fileSizeInfo.style.display = 'none';
                }
            });

            // Form submission with progress tracking
            form.addEventListener('submit', function(e) {
                const file = videoInput.files[0];

                if (file) {
                    if (file.size > maxFileSize) {
                        e.preventDefault();
                        showAlert('danger', 'File size exceeds maximum allowed size of 100MB.');
                        return;
                    }

                    // Show progress bar and disable submit button
                    progressContainer.style.display = 'block';
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Updating...';

                    // Simulate progress
                    simulateProgress();
                } else {
                    // No file selected, just update text
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Updating...';
                }
            });
        });

        function formatFileSize(bytes) {
            const units = ['B', 'KB', 'MB', 'GB'];
            let size = bytes;
            let unitIndex = 0;

            while (size >= 1024 && unitIndex < units.length - 1) {
                size /= 1024;
                unitIndex++;
            }

            return Math.round(size * 100) / 100 + ' ' + units[unitIndex];
        }

        function simulateProgress() {
            let progress = 0;
            const progressBar = document.getElementById('progress-bar');
            const progressText = document.getElementById('progress-text');

            const interval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress > 90) {
                    progress = 90;
                }

                progressBar.style.width = progress + '%';
                progressText.textContent = Math.round(progress) + '%';

                if (progress >= 90) {
                    clearInterval(interval);
                    progressText.textContent = 'Processing...';
                }
            }, 200);
        }

        function showAlert(type, message) {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    ${message}
                </div>
            `;

            // Remove existing alerts (except warning alerts)
            const existingAlerts = document.querySelectorAll('.alert');
            existingAlerts.forEach(alert => {
                if (!alert.classList.contains('alert-warning')) {
                    alert.remove();
                }
            });

            // Add new alert at the top of panel body
            const panelBody = document.querySelector('.panel-body');
            panelBody.insertAdjacentHTML('afterbegin', alertHtml);
        }
    </script>

    <style>
        .required:after {
            content: " *";
            color: red;
        }

        .custom-file-input:focus~.custom-file-label {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .progress {
            height: 25px;
        }

        .progress-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .card {
            border: 1px solid #dee2e6;
        }

        video {
            max-width: 100%;
            height: auto;
        }

        /* Ensure panel title is black */
        .panel-title {
            color: #000000 !important;
        }
    </style>
@endsection