<?php
if (!empty($circular_info->designations_id)) {
    $design_info = $this->db->where('designations_id', $circular_info->designations_id)->get('tbl_designations')->row();
    $designation = !empty($design_info->designations) ? $design_info->designations : '-';
} else {
    $designation = '-';
}
?>
<style>
    .career-apply-modal {
        margin: -15px;
        color: #0f172a;
        font-family: Inter, "Source Sans Pro", Arial, sans-serif;
    }

    body.frontend-dark .career-apply-modal {
        color: #e5edf8;
    }

    .career-apply-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        border-bottom: 1px solid #dbe3ee;
        background: #ffffff;
        padding: 22px 24px;
    }

    body.frontend-dark .career-apply-head {
        border-bottom-color: #263244;
        background: #111827;
    }

    .career-apply-kicker {
        margin: 0 0 6px;
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    body.frontend-dark .career-apply-kicker,
    body.frontend-dark .career-apply-subtitle {
        color: #94a3b8;
    }

    .career-apply-title {
        margin: 0;
        color: #0f172a;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.25;
    }

    body.frontend-dark .career-apply-title {
        color: #e5edf8;
    }

    .career-apply-subtitle {
        margin-top: 7px;
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
    }

    .career-apply-close {
        display: inline-flex;
        height: 34px;
        width: 34px;
        align-items: center;
        justify-content: center;
        border: 1px solid #dbe3ee;
        border-radius: 8px;
        background: #f8fafc;
        color: #475569;
        font-size: 22px;
        line-height: 1;
    }

    body.frontend-dark .career-apply-close {
        border-color: #263244;
        background: #0f172a;
        color: #e5edf8;
    }

    .career-apply-body {
        background: #f6f8fb;
        padding: 24px;
    }

    body.frontend-dark .career-apply-body {
        background: #0b1120;
    }

    .career-apply-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .career-apply-field {
        display: grid;
        gap: 7px;
    }

    .career-apply-field.is-wide {
        grid-column: 1 / -1;
    }

    .career-apply-field label {
        margin: 0;
        color: #334155;
        font-size: 12px;
        font-weight: 800;
    }

    body.frontend-dark .career-apply-field label {
        color: #cbd5e1;
    }

    .career-apply-field input,
    .career-apply-field textarea {
        width: 100%;
        min-height: 42px;
        border: 1px solid #dbe3ee;
        border-radius: 8px;
        background: #ffffff;
        padding: 10px 12px;
        color: #0f172a;
        font-size: 14px;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    body.frontend-dark .career-apply-field input,
    body.frontend-dark .career-apply-field textarea {
        border-color: #263244;
        background: #111827;
        color: #e5edf8;
    }

    .career-apply-field textarea {
        min-height: 118px;
        resize: vertical;
    }

    .career-apply-field input:focus,
    .career-apply-field textarea:focus {
        border-color: #1d4ed8;
        box-shadow: 0 0 0 3px rgba(29, 78, 216, .14);
    }

    .career-file-input {
        display: flex;
        align-items: center;
        min-height: 48px;
        border: 1px dashed #b8c4d6;
        border-radius: 8px;
        background: #ffffff;
        padding: 10px;
    }

    body.frontend-dark .career-file-input {
        border-color: #334155;
        background: #111827;
    }

    .career-file-input input {
        min-height: auto;
        border: 0;
        padding: 0;
        box-shadow: none;
    }

    .career-apply-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 18px;
    }

    .career-apply-submit {
        display: inline-flex;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        border: 1px solid #1d4ed8;
        border-radius: 8px;
        background: #1d4ed8;
        padding: 0 18px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 800;
    }

    .career-apply-submit:hover {
        background: #173f9f;
        border-color: #173f9f;
    }

    @media (max-width: 640px) {
        .career-apply-grid {
            grid-template-columns: 1fr;
        }

        .career-apply-actions,
        .career-apply-submit {
            width: 100%;
        }
    }
</style>

<div class="career-apply-modal">
    <div class="career-apply-head">
        <div>
            <p class="career-apply-kicker"><?= lang('apply_now') ?></p>
            <h2 class="career-apply-title"><?= html_escape($circular_info->job_title) ?></h2>
            <div class="career-apply-subtitle"><?= html_escape($designation) ?></div>
        </div>
        <button type="button" class="career-apply-close" data-dismiss="modal" aria-label="Close">&times;</button>
    </div>

    <div class="career-apply-body">
        <form method="post" data-parsley-validate="" novalidate=""
              action="<?= base_url('frontend/save_job_application/' . (int) $circular_info->job_circular_id) ?>"
              enctype="multipart/form-data">
            <div class="career-apply-grid">
                <div class="career-apply-field">
                    <label><?= lang('name') ?> <span class="required">*</span></label>
                    <input required type="text" name="name" placeholder="<?= lang('enter') . ' ' . lang('fullname') ?>">
                </div>

                <div class="career-apply-field">
                    <label><?= lang('email') ?> <span class="required">*</span></label>
                    <input required type="text" data-parsley-type="email" name="email"
                           placeholder="<?= lang('enter') . ' ' . lang('email') . ' ' . lang('address') ?>">
                </div>

                <div class="career-apply-field">
                    <label><?= lang('mobile') ?> <span class="required">*</span></label>
                    <input required type="text" data-parsley-type="number" name="mobile"
                           placeholder="<?= lang('enter') . ' ' . lang('mobile') . ' ' . lang('number') ?>">
                </div>

                <div class="career-apply-field">
                    <label><?= lang('resume') ?> <span class="required">*</span></label>
                    <div class="career-file-input">
                        <input required type="file" name="resume">
                    </div>
                </div>

                <div class="career-apply-field is-wide">
                    <label><?= lang('cover_later') ?></label>
                    <textarea name="cover_letter" rows="5"></textarea>
                </div>
            </div>

            <div class="career-apply-actions">
                <button id="btn_emp" type="submit" class="career-apply-submit"><?= lang('save') ?></button>
            </div>
        </form>
    </div>
</div>
