@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">Tambah Pelatihan Tatap Muka {{ isset($contact->nama) ? ' - ' . $contact->nama : ''; }}</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" >
                                                                                                        <div class="row form-row d-flex align-items-center">
                                                            <div class="col-3 ">
                                                                <p class="text-muted fs-16 me-6">Peserta</p>
                                                            </div>
                                                            <div class="col-1">
                                                                <p class="text-muted fs-16 me-6">:</p>
                                                            </div>
                                                            <div class="col-5">
                                                                <div class="form-group">
                                                                                                                                        <!-- <select class="form-select filters text-dark form-select-md mb-3" aria-label=".form-select-lg example" name="id_lms">
                                                                        <option selected value="">Pilih User</option>
                                                                        @foreach($listuser as $u)
                                                                        <option value="{{ $u['id_lms'] }}">{{ $u['nama'] }} - {{ $u['job'] }}</option>
                                                                        @endforeach
                                                                    </select> -->
                                                                                                                                <select class="form-select " id="user" name="id_lms" style="width: 100%;">
                                               
                                            </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-3"></div>
                                                            <!-- 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 Pelatihan">
                                                                </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">
                                                                </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">
                                                                </div>
                                                            </div>
                                                            <div class="col-3"></div>
                                                            <!-- endrows -->

                                                            <div class="col-3 ">
                                                    <p class="text-muted fs-16 me-6">TTD Digital</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">
                                                            <p class="text-muted fs-16 me-6"><small class="text-danger"><b>* Gambar harus berukuran panjang x lebar (2210 x 1025) pixel</b></small></p>
                                                        <input type="hidden" id="ttd_old" name="ttd_old"
                                                            value="{{ $param->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="{{ $param->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="{{ $param->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">Tambah</button>
                                                        <a href="{{ url('/ManageCourseOffline') }}/{{ $user ? $user->id_lms : '' }}" 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
<script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@section('script')
    <script>

    $(document).ready(function () {
        $('select.filters:not([id*="reportrange"])').select2({
            theme: 'bootstrap',
            // allowClear: true,
            width: '100%' // Menetapkan lebar 100%
        });
    });

    $('#user').select2({
            placeholder: 'Cari user...',
            minimumInputLength: 2, // jumlah karakter sebelum memulai pencarian
            ajax: {
                url: '{{url("getPesertaSelect")}}', // URL endpoint untuk pencarian user
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // kirimkan pencarian dengan query `q`
                        status_personil: $('#status_personil').val(), // mengambil nilai status personil
                        client: $('#client').val(), // mengambil nilai client
                        job: $('#job').val() // mengambil nilai job
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.map(user => ({
                            id: user.id_lms,
                            text: user.nama + ' || ' + user.email + ' || ' + user.job // sesuaikan dengan nama field user Anda
                        }))
                    };
                },
                cache: true
            }
        });

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

            var formData = new FormData(this);
            $.ajax({
                url: '{{ url('ProsesTambahCourseOffline') }}',
                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/sertifikat") }}/'+url;
                var html = 'silahkan input file'
            }
            
            ;
            $('#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