@extends('layouts.dashboard')

@section('content')
<form class="admin-edit" method="POST" action="{{ route('BlogUpdate', $blog->id) }}" enctype="multipart/form-data" style="background-color:#fff">
    @csrf
    @method('PATCH')

    <div class="border-bottom p-3 d-flex justify-content-between sticky-top align-items-center bg-white">
        <a href="{{url('admin/blogs')}}">All Blogs</a>
        <div class="w-25 d-block text-center bg-light rounded p-3">
            <h6 class="m-0">Edit Blog Post</h6>
        </div>
        <div class="d-flex gap-3 align-items-center">
            <button type="button" id="delete-blog-btn" class="btn btn-link text-danger p-0 me-2" title="Delete">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
                    <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
                </svg>
            </button>
            <button
                type="submit"
                class="btn-cta fill">
                Save
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-floppy" viewBox="0 0 16 16">
                    <path d="M11 2H9v3h2z" />
                    <path d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z" />
                </svg></button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-9">
            <div class="content p-5">
                <div class="mb-4">
                    <input type="text" class="form-control border-0" name="title" placeholder="Add blog title" value="{{ $blog->title ?? old('title') }}">
                    @error('title')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <textarea id="summernote" class="form-control" name="content" rows="12" placeholder="Write your blog content here">{{ $blog->content ?? old('content') }}</textarea>
                    @error('content')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="border-start h-100">
                <div class="p-4">
                    <label class="form-label small fw-semibold">Featured Image</label>
                    @if(is_null($blog->featured_image))
                    <!-- 1. The HTML Structure -->
                    <div class="file-upload-wrapper">
                        <!-- The real input is hidden entirely -->
                        <input type="file" id="real-file-input" hidden />

                        <!-- This label acts as your custom clickable button -->
                        <label for="real-file-input" class="border rounded w-100 p-3 text-center text-primary"> {{'Set Blog Image'}}</label>

                        <!-- This span displays the name of the file after selection -->
                        <span id="file-name-text" class="text-center d-block">No file chosen</span>
                    </div>
                    @else
                    <img src="{{url('storage/'.$blog->featured_image)}}" class="w-100 mb-3 rounded" alt="Featured Image">
                    @endif
                </div>

                <div class="border-top">
                    <div class="p-4">
                        <table class="table table-sm">
                            <tr>
                                <td><span>{{'Status'}}</span></td>
                                <td><span class="status {{$blog->status === 'published' ? 'success' : 'warning'}}">{{$blog->status === 'published' ? 'Published' : 'Draft'}}</span></td>
                            </tr>
                            <tr>
                                <td><span>{{'Publish'}}</span></td>
                                <td><span>{{$blog->published_at ?? $blog->created_at}}</span></td>
                            </tr>
                            <tr>
                                <td><span>{{'Slug'}}</span></td>
                                <td><a target="_blank" href="{{url('blog/'.$blog->slug)}}">{{$blog->slug}}</a></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<form id="delete-blog-form" method="POST" action="{{ route('BlogDelete', $blog->id) }}" style="display:none;">
    @csrf
    @method('DELETE')
</form>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const btn = document.getElementById('delete-blog-btn');
        const form = document.getElementById('delete-blog-form');
        if (btn && form) {
            btn.addEventListener('click', function(e) {
                if (confirm('Are you sure you want to delete this blog post "{{ $blog->title }}"? This action cannot be undone.')) {
                    form.submit();
                }
            });
        }
    });
</script>
@endpush
@endsection