@extends('layout.master')
@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<style>
    body {
        background-color: #e9ecef;
        font-family: 'Roboto', sans-serif;
    }

    .main-content {
        padding: 30px;
    }

    .card.custom-card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        padding: 30px;
        margin-bottom: 30px;
    }

    .page-title {
        font-size: 2rem;
        font-weight: 700;
        color: #343a40;
        margin-bottom: 25px;
        text-align: center;
    }

    .section-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #495057;
        background-color: #f1f3f5;
        padding: 10px 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .detail-card {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        border-left: 4px solid #007bff;
    }

    .label_custom {
        font-size: 0.95rem;
        font-weight: 500;
        color: #6c757d;
        margin-bottom: 5px;
    }

    .value_custom {
        font-size: 1.1rem;
        font-weight: 400;
        color: #212529;
        word-break: break-word;
    }

    .breadcum {
        background-color: #fff;
        padding: 10px 15px;
        border-radius: 8px;
        margin-bottom: 25px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .breadcum_active {
        color: #6c757d;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .inactive_breadcum {
        color: #007bff;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .inactive_breadcum:hover {
        color: #0056b3;
        text-decoration: underline;
    }

    .row > div {
        margin-bottom: 15px;
    }

    @media (max-width: 768px) {
        .card.custom-card {
            padding: 20px;
        }

        .page-title {
            font-size: 1.6rem;
        }

        .section-title {
            font-size: 1.1rem;
        }
    }
</style>

<div class="main-content side-content pt-0">
    <div class="main-container container-fluid">
        <div class="inner-body">
            <div class="col-lg-12 col-md-12 mt-5">
                <div class="card custom-card">
                    <h2 class="page-title">Road Map Details</h2>
                    <div class="breadcum">
                        <div class="d-flex align-items-center gap-2">
                            <a href="{{ url('/dashboard') }}">
                                <span class="inactive_breadcum">Home</span>
                            </a>
                            <span class="mx-2">/</span>
                            <a href="#">
                                <span class="inactive_breadcum">Road Map Details</span>
                            </a>
                            <span class="mx-2">/</span>
                            <span class="breadcum_active">Show</span>
                        </div>
                    </div>

                    <!-- User Information -->
                    <div class="section-title">User Information</div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">User Name</div>
                                <div class="value_custom">{{ $data->users->name ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">User Email</div>
                                <div class="value_custom">{{ $data->users->email ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Relocation Details -->
                    <div class="section-title">Relocation Details</div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Country of Origin</div>
                                <div class="value_custom">{{ $data->country_of_origin ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Destination Country</div>
                                <div class="value_custom">{{ $data->destination_country ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Purpose for Relocation</div>
                                <div class="value_custom">{{ $data->purpose_for_relocation ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- School and Study Permit -->
                    <div class="section-title">School and Study Permit</div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">School Application</div>
                                <div class="value_custom">{{ $data->school_application ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Study Permit</div>
                                <div class="value_custom">{{ $data->study_permit ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Resource for School Selection</div>
                                <div class="value_custom">{{ $data->application ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Choice of DLI</div>
                                <div class="value_custom">{{ $data->resource_for_school_selection ?? 'N/A' }}</div>
                            </div>
                        </div>
                        {{-- work --}}
                         <div class="section-title">Work Pathway</div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Factors to Consider</div>
                                <div class="value_custom">{{ $data->factors_to_consider ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Business and Visa -->
                    <div class="section-title">Business and Visa</div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Startup Visa Business</div>
                                <div class="value_custom">{{ $data->startup_visa_busniess ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Factors to Consider (Business)</div>
                                <div class="value_custom">{{ $data->factors_to_consider_busniess ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Startup Visa</div>
                                <div class="value_custom">{{ $data->startup_visa ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Family and Moving -->
                    <div class="section-title">Family and Moving</div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Factors to Consider (Family)</div>
                                <div class="value_custom">{{ $data->factors_to_consider_family ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Factors to Consider When Moving Family</div>
                                <div class="value_custom">{{ $data->factors_to_consider_when_moving_family ?? 'N/A' }}</div>
                            </div>
                        </div>

                     <div class="section-title">Pre departure planning</div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Inflight Comfort</div>
                                <div class="value_custom">{{ $data->inflight_comfort ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Food Items to Pack</div>
                                <div class="value_custom">{{ $data->food_items_to_pack ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Essentials from Nigeria</div>
                                <div class="value_custom">{{ $data->essentials_from_nigeria ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Credit and Impact -->
                    <div class="section-title">Credit and Impact</div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Why Get a Credit Card?</div>
                                <div class="value_custom">{{ $data->why_get_acredit_card ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Impact of Bad Credit</div>
                                <div class="value_custom">{{ $data->impact_of_a_bad ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="label_custom">Benefits of Good Credit</div>
                                <div class="value_custom">{{ $data->benefits_of_a_good ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection