@extends('layouts.training_centre_layout')

@section('content')
<!-- [ Page Header ] start -->
 <x-page-header title="{{ $pageTitle }}" :backButton="true" />

<!-- [ Page Header ] end -->
<div class="row">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-body p-0">
                <div id="smartwizard">
                    <ul class="nav nav-tabs border-bottom">
                        <li class="nav-item">
                            <a class="nav-link active" href="#step-1" data-bs-toggle="tab" role="tab">
                                <span class="num">1</span>
                                Personal Info
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-2" data-bs-toggle="tab" role="tab">
                                <span class="num">2</span>
                                Education
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-3" data-bs-toggle="tab" role="tab">
                                <span class="num">3</span>
                                Course & Centre
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-4" data-bs-toggle="tab" role="tab">
                                <span class="num">4</span>
                                Documents
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-action" data-bs-toggle="tab" role="tab">
                                <span class="num">5</span>
                                Batches
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content p-3 bg-white">
                        <!-- Step 1: Personal Information -->
                        <div id="step-1" class="tab-pane active" role="tabpanel">
                            <div class="preview-section">
                                <div class="card">
                                    <div class="card-body">
                                        <h5>Personal Details:</h5>
                                        <div class="row g-3">
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Full Name:</label>
                                                    <span class="preview-value d-block">John Doe Smith</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Email:</label>
                                                    <span class="preview-value d-block">john.doe@example.com</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Phone:</label>
                                                    <span class="preview-value d-block">+91 9876543210</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Date of Birth:</label>
                                                    <span class="preview-value d-block">1995-05-15</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Gender:</label>
                                                    <span class="preview-value d-block">Male</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">City:</label>
                                                    <span class="preview-value d-block">New Delhi</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Address:</label>
                                                    <span class="preview-value d-block">123, Main Street, Sector 15, New Delhi, Delhi</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">PIN Code:</label>
                                                    <span class="preview-value d-block">110001</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card mt-3">
                                    <div class="card-body">
                                        <h5>Emergency Contact:</h5>
                                        <div class="row g-3">
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Contact Name:</label>
                                                    <span class="preview-value d-block">Jane Smith</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Contact Phone:</label>
                                                    <span class="preview-value d-block">+91 9876543211</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Relationship:</label>
                                                    <span class="preview-value d-block">Spouse</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Step 2: Educational Background -->
                        <div id="step-2" class="tab-pane" role="tabpanel">
                            <div class="preview-section">
                                <h4 class="preview-section-title mb-3">Educational Details</h4>
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="education-preview-title">Education 1</h5>
                                        <div class="row g-3">
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Qualification:</label>
                                                    <span class="preview-value d-block">Bachelor of Technology</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Board/University:</label>
                                                    <span class="preview-value d-block">Delhi Technological University</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Institution:</label>
                                                    <span class="preview-value d-block">Delhi Technological University</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Year of Passing:</label>
                                                    <span class="preview-value d-block">2018</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Percentage/Grade:</label>
                                                    <span class="preview-value d-block">85%</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="education-preview-title">Education 2</h5>
                                        <div class="row g-3">
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Qualification:</label>
                                                    <span class="preview-value d-block">Senior Secondary (12th)</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Board/University:</label>
                                                    <span class="preview-value d-block">CBSE</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Institution:</label>
                                                    <span class="preview-value d-block">Delhi Public School</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Year of Passing:</label>
                                                    <span class="preview-value d-block">2014</span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="preview-item">
                                                    <label class="preview-label fw-bold">Percentage/Grade:</label>
                                                    <span class="preview-value d-block">92%</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <!-- Step 3: Course Selection -->
                        <div id="step-3" class="tab-pane" role="tabpanel">
                            <div class="preview-section">
                                <h4 class="preview-section-title mb-3">Course & Centre Selection</h4>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="preview-item">
                                            <label class="preview-label fw-bold">Selected Training Program:</label>
                                            <span class="preview-value d-block">
                                                Advanced Web Development Course<br>
                                                <small class="text-muted">(Duration: 120 hours, Type: Professional Course)</small>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-body">
                                        <div class="preview-item">
                                            <label class="preview-label fw-bold">Selected Training Center:</label>
                                            <span class="preview-value d-block">
                                                TechSkills Training Institute<br>
                                                <small class="text-muted">Block A, Sector 18, Noida, Uttar Pradesh - 201301</small>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Step 4: Document Upload -->
                        <div id="step-4" class="tab-pane" role="tabpanel">
                            <div class="preview-section">
                                <h4 class="preview-section-title mb-3">Uploaded Documents</h4>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="preview-item">
                                            <label class="preview-label form-label fw-bold">Photograph:</label>
                                            <span class="preview-value d-block">
                                                <a href="#" class="btn btn-secondary btn-sm">
                                                    <i class="fa fa-eye"></i> View Photo
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="preview-item">
                                            <label class="preview-label form-label fw-bold">Address Proof:</label>
                                            <span class="preview-value d-block">
                                                <a href="#" class="btn btn-secondary btn-sm">
                                                    <i class="fa fa-eye"></i> View Document
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="preview-item">
                                            <label class="preview-label form-label fw-bold">Experience Certificate:</label>
                                            <span class="preview-value d-block">
                                                <a href="#" class="btn btn-secondary btn-sm">
                                                    <i class="fa fa-eye"></i> View Document
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="preview-item">
                                            <label class="preview-label form-label fw-bold">Medical Certificate:</label>
                                            <span class="preview-value d-block">
                                                <a href="#" class="btn btn-secondary btn-sm">
                                                    <i class="fa fa-eye"></i> View Document
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Step 5: Action -->
                        <div id="step-action" class="tab-pane" role="tabpanel">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="preview-item">
                                                <label class="preview-label fw-bold">Batch Name: Web Development Course - 2025</label>
                                                <span class="preview-value d-block">
                                                    National Generic Caregiver<br>
                                                    <small class="text-muted">(Duration: 120 hours, Trainer: Manoj Yadav)</small>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-body">
                                            <div class="preview-item">
                                                <label class="preview-label fw-bold">Batch Name: Web Development Course - 2025</label>
                                                <span class="preview-value d-block">
                                                    National Generic Caregiver<br>
                                                    <small class="text-muted">(Duration: 120 hours, Trainer: Manoj Yadav)</small>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>

</script>
@endsection