@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>
                            <a href="{{ route('admin.certificate-generator.download', $certificate->id) }}"
                               class="btn btn-success">
                                <i class="fas fa-download"></i> Download
                            </a>
                            <a href="{{ route('admin.certificate-generator.certificates') }}"
                               class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to List
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Certificate Information -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Certificate Information</h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless">
                                        <tr>
                                            <td><strong>Certificate ID:</strong></td>
                                            <td>{{ $certificate->id }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Student Name:</strong></td>
                                            <td>{{ $certificate->user->full_name ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Email:</strong></td>
                                            <td>{{ $certificate->user->email ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Template:</strong></td>
                                            <td>
                                                <span class="badge badge-info">{{ $certificate->template_name ?? 'N/A' }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Generated At:</strong></td>
                                            <td>{{ $certificate->generated_at->format('M d, Y H:i:s') }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>File Path:</strong></td>
                                            <td>
                                                <code>{{ $certificate->image_path }}</code>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Certificate Data</h5>
                                </div>
                                <div class="card-body">
                                    @if($certificate->certificate_data)
                                        <pre class="bg-light p-3 rounded"><code>{{ json_encode($certificate->certificate_data, JSON_PRETTY_PRINT) }}</code></pre>
                                    @else
                                        <p class="text-muted">No additional data available.</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Certificate Preview -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Certificate Preview</h5>
                                </div>
                                <div class="card-body text-center">
                                    @if(file_exists($certificate->storage_path))
                                        <img src="{{ $certificate->image_url }}"
                                             alt="Certificate Preview"
                                             class="img-fluid border rounded shadow"
                                             style="max-height: 600px;">
                                    @else
                                        <div class="alert alert-warning">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            Certificate file not found at: {{ $certificate->storage_path }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="row mt-4">
                        <div class="col-md-12 text-center">
                            <div class="btn-group" role="group">
                                <a href="{{ route('admin.certificate-generator.download', $certificate->id) }}"
                                   class="btn btn-success btn-lg">
                                    <i class="fas fa-download"></i> Download Certificate
                                </a>
                                <button type="button"
                                        class="btn btn-danger btn-lg delete-certificate"
                                        data-id="{{ $certificate->id }}"
                                        data-name="{{ $certificate->user->full_name ?? 'N/A' }}">
                                    <i class="fas fa-trash"></i> Delete Certificate
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the certificate for <strong id="delete-student-name"></strong>?</p>
                <p class="text-muted">This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirm-delete">Delete Certificate</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let certificateToDelete = null;

    // Delete certificate button click
    $('.delete-certificate').click(function() {
        certificateToDelete = $(this).data('id');
        $('#delete-student-name').text($(this).data('name'));
        $('#deleteModal').modal('show');
    });

    // Confirm delete
    $('#confirm-delete').click(function() {
        if (certificateToDelete) {
            $.ajax({
                url: '{{ route("admin.certificate-generator.destroy", ":id") }}'.replace(':id', certificateToDelete),
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        window.location.href = '{{ route("admin.certificate-generator.certificates") }}';
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr) {
                    const response = JSON.parse(xhr.responseText);
                    alert('Error: ' + (response.message || 'An error occurred'));
                }
            });
        }
        $('#deleteModal').modal('hide');
    });
});
</script>
@endpush
