@extends('layouts.app')

@section('title', 'Create New Resume')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Page Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-1">Create New Resume</h1>
                    <p class="text-muted mb-0">Choose a template to get started with your professional resume</p>
                </div>
                <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Dashboard
                </a>
            </div>

            <!-- Template Selection -->
            <div class="row">
                @forelse($templates as $template)
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card h-100 shadow-sm template-card">
                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 300px;">
                            @if(isset($template['preview']) && $template['preview'])
                                <img src="{{ asset($template['preview']) }}" 
                                     alt="{{ $template['name'] }} Template" 
                                     class="img-fluid rounded"
                                     style="max-height: 280px; object-fit: cover;">
                            @else
                                <div class="text-center text-muted">
                                    <i class="bi bi-file-earmark-text display-4"></i>
                                    <p class="mt-2 mb-0">{{ $template['name'] }}</p>
                                </div>
                            @endif
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0">{{ $template['name'] }}</h5>
                                @if(isset($template['category']))
                                    <span class="badge bg-primary">{{ $template['category'] }}</span>
                                @endif
                            </div>
                            <p class="card-text text-muted small">{{ $template['description'] }}</p>
                            <div class="d-grid gap-2">
                                <form action="{{ route('resume-builder.store') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="template_id" value="{{ $template['id'] }}">
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="bi bi-plus-circle"></i> Use This Template
                                    </button>
                                </form>
                                <a href="#" class="btn btn-outline-secondary btn-sm" 
                                   onclick="previewTemplate({{ $template['id'] }})">
                                    <i class="bi bi-eye"></i> Preview
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-12">
                    <div class="text-center py-5">
                        <i class="bi bi-exclamation-triangle display-4 text-muted"></i>
                        <h4 class="mt-3">No Templates Available</h4>
                        <p class="text-muted">Please contact support to add templates to the system.</p>
                    </div>
                </div>
                @endforelse
            </div>

            @if(count($templates) > 0)
            <!-- Features Info -->
            <div class="row mt-5">
                <div class="col-12">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h5 class="card-title">✨ What You Get</h5>
                            <div class="row">
                                <div class="col-md-4">
                                    <ul class="list-unstyled">
                                        <li><i class="bi bi-check-circle text-success"></i> Professional layouts</li>
                                        <li><i class="bi bi-check-circle text-success"></i> ATS-friendly formats</li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-unstyled">
                                        <li><i class="bi bi-check-circle text-success"></i> Easy customization</li>
                                        <li><i class="bi bi-check-circle text-success"></i> PDF export</li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-unstyled">
                                        <li><i class="bi bi-check-circle text-success"></i> Public sharing links</li>
                                        <li><i class="bi bi-check-circle text-success"></i> Real-time preview</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Template Preview Modal -->
<div class="modal fade" id="templatePreviewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Template Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="templatePreviewContent" class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="usePreviewedTemplate">Use This Template</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.template-card {
    transition: transform 0.2s ease-in-out;
}

.template-card:hover {
    transform: translateY(-2px);
}

.card-img-top img {
    border-radius: 0.375rem;
}
</style>
@endpush

@push('scripts')
<script>
function previewTemplate(templateId) {
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('templatePreviewModal'));
    modal.show();
    
    // Load preview content (you can implement AJAX loading here)
    document.getElementById('templatePreviewContent').innerHTML = `
        <div class="text-muted">
            <i class="bi bi-file-earmark-text display-4"></i>
            <p class="mt-2">Template preview will be loaded here</p>
            <p class="small">Feature coming soon...</p>
        </div>
    `;
    
    // Set up the "Use This Template" button
    document.getElementById('usePreviewedTemplate').onclick = function() {
        // Create and submit form
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("resume-builder.store") }}';
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        
        const templateInput = document.createElement('input');
        templateInput.type = 'hidden';
        templateInput.name = 'template_id';
        templateInput.value = templateId;
        
        form.appendChild(csrfToken);
        form.appendChild(templateInput);
        document.body.appendChild(form);
        form.submit();
    };
}
</script>
@endpush