@extends('layouts.content_auth')
<style>
    a.nav-link {
        text-decoration: none;
        color: black;
        padding-bottom: 2px;
        border-bottom: 2px solid transparent;
    }

    a.nav-link:hover {
        border-bottom-color: blue;
        font-weight: bold;
        color: blue;
    }
</style>

@section('body_content')
    <div class="container-xl px-4 mt-5">
        <!-- Account page navigation-->
        <div class="row">
            <div class="col">
                <div class="card-header bg-white">
                    <h2 class="fw-bolder">Qualification</h2>
                </div>
                <div class="card-body card-xl bg-white">
                    <h5 class="mt-4">Gender</h5>
                    <ul>
                        <li>
                            @foreach ($gender as $key => $item)
                                {{ $item['gender'] }}
                                @if ($key !== count($gender) - 1)
                                    /
                                @endif
                            @endforeach
                        </li>
                    </ul>
                    <h5 class="mt-4">Age</h5>
                    <ul>
                        <li>
                            {{ $subRecruitment['age'] }}
                        </li>
                    </ul>
                    <h5 class="mt-4">Marital Status</h5>
                    <ul>
                        <li>
                            @foreach ($marital as $key => $item)
                                {{ $item['marital_status'] }}
                                @if ($key !== count($marital) - 1)
                                    /
                                @endif
                            @endforeach
                        </li>
                    </ul>
                    <h5 class="mt-4">Education</h5>
                    <ul>
                        <li>
                            @foreach ($education as $key => $item)
                                {{ $item['education'] }}
                                @if ($key !== count($education) - 1)
                                    ,
                                @endif
                            @endforeach
                        </li>
                    </ul>
                    <h5 class="mt-4">Major</h5>
                    <ul>
                        <li>
                            @foreach ($major as $key => $item)
                                {{ $item['major'] }}
                                @if ($key !== count($major) - 1)
                                    ,
                                @endif
                            @endforeach
                        </li>
                    </ul>
                    <h5 class="mt-4">Skill</h5>
                    <ul>
                        <li>
                            @foreach ($skills as $key => $item)
                                {{ $item['skills'] }}
                                @if ($key !== count($skills) - 1)
                                    /
                                @endif
                            @endforeach
                        </li>
                    </ul>
                    <h5 class="mt-4">Experience</h5>
                    <ul>
                        <li>
                            @foreach ($experience as $key => $item)
                                {{ $item['experience'] }}
                                @if ($key !== count($experience) - 1)
                                    /
                                @endif
                            @endforeach
                        </li>
                    </ul>
                    <h5 class="mt-4">Description</h5>
                    <ul>
                        <pre class="fs-5" style="font-family: sans-serif; white-space: pre-wrap; word-wrap: break-word;">{{ $subRecruitment['kualifikasi'] }}</pre>
                    </ul>

                </div>
            </div>
        </div>
        <div class="col mt-5">
            <hr class="mt-0 mb-4" />
        </div>
        <div class="row mt-2">
            <div class="col">
                <!-- Candidate Employee Card-->
                <div class="card mb-4">
                    <div class="card-header" id="inputProfil">Input Your Profile</div>
                    <div class="card-body">
                        <form action="/candidate-employee" method="post" enctype="multipart/form-data"
                            id="candidate-employee">
                            @csrf
                            <div class="mb-3">
                                <input type="hidden" class="form-control" name="role_uid"
                                    value="{{ $subRecruitment['roles_uid'] }}" readonly>
                                <input type="hidden" name="sub_recruitment_uid" id="sub_recruitment_uid">
                            </div>
                            <div class="mb-3">
                                <label class="small mb-1" for="inputIdNumber">Enter ID Number</label>
                                <input class="form-control @error('pid') is-invalid @enderror" name="pid"
                                    id="inputIdNumber" value="{{ old('pid') }}" type="number" name="pid"
                                    placeholder="Enter your ID Number" required />
                                @error('pid')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="row gx-3 mb-3">
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputFullName">Full Name</label>
                                    <input class="form-control @error('name') is-invalid @enderror" id="inputFullName"
                                        type="text" value="{{ old('name') }}" name="name"
                                        placeholder="Input Your Full Name" required />
                                    @error('name')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputFamilyId">Enter Family Id</label>
                                    <input class="form-control @error('family_card_no') is-invalid @enderror"
                                        name="family_card_no" id="inputFamilyId" type="number"
                                        placeholder="Input Your ID Family value" value="{{ old('family_card_no') }}"
                                        required />
                                    @error('family_card_no')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row gx-3 mb-3">
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputGender">Gender</label>
                                    <select name="gender" id="inputGender"
                                        class="form-control @error('gender') is-invalid @enderror" required>
                                        <option disabled selected>Select Gender</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                    </select>
                                    @error('gender')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputPOB">Place Of Birthday</label>
                                    <input class="form-control @error('pob') is-invalid @enderror" id="inputPOB"
                                        value="{{ old('pob') }}" type="text" name="pob"
                                        placeholder="Input Your Place Of Birthday" required />
                                    @error('pob')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row gx-3 mb-3">
                                <div class="col-md-6">
                                    <label class="small mb-1" for="age">Age</label>
                                    <input class="form-control @error('age') is-invalid @enderror"
                                        value="{{ old('age') }}" id="age" type="number" name="age"
                                        placeholder="Input Your Age" required />
                                    @error('age')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="birthday" class="small mb-1">Birthday</label>
                                    <input type="date" class="form-control @error('birthday') is-invalid @enderror"
                                        value="{{ old('birthday') }}" id="birthday" name="birthday" required>
                                    @error('birthday')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="small mb-1" for="phone_number">Phone Number</label>
                                <input class="form-control" id="phone_number" type="number" name="phone_number"
                                    value="{{ old('phone_number') }}" placeholder="Input Your Number Phone" required />
                                @error('phone_number')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="small mb-1" for="inputEmailAddress">Email address</label>
                                <input class="form-control @error('email') is-invalid @enderror"
                                    value="{{ old('email') }}" id="inputEmailAddress" type="email" name="email"
                                    placeholder="Input Your Email Address" required />
                                @error('email')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="row gx-3 mb-3">
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputReligion">Religion</label>
                                    <select name="religion" id="inputReligion"
                                        class="form-control @error('religion') is-invalid @enderror">
                                        <option disabled selected>Select Religion</option>
                                        <option value="islam">Islam</option>
                                        <option value="kristen">Kristen</option>
                                        <option value="hindu">Hindu</option>
                                        <option value="Budha">Budha</option>
                                        <option value="katholik">Katholik</option>
                                    </select>
                                    @error('religion')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputNpwp">NPWP</label>
                                    <input class="form-control @error('npwp') is-invalid @enderror"
                                        value="{{ old('npwp') }}" required id="inputNpwp" type="number"
                                        name="npwp" placeholder="Input Your NPWP" required>
                                    @error('npwp')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row gx-3 mb-3">
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputAddress">Address</label>
                                    <input class="form-control @error('address') is-invalid @enderror" required
                                        id="inputAddress" required type="text" name="address"
                                        placeholder="Input Your Address (exp.. Jl. Kutilang)"
                                        value="{{ old('address') }}">
                                    @error('address')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputAddressCurent">Address Current</label>
                                    <input class="form-control @error('address_current') is-invalid @enderror"
                                        id="inputAddressCurent" type="text" name="address_current"
                                        placeholder="Input Your Current Address (exp.. Jl. Kutilang)" required
                                        value="{{ old('address_current') }}">
                                    @error('address_current')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row gx-3 mb-3">
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputYourImage">Input Your Image</label>
                                    <input class="form-control @error('image_candidate') is-invalid @enderror" required
                                        id="inputImage" required type="file" name="image_candidate"
                                        value="{{ old('image_candidate') }}" accept="image/*">
                                    <p class="mt-2" style="font-size: 12px">Photo file must be in JPEG, JPG, PNG format
                                        with a maximum size of 2 MB</p>
                                    @error('image_candidate')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="small mb-1" for="inputYourCV">Input Your CV</label>
                                    <input class="form-control @error('cv_candidate') is-invalid @enderror"
                                        id="inputCV" type="file" name="cv_candidate" required
                                        value="{{ old('cv_candidate') }}" accept="application/pdf">
                                    <p class="mt-2" style="font-size: 12px">CV file must be in pdf format with a maximum
                                        size of 2 MB</p>
                                    @error('cv_candidate')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <!-- Save changes button-->
                            <button class="btn btn-primary" type="submit" onclick="submitForm(event)">Next</button>
                    </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection
<script>
    window.onload = function() {
        var LastSegment = window.location.pathname.split('/').filter(function(segment) {
            return segment !== '';
        }).pop();
        document.getElementById("sub_recruitment_uid").value = LastSegment;
    };
</script>
<script>
    function submitForm(event) {
        event.target.disabled = true;
        document.querySelector("#candidate-employee").submit();
    }
</script>
{{-- 
    <script>
        function previewImage() {
            const image = document.querySelector('#add_image');
            const imgPreview = document.querySelector('.img-preview');

            imgPreview.style.display = 'block';

            const oFReader = new FileReader();
            oFReader.readAsDataURL(image.files[0]);

            oFReader.onload = function(oFREvent){
                imgPreview.src =oFREvent.target.result;
            }
        }
    </script> --}}