@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">

    {{-- SweetAlert Messages --}}
    @if(session('message'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Updated!',
                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">Edit Job — {{ $job->job_title }}</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.update', $job->id) }}">
                @csrf
                @method('PUT')

                <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"
                               value="{{ $job->job_title }}"
                               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"
                               value="{{ $job->department }}"
                               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"
                               value="{{ $job->positions }}"
                               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" required>
                            <option value="Open" {{ $job->status == 'Open' ? 'selected' : '' }}>Open</option>
                            <option value="Closed" {{ $job->status == 'Closed' ? 'selected' : '' }}>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 datepicker"
                               value="{{ $job->publish_at ? \Carbon\Carbon::parse($job->publish_at)->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 datepicker"
                               value="{{ \Carbon\Carbon::parse($job->deadline)->format('Y-m-d') }}"
                               required>
                    </div>

                    <!-- JOB SECTIONS -->
                    <div class="col-md-12">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label fw-semibold">Job Sections</label>
                            <button type="button" class="btn btn-sm btn-success" onclick="addSection()">
                                <i class="bx bx-plus"></i> Add Section
                            </button>
                        </div>

                        <div id="sectionsWrapper">

                            @foreach($job->sections as $index => $section)
                                <div class="card mb-3 section-item">
                                    <div class="card-body">

                                        <div class="d-flex justify-content-between mb-2">
                                            <input type="text"
                                                   name="sections[{{ $index }}][title]"
                                                   class="form-control fw-bold"
                                                   value="{{ $section->title }}"
                                                   placeholder="Section title (e.g. Description, Qualifications)"
                                                   required>

                                            <button type="button"
                                                    class="btn btn-danger btn-sm ms-2"
                                                    onclick="removeSection(this)">
                                                <i class="bx bx-trash"></i>
                                            </button>
                                        </div>

                                        <textarea name="sections[{{ $index }}][content]"
                                                  rows="4"
                                                  class="form-control"
                                                  placeholder="Section content..."
                                                  required>{{ $section->content }}</textarea>

                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>

                </div>

                <div class="mt-4 d-flex justify-content-end">
                    <button class="btn btn-primary btn-lg px-5">
                        <i class="bx bx-save"></i> Update Job
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>

{{-- JS --}}
<script>
    let sectionIndex = {{ $job->sections->count() }};

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

        wrapper.insertAdjacentHTML('beforeend', `
            <div class="card mb-3 section-item">
                <div class="card-body">

                    <div class="d-flex justify-content-between mb-2">
                        <input type="text"
                               name="sections[${sectionIndex}][title]"
                               class="form-control fw-bold"
                               placeholder="Section title (e.g. Description)"
                               required>

                        <button type="button"
                                class="btn btn-danger btn-sm ms-2"
                                onclick="removeSection(this)">
                            <i class="bx bx-trash"></i>
                        </button>
                    </div>

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

                </div>
            </div>
        `);

        sectionIndex++;
    }

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

@endsection