@extends('admin.admin_dashboard')

@section('admin')
<div class="page-content">

    {{-- Alerts --}}
    @if(session('message'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: '{{ session('message') }}',
                timer: 2000,
                showConfirmButton: false
            });
        </script>
    @endif

    @if ($errors->any())
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                html: `{!! implode('<br>', $errors->all()) !!}`,
            });
        </script>
    @endif

    <div class="card radius-10 shadow-sm">
        <div class="card-body p-4">

            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="fw-bold">Create New Job</h4>
                <a href="{{ route('hr.jobs.index') }}" class="btn btn-secondary">
                    <i class="bx bx-arrow-back"></i> Back
                </a>
            </div>

            <form method="POST" action="{{ route('hr.jobs.store') }}">
                @csrf

                <div class="row g-4">

                    <!-- Job Title -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Job Title</label>
                        <input type="text" name="job_title"
                               class="form-control form-control-lg shadow-sm"
                               required>
                    </div>

                    <!-- Department -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Department</label>
                        <input type="text" name="department"
                               class="form-control form-control-lg shadow-sm"
                               required>
                    </div>

                    <!-- Positions -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Number of Positions</label>
                        <input type="number" name="positions" min="1"
                               class="form-control form-control-lg shadow-sm"
                               required>
                    </div>

                    <!-- Status -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Status</label>
                        <select name="status" class="form-select form-select-lg shadow-sm" required>
                            <option value="Open">Open</option>
                            <option value="Closed">Closed</option>
                        </select>
                    </div>

                    <!-- Publish At -->
                   <div class="col-md-4">
    <label class="form-label fw-semibold">Publish At</label>
    <input type="date"
           name="publish_at"
           class="form-control form-control-lg shadow-sm datepicker"
           value="{{ now()->format('Y-m-d') }}">
</div>


                    <!-- Deadline -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Application Deadline</label>
                        <input type="date" name="deadline"
                               class="form-control form-control-lg shadow-sm datepicker"
                               required>
                    </div>
                </div>

                {{-- ============================= --}}
                {{-- JOB SECTIONS --}}
                {{-- ============================= --}}
                <hr class="my-4">

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="fw-bold mb-0">Job Sections</h5>
                    <button type="button" class="btn btn-sm btn-primary" onclick="addSection()">
                        <i class="bx bx-plus"></i> Add Section
                    </button>
                </div>

                <div id="sectionsWrapper">
                    <!-- Default first section -->
                    <div class="card mb-3 shadow-sm section-item">
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-2">
                                <strong>Section</strong>
                                <button type="button"
                                        class="btn btn-sm btn-outline-danger"
                                        onclick="removeSection(this)">
                                    <i class="bx bx-trash"></i>
                                </button>
                            </div>

                            <input type="text"
                                   name="sections[0][title]"
                                   class="form-control mb-2"
                                   placeholder="Section title (e.g. Job Description)"
                                   required>

                            <textarea name="sections[0][content]"
                                      rows="4"
                                      class="form-control"
                                      placeholder="Section content"
                                      required></textarea>
                        </div>
                    </div>
                </div>

                <!-- Submit -->
                <div class="mt-4 d-flex justify-content-end">
                    <button class="btn btn-success btn-lg px-5 shadow-sm">
                        <i class="bx bx-save"></i> Create Job
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>

{{-- ============================= --}}
{{-- JS --}}
{{-- ============================= --}}
<script>
    let sectionIndex = 1;

    function addSection() {
        const wrapper = document.getElementById('sectionsWrapper');

        const html = `
            <div class="card mb-3 shadow-sm section-item">
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <strong>Section</strong>
                        <button type="button"
                                class="btn btn-sm btn-outline-danger"
                                onclick="removeSection(this)">
                            <i class="bx bx-trash"></i>
                        </button>
                    </div>

                    <input type="text"
                           name="sections[${sectionIndex}][title]"
                           class="form-control mb-2"
                           placeholder="Section title (e.g. Qualifications)"
                           required>

                    <textarea name="sections[${sectionIndex}][content]"
                              rows="4"
                              class="form-control"
                              placeholder="Section content"
                              required></textarea>
                </div>
            </div>
        `;

        wrapper.insertAdjacentHTML('beforeend', html);
        sectionIndex++;
    }

    function removeSection(button) {
        button.closest('.section-item').remove();
    }
</script>
@endsection