@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <x-dashboard.breadcumb :title="$title" />

        <div class="row justify-content-center">
            <div class="col-lg-11">
                @foreach ($breakdowns as $type => $breakdown)
                    <div class="card shadow-lg border-0 rounded-4 mb-5">

                        <!-- Header -->
                        <div class="bg-warning-subtle position-relative">
                            <div class="card-body p-5 text-center">
                                <a class="navbar-brand flex p-0 relative w-140" href="{{ url('/') }}" rel="home"><span
                                        class="navbar-brand-inner post-rel"><img src="{{ asset(setting('logo')) }}"
                                            alt="raffle logo" /></span></a>
                            </div>
                            <div class="shape">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="60"
                                    preserveAspectRatio="none" viewBox="0 0 1440 60">
                                    <path d="M 0,4 C 144,13 432,48 720,49 C 1008,50 1296,17 1440,9L1440 60L0 60z"
                                        style="fill: var(--vz-secondary-bg);"></path>
                                </svg>
                            </div>
                        </div>
                        <!-- Header -->

                        <div class="text-center">
                            <p class="mb-0 fs-5 test-muted"><i>Estimated Cost Calculation For
                                    {{ $cost->country?->title ?? 'N/A' }}</i> (<strong
                                    class="text-capitalize">{{ str_replace('_', ' ', $type) }}</strong>)
                            </p>
                        </div>

                        <!-- Body -->
                        <div class="card-body p-4">

                            <!-- Living & Accommodation -->
                            <h5 class="fw-bold mt-4 text-primary">Recurring Costs</h5>
                            <div class="table-responsive">
                                <table
                                    class="table table-bordered table-striped shadow-sm rounded align-middle text-center">
                                    <thead class="">
                                        <tr class="fw-bold text-uppercase">
                                            <th></th>
                                            <th>Monthly</th>
                                            <th>Yearly</th>
                                        </tr>
                                    </thead>
                                    <tbody class="small">
                                        <tr>
                                            <td class="fw-semibold text-muted">Living Cost</td>
                                            <td class="">
                                                {{ $breakdown['living']['monthly'] }}
                                            </td>
                                            <td class="">
                                                {{ $breakdown['living']['yearly'] }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="fw-semibold text-muted">Accommodation Cost</td>
                                            <td class="">
                                                {{ $breakdown['accomodation']['monthly'] }}
                                            </td>
                                            <td class="">
                                                {{ $breakdown['accomodation']['yearly'] }}
                                            </td>
                                        </tr>
                                        <tr class="table-success">
                                            <td class="fw-bold text-uppercase">Total Recurring</td>
                                            <td class="fw-bold">
                                                <span class="badge bg-success fs-6 px-3 py-2">
                                                    {{ $breakdown['living']['monthly'] + $breakdown['accomodation']['monthly'] }}
                                                </span>
                                            </td>
                                            <td class="fw-bold">
                                                <span class="badge bg-success fs-6 px-3 py-2">
                                                    {{ $breakdown['living']['yearly'] + $breakdown['accomodation']['yearly'] }}
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- Living & Accommodation -->

                            <!-- One-time Costs -->
                            <h5 class="fw-bold mt-4 text-primary">One-time Costs</h5>
                            <div class="table-responsive">
                                <table class="table table-hover align-middle table-striped border rounded shadow-sm">
                                    <tbody class="small">
                                        <tr>
                                            <td class="fw-semibold text-muted">Visa</td>
                                            <td class="text-end">{{ $breakdown['onetime']['visa'] }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-semibold text-muted">Biometrics</td>
                                            <td class="text-end">{{ $breakdown['onetime']['biometrics'] }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-semibold text-muted">SEVIS</td>
                                            <td class="text-end">{{ $breakdown['onetime']['sevis'] }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-semibold text-muted">Application</td>
                                            <td class="text-end">{{ $breakdown['onetime']['application'] }}</td>
                                        </tr>
                                        <tr class="table-success">
                                            <td class="fw-bold text-uppercase">Total One-time</td>
                                            <td class="fw-bold text-end">
                                                <span class="badge bg-success fs-6 px-3 py-2">
                                                    {{ $breakdown['onetime']['total'] }}
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Service Costs -->
                            <h5 class="fw-bold mt-4 text-primary">Service Costs</h5>
                            <div class="table-responsive">
                                <table class="table table-hover align-middle table-striped border rounded shadow-sm">
                                    <tbody class="small">
                                        <tr>
                                            <td class="fw-semibold text-muted">Flight Ticket</td>
                                            <td class="text-end">{{ $breakdown['service']['flight_ticket'] }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-semibold text-muted">Insurance</td>
                                            <td class="text-end">{{ $breakdown['service']['insurance'] }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-semibold text-muted">Extra</td>
                                            <td class="text-end">{{ $breakdown['service']['extra'] }}</td>
                                        </tr>
                                        <tr class="table-success">
                                            <td class="fw-bold text-uppercase">Total Service</td>
                                            <td class="fw-bold text-end">
                                                <span class="badge bg-success fs-6 px-3 py-2">
                                                    {{ $breakdown['service']['total'] }}
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Overall -->
                            <div class="table-responsive mt-4">
                                <table class="table shadow-lg rounded-4 text-center align-middle"
                                    style="background: #f8f9fa;">
                                    <thead style="background: linear-gradient(90deg, #4e54c8, #8f94fb);">
                                        <tr>
                                            <th class="fs-5 fw-bold text-white text-uppercase py-3">
                                                Overall Estimated Cost
                                                <div class="small fw-normal fst-italic text-light mt-1">
                                                    (Excluding Recurring Costs)
                                                </div>
                                            </th>
                                            <th class="p-3">
                                                <div class="d-flex justify-content-center align-items-center h-100">
                                                    <span class="badge bg-warning text-dark fs-4 px-4 py-3">
                                                        {{ $breakdown['service']['total'] + $breakdown['onetime']['total'] }}
                                                    </span>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>


                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection