@extends('Layouts_admin.index')
@section('content')
        <section class="home bg-home">
            <!-- widget -->
            <div class="container pt-6 px-7">
                <!-- <div class="title">
                    <h4 class="fw-bold">M</h4>
                </div> -->
                <!-- <div class="alert alert-secondary alert-icon alert-dismissible border border-secondary fade show" role="alert">
                <i class="uil uil-clock"></i>Data Yang Di upload tidak valid atau beberapa format input tidak sesuai<a href="#" class="ms-2 alert-link hover">Coba Lagi</a>.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <div class="alert alert-success alert-icon alert-dismissible border border-success fade show" role="alert">
                <i class="uil uil-check-circle"></i>Upload Data Peserta Berhasil Di lakukan! <a href="#" class=" ms-2 alert-link hover">Berhasil</a>.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div> -->

                    <div class="row">
                        <div class="col-md-7 col-lg-12 col-xl-12">
                            <div class="card rounded pt-0 pb-5">
                                <div class="card-header">
                                    <h4 class="fw-semibold mb-0">Edit Pelatihan Tatap Muka</h4>
                                </div>
                                <div class="card-body pt-2 px-8">
                                    
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="project item pt-0">
                                                <form id="form-course-offline" method="post" >
                                                    <input type="hidden" id="id" name="id" value="{{ $course->id_course_offline }}">
                                                    <div class="row form-row d-flex align-items-center">
                                                            
                                                            <!-- startrows -->
                                                            <div class="col-3 ">
                                                                <p class="text-muted fs-16 me-6">Nama Pelatihan</p>
                                                            </div>
                                                            <div class="col-1">
                                                                <p class="text-muted fs-16 me-6">:</p>
                                                            </div>
                                                            <div class="col-5">
                                                                <div class="form-group">
                                                                    <input id="nama" name="nama" type="text" class="form-control" placeholder="Nama Course" value="{{$course->nama}}">
                                                                </div>
                                                            </div>
                                                            <div class="col-3"></div>
                                                            <!-- endrows -->
                                                            <!-- startrows -->
                                                            <div class="col-3 ">
                                                                <p class="text-muted fs-16 me-6">Nilai Post Test</p>
                                                            </div>
                                                            <div class="col-1">
                                                                <p class="text-muted fs-16 me-6">:</p>
                                                            </div>
                                                            <div class="col-5">
                                                                <div class="form-group">
                                                                    <input id="nilai" type="number" class="form-control" name="nilai" value="{{$course->nilai}}">
                                                                </div>
                                                            </div>
                                                            <div class="col-3"></div>
                                                            <!-- endrows -->

                                                             <!-- startrows -->
                                                            <div class="col-3 ">
                                                                <p class="text-muted fs-16 me-6">Tanggal Selesai</p>
                                                            </div>
                                                            <div class="col-1">
                                                                <p class="text-muted fs-16 me-6">:</p>
                                                            </div>
                                                            <div class="col-5">
                                                                <div class="form-group">
                                                                    <input id="tgl-selesai" type="date" class="form-control" name="tanggal" value="{{date('Y-m-d', strtotime($course->tanggal_selesai))}}">
                                                                </div>
                                                            </div>
                                                            <div class="col-3"></div>
                                                            <!-- endrows -->

                                                            <div class="col-3 ">
                                                    <p class="text-muted fs-16 me-6">TTD Digital <small>(2210 x 1025)</small></p>
                                                </div>
                                                <div class="col-1">
                                                    <p class="text-muted fs-16 me-6">:</p>
                                                </div>
                                                <div class="col-5">
                                                    <div class="form-group">
                                                        <input class="form-control" type="file" id="ttd"
                                                            name="ttd">
                                                        <input type="hidden" id="ttd_old" name="ttd_old"
                                                            value="{{ $course->ttd ?? '' }}" data-file="">
                                                    </div>
                                                </div>
                                                <div class="col-1 m-0 px-0">
                                                    <span class="badge bg-success preview"
                                                        style="margin-bottom: 20px; cursor: pointer;"
                                                        data-id="ttd_old">
                                                        <i class="fa-regular fa-eye"></i>
                                                    </span>
                                                </div>
                                                <div class="col-2"></div>
                                                <!-- endrows -->
                                                <!-- startrows -->
                                                <div class="col-3 ">
                                                    <p class="text-muted fs-16 me-6">Penanda Tangan</p>
                                                </div>
                                                <div class="col-1">
                                                    <p class="text-muted fs-16 me-6">:</p>
                                                </div>
                                                <div class="col-5">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" id="nama_ttd"
                                                            name="nama_ttd" value="{{ $course->nama_ttd ?? '' }}">
                                                    </div>
                                                </div>
                                                <div class="col-3"></div>
                                                <!-- endrows -->
                                                <!-- startrows -->
                                                <div class="col-3 ">
                                                    <p class="text-muted fs-16 me-6">Jabatan Penanda Tangan</p>
                                                </div>
                                                <div class="col-1">
                                                    <p class="text-muted fs-16 me-6">:</p>
                                                </div>
                                                <div class="col-5">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" id="jabatan_ttd"
                                                            name="jabatan_ttd" value="{{ $course->jabatan_ttd ?? '' }}">
                                                    </div>
                                                </div>
                                                            
                                                    <div class="col-12">
                                                        <button type="submit" class="btn btn-primary py-1 fw-normal fs-12 float-end ms-3">Ubah</button>
                                                        <a href="{{ url()->previous() }}" class="btn btn-outline-primary py-1 fw-normal fs-12 float-end">Kembali</a>
                                                        
                                                    </div>
                                                </div>
                                            </form>
                                            <!-- /Profile Settings Form -->
                                        </div>
                                    </div>
                                    <!-- /.item -->
                                </div>
                                
                            </div>
                            <!-- /Profile Settings Form -->
                        </div>
                    </div>                            
                
            </div>
            <!-- widgetend -->

            <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header d-flex justify-content-center py-1">
                            <h1 class="modal-title fs-22 fw-semibold" id="exampleModalLabel">Preview</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body pb-2 pt-8">
                            <div id="modal-preview">

                            </div>
                        </div>
                        {{-- <div class="modal-footer py-2">
                            <button type="button" class="fs-15 fw-semibold py-1 px-2 btn btn-secondary"
                            data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="fs-15 fw-semibold py-1 px-2 btn btn-primary">Kirim</button>
                        </div> --}}
                    </div>
                </div>
            </div>
                
        </section>
		
