<!DOCTYPE html>
<html lang="tr" style="background:#0f172a;">
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; box-sizing:border-box; }

html, body {
    font-family: DejaVu Sans, Arial, sans-serif;
    background: #0f172a;
    width: 100%;
    height: 100%;
}

.card {
    background: #0f172a;
    width: 100%;
    min-height: 100%;
    padding: 0;
    position: relative;
}

/* Accent bar top */
.accent-bar {
    height: 6px;
    background: {{ $settings->primary_color ?? '#f97316' }};
    width: 100%;
}

.content {
    padding: 36px 40px 32px;
}

/* Header */
.header-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
}
.header-table td {
    vertical-align: middle;
    padding: 0;
}
.company-block {}
.company-name {
    font-size: 13pt;
    font-weight: bold;
    color: #f1f5f9;
    letter-spacing: 0.3px;
}
.company-tagline {
    font-size: 8pt;
    color: {{ $settings->primary_color ?? '#f97316' }};
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 3px;
}
.logo-cell {
    text-align: right;
    width: 100px;
}
.logo-cell img {
    max-height: 42px;
    max-width: 90px;
}

/* Hiring badge */
.badge-wrap {
    margin-bottom: 14px;
}
.badge {
    display: inline-block;
    background: {{ $settings->primary_color ?? '#f97316' }};
    color: #fff;
    font-size: 7.5pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: 5px 14px;
    border-radius: 4px;
}

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

/* Separator line */
.sep {
    border: none;
    border-top: 1px solid #1e293b;
    margin: 20px 0;
}

/* Meta chips */
.chips-wrap {
    margin-bottom: 22px;
}
.chip {
    display: inline-block;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 8.5pt;
    color: #94a3b8;
    margin-right: 6px;
    margin-bottom: 6px;
}
.chip-icon {
    color: {{ $settings->primary_color ?? '#f97316' }};
    font-weight: bold;
}

/* Description */
.desc {
    font-size: 8.5pt;
    color: #64748b;
    line-height: 1.65;
    margin-bottom: 22px;
    padding-left: 12px;
    border-left: 3px solid {{ $settings->primary_color ?? '#f97316' }};
}

/* CTA box */
.cta-box {
    background: {{ $settings->primary_color ?? '#f97316' }};
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 16px;
}
.cta-table {
    width: 100%;
    border-collapse: collapse;
}
.cta-table td {
    vertical-align: middle;
    padding: 0;
}
.cta-label {
    font-size: 7pt;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.75);
    margin-bottom: 3px;
}
.cta-url {
    font-size: 11pt;
    font-weight: bold;
    color: #ffffff;
}
.cta-arrow {
    font-size: 20pt;
    color: rgba(255,255,255,.7);
    text-align: right;
    width: 40px;
}

/* Deadline */
.deadline {
    font-size: 8pt;
    color: #475569;
    margin-bottom: 16px;
}
.deadline strong {
    color: #94a3b8;
}

/* Footer */
.footer-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #1e293b;
    margin-top: 16px;
}
.footer-table td {
    vertical-align: middle;
    padding: 12px 0 0;
}
.social-handles {
    font-size: 7.5pt;
    color: #475569;
}
.social-handle {
    display: inline-block;
    margin-right: 12px;
    color: {{ $settings->primary_color ?? '#f97316' }};
}
.date-stamp {
    font-size: 7pt;
    color: #334155;
    text-align: right;
}
</style>
</head>
<body>
<div class="card">

    <div class="accent-bar"></div>

    <div class="content">

        {{-- Header --}}
        <table class="header-table">
            <tr>
                <td class="company-block">
                    <div class="company-name">{{ $settings->company_name ?? 'Şirket Adı' }}</div>
                    <div class="company-tagline">İş İlanı</div>
                </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>

        {{-- Badge --}}
        <div class="badge-wrap">
            <span class="badge">Şimdi İşe Alıyoruz</span>
        </div>

        {{-- Title --}}
        <div class="position-title">{{ $job->title }}</div>

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

        {{-- Description --}}
        @if($job->description)
        <div class="desc">{{ Str::limit(strip_tags($job->description), 200) }}</div>
        @endif

        <hr class="sep">

        {{-- Deadline --}}
        @if($job->closes_at)
        <div class="deadline">Son Basvuru: <strong>{{ $job->closes_at->format('d.m.Y') }}</strong></div>
        @endif

        {{-- CTA --}}
        @if($settings->application_url)
        <div class="cta-box">
            <table class="cta-table">
                <tr>
                    <td>
                        <div class="cta-label">Basvurmak icin</div>
                        <div class="cta-url">{{ $settings->application_url }}</div>
                    </td>
                    <td class="cta-arrow">&#8594;</td>
                </tr>
            </table>
        </div>
        @endif

        {{-- Footer --}}
        <table class="footer-table">
            <tr>
                <td>
                    <div class="social-handles">
                        @if($settings->social_instagram)<span class="social-handle">@{{ ltrim($settings->social_instagram, '@') }}</span>@endif
                        @if($settings->social_linkedin)<span class="social-handle">{{ $settings->social_linkedin }}</span>@endif
                        @if($settings->social_twitter)<span class="social-handle">@{{ ltrim($settings->social_twitter, '@') }}</span>@endif
                        @if($settings->social_facebook)<span class="social-handle">{{ $settings->social_facebook }}</span>@endif
                    </div>
                </td>
                <td class="date-stamp">{{ now()->format('d.m.Y') }}</td>
            </tr>
        </table>

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