@extends('layouts.master')
@section('title') {{$title}} @lang('translation.starter')  @endsection
@section('css')
    <link href="{{ URL::asset('build/libs/quill/quill.core.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/quill/quill.bubble.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/quill/quill.snow.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Pages @endslot
@slot('title') {{$title}}  @endslot
@endcomponent
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">
                                    {{ $title }}
                                </h4>
                                <div class="flex-shrink-0">
                                    <div class="form-check form-switch form-switch-right form-switch-md">
                                        <a href="{{ route('calonpegawai.index') }}" class="btn btn-outline-danger waves-effect waves-light btn-sm">Kembali</a>
                                    </div>
                                </div>
                            </div><!-- end card header -->
                            <div class="card-body">
                                {{-- <form method="POST" action="{{ route('calonpegawai.prosestahapansave',[$prods->id]) }}" enctype="multipart/form-data"> --}}
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="pegawai_id" id="pegawai_id" value="{{$prods->id}}">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="firstnameInput" class="form-label">Nama Depan <span class="text-danger">*</span> </label>
                                                <input type="text" class="form-control" id="firstnameInput"
                                                    name="nama_depan" value="{{ $prods->nama_depan }}" disabled>
                                                    @error('nama_depan') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="lastnameInput" class="form-label">Nama Belakang</label>
                                                <input type="text" class="form-control" id="lastnameInput"
                                                    name="nama_belakang" value="{{ $prods->nama_belakang }}" disabled>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="table-responsive" style="min-height: 150px;width:80% !important">
                                            <center>
                                                <div class="col-md-12 text-center"> <!-- Pastikan text-center ada di sini -->
                                                    @php
                                                        $totalTahapan = count($tahapan);
                                                        $no=1;
                                                    @endphp
                                                    <div class="position-relative m-4" style="max-width: 80%; margin: 0 auto;"> <!-- Atur max-width dan margin auto -->
                                                        <div class="progress" style="height: 1px; width: 100%;"> <!-- Pastikan width 100% -->
                                                            <div class="progress-bar" role="progressbar" 
                                                                 style="width: 100%;" 
                                                                 aria-valuenow="100" 
                                                                 aria-valuemin="0" aria-valuemax="100">
                                                            </div>
                                                        </div>
                                                    
                                                                                                            </div>
                                                </div>
                                            </center>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <small class="badge bg-soft-dark text-dark align-middle">Klik pada nomor tahapan seleksi untuk melakukan proses perubahan tahapan seleksi</small>
                                        </div>
                                    </div>
                                    
                                    
                                    <div class="row d-none">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label class="form-label">Tahapan Seleksi  </label>
                                                <select name="tahapan_id" id="tahapan_id" class="form-select" data-choices>
                                                    <option value="">Pilih</option>
                                                    @foreach ($tahapan as $item)
                                                        <option value="{{ $item->id }}"
                                                            @if ($proses->tahapan_id==$item->id)
                                                            selected
                                                        @endif>{{ $item->nama_tahapan }}</option>
                                                    @endforeach
                                                </select>
                                                @error('tahapan_id') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>
                                        </div>
                                        
                                        <div class="col-lg-6 col-md-6">
                                            <div>
                                                <button type="submit" class="btn btn-outline-success waves-effect waves-light full">Simpan</button>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <a href="{{ route('calonpegawai.index') }}" class="btn btn-outline-danger waves-effect waves-light full">Batal</a>
                                        </div>
                                    </div>
                                    
                                {{-- </form> --}}
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')

<script>
    $(document).ready(function(){
        $("#sideRekrutmen").attr('aria-expanded',true);
        $("#sideRekrutmen").addClass('show');
        $("#rekrutmens").addClass('active');
        $("#calonpegawai").addClass('active');
        $("#divisi").removeClass('active');
    });

    function tahapan(id){

        var c = confirm('Apakah yakin akan melakukan proses tahapan ini?');
        if(c==false){
            return false;
        }
        var pegawai_id = $("#pegawai_id").val();
        $.ajax({
            url: "{{ route('calonpegawai.prosestahapansave', '') }}/" + id,
            type: "POST",
            headers: {
                            'X-CSRF-TOKEN': "{{csrf_token()}}" // Menyertakan token CSRF dalam header X-CSRF-TOKEN
            },
            data: {
                pegawai_id:pegawai_id,
                tahapan_id:id,
            },
            success: function(response) {
                //alert(response);
                alert("Berhasil mengubah Tahapan Seleksi");
                location.reload();
            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });

    }
</script>
@endsection