@extends('admin.layout')

@section('title', isset($portfolio) ? 'Edit Portfolio Item' : 'Create Portfolio Item')
@section('page-title', isset($portfolio) ? 'Edit Portfolio Item' : 'Create Portfolio Item')
@section('page-subtitle', isset($portfolio) ? 'Update portfolio item details' : 'Add a new portfolio item')

@section('content')
<div class="card" style="max-width:900px">
    <form action="{{ isset($portfolio) ? route('admin.portfolio.update', $portfolio->id) : route('admin.portfolio.store') }}" method="POST">
        @csrf
        @if(isset($portfolio))
            @method('PUT')
        @endif

        <div class="form">
            <div class="form-group">
                <label>Title *</label>
                <input type="text" name="title" value="{{ old('title', $portfolio->title ?? '') }}" required placeholder="Enter portfolio title">
                @error('title')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>Slug *</label>
                    <input type="text" name="slug" value="{{ old('slug', $portfolio->slug ?? '') }}" required placeholder="url-friendly-slug">
                    @error('slug')
                        <small style="color:#dc2626">{{ $message }}</small>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Category</label>
                    <input type="text" name="category" value="{{ old('category', $portfolio->category ?? '') }}" placeholder="e.g., Design, Development">
                    @error('category')
                        <small style="color:#dc2626">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <label>Short Description</label>
                <textarea name="description" rows="2" placeholder="Brief description for portfolio grid...">{{ old('description', $portfolio->description ?? '') }}</textarea>
                @error('description')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-group">
                <label>Full Content</label>
                <textarea name="content" rows="8" placeholder="Detailed portfolio content for detail page...">{{ old('content', $portfolio->content ?? '') }}</textarea>
                @error('content')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-group">
                <label>Featured Image</label>
                <input type="file" name="featured_image_file" accept="image/*" onchange="previewImage(this)">
                <small style="color:var(--muted);display:block;margin-top:5px">Upload a new image (JPG, PNG, GIF - Max 2MB) or enter a path below</small>
                
                <label style="margin-top:15px">Or enter image path manually</label>
                <input type="text" name="featured_image" value="{{ old('featured_image', $portfolio->featured_image ?? '') }}" placeholder="assets/images/portfolio/image.png">
                
                @error('featured_image')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
                @error('featured_image_file')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
                
                <div id="image-preview-container" style="margin-top:10px">
                    @if(isset($portfolio) && $portfolio->featured_image)
                        <img src="{{ asset($portfolio->featured_image) }}" alt="Featured" class="image-preview" id="preview-img">
                    @else
                        <img src="" alt="Preview" class="image-preview" id="preview-img" style="display:none">
                    @endif
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>Client Name</label>
                    <input type="text" name="client" value="{{ old('client', $portfolio->client ?? '') }}" placeholder="Client or company name">
                    @error('client')
                        <small style="color:#dc2626">{{ $message }}</small>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Project Date</label>
                    <input type="text" name="project_date" value="{{ old('project_date', $portfolio->project_date ?? '') }}" placeholder="e.g., 2026">
                    @error('project_date')
                        <small style="color:#dc2626">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>Project URL (Optional)</label>
                    <input type="url" name="project_url" value="{{ old('project_url', $portfolio->project_url ?? '') }}" placeholder="https://example.com">
                    @error('project_url')
                        <small style="color:#dc2626">{{ $message }}</small>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Display Order</label>
                    <input type="number" name="order" value="{{ old('order', $portfolio->order ?? 0) }}" placeholder="0">
                    @error('order')
                        <small style="color:#dc2626">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $portfolio->is_active ?? true) ? 'checked' : '' }}>
                    <span>Active (display on website)</span>
                </label>
            </div>

            <div class="form-actions">
                <a href="{{ route('admin.portfolio.index') }}" class="ghost" style="text-decoration:none;padding:11px 15px">Cancel</a>
                <button type="submit" class="primary">{{ isset($portfolio) ? 'Update Portfolio' : 'Create Portfolio' }}</button>
                @if(isset($portfolio))
                    <button type="button" class="btn-danger" onclick="if(confirm('Delete this portfolio item?')) document.getElementById('delete-form').submit()">Delete</button>
                @endif
            </div>
        </div>
    </form>

    @if(isset($portfolio))
    <form id="delete-form" action="{{ route('admin.portfolio.destroy', $portfolio->id) }}" method="POST" style="display:none">
        @csrf
        @method('DELETE')
    </form>
    @endif
</div>

<script>
function previewImage(input) {
    const preview = document.getElementById('preview-img');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection