@extends('layouts.main')

@section('content')
<style>
    /* Page-specific styles — layout provides base dark theme */
    .form-section {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    /* IMAGE PREVIEW */
    .image-preview {
        background: rgba(99, 102, 241, 0.08);
        border: 1px dashed rgba(99, 102, 241, 0.3);
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .image-preview img {
        border-radius: 8px;
        max-width: 200px;
        max-height: 200px;
        object-fit: cover;
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
    }

    .image-preview-label {
        color: #9CA3AF;
        font-size: 0.85rem;
        margin-bottom: 0.8rem;
        display: block;
    }

    /* BUTTON */
    .btn-save {
        background: #6366f1 !important;
        color: #ffffff !important;
        border: 1px solid #818cf8 !important;
        border-radius: 8px;
        padding: 10px 24px;
        font-size: 14px;
        font-weight: 600;
        transition: .25s;
        cursor: pointer;
        width: 100%;
    }

    .btn-save:hover {
        background: #818cf8 !important;
        transform: translateY(-2px);
        box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
    }

    /* BACK LINK */
    .back-link {
        color: #818CF8;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        font-weight: 500;
        transition: 0.3s;
    }

    .back-link:hover {
        color: #6366f1;
        transform: translateX(-4px);
    }
</style>

<a href="{{ route('super-admin.blog.index') }}" class="back-link">
    <i class="bi bi-arrow-left"></i> Back to Blogs
</a>

<div class="form-section">
    <h2>✏️ Edit Blog</h2>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <form action="{{ route('super-admin.blog.update', $blog->id) }}" method="POST" enctype="multipart/form-data">
        @csrf

        <!-- TENANT -->
        <div class="form-group">
            <label class="form-label">Assign to Tenant (Optional)</label>
            <select name="tenant_id" class="form-control">
                <option value="">No Tenant (Global)</option>
                @foreach($tenants as $t)
                    <option value="{{ $t->id }}" {{ $blog->tenant_id == $t->id ? 'selected' : '' }}>{{ $t->name }} ({{ $t->custom_domain }})</option>
                @endforeach
            </select>
        </div>

        <!-- CATEGORY -->
       

        <!-- TITLE -->
        <div class="form-group">
            <label class="form-label" for="title">Blog Title</label>
            <input type="text" id="title" name="title" class="form-control"
                   value="{{ $blog->title }}" required>
        </div>

        <!-- DESCRIPTION -->
        <div class="form-group">
            <label class="form-label" for="description">Description</label>
            <textarea id="description" name="description" class="form-control" rows="6" required>{{ $blog->description }}</textarea>
        </div>

        <!-- CURRENT IMAGE -->
        @if($blog->image)
            <div class="image-preview">
                <span class="image-preview-label">Current Featured Image</span>
                <img src="{{ asset('uploads/blogs/'.$blog->image) }}" alt="Blog Image">
            </div>
        @endif

        <!-- NEW IMAGE -->
        <div class="form-group">
            <label class="form-label" for="image">Change Featured Image</label>
            <input type="file" id="image" name="image" class="form-control" accept="image/*">
            <small style="color: #9CA3AF;">Recommended: 800x600px</small>
        </div>

        <!-- SUBMIT BUTTON -->
        <button type="submit" class="btn-save">
            ✓ Update Blog
        </button>
    </form>
</div>

@endsection