@extends('admin.layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">Certificate Details</h3>
                        <div>
                            @if($certificate->generated_image_path)
                                <a href="{{ $certificate->download_url }}" class="btn btn-success">
                                    <i class="fas fa-download"></i> Download Certificate
                                </a>
                            @endif
                            <a href="{{ route('admin.modern-certificates.index') }}" class="btn btn-secondary ml-2">
                                <i class="fas fa-arrow-left"></i> Back to Certificates
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <!-- Certificate Information -->
                            <div class="row">
                                <div class="col-md-6">
                                    <h6><i class="fas fa-user"></i> Student Information</h6>
                                    <table class="table table-borderless">
                                        <tr>
                                            <td><strong>Name:</strong></td>
                                            <td>{{ $certificate->student_name }}</td>
                                        </tr>
                                        @if($certificate->student_email)
                                        <tr>
                                            <td><strong>Email:</strong></td>
                                            <td>{{ $certificate->student_email }}</td>
                                        </tr>
                                        @endif
                                        @if($certificate->student_id)
                                        <tr>
                                            <td><strong>Student ID:</strong></td>
                                            <td>{{ $certificate->student_id }}</td>
                                        </tr>
                                        @endif
                                        <tr>
                                            <td><strong>Course:</strong></td>
                                            <td>{{ $certificate->course_name ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Graduation Date:</strong></td>
                                            <td>{{ $certificate->formatted_graduation_date }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <h6><i class="fas fa-certificate"></i> Certificate Details</h6>
                                    <table class="table table-borderless">
                                        <tr>
                                            <td><strong>Template:</strong></td>
                                            <td>
                                                <span class="badge badge-info">
                                                    {{ $certificate->template->name ?? 'N/A' }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Serial Number:</strong></td>
                                            <td>{{ $certificate->serial_number ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Status:</strong></td>
                                            <td>
                                                <span class="badge badge-{{ $certificate->status_badge }}">
                                                    {{ ucfirst($certificate->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Generated:</strong></td>
                                            <td>{{ $certificate->generated_at ? $certificate->generated_at->format('F j, Y g:i A') : 'N/A' }}</td>
                                        </tr>
                                        @if($certificate->instructor_name)
                                        <tr>
                                            <td><strong>Instructor:</strong></td>
                                            <td>{{ $certificate->instructor_name }}</td>
                                        </tr>
                                        @endif
                                        @if($certificate->organization_name)
                                        <tr>
                                            <td><strong>Organization:</strong></td>
                                            <td>{{ $certificate->organization_name }}</td>
                                        </tr>
                                        @endif
                                    </table>
                                </div>
                            </div>

                            <!-- Custom Data -->
                            @if($certificate->custom_data && count($certificate->custom_data) > 0)
                            <div class="row mt-4">
                                <div class="col-12">
                                    <h6><i class="fas fa-cogs"></i> Custom Fields</h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Field Name</th>
                                                    <th>Value</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($certificate->custom_data as $key => $value)
                                                <tr>
                                                    <td><strong>{{ $key }}</strong></td>
                                                    <td>{{ $value }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <!-- Generation Details -->
                            <div class="row mt-4">
                                <div class="col-12">
                                    <h6><i class="fas fa-info-circle"></i> Generation Information</h6>
                                    <table class="table table-borderless">
                                        <tr>
                                            <td><strong>Generated By:</strong></td>
                                            <td>{{ $certificate->generator->full_name ?? 'System' }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Created:</strong></td>
                                            <td>{{ $certificate->created_at->format('F j, Y g:i A') }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Last Updated:</strong></td>
                                            <td>{{ $certificate->updated_at->format('F j, Y g:i A') }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <!-- Certificate Preview -->
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0"><i class="fas fa-eye"></i> Certificate Preview</h6>
                                </div>
                                <div class="card-body text-center">
                                    @if($certificate->generated_image_path)
                                        <img src="{{ $certificate->generated_image_url }}"
                                             class="img-fluid border rounded"
                                             alt="Certificate Preview">
                                        <div class="mt-3">
                                            <a href="{{ $certificate->download_url }}"
                                               class="btn btn-success btn-block">
                                                <i class="fas fa-download"></i> Download
                                            </a>
                                        </div>
                                    @else
                                        <div class="text-muted py-4">
                                            <i class="fas fa-image fa-3x mb-3"></i>
                                            <p>Certificate image not available</p>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Actions -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h6 class="mb-0"><i class="fas fa-tools"></i> Actions</h6>
                                </div>
                                <div class="card-body">
                                    <div class="d-grid gap-2">
                                        @if($certificate->generated_image_path)
                                            <a href="{{ $certificate->download_url }}"
                                               class="btn btn-outline-success">
                                                <i class="fas fa-download"></i> Download Certificate
                                            </a>
                                        @endif

                                        <a href="{{ route('admin.modern-certificates.create') }}?template={{ $certificate->template_id }}"
                                           class="btn btn-outline-primary">
                                            <i class="fas fa-copy"></i> Generate Similar Certificate
                                        </a>

                                        <form action="{{ route('admin.modern-certificates.destroy', $certificate) }}"
                                              method="POST" class="d-inline"
                                              onsubmit="return confirm('Are you sure you want to delete this certificate?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger btn-block">
                                                <i class="fas fa-trash"></i> Delete Certificate
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.table-borderless td {
    padding: 0.5rem 0;
    border: none;
}

.badge {
    font-size: 0.875rem;
}

.card-header h6 {
    margin-bottom: 0;
    color: #495057;
}
</style>
@endpush
