@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="inputDocument">Input Your Document</div>
                    <form action="/input-document" method="post" enctype="multipart/form-data" id="input-document">
                        @csrf
                        <div class="card-body" id="documentContainer">
                            <div class="mb-3">
                                <input type="hidden" name="data[0][candidate_employee_uid]" value="{{ $url }}"
                                    id="">
                            </div>
                            <div class="mb-3">
                                <label for="inputTypeCerificate" class="small mb-1"> Type Certificate</label>
                                <select name="data[0][type_certificate_uid]" id="typeCertificate"
                                    class="form-control selectpicker" data-live-search="true">
                                    <option value="" disabled selected>Select Type Certificate</option>
                                    @foreach ($typeCertificate as $item)
                                        <option value="{{ $item['type_certificates']['uid'] }}">
                                            {{ $item['type_certificates']['type'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="inputImage" class="small mb-1">Input Certirficate</label>
                                <input type="file" class="form-control" name="data[0][certificate_pdf]"
                                    accept="application/pdf">
                                <p style="font-size: 12px" class="mt-1">Certificate harus berupa PDF</p>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="inputDateStart" class="small mb-1">Date Published</label>
                                    <input type="date" name="data[0][date_published]"
                                        class="form-control @error('date_published') is-invalid @enderror">
                                    @error('date_published')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="inputDateEnd" class="small mb-1">Date Expiration</label>
                                    <input type="date" name="data[0][date_expiration]"
                                        class="form-control @error('date_expiration') is-invalid @enderror">
                                    @error('date_expiration')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-5 mb-3">
                                <label for="" class="small mb-1">Jika tidak ada sertifikat maka langsung klik button
                                    complate dibawah</label>
                            </div>
                        </div>

                        <div class="col-12 mb-3">
                            <button class="btn btn-primary ms-4" type="button" onclick="addCertificate()">
                                <i class="fas fa-plus fa-fw"></i> Add
                            </button>
                        </div>
                        <button type="submit" class="btn btn-primary ms-4" onclick="submitForm(event)">Complete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    var index = 1;

    function addCertificate() {
        var newElm = `
        <div class="card-body document-row" id="documentContainer" data-index="${index}">
             <div class="mb-3">
                    <input type="hidden" name="data[${index}][candidate_employee_uid]" value="{{ $url }}">
                            </div>
                            <div class="mb-3">
                                <label for="inputTypeCerificate" class="small mb-1"> Type Certificate</label>
                                <select name="data[${index}][type_certificate_uid]" id="typeCertificate" class="form-control" data-live-search="true">
                                    <option value="" disabled selected>Select Type Certificate</option>
                                    @foreach ($typeCertificate as $item)
                                    <option value="{{ $item['type_certificates']['uid'] }}">
                                            {{ $item['type_certificates']['type'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="inputImage" class="small mb-1">Input Certirficate</label>
                                <input type="file" class="form-control" name="data[${index}][certificate_pdf]" accept="application/pdf">
                                <p style="font-size: 12px" class="mt-1">Certificate harus berupa PDF</p>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="inputDateStart" class="small mb-1">Date Published</label>
                                    <input type="date" name="data[${index}][date_published]" 
                                        class="form-control @error('date_start') is-invalid @enderror">
                                    @error('date_published')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="inputDateEnd" class="small mb-1">Date Expiration</label>
                                    <input type="date" name="data[${index}][date_expiration]"
                                        class="form-control @error('date_expiration') is-invalid @enderror">
                                    @error('date_expiration')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <button type="button" class="btn btn-danger" onclick="deleteDocument(this)">
                                    <i class="fas fa-trash-alt fa-fw"></i> Delete
                                </button>    
                            </div>
                        </div>
        `;
        var documentContainer = document.getElementById("documentContainer");
        var newDiv = document.createElement("div");
        newDiv.innerHTML = newElm;
        documentContainer.appendChild(newDiv);

        index++;
    }

    function deleteDocument(button) {
        var documentRow = button.closest(".document-row");
        var documentIndex = documentRow.getAttribute("data-index");
        documentRow.remove(documentIndex);

        index--;

        var remainingDocumentRow = documentContainer.getElementsByClassName("document-row");
        for (var i = 0; i < remainingDocumentRow.length; i++) {
            remainingDocumentRow[i].setAttribute("data-index", i + 1);
        }
    }

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