@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Edit Work Item: {{ $workItem->title }}</h3>
                </div>
                <form method="POST" action="{{ route('admin.work-items.update', $workItem->id) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card-body">
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control" 
                                   value="{{ old('title', $workItem->title) }}" required>
                        </div>
                        <div class="form-group">
                            <label>Category</label>
                            <select name="category" class="form-control" required>
                                @foreach($categories as $key => $value)
                                    <option value="{{ $key }}" {{ old('category', $workItem->category) == $key ? 'selected' : '' }}>
                                        {{ $value }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea name="description" class="form-control" rows="3" required>{{ old('description', $workItem->description) }}</textarea>
                        </div>
                        <div class="form-group">
                            <label>Full Content</label>
                            <textarea name="full_content" class="form-control summernote">{{ old('full_content', $workItem->full_content) }}</textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Upload Image</label>
                                    <input type="file" name="image" class="form-control-file">
                                    @if($workItem->image)
                                        <div class="mt-2">
                                            <small>Current image:</small>
                                            <img src="{{ asset('storage/' . $workItem->image) }}" class="img-thumbnail" style="max-height: 100px;">
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Or Image URL</label>
                                    <input type="url" name="image_url" class="form-control" 
                                           value="{{ old('image_url', $workItem->image_url) }}">
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Upload Video</label>
                                    <input type="file" name="video" class="form-control-file">
                                    @if($workItem->video)
                                        <div class="mt-2">
                                            <small>Current video:</small>
                                            <video controls style="max-width: 100%; max-height: 100px;">
                                                <source src="{{ asset('storage/' . $workItem->video) }}">
                                            </video>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Or Video Link (YouTube/Vimeo)</label>
                                    <input type="url" name="video_link" class="form-control" 
                                           value="{{ old('video_link', $workItem->video_link) }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Update Work Item</button>
                    </div>
                </form>
                
                <!-- Gallery Section -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h4>Gallery Items</h4>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('admin.work-gallery.store') }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="work_id" value="{{ $workItem->id }}">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Type</label>
                                        <select name="type" class="form-control" required>
                                            <option value="image">Image</option>
                                            <option value="video">Video</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>File/URL</label>
                                        <input type="text" name="url" class="form-control" placeholder="Enter URL or upload file" required>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Caption</label>
                                        <input type="text" name="caption" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Add to Gallery</button>
                        </form>
                        
                        <div class="mt-4">
                            <h5>Current Gallery Items</h5>
                            <div class="row">
                                @foreach($workItem->gallery as $item)
                                <div class="col-md-4 mb-3">
                                    <div class="card">
                                        @if($item->type == 'image')
                                            <img src="{{ $item->url }}" class="card-img-top" alt="{{ $item->caption }}">
                                        @else
                                            <div class="embed-responsive embed-responsive-16by9">
                                                @if(strpos($item->url, 'youtube.com') !== false || strpos($item->url, 'youtu.be') !== false)
                                                                                                        <iframe class="embed-responsive-item" 
                                                            src="https://www.youtube.com/embed/{{ $videoId }}?rel=0" 
                                                            frameborder="0" allowfullscreen></iframe>
                                                @elseif(strpos($item->url, 'vimeo.com') !== false)
                                                                                                        <iframe class="embed-responsive-item" 
                                                            src="https://player.vimeo.com/video/{{ $videoId }}?title=0&byline=0" 
                                                            frameborder="0" allowfullscreen></iframe>
                                                @else
                                                    <video controls class="embed-responsive-item">
                                                        <source src="{{ $item->url }}" type="video/mp4">
                                                    </video>
                                                @endif
                                            </div>
                                        @endif
                                        <div class="card-body">
                                            <p class="card-text">{{ $item->caption }}</p>
                                            <form action="{{ route('admin.work-gallery.destroy', $item->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $('.summernote').summernote({
            height: 300,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']],
            ]
        });
    });
</script>
@endpush