@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">Upload Video</li>
            </ol>
            <!-- end breadcrumb -->

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

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Upload New Video</h4>
                </div>
                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('hotel_videos.store') }}" method="POST" enctype="multipart/form-data"
                        id="video-upload-form">
                        @csrf

                        <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') }}" maxlength="255" placeholder="Enter video title">
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="video" class="required">Video File</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 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
                            </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-upload"></i> Upload Video
                            </button>
                            <a href="{{ route('hotel_videos.index') }}" class="btn btn-custom">
                                <i class="fa fa-arrow-left"></i> Cancel
                            </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-upload-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

            // Auto-dismiss alerts after 5 seconds
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                setTimeout(() => {
                    const bsAlert = bootstrap.Alert.getInstance(alert) || new bootstrap.Alert(
                    alert);
                    bsAlert.close();
                }, 5000);
            });

            // 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 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 video file...';
                        fileSizeInfo.style.display = 'none';
                        return;
                    }

                    // Clear any existing alerts
                    clearDynamicAlerts();
                } else {
                    fileLabel.textContent = 'Choose video file...';
                    fileSizeInfo.style.display = 'none';
                }
            });

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

                // Validate title first (matches form field order)
                if (!titleInput.value.trim()) {
                    e.preventDefault();
                    showAlert('danger', 'The video title field is required.');
                    titleInput.focus();
                    return;
                }

                // Then validate video file
                if (!file) {
                    e.preventDefault();
                    showAlert('danger', 'Please select a video file to upload.');
                    return;
                }

                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> Uploading...';

                // Simulate progress (since we can't track actual upload progress with standard form submission)
                simulateProgress();
            });
        });

        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 clearDynamicAlerts() {
            // Only remove dynamically created alerts (not server-side validation alerts)
            const dynamicAlerts = document.querySelectorAll('.alert.dynamic-alert');
            dynamicAlerts.forEach(alert => alert.remove());
        }

        function showAlert(type, message) {
            // Clear existing dynamic alerts
            clearDynamicAlerts();

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

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

            // Auto-dismiss after 5 seconds
            setTimeout(() => {
                const alert = document.querySelector('.alert.dynamic-alert');
                if (alert) {
                    const bsAlert = bootstrap.Alert.getInstance(alert) || new bootstrap.Alert(alert);
                    bsAlert.close();
                }
            }, 5000);
        }
    </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;
        }

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