@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <!-- Action Buttons Card -->
                <div class="card shadow-lg mb-3">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0 me-2">
                                <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
                            </a>
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('tutors-form').submit();">
                                <i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Form Card -->
                <form action="{{ url($url_menu) }}" method="POST" id="tutors-form" enctype="multipart/form-data">
                    @csrf
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <p class="text-uppercase text-sm"><i class="fas fa-book-reader me-2"></i>Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            @include('components.alert')

                            {{-- ========== 1. NAMA ========== --}}
                            <div class="form-group mb-4">
                                <label for="nama" class="form-label font-weight-bold">Nama Tutorial
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" name="nama" id="nama"
                                    value="{{ old('nama') }}"
                                    placeholder="Masukkan nama tutorial" required>
                                @error('nama')
                                    <span class="text-danger text-sm">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- ========== 2. DESKRIPSI ========== --}}
                            <div class="form-group mb-4">
                                <label for="description" class="form-label font-weight-bold">Deskripsi
                                    <span class="text-danger">*</span>
                                </label>
                                <textarea class="form-control" name="description" id="description" rows="4"
                                    placeholder="Masukkan deskripsi tutorial" required>{{ old('description') }}</textarea>
                                @error('description')
                                    <span class="text-danger text-sm">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- ========== 3. VIDEO ========== --}}
                            <div class="form-group mb-4">
                                <label for="file_video" class="form-label font-weight-bold">Upload Video
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="file" class="form-control" name="file_video" id="file_video"
                                    accept="video/*" required>
                                <small class="text-muted d-block mt-1">Format: mp4, avi, mov, wmv, mkv, webm (Max: 100MB)</small>
                                @error('file_video')
                                    <span class="text-danger text-sm">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- ========== VIDEO PREVIEW ========== --}}
                            <div class="form-group mb-3" id="video-preview-wrapper" style="display: none;">
                                <label class="form-label font-weight-bold">Preview</label>
                                <video id="video-preview" controls class="w-100 rounded bg-dark" style="max-height: 400px;">
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    document.getElementById('file_video').addEventListener('change', function(e) {
        const file = e.target.files[0];
        const preview = document.getElementById('video-preview');
        const wrapper = document.getElementById('video-preview-wrapper');
        if (file && file.type.startsWith('video/')) {
            const url = URL.createObjectURL(file);
            preview.src = url;
            wrapper.style.display = '';
        } else {
            wrapper.style.display = 'none';
            preview.src = '';
        }
    });
</script>
@endpush