@extends('pdf.layout')

@section('content')
    <style>
        @page {
            margin: 40px 40px;
        }

        body {
            font-family: DejaVu Sans, sans-serif;
            font-size: 12px;
            color: #333;
        }

        .header {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #1f3b73;
            margin-bottom: 40px;
        }

        .header-title {
            font-size: 20px;
            font-weight: bold;
            color: #1f3b73;
        }

        .content {
            margin-top: 20px;
        }

        .enrollment-date {
            font-size: 14px;
            line-height: 1.6;
            border-collapse: collapse;
            margin-bottom: 40px;
        }

        .enrollment-date td {
            padding-right: 10px;
        }

        .enrollment-text {
            /* margin-top: 20px; */
            margin-bottom: 40px;
            font-size: 14px;
            line-height: 1.6;
        }

        .student-info {
            margin-bottom: 40px;
        }

        .closing-text {
            margin-top: 60px;
            margin-bottom: 10px;
            font-size: 14px;
            /* color: #5f6f8f; */
        }

        .signature-block {
            margin-top: 10px;
        }

        .signature-block .signature {
            text-align: left;
            margin-top: 10px;
        }

        .signature-block .signature-image {
            margin: 10px 0 0;
            max-width: 130px;
        }

        .signature-block .administrative-user {
            text-align: left;
            margin-top: -5px;
            /* color: #1f3b73; */
        }

        .signature-block .administrative-user .info-line {
            text-align: left;
            color: #1f3b73;
        }

        .signature-block .signature-line {
            width: 200px;
            margin: 0;
        }
    </style>

    <div class="container">
        <div class="header">
            <p>Confirmation of Enrollment</p>
        </div>

        <div class="content">
            {{-- Since display:flex doesn't work, we use a table instead --}}
            <table class="enrollment-date">
                <tr>
                    <td><strong>Data accurate as of:</strong></td>
                    <td>{{ \Carbon\Carbon::now()->format('F j, Y') }}</td>
                </tr>
            </table>

            <div>
                <p class="enrollment-text">
                    This letter confirms the enrollment of the following student for the 
                    {{ \Carbon\Carbon::parse(data_get($student, 'academicPeriod.start_date'))->format('Y') }} - 
                    {{ \Carbon\Carbon::parse(data_get($student, 'academicPeriod.end_date'))->format('Y') }}
                    academic year at International American Institute.
                </p>
                <table class="student-info">
                    <tr>
                        <td><strong>Student:</strong> {{ $student['first_name'] }} {{ $student['last_name'] }}</td>
                    </tr>
                    <tr>
                        <td><strong>Date of Birth:</strong>
                            {{ \Carbon\Carbon::parse($student['birthdate'])->format('F j, Y') }}</td>
                    </tr>
                    <tr>
                        <td><strong>Grade Level:</strong> {{ data_get($student, 'gradeLevel.name', '') }}</td>
                    </tr>
                    <tr>
                        <td><strong>Enrollment Start Date:</strong> {{ \Carbon\Carbon::parse(data_get($student, 'academicPeriod.start_date'))->format('F j, Y') }}</td>
                    </tr>
                </table>

                <table class="academic-period">
                    <tr>
                        <td><strong>Enrollment Period:</strong></td>
                        <td>{{ \Carbon\Carbon::parse(data_get($student, 'academicPeriod.start_date'))->format('F j, Y') }}
                            - </td>
                        <td>{{ \Carbon\Carbon::parse(data_get($student, 'academicPeriod.end_date'))->format('F j, Y') }}
                        </td>
                    </tr>
                </table>
            </div>

            <div class="closing-text">
                Sincerely,
            </div>

            <div class="signature-block">
                @include('pdf.components.administrativeUser', ['administrativeUser' => $administrativeUser])
            </div>
        </div>
    </div>
@endsection