@extends('layouts.app')

@section('title', 'Edit ' . $video->title . ' | TAKEONE')

@section('extra_styles')
<style>
    /* Hide main content wrapper for modal-only view */
    .edit-page-only .yt-header, 
    .edit-page-only .yt-sidebar,
    .edit-page-only .yt-main {
        display: none !important;
    }
    
    .edit-page-only {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(0, 0, 0, 0.8);
    }

    /* Modal Base Styles */
    .edit-modal-standalone {
        background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%);
        border: 1px solid #3a3a3a;
        border-radius: 24px;
        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.1);
        overflow: hidden;
        width: 100%;
        max-width: 520px;
        animation: modalPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes modalPopIn {
        0% {
            transform: scale(0.8) translateY(20px);
            opacity: 0;
        }
        60% {
            transform: scale(1.02) translateY(-5px);
        }
        100% {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
    }

    /* Header */
    .edit-modal-header {
        background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
        border-bottom: none;
        padding: 20px 24px;
        position: relative;
        overflow: hidden;
    }

    .edit-modal-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .edit-icon-wrapper {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: white;
        backdrop-filter: blur(10px);
    }

    .edit-modal-header .modal-title {
        font-size: 20px;
        font-weight: 600;
        color: white;
        margin: 0;
    }

    .edit-subtitle {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Body */
    .edit-modal-body {
        padding: 24px;
        background: #1a1a1a;
    }

    /* Current Thumbnail */
    .current-thumbnail-section {
        margin-bottom: 20px;
    }

    .current-thumbnail-wrapper {
        width: 100%;
        height: 140px;
        border-radius: 12px;
        overflow: hidden;
        background: #151515;
        border: 2px dashed #333;
        position: relative;
    }

    .current-thumbnail-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .thumbnail-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #555;
    }

    .thumbnail-placeholder i {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .thumbnail-placeholder span {
        font-size: 13px;
    }

    .current-thumbnail-wrapper.has-thumbnail .thumbnail-placeholder {
        display: none;
    }

    .current-thumbnail-wrapper.has-thumbnail .current-thumbnail-img {
        display: block;
    }

    .current-thumbnail-wrapper:not(.has-thumbnail) .current-thumbnail-img {
        display: none;
    }

    /* Form Elements */
    .edit-modal-body .form-group {
        margin-bottom: 20px;
    }

    .edit-modal-body .form-label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        font-weight: 500;
        font-size: 14px;
        color: #e5e5e5;
    }

    .edit-modal-body .form-label i {
        color: #8b5cf6;
        font-size: 16px;
    }

    .edit-modal-body .form-input, 
    .edit-modal-body .form-textarea {
        width: 100%;
        background: #121212;
        border: 1px solid #333;
        border-radius: 12px;
        padding: 14px 16px;
        color: #f1f1f1;
        font-size: 14px;
        transition: all 0.2s;
    }

    .edit-modal-body .form-input:focus, 
    .edit-modal-body .form-textarea:focus {
        outline: none;
        border-color: #8b5cf6;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
    }

    .edit-modal-body .form-input::placeholder, 
    .edit-modal-body .form-textarea::placeholder {
        color: #666;
    }

    /* Dropzone */
    .edit-modal-body .dropzone-modal {
        border: 2px dashed #404040;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
        background: #151515;
    }

    .edit-modal-body .dropzone-modal:hover {
        border-color: #8b5cf6;
        background: rgba(139, 92, 246, 0.05);
    }

    .edit-modal-body .dropzone-modal.dragover {
        border-color: #8b5cf6;
        background: rgba(139, 92, 246, 0.1);
    }

    .edit-modal-body .dropzone-modal input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .edit-modal-body .dropzone-icon {
        font-size: 36px;
        color: #8b5cf6;
        margin-bottom: 8px;
    }

    .edit-modal-body .dropzone-title {
        color: #e5e5e5;
        font-size: 14px;
        font-weight: 500;
        margin: 6px 0;
    }

    .edit-modal-body .dropzone-hint {
        color: #666;
        font-size: 12px;
        margin: 0;
    }

    /* Visibility Options */
    .edit-modal-body .visibility-options-modal {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .edit-modal-body .visibility-option-modal {
        cursor: pointer;
    }

    .edit-modal-body .visibility-option-modal input {
        display: none;
    }

    .edit-modal-body .visibility-content-modal {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px;
        background: #1a1a1a;
        border: 2px solid #333;
        border-radius: 12px;
        transition: all 0.2s;
    }

    .edit-modal-body .visibility-option-modal:hover .visibility-content-modal {
        border-color: #555;
        background: #1f1f1f;
    }

    .edit-modal-body .visibility-option-modal.active .visibility-content-modal {
        border-color: #8b5cf6;
        background: rgba(139, 92, 246, 0.1);
    }

    .edit-modal-body .visibility-content-modal i {
        font-size: 20px;
        color: #666;
        width: 28px;
        text-align: center;
    }

    .edit-modal-body .visibility-option-modal.active .visibility-content-modal i {
        color: #8b5cf6;
    }

    .edit-modal-body .visibility-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .edit-modal-body .visibility-title {
        font-weight: 500;
        font-size: 14px;
        color: #e5e5e5;
    }

    .edit-modal-body .visibility-desc {
        color: #777;
        font-size: 12px;
    }

    /* Actions */
    .edit-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #2a2a2a;
    }

    .edit-modal-actions .btn-cancel,
    .edit-modal-actions .btn-save,
    .edit-modal-actions .btn-delete {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
    }

    .edit-modal-actions .btn-cancel {
        background: transparent;
        border: 1px solid #404040;
        color: #aaa;
        text-decoration: none;
    }

    .edit-modal-actions .btn-cancel:hover {
        border-color: #666;
        color: #fff;
    }

    .edit-modal-actions .btn-save {
        background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    }

    .edit-modal-actions .btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    }

    .edit-modal-actions .btn-delete {
        background: #7f1d1d;
        color: white;
    }

    .edit-modal-actions .btn-delete:hover {
        background: #991b1b;
    }

    /* Delete Section */
    .delete-section {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #2a2a2a;
    }

    .delete-label {
        font-size: 14px;
        color: #888;
        margin-bottom: 12px;
    }

    /* Responsive */
    @media (max-width: 576px) {
        .edit-modal-body {
            padding: 20px 16px;
        }
        
        .edit-modal-actions {
            flex-direction: column;
        }
        
        .edit-modal-actions .btn-cancel,
        .edit-modal-actions .btn-save,
        .edit-modal-actions .btn-delete {
            width: 100%;
            justify-content: center;
        }
    }
</style>
@endsection

@section('body_class', 'edit-page-only')

@section('content')
    <div class="edit-modal-standalone">
        <!-- Header -->
        <div class="edit-modal-header">
            <div class="d-flex align-items-center gap-3">
                <div class="edit-icon-wrapper">
                    <i class="bi bi-pencil-fill"></i>
                </div>
                <div>
                    <h5 class="modal-title">Edit Video</h5>
                    <span class="edit-subtitle">Update your video details</span>
                </div>
            </div>
        </div>
        
        <!-- Body -->
        <div class="edit-modal-body">
            <form action="{{ route('videos.update', $video->id) }}" method="POST" enctype="multipart/form-data" id="edit-form">
                @csrf
                @method('PUT')
                
                <!-- Current Thumbnail -->
                <div class="current-thumbnail-section">
                    <label class="form-label">
                        <i class="bi bi-image"></i> Current Thumbnail
                    </label>
                    <div class="current-thumbnail-wrapper {{ $video->thumbnail ? 'has-thumbnail' : '' }}">
                        @if($video->thumbnail)
                            <img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" class="current-thumbnail-img" alt="Current thumbnail">
                        @endif
                        <div class="thumbnail-placeholder">
                            <i class="bi bi-card-image"></i>
                            <span>No thumbnail</span>
                        </div>
                    </div>
                </div>
                
                <!-- Title -->
                <div class="form-group">
                    <label class="form-label">
                        <i class="bi bi-card-heading"></i> Title *
                    </label>
                    <input type="text" name="title" value="{{ $video->title }}" required class="form-input" placeholder="Video title">
                </div>
                
                <!-- Description -->
                <div class="form-group">
                    <label class="form-label">
                        <i class="bi bi-text-paragraph"></i> Description
                    </label>
                    <textarea name="description" rows="3" class="form-textarea" placeholder="Tell viewers about your video">{{ $video->description }}</textarea>
                </div>
                
                <!-- New Thumbnail -->
                <div class="form-group">
                    <label class="form-label">
                        <i class="bi bi-camera"></i> Change Thumbnail
                    </label>
                    <div class="dropzone-modal">
                        <input type="file" name="thumbnail" accept="image/*">
                        <div>
                            <div class="dropzone-icon">
                                <i class="bi bi-card-image"></i>
                            </div>
                            <p class="dropzone-title">Click to select new thumbnail</p>
                            <p class="dropzone-hint">JPG, PNG, WebP up to 5MB</p>
                        </div>
                    </div>
                </div>
                
                <!-- Privacy -->
                <div class="form-group">
                    <label class="form-label">
                        <i class="bi bi-shield-lock"></i> Privacy Setting
                    </label>
                    <div class="visibility-options-modal">
                        <label class="visibility-option-modal {{ ($video->visibility ?? 'public') == 'public' ? 'active' : '' }}">
                            <input type="radio" name="visibility" value="public" {{ ($video->visibility ?? 'public') == 'public' ? 'checked' : '' }}>
                            <div class="visibility-content-modal">
                                <i class="bi bi-globe"></i>
                                <div class="visibility-text">
                                    <span class="visibility-title">Public</span>
                                    <span class="visibility-desc">Everyone can see this video</span>
                                </div>
                            </div>
                        </label>
                        <label class="visibility-option-modal {{ $video->visibility == 'unlisted' ? 'active' : '' }}">
                            <input type="radio" name="visibility" value="unlisted" {{ $video->visibility == 'unlisted' ? 'checked' : '' }}>
                            <div class="visibility-content-modal">
                                <i class="bi bi-link-45deg"></i>
                                <div class="visibility-text">
                                    <span class="visibility-title">Unlisted</span>
                                    <span class="visibility-desc">Only people with the link</span>
                                </div>
                            </div>
                        </label>
                        <label class="visibility-option-modal {{ $video->visibility == 'private' ? 'active' : '' }}">
                            <input type="radio" name="visibility" value="private" {{ $video->visibility == 'private' ? 'checked' : '' }}>
                            <div class="visibility-content-modal">
                                <i class="bi bi-lock"></i>
                                <div class="visibility-text">
                                    <span class="visibility-title">Private</span>
                                    <span class="visibility-desc">Only you can see</span>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="edit-modal-actions">
                    <a href="{{ route('videos.show', $video->id) }}" class="btn-cancel">
                        Cancel
                    </a>
                    <button type="submit" class="btn-save">
                        <i class="bi bi-check-lg"></i> Save Changes
                    </button>
                </div>
            </form>
            
            <!-- Delete Section -->
            <div class="delete-section">
                <p class="delete-label">Danger Zone</p>
                <form action="{{ route('videos.destroy', $video->id) }}" method="POST" onsubmit="return confirm('Delete this video? This cannot be undone.');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn-delete">
                        <i class="bi bi-trash"></i> Delete Video
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    // Visibility option handling
    const visibilityOptions = document.querySelectorAll('.visibility-option-modal');
    visibilityOptions.forEach(option => {
        const radio = option.querySelector('input[type="radio"]');
        radio.addEventListener('change', function() {
            visibilityOptions.forEach(opt => opt.classList.remove('active'));
            option.classList.add('active');
        });
    });
</script>
@endsection