@extends('admin.layout')

@section('content')
<div class="content-card" style="max-width: 600px; margin: 0 auto;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
        <h3 style="margin: 0; border: none; padding: 0;">Add Video</h3>
        <a href="{{ route('admin.video-gallery.index') }}" style="color: #555; text-decoration: none;"><i class="fa-solid fa-arrow-left"></i> Back to List</a>
    </div>

    @if ($errors->any())
        <div style="background-color: #fdecea; color: #d32f2f; padding: 15px; border-radius: 6px; margin-bottom: 20px;">
            <ul style="margin: 0; padding-left: 20px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.video-gallery.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div style="margin-bottom: 20px;">
            <label for="title" style="display: block; font-weight: 500; margin-bottom: 8px;">Title (Optional)</label>
            <input type="text" name="title" id="title" value="{{ old('title') }}" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; font-family: inherit;">
        </div>
        
        <div style="margin-bottom: 30px;"><label for="youtube_link" style="display: block; font-weight: 500; margin-bottom: 8px;">YouTube Video URL <span style="color: red;">*</span></label><input type="url" name="youtube_link" id="youtube_link" value="{{ old('youtube_link') }}" placeholder="https://www.youtube.com/watch?v=..." required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; font-family: inherit;"></div>

        <button type="submit" style="background-color: #0170B9; color: white; padding: 14px 24px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%;"><i class="fa-solid fa-plus"></i> Add Video</button>
    </form>
</div>
@endsection