@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Recruitment — Job postings'))

@push('css')
<style>
    .recruitment-page .page-title { font-size: 1.25rem; font-weight: 600; }
    .recruitment-page .filter-panel { background: #f8f9fb; border-bottom: 1px solid #e9ecef; }
</style>
@endpush

@section('content')
    <div class="recruitment-page pt-3 pb-4 px-2 px-md-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
            <div>
                <h4 class="page-title mb-0">{{ __('Recruitment (ATS)') }}</h4>
                <p class="text-muted small mb-0">{{ __('Manage job postings and publish to the public careers portal.') }}</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <a href="{{ route('careers.index') }}" target="_blank" class="btn btn-sm btn-outline-primary">
                    <i class="mdi mdi-open-in-new"></i> {{ __('View careers portal') }}
                </a>
                <a href="{{ route('admin.recruitment.applications') }}" class="btn btn-sm btn-outline-secondary">{{ __('Applications') }}</a>
                <a href="{{ route('admin.recruitment.syndication') }}" class="btn btn-sm btn-outline-secondary">{{ __('Syndication') }}</a>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-body">
                @livewire('recruitment.admin-job-postings')
            </div>
        </div>
    </div>
@endsection

@section('script')
    <link rel="stylesheet" href="{{ asset('assets/plugins/summernote/summernote-bs4.css') }}">
    <script src="{{ asset('assets/plugins/summernote/summernote-bs4.min.js') }}"></script>
    <script>
        (function () {
            function initRecruitmentJobSummernote(html) {
                var el = document.getElementById('job-post-summernote');
                if (!el || !window.jQuery) return;
                var $el = window.jQuery(el);
                if ($el.data('summernote')) {
                    $el.summernote('destroy');
                }
                $el.summernote({
                    height: 280,
                    minHeight: 180,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'italic', 'underline', 'clear']],
                        ['fontname', ['fontname']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['table', ['table']],
                        ['insert', ['link', 'hr']],
                        ['view', ['fullscreen', 'codeview', 'help']]
                    ],
                    callbacks: {
                        onChange: function (contents) {
                            if (window.Livewire) {
                                window.Livewire.dispatch('recruitment-job-desc', {description: contents});
                            }
                        }
                    }
                });
                $el.summernote('code', html || '<p><br></p>');
            }

            document.addEventListener('livewire:init', function () {
                Livewire.on('recruitment-job-desc-load', function (payload) {
                    var html = '';
                    if (payload && typeof payload.html !== 'undefined') {
                        html = payload.html;
                    }
                    setTimeout(function () {
                        initRecruitmentJobSummernote(html);
                    }, 30);
                });
            });
        })();
    </script>
@endsection