@extends('layouts.main')

@section('content')
<style>
     .custom-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }

    .custom-btn:hover {
        background-color: #0056b3;
    }
</style>
<div>

    <div class="row justify-content-center">
        <div class="col-md-6"> {{-- 👈 SMALL BOX WIDTH --}}

            <div class="card shadow-sm">
                <div class="card-header custom-btn text-dark">
                    <h5 class="mb-0 text-center">Edit Blog</h5>
                </div>

                <div class="card-body">

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

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

                        {{-- CATEGORY --}}
                        <div class="mb-3">
                            <label>Category</label>
                            <select name="category_id" class="form-control" required>
                                <option value="">Select Category</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}"
                                        {{ $blog->category_id == $cat->id ? 'selected' : '' }}>
                                        {{ $cat->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- TITLE --}}
                        <div class="mb-3">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control"
                                   value="{{ $blog->title }}" required>
                        </div>

                        {{-- DESCRIPTION --}}
                        <div class="mb-3">
                            <label>Description</label>
                            <textarea name="description" class="form-control" rows="3" required>{{ $blog->description }}</textarea>
                        </div>

                        {{-- CURRENT IMAGE --}}
                        @if($blog->image)
                            <div class="mb-3 text-center">
                                <label>Current Image</label><br>
                                <img src="{{ asset('uploads/blogs/'.$blog->image) }}" width="100" class="rounded">
                            </div>
                        @endif

                        {{-- IMAGE --}}
                        <div class="mb-3">
                            <label>Change Image</label>
                            <input type="file" name="image" class="form-control">
                        </div>

                        {{-- BUTTONS --}}
                        <div class="d-flex justify-content-between align-items-center-right">            
                            <button type="submit" class="custom-btn btn-warning">
                                 Update
                            </button>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>

</div>

@endsection