@extends('layouts.content_auth')
@section('body_content')
    <div class="container-xl px-4 mt-5">
        <div class="row mt-2">
            <div class="col">
                <div class="card mb-4">
                    <div class="card-header" id="inputProfil">Input Your Education</div>

                    <form action="/input-edukasi" method="post" id="input-edukasi">
                        @csrf
                        <div class="card-body" id="educationContainer">
                            <div class="mb-3">
                                <input type="hidden" name="data[0][candidate_employee_uid]" value="{{ $url }}"
                                    id="candidate_employee_">
                            </div>
                            <div class="mb-3">
                                <label class="small mb-1" for="inputEducation">Education Level</label>
                                <select class="form-select @error('data[0][education]') is-invalid @enderror"
                                    name="data[0][education]" id="inputEducation" required>
                                    <option value="" disabled selected>Select your education level</option>
                                    <option value="SMA/SMK/MA"{{ old('education') === 'SMA/SMK/MA' ? ' selected' : '' }}>
                                        SMA/SMK/MA</option>
                                    <option value="D3"{{ old('education') === 'D3' ? ' selected' : '' }}>D3</option>
                                    <option value="D4"{{ old('education') === 'D4' ? ' selected' : '' }}>D4</option>
                                    <option value="S1"{{ old('education') === 'S1' ? ' selected' : '' }}>S1</option>
                                    <option value="S2"{{ old('education') === 'S2' ? ' selected' : '' }}>S2</option>
                                    <option value="S3"{{ old('education') === 'S3' ? ' selected' : '' }}>S3</option>
                                </select>
                                @error('data[0][education]')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="mb-3" id="majorField" style="display: block;">
                                <label class="small mb-1" for="inputIdNumber">Major</label>
                                <input class="form-control @error('data[0][major]') is-invalid @enderror"
                                    name="data[0][major]" id="inputMajor" value="{{ old('data[0][major]') }}" type="text"
                                    placeholder="Input Your Major" required />
                                @error('data[0][major]')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="small mb-1" for="inputIdNumber">School/University</label>
                                <input class="form-control @error('data[0][school]') is-invalid @enderror"
                                    name="data[0][school]" id="inputIdNumber" value="{{ old('data[0][school]') }}"
                                    type="text" placeholder="Input Your School or University" required />
                                @error('data[0][school]')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="inputDateStart" class="small mb-1">Start School</label>
                                    <input type="date" name="data[0][date_start]"
                                        value="{{ old('data[0][date_start]') }}"
                                        class="form-control @error('data[0][date_start]') is-invalid @enderror">
                                    @error('data[0][date_start]')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="inputDateEnd" class="small mb-1">End School</label>
                                    <input type="date" name="data[0][date_end]" value="{{ old('data[0][date_end]') }}"
                                        class="form-control @error('data[0][date_end]') is-invalid @enderror">
                                    @error('data[0][date_end]')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mb-3">
                            <button type="button" class="btn btn-primary ms-4" onclick="addEducation()">
                                <i class="fas fa-plus fa-fw"></i> Add
                            </button>
                        </div>
                        <button class="btn btn-primary ms-4" type="submit" onclick="submitForm(event)">Next</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection
<script>
    var index = 1;

    function addEducation() {
        var newElm = `
        <div class="col mt-5">
        <hr class="mt-0 mb-4" />
    </div>  
            <div class="education-row" data-index="${index}">
                <div class="mb-3">
                <input type="hidden" name="data[${index}][candidate_employee_uid]" value="{{ $url }}" id="candidate_employee_uid">
                </div>
                <div class="mb-3">
                                <label class="small mb-1" for="inputEducation">Education Level</label>
                                <select class="form-select @error('data[${index}][education]') is-invalid @enderror"
                                    name="data[${index}][education]" id="inputEducation" required>
                                    <option value="" disabled selected>Select your education level</option>
                                    <option value="SMA/SMK/MA"{{ old('education') === 'SMA/SMK/MA' ? ' selected' : '' }}>
                                        SMA/SMK/MA</option>
                                    <option value="D3"{{ old('education') === 'D3' ? ' selected' : '' }}>D3</option>
                                    <option value="D4"{{ old('education') === 'D4' ? ' selected' : '' }}>D4</option>
                                    <option value="S1"{{ old('education') === 'S1' ? ' selected' : '' }}>S1</option>
                                    <option value="S2"{{ old('education') === 'S2' ? ' selected' : '' }}>S2</option>
                                    <option value="S3"{{ old('education') === 'S3' ? ' selected' : '' }}>S3</option>
                                </select>
                                @error('data[${index}][education]')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>      
                            <div class="mb-3" id="majorField" style="display: block;">
                                <label class="small mb-1" for="inputIdNumber">Major</label>
                                <input class="form-control @error('data[${index}][major]') is-invalid @enderror"
                                    name="data[${index}][major]" id="inputMajor" value="{{ old('data[${index}][major]') }}" type="text"
                                    placeholder="Input Your Major" required />
                                @error('data[${index}][major]')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="small mb-1" for="inputIdNumber">School/University</label>
                                <input class="form-control @error('data[${index}][school]') is-invalid @enderror"
                                    name="data[${index}][school]" id="inputIdNumber" value="{{ old('data[${index}][school]') }}"
                                    type="text" placeholder="Input Your School or University" required />
                                @error('data[${index}][school]')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="inputDateStart" class="small mb-1">Start School</label>
                        <input type="date" name="data[${index}][date_start]" value="{{ old('data[${index}][date_start]') }}"
                                        class="form-control @error('data[${index}][date_start]') is-invalid @enderror">
                                    @error('data[${index}][date_start]')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="inputDateEnd" class="small mb-1">End School</label>
                                    <input type="date" name="data[${index}][date_end]" value="{{ old('data[${index}][date_end]') }}"
                                        class="form-control @error('data[${index}][date_end]') is-invalid @enderror">
                                    @error('data[${index}][date_end]')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                <div class="col-12 mb-3">
                    <button type="button" class="btn btn-danger" onclick="deleteEducation(this)">
                        <i class="fas fa-trash-alt fa-fw"></i> Delete
                    </button>
                </div>
            </div>
        `;

        var educationContainer = document.getElementById("educationContainer");
        var newDiv = document.createElement("div");
        newDiv.innerHTML = newElm;
        educationContainer.appendChild(newDiv);

        index++;
    }

    function deleteEducation(button) {
        var educationContainer = document.getElementById("educationContainer");
        var educationRow = button.closest(".education-row");
        var dataIndex = educationRow.getAttribute("data-index");
        educationRow.remove(dataIndex);

        // Update the index variable
        index--;

        // Update data-index for remaining rows to ensure correct indexing
        var remainingEducationRows = educationContainer.getElementsByClassName("education-row");
        for (var i = 0; i < remainingEducationRows.length; i++) {
            remainingEducationRows[i].setAttribute("data-index", i + 1);
        }
    }

    function submitForm(event) {
        event.target.disabled = true;
        document.querySelector("#input-edukasi").submit();
    }
</script>