<!DOCTYPE html>
<html lang="tr" style="background-color: {{ $settings->primary_color ?? '#ff7b00' }};">
<head>
<meta charset="UTF-8">
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    html, body {
        font-family: DejaVu Sans, sans-serif;
        font-size: 11pt;
        color: #ffffff;
        background-color: {{ $settings->primary_color ?? '#ff7b00' }};
        width: 100%;
        height: 100%;
    }

    /* Full-page wrapper */
    .page {
        background-color: {{ $settings->primary_color ?? '#ff7b00' }};
        width: 100%;
        min-height: 100%;
        padding: 44px 56px;
    }

    /* Top bar: company name + logo */
    .top-bar {
        width: 100%;
        margin-bottom: 36px;
        border-bottom: 1px solid #e8c89a;
        padding-bottom: 16px;
    }
    .top-bar table {
        width: 100%;
        border-collapse: collapse;
    }
    .top-bar td {
        vertical-align: middle;
        padding: 0;
    }
    .company-name {
        font-size: 14pt;
        font-weight: bold;
        color: #ffffff;
        letter-spacing: 0.5px;
    }
    .logo-cell {
        text-align: right;
    }
    .logo-cell img {
        max-height: 44px;
        max-width: 120px;
    }

    /* Position label */
    .position-label {
        font-size: 9pt;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: #f0dcc0;
        margin-bottom: 8px;
    }

    /* Position title */
    .position-title {
        font-size: 30pt;
        font-weight: bold;
        color: #ffffff;
        line-height: 1.15;
        margin-bottom: 28px;
    }

    /* Meta chips — using inline-block spans */
    .chips {
        margin-bottom: 32px;
    }
    .chip {
        display: inline-block;
        background-color: #d4813a;
        border: 1px solid #e8a060;
        border-radius: 20px;
        padding: 5px 14px;
        font-size: 9pt;
        color: #ffffff;
        margin-right: 8px;
        margin-bottom: 6px;
    }

    /* Divider */
    .divider {
        border: none;
        border-top: 1px solid #d48840;
        margin: 24px 0;
    }

    /* Bottom section */
    .bottom-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 8px;
    }
    .bottom-table td {
        vertical-align: bottom;
        padding: 0;
    }

    /* Contact block */
    .contact-label {
        font-size: 7pt;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #e0c090;
        margin-bottom: 4px;
    }
    .contact-line {
        font-size: 9pt;
        color: #f5e8d8;
        line-height: 1.8;
    }
    .social-line {
        font-size: 8pt;
        color: #e8d0b0;
        margin-top: 6px;
    }

    /* Apply block */
    .apply-cell {
        text-align: right;
    }
    .deadline-badge {
        display: inline-block;
        background-color: #c06820;
        border-radius: 6px;
        padding: 4px 12px;
        font-size: 8pt;
        color: #fff8f0;
        margin-bottom: 10px;
    }
    .apply-label {
        font-size: 8pt;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #e8d0b0;
        margin-bottom: 6px;
    }
    .apply-url-box {
        display: inline-block;
        background-color: #c87030;
        border: 1px solid #e8a060;
        border-radius: 8px;
        padding: 8px 18px;
        font-size: 10pt;
        font-weight: bold;
        color: #ffffff;
    }
</style>
</head>
<body>
<div class="page">

    {{-- Top bar --}}
    <div class="top-bar">
        <table>
            <tr>
                <td class="company-name">{{ $settings->company_name ?? 'Şirket Adı' }}</td>
                @if($settings->company_logo_path)
                <td class="logo-cell">
                    <img src="{{ storage_path('app/public/' . $settings->company_logo_path) }}" alt="Logo">
                </td>
                @endif
            </tr>
        </table>
    </div>

    {{-- Position --}}
    <div class="position-label">Açık Pozisyon</div>
    <div class="position-title">{{ $job->title }}</div>

    {{-- Chips --}}
    <div class="chips">
        <span class="chip">{{ $job->location }}</span>
        <span class="chip">{{ $job->employment_type }}</span>
        @if($job->department)<span class="chip">{{ $job->department }}</span>@endif
        @if($job->salary_range)<span class="chip">{{ $job->salary_range }}</span>@endif
        @if($job->working_hours)<span class="chip">{{ $job->working_hours }}</span>@endif
    </div>

    <hr class="divider">

    {{-- Bottom --}}
    <table class="bottom-table">
        <tr>
            <td style="width:55%;">
                @if($settings->company_phone || $settings->company_email || $settings->company_website)
                <div class="contact-label">İletişim</div>
                @if($settings->company_phone)<div class="contact-line">{{ $settings->company_phone }}</div>@endif
                @if($settings->company_email)<div class="contact-line">{{ $settings->company_email }}</div>@endif
                @if($settings->company_website)<div class="contact-line">{{ $settings->company_website }}</div>@endif
                @endif

                @php
                    $socials = array_filter([
                        $settings->social_instagram ? '@' . ltrim($settings->social_instagram, '@') : null,
                        $settings->social_linkedin  ? 'LinkedIn: ' . $settings->social_linkedin : null,
                        $settings->social_twitter   ? '@' . ltrim($settings->social_twitter, '@') : null,
                    ]);
                @endphp
                @if($socials)
                <div class="social-line">{{ implode('  |  ', $socials) }}</div>
                @endif
            </td>
            <td class="apply-cell">
                @if($job->closes_at)
                <div class="deadline-badge">Son Basvuru: {{ $job->closes_at->format('d.m.Y') }}</div><br>
                @endif
                @if($settings->application_url)
                <div class="apply-label">Basvurmak icin</div>
                <div class="apply-url-box">{{ $settings->application_url }}</div>
                @endif
            </td>
        </tr>
    </table>

</div>
</body>
</html>