@extends('core::layouts.backend')
@section('title', $title)
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route("{$jobapp_identifier}.backend.my_applicable.index") }}" title="{{ trans('label.my_applicable') }}"> {{ trans('label.my_applicable') }}</a></li>
    <li class="breadcrumb-item active"><a title="{{ $title }}"> {{ $title }}</a></li>
@endsection
@push('css_stack')
    <style>
        .signaturePersyaratan canvas {
            border: 1px solid #b8b5b5;
        }
    </style>
    {!! library_datepicker('css') !!}
    {!! library_select2('css') !!}
@endpush

@section('layout')
    <div class="container-fluid">
        <div class="row mb-3 justify-content-center">
            <div class="col-12">
                <a class="btn btn-warning btn-sm" href="{{ route("{$jobapp_identifier}.backend.my_applicable.index") }}" title="{{ trans('label.back') }}"><i class="fa fa-arrow-left"></i> {{ trans('label.back') }}</a>
            </div>
        </div>

        @if ( in_array($user->status_applicable, ['submission', 'suspend']) )
            <div class="row mb-3 justify-content-center">
                <div class="col-12">
                    <div class="alert alert-warning">
                        <h5><i class="icon fas fa-ban"></i> @lang("label.data_applicable_{$user->status_applicable}")!</h5>
                        @lang("label.message_data_applicable_{$user->status_applicable}")
                        <br/>
                        <button type="button" class="btn btn-sm btn-primary" onclick="window.location.href='{{ route("{$jobapp_identifier}.backend.my_applicable.data_applicable_detail", encrypt_decrypt($user->id)) }}'" title="@lang('label.detail_data_applicable')">@lang('label.detail_data_applicable')</button>
                    </div>
                </div>
            </div>
        @else
            <div class="row mb-3 justify-content-center">
                <div class="col-12">
                    {!! notification_status_biodata($user) !!}
                </div>
            </div>
            <form id="formDataApplicable" class="row justify-content-center wizard-container" data-action="{{ route("{$jobapp_identifier}.backend.my_applicable.data_applicable_save") }}">
                <div class="col-12">
                    <div class="card card-primary card-wizard card-outline card-outline-tabs">
                        <div class="card-header p-0 border-bottom-0 wizard-navigation">
                            <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="custom-tabs-three-data-pribadi-tab" data-toggle="tab" href="#custom-tabs-three-data-pribadi" role="tab" aria-controls="custom-tabs-three-data-pribadi" aria-selected="true">@lang('label.data_pribadi_apply')</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="custom-tabs-three-data-keluarga-tab" data-toggle="tab" href="#custom-tabs-three-data-keluarga" role="tab" aria-controls="custom-tabs-three-data-keluarga" aria-selected="false">@lang('label.data_keluarga_apply')</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="custom-tabs-three-riwayat-hidup-tab" data-toggle="tab" href="#custom-tabs-three-riwayat-hidup" role="tab" aria-controls="custom-tabs-three-riwayat-hidup" aria-selected="false">@lang('label.riwayat_hidup_apply')</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="custom-tabs-three-dokumen-tab" data-toggle="tab" href="#custom-tabs-three-dokumen" role="tab" aria-controls="custom-tabs-three-dokumen" aria-selected="false">@lang('label.dokumen_apply')</a>
                                </li>
                                {{--<li class="nav-item">
                                    <a class="nav-link" id="custom-tabs-three-keterangan-lain-lain-tab" data-toggle="pill" href="#custom-tabs-three-keterangan-lain-lain" role="tab" aria-controls="custom-tabs-three-keterangan-lain-lain" aria-selected="false">@lang('label.keterangan_lain_lain_apply')</a>
                                </li>--}}
                                <li class="nav-item">
                                    <a class="nav-link" id="custom-tabs-three-pernyataan-tab" data-toggle="tab" href="#custom-tabs-three-pernyataan" role="tab" aria-controls="custom-tabs-three-pernyataan" aria-selected="false">@lang('label.pernyataan_apply')</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="custom-tabs-three-tabContent">
                                <div class="tab-pane fade show active" id="custom-tabs-three-data-pribadi" role="tabpanel" aria-labelledby="custom-tabs-three-data-pribadi-tab">
                                    @include("{$jobapp_identifier}::my_applicable.data_applicable.backend.forms.data_pribadi")
                                </div>
                                <div class="tab-pane fade" id="custom-tabs-three-data-keluarga" role="tabpanel" aria-labelledby="custom-tabs-three-data-keluarga-tab">
                                    @include("{$jobapp_identifier}::my_applicable.data_applicable.backend.forms.data_keluarga")
                                </div>
                                <div class="tab-pane fade" id="custom-tabs-three-riwayat-hidup" role="tabpanel" aria-labelledby="custom-tabs-three-riwayat-hidup-tab">
                                    @include("{$jobapp_identifier}::my_applicable.data_applicable.backend.forms.riwayat_hidup")
                                </div>
                                <div class="tab-pane fade" id="custom-tabs-three-dokumen" role="tabpanel" aria-labelledby="custom-tabs-three-dokumen-tab">
                                    @include("{$jobapp_identifier}::my_applicable.data_applicable.backend.forms.dokumen_lampiran")
                                </div>
                                {{--<div class="tab-pane fade" id="custom-tabs-three-keterangan-lain-lain" role="tabpanel" aria-labelledby="custom-tabs-three-keterangan-lain-lain-tab">
                                    @include("{$jobapp_identifier}::my_applicable.data_applicable.backend.forms.keterangan_lain")
                                </div>--}}
                                <div class="tab-pane fade" id="custom-tabs-three-pernyataan" role="tabpanel" aria-labelledby="custom-tabs-three-pernyataan-tab">
                                    @include("{$jobapp_identifier}::my_applicable.data_applicable.backend.forms.pernyataan")
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        @endif
    </div>
@endsection

@push('js_stack')
    {!! module_script('core', 'plugins/bs-custom-file-input/bs-custom-file-input.min.js') !!}
    {!! module_script('core', 'plugins/jquery-bootstrap-wizard/jquery.bootstrap.wizard.min.js') !!}
    {!! module_script('core', 'plugins/jquery-validation/jquery.validate.min.js') !!}
    <script>
        const labels = {
            'confirm_submission_data_applicable' : '@lang('label.confirm_submission_data_applicable')'
        };
        $(document).ready(function () {
            bsCustomFileInput.init();
        });
        let selectOptionPendidikan  = '<option value="">--Pilih--</option>',
            selectOptionHubungan    = '<option value="">--Pilih--</option>';
        @foreach(list_pendidikan() as $pddk)
            selectOptionPendidikan += '<option value="{{ $pddk }}">{{ $pddk }}</option>';
        @endforeach
        @foreach(list_hubungan() as $hub)
            selectOptionHubungan += '<option value="{{ $hub }}">{{ $hub }}</option>';
        @endforeach
    </script>
    {!! module_script('core', 'js/modernizr.min.js') !!}
    {!! library_datepicker('js') !!}
    {!! library_select2('js') !!}
    {!! library_inputmask('js') !!}
    {!! filemanager_standalonepopup() !!}
    {!! module_script('core', 'plugins/signature/js/signature.js') !!}
    {!! plugins_script('jobapp', 'my-applicable/data-applicable/backend/js/_form.js') !!}
@endpush