<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>

@endsection
@section('script')
    <script>

    $('#form-course-offline').submit(function(e) {
            e.preventDefault();
            if (!validasi()) {
                return false;
            }

            var formData = new FormData(this);
            $.ajax({
                url: '{{ url('ProsesUpdateCourseOffline') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    alert(response.msg);
                    if (response.status) {
                        location.reload(true);
                    }
                }
            })
        });

        function validasi() {
            if ($('#nama').val().trim() == '') {
                $('#nama').focus();
                alert('Nama Course tidak boleh kosong');
                return false;
            }

            if ($('#nilai').val().trim() == '') {
                $('#nilai').focus();
                alert('Nilai tidak boleh kosong');
                return false;
            }

            if ($('#tgl-selesai').val().trim() == '') {
                $('#tgl-selesai').focus();
                alert('Tanggal selesai tidak boleh kosong');
                return false;
            }

            if ($('#nama_ttd').val().trim() == '') {
                $('#nama_ttd').focus();
                alert('Penanda tangan tidak boleh kosong');
                return false;
            }

            if ($('#jabatan_ttd').val().trim() == '') {
                $('#jabatan_ttd').focus();
                alert('Jabatan tidak boleh kosong');
                return false;
            }
            return true;
        }

     $('.preview').click(function(){
            var id = $(this).data('id');
            var url, path;
            var inputOld = document.getElementById(id);
            
            if(inputOld.dataset.file != ""){
                url = inputOld.dataset.file;
                path = url;
                var html = `<img src="${path}" alt="${url}" style="width: 300px; aspect-ratio: 1;">`
            } else {
                url = inputOld.value;
                path = '{{ url("storage/courseoffline") }}/'+url;
                var html = `<img src="${path}" alt="${url}" style="width: 300px; aspect-ratio: 1;">`
            }
            
            ;
            $('#previewModal').modal('toggle');
            $('#modal-preview').html(html)
        });

        $('input[type="file"]').change(function(el){
            var file = $(this).prop('files')[0];
            var reader = new FileReader();
            var j = $(this).siblings('input[type="hidden"]')[0];
            // Mengatur tindakan ketika FileReader selesai membaca file
            reader.onload = function(e) {
                var fileUrl = e.target.result;
                $(j).attr('data-file', fileUrl);
            };
            reader.readAsDataURL(file);
        });
</script>

@endsection