@extends('client.raffles.layouts.app')
@push('css')
    <style>
        .a4-page {
            width: 210mm;
            /* A4 width */
            min-height: 297mm;
            /* A4 height */
            margin: 20px auto;
            padding: 10mm 20mm;
            background: #fff;
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
            border-radius: 12px;
            page-break-after: always;
            /* Ensures each card starts on a new page when printing */
        }

        @media print {
            body {
                background: #fff;
            }

            .a4-page {
                box-shadow: none;
                margin: 0;
                border-radius: 0;
                page-break-after: always;
            }
        }

        .a4-page .card {
            font-family: "Segoe UI", Roboto, Arial, sans-serif;
            color: #333;
        }

        .a4-page h6 {
            margin-top: 20px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e9ecef;
        }

        .a4-page table {
            font-size: 14px;
        }

        .a4-page .badge {
            border-radius: 12px;
        }
    </style>
@endpush
@section('content')
    <div class="container">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    @foreach ($breakdowns as $type => $breakdown)
                        <div class="a4-page">
                            {{-- <div class="card shadow-lg border-0 rounded-4"> --}}

                            <div class="bg-warning-subtle position-relative">
                                <div class="card-body text-center py-10">
                                    <a class="navbar-brand p-0" href="{{ url('/') }}" rel="home">
                                        <span class="navbar-brand-inner">
                                            <img src="{{ asset(setting('logo')) }}" alt="raffle logo" width="150px"
                                                height="150px" />
                                        </span>
                                    </a>
                                </div>
                            </div>
                            <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">{{ strtoupper(str_replace('_', ' ', $type)) }}</strong>)
                                </p>
                            </div>

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

                                <!-- Tution Fee -->
                                <h6 class="fw-bold mt-4 text-primary">Tution Fee</h6>
                                <div class="table-responsive">
                                    <table
                                        class="table table-sm table-bordered table-striped shadow-sm rounded align-middle text-center small">
                                        <thead>
                                            <tr class="fw-bold text-uppercase text-end small">
                                                <th></th>
                                                <th>Yearly</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="fw-semibold text-muted">{{ $fee['title'] }}</td>
                                                <td class="text-end">
                                                    {{ $fee['fee'] }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- Tution Fee -->

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

                                <!-- One-time Costs -->
                                <h6 class="fw-bold mt-30 text-primary">One-time Costs</h6>
                                <div class="table-responsive">
                                    <table
                                        class="table table-sm table-hover table-striped border rounded shadow-sm align-middle small">
                                        <tbody>
                                            <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-2 py-1">
                                                        {{ $breakdown['onetime']['total'] }}
                                                    </span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Service Costs -->
                                <h6 class="fw-bold mt-30 text-primary">Service Costs</h6>
                                <div class="table-responsive">
                                    <table
                                        class="table table-sm table-hover table-striped border rounded shadow-sm align-middle small">
                                        <tbody>
                                            <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-2 py-1">
                                                        {{ $breakdown['service']['total'] }}
                                                    </span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Overall -->
                                <div class="table-responsive mt-4">
                                    <table
                                        class="table table-sm table-bordered shadow-sm rounded-4 text-center align-middle small">
                                        <tbody>
                                            <tr class="table-warning align-middle">
                                                <td class="fw-bold text-uppercase">
                                                    <strong>Overall Estimated Cost</strong>
                                                    <div class="small fst-italic text-muted">
                                                        (Excluding Recurring Costs)
                                                    </div>
                                                </td>
                                                <td class="text-end">
                                                    <strong>{{ $breakdown['service']['total'] + $breakdown['onetime']['total'] + $fee['fee'] }}</strong>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>


                            </div>
                        </div>
                        {{-- </div> --}}
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection