@extends('main.layouts.app')

@section('content')

<div class="card mt-4">
    <div class="card-header">
        <div class="">
            <div class="col-sm-12">
                <h2>Vertical Box</h2>
                <ol class="breadcrumb">
                    <!-- <li class="breadcrumb-item"><a href="dashboard">Home</a></li> -->
                    <!-- <li class="breadcrumb-item"><a href="{{ route('verticalbox.create') }}" class="btn btn-primary">Add Vertical Box</a></li> -->
                </ol>
            </div>
        </div>
    </div>

    <div class="container">
@if (session()->has('success_message'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    title: 'Success',
                    text: '{{ session()->get('success_message') }}',
                    icon: 'success',
                    toast: true,
                    position: 'top-end', // Top-left corner
                    customClass: {
                        popup: 'swal-elongated'
                    },
                    showConfirmButton: false,
                    timer: 3000 // Disappears after 2 seconds
                });
            });
        </script>
    @endif

    @if (count($errors) > 0)
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    title: 'Error',
                    html: '<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>',
                    icon: 'warning',
                    toast: true,
                    position: 'top-end', // Top-left corner
                    customClass: {
                        popup: 'swal-elongated'
                    },
                    showConfirmButton: false,
                    timer: 3000 // Disappears after 2 seconds
                });
            });
        </script>
    @endif
    </div>
    
    <div class="card-body">
        <div class="wrapper wrapper-content mt-0">
            <div class="animated fadeInUp">
                <form action="{{ isset($verticalbox) ? route('verticalbox.update', $verticalbox->id) : route('verticalbox.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @if (isset($verticalbox))
                        @method('PUT')
                        <input type="hidden" name="verticalbox_id" value="{{ $verticalbox->id }}">
                    @endif
                
                    <!-- Video Title -->
                    <div class="form-group">
                        <label for="video_title">Video Title</label>
                        <input type="text" class="form-control" name="video_title" id="video_title" required
                            placeholder="Enter Video Title"
                            value="{{ isset($verticalbox) ? $verticalbox->video_title : old('video_title') }}">
                    </div>
                
                    <!-- Video URL -->
                    <div class="form-group">
                        <label for="video_url">Video URL</label>
                        <input type="text" class="form-control" name="video_url" id="video_url"
                            placeholder="Enter Video URL"
                            value="{{ isset($verticalbox) ? $verticalbox->video_url : old('video_url') }}">
                    </div>
                
                    <!-- Video Description -->
                    <div class="form-group">
                        <label for="video_description">Video Description</label>
                        <textarea class="form-control" name="video_description" id="video_description" rows="4"
                            placeholder="Enter Video Description">{{ isset($verticalbox) ? $verticalbox->video_description : old('video_description') }}</textarea>
                    </div>
                
                    <!-- Video Thumbnail -->
                    <div class="form-group">
                        <label for="video_thumbnail">Video Thumbnail(150px × 266px, File size must be less than 1MB)</label>
                        <input type="file" name="video_thumbnail" id="video_thumbnail" class="form-control"
                            {{ isset($verticalbox) ? '' : 'required' }} accept="image/*">
                        @if (isset($verticalbox) && $verticalbox->video_thumbnail)
                            <img src="{{ $verticalbox->video_thumbnail }}" style="height: 200px; margin-top: 10px;" alt="Current Video Thumbnail" />
                        @endif
                    </div>
                
                    <!-- Video Source -->
                    <div class="form-group">
                        <label for="video_src">Upload Video ( File size must be less than 100MB)</label>
                        <input type="file" name="video_src" id="video_src" class="form-control" accept="video/*" {{ isset($verticalbox) ? '' : 'required' }}>
                        @if (isset($verticalbox) && $verticalbox->video_src)
                            <video controls style="max-height: 200px; margin-top: 10px;">
                                <source src="{{ $verticalbox->video_src }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        @endif
                    </div>
                    
                
                    <!-- Submit Button -->
                    <button type="submit" class="btn btn-primary">{{ isset($verticalbox) ? 'Update VerticalBox' : 'Create VerticalBox' }}</button>
                </form>
                
            </div>
        </div>
    </div>
</div>

<script>
        document.getElementById('video_thumbnail').addEventListener('change', function() {
    let file = this.files[0]; // Get selected file

    if (file && file.size > 1024 * 1024) { // 1MB = 1024KB = 1024 * 1024 bytes
        alert('File size must be less than 1MB.');
        this.value = ''; // Clear the file input
    }
});

    </script>

<script>
        document.getElementById('video_src').addEventListener('change', function() {
    let file = this.files[0]; // Get selected file

    if (file && file.size > 1024 * 1024 * 100) { // 1MB = 1024KB = 1024 * 1024 bytes
        alert('File size must be less than 100MB.');
        this.value = ''; // Clear the file input
    }
});

    </script>
@endsection