@extends("backend.layouts.app")

@section("title")
    {{ __($module_action) }} {{ __($module_title) }}
@endsection

@section("breadcrumbs")
    <x-backend.breadcrumbs>
        <x-backend.breadcrumb-item route='{{ route("backend.$module_name.index") }}' icon="{{ $module_icon }}">
            {{ __($module_title) }}
        </x-backend.breadcrumb-item>

        <x-backend.breadcrumb-item type="active">{{ __($module_action) }}</x-backend.breadcrumb-item>
    </x-backend.breadcrumbs>
@endsection

@section("content")
    <x-backend.layouts.create>
        <x-backend.section-header>
            <i class="{{ $module_icon }}"></i>
            {{ __($module_title) }}
            <small class="text-muted">{{ __($module_action) }}</small>

            <x-slot name="toolbar">
                <x-backend.buttons.return-back />
                <a href="{{ route('backend.blogs.edit', $blog->id) }}" class="btn btn-primary btn-sm" data-toggle="tooltip" title="Edit">
                    <i class="fas fa-edit"></i> Edit
                </a>
            </x-slot>
        </x-backend.section-header>

        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center mb-4">{{ $blog->title }}</h2>
                        
                        <div class="d-flex justify-content-center align-items-center mb-4">
                            @if($blog->featured_image)
                                <img src="{{ asset($blog->featured_image) }}" alt="{{ $blog->title }}" 
                                    class="img-fluid rounded border" style="max-height: 300px;">
                            @endif
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div>
                                <span class="badge text-bg-primary">{{ $blog->category->name ?? 'Uncategorized' }}</span>
                                @if($blog->status == 'published')
                                    <span class="badge text-bg-success">Published</span>
                                @elseif($blog->status == 'draft')
                                    <span class="badge text-bg-warning">Draft</span>
                                @else
                                    <span class="badge text-bg-secondary">Archived</span>
                                @endif
                            </div>
                            
                            <div class="text-muted small">
                                <strong>Author:</strong> {{ $blog->user ? $blog->user->name : 'Unknown' }} | 
                                <strong>Published:</strong> 
                                @if($blog->published_at)
                                    {{ $blog->published_at->format('M d, Y') }}
                                @else
                                    Not published
                                @endif
                            </div>
                        </div>
                        
                        <div class="content">
                            {!! $blog->content !!}
                        </div>
                    </div>
                </div>
                
                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h5>Post Information</h5>
                                <table class="table table-hover">
                                    <tbody>
                                        <tr>
                                            <th>ID</th>
                                            <td>{{ $blog->id }}</td>
                                        </tr>
                                        <tr>
                                            <th>Author</th>
                                            <td>{{ $blog->user ? $blog->user->name : 'Unknown' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Status</th>
                                            <td>{{ ucfirst($blog->status) }}</td>
                                        </tr>
                                        <tr>
                                            <th>Category</th>
                                            <td>{{ $blog->category->name ?? 'Uncategorized' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Created At</th>
                                            <td>{{ $blog->created_at->format('M d, Y h:i A') }}</td>
                                        </tr>
                                        <tr>
                                            <th>Updated At</th>
                                            <td>{{ $blog->updated_at->format('M d, Y h:i A') }}</td>
                                        </tr>
                                        <tr>
                                            <th>Published At</th>
                                            <td>
                                                @if($blog->published_at)
                                                    {{ $blog->published_at->format('M d, Y h:i A') }}
                                                @else
                                                    Not published
                                                @endif
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('backend.blogs.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to List
                            </a>
                            <div>
                                <a href="{{ route('backend.blogs.edit', $blog->id) }}" class="btn btn-primary">
                                    <i class="fas fa-edit"></i> Edit
                                </a>
                                <form action="{{ route('backend.blogs.destroy', $blog->id) }}" method="POST" class="d-inline delete-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger delete-confirm">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-backend.layouts.create>
@endsection

@push('after-scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Delete confirmation
    $('.delete-confirm').click(function(e) {
        e.preventDefault();
        var form = $(this).closest('form');
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
</script>
@endpush