@extends('Layouts_admin.index')
@section('content')
    <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 class="home bg-home">
        <!-- widget -->
        <div class="container pt-6 px-md-7 px-2">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card rounded pt-0 pb-5">
                        <div class="card-body px-4 pt-2 pb-0">
                            <h2 class="text-secondary fw-semibold fs-22">Manage Sertifikat</h2>
                        </div>
                        <div class="card-body pt-0 px-4">

                            <div class="row">
                                <div class="col-12">
                                    <div class="project item pt-0">
                                        <form id="form" enctype="multipart/form-data">
                                            <div class="row form-row d-flex align-items-center">
                                                <!-- startrows -->
                                                <div class="col-lg-10">
                                                    <div class="d-md-flex justify-content-between align-items-center">
                                                        <div class="d-flex">
                                                            <p class="text-muted fs-16 mb-1 mb-md-3">Background</p>
                                                            <div class="mx-2">
                                                                <p class="text-muted fs-16 mb-0">:</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-7 me-xl-15">
                                                            <label for="background" class="form-label fs-12 mb-1">Ukuran 5263 x 3721</label>
                                                            <div class="input-group mb-3">
                                                                <input class="form-control" type="file" id="background" name="background" aria-describedby="inputGroupFileAddon04">
                                                                <input type="hidden" id="background_old" name="background_old" value="{{ $param->background ?? '' }}" data-file="">
                                                                <button class="btn btn-outline-secondary" data-id="background_old" type="button" id="inputGroupFileAddon04"><i class="fa-regular fa-eye"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-10">
                                                    <div class="d-md-flex justify-content-between align-items-center">
                                                        <div class="d-flex">
                                                            <p class="text-muted fs-16 mb-1 mb-md-3">Background Belakang</p>
                                                            <div class="mx-2">
                                                                <p class="text-muted fs-16 mb-0">:</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-7 me-xl-15">
                                                            <label for="backgroundback" class="form-label fs-12 mb-1">Ukuran 5145 x 3679</label>
                                                            <div class="input-group mb-3">
                                                                <input class="form-control" type="file"  id="backgroundback" name="backgroundback" aria-describedby="inputGroupFileAddon04">
                                                                <input type="hidden" id="backgroundback_old" name="backgroundback_old" value="{{ $param->backgroundback ?? '' }}" data-file="">
                                                                <button class="btn btn-outline-secondary" data-id="backgroundback_old" type="button" id="inputGroupFileAddon04"><i class="fa-regular fa-eye"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-10">
                                                    <div class="d-md-flex justify-content-between align-items-center">
                                                        <div class="d-flex">
                                                            <p class="text-muted fs-16 mb-1 mb-md-3">Logo</p>
                                                            <div class="mx-2">
                                                                <p class="text-muted fs-16 mb-0">:</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-7 me-xl-15">
                                                            <label for="logo" class="form-label fs-12 mb-1">Ukuran 850 x 850</label>
                                                            <div class="input-group mb-3">
                                                                <input class="form-control" type="file"  id="logo" name="logo" aria-describedby="inputGroupFileAddon04">
                                                                <input type="hidden" id="logo_old" name="logo_old" value="{{ $param->logo ?? '' }}" data-file="">
                                                                <button class="btn btn-outline-secondary" data-id="logo_old" type="button" id="inputGroupFileAddon04"><i class="fa-regular fa-eye"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-10">
                                                    <div class="d-md-flex justify-content-between align-items-center">
                                                        <div class="d-flex">
                                                            <p class="text-muted fs-16 mb-1 mb-md-3">H1 (Judul)</p>
                                                            <div class="mx-2">
                                                                <p class="text-muted fs-16 mb-0">:</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-7 me-xl-15">
                                                            <div class="form-group mb-3">
                                                                <input class="form-control" type="text"  id="judul" name="judul" value="{{ $param->judul ?? '' }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-lg-10">
                                                    <div class="d-md-flex justify-content-between align-items-center">
                                                        <div class="d-flex">
                                                            <p class="text-muted fs-16 mb-1 mb-md-3">Redaksi Awal</p>
                                                            <div class="mx-2">
                                                                <p class="text-muted fs-16 mb-0">:</p>
                                                            </div>
                                                        </div>

                                                        <div class="review col-md-7 me-xl-15">
                                                            <div class="form-floating">
                                                                <textarea class="form-control h-15 mb-5" placeholder="Leave a comment here" id="redaksi1" name="redaksi1"
                                                                    style="height: 100px">{{ $param->redaksi1 ?? '' }}</textarea>
                                                                <label for="redaksi1">Tulis Redaksi</label>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="col-lg-10">
                                                    <div class="d-md-flex justify-content-between align-items-center">
                                                        <div class="d-flex">
                                                            <p class="text-muted fs-16 mb-1 mb-md-3">Redaksi Akhir</p>
                                                            <div class="mx-2">
                                                                <p class="text-muted fs-16 mb-0">:</p>
                                                            </div>
                                                        </div>

                                                        <div class="review col-md-7 me-xl-15">
                                                            <div class="form-floating">
                                                                <textarea class="form-control h-15 mb-5" placeholder="Leave a comment here" id="redaksi2" name="redaksi2"
                                                                    style="height: 100px">{{ $param->redaksi2 ?? '' }}</textarea>
                                                                <label for="redaksi2">Tulis Redaksi</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- endrows -->
                                                <!-- endrows -->
                                                <!-- startrows -->
                                                <div class="col-lg-10">
                                                    <div class="d-md-flex justify-content-between align-items-center">
                                                        <div class="d-flex">
                                                            <p class="text-muted fs-16 mb-1 mb-md-3">TTD Digital</p>
                                                            <div class="mx-2">
                                                                <p class="text-muted fs-16 mb-0">:</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-7 me-xl-15">
                                                            <label for="logo" class="form-label fs-12 mb-1">Ukuran 2210 x 1025</label>
                                                            <div class="input-group mb-3">
                                                                <input class="form-control" type="file"  id="ttd" name="ttd" aria-describedby="inputGroupFileAddon04">
                                                                <input type="hidden" id="ttd_old" name="ttd_old" value="{{ $param->ttd ?? '' }}" data-file="">
                                                                <button class="btn btn-outline-secondary" data-id="ttd_old" type="button" id="inputGroupFileAddon04"><i class="fa-regular fa-eye"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- endrows -->
                                                <!-- startrows -->
                                                <div class="col-lg-10">
                                                    <div class="d-md-flex justify-content-between align-items-center">
                                                        <div class="d-flex">
                                                            <p class="text-muted fs-16 mb-1 mb-md-3">Penanda Tangan</p>
                                                            <div class="mx-2">
                                                                <p class="text-muted fs-16 mb-0">:</p>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-7 me-xl-15">
                                                            <div class="form-group">
                                                                <input type="text" class="form-control" id="nama_ttd"
                                                                    name="nama_ttd" value="{{ $param->nama_ttd ?? '' }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-10">
                                                    <div class="d-md-flex justify-content-between align-items-center">
                                                        <div class="d-flex">
                                                            <p class="text-muted fs-16 mb-1 mb-md-3">Jabatan Penanda Tangan</p>
                                                            <div class="mx-2">
                                                                <p class="text-muted fs-16 mb-0">:</p>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-7 me-xl-15">
                                                            <div class="form-group">
                                                                <input type="text" class="form-control" id="jabatan_ttd"
                                                                    name="jabatan_ttd" value="{{ $param->jabatan_ttd ?? '' }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- endrows -->
                                                <div class="col-12">
                                                    {{-- <a href="#" class="btn btn-outline-primary py-1 fw-normal fs-12 float-end ms-4">Batal</a> --}}
                                                    <button type="submit"
                                                        class="btn btn-primary py-1 fw-normal fs-12 float-end">Ubah</button>
                                                </div>
                                            </div>
                                        </form>
                                        <!-- /Profile Settings Form -->
                                    </div>
                                </div>
                                <!-- /.item -->
                            </div>

                        </div>
                        <!-- /Profile Settings Form -->
                    </div>
                </div>

            </div>
            <!-- widgetend -->

    </section>

    {{-- <script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script> --}}
@endsection
@section('script')
    <script>
        $('#form').submit(function(e) {
            e.preventDefault();
            if (!validasi()) {
                return false;
            }

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

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

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

            if ($('#redaksi2').val().trim() == '') {
                $('#redaksi2').focus();
                alert('Redaksi akhir 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;
            } else {
                url = inputOld.value;
                path = '{{ url("storage/sertifikat") }}/'+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