@extends('layouts.app')

@section("user-image")
    <img src="{{ $user->gambar_profile_url }}" onerror="this.src = `{{ asset('images/hipp.jpeg') }}`" alt="profile" />
@endsection

@section("user")
    <div class="user-name">{{ $user->name }}</div>
    <div class="user-level">{{ $user->role_name }}</div>
@endsection

@section('menu')
    <li class="nav-item"><a href="{{ route('home') }}" class=""><i class="fa-solid fa-house"></i>Home</a></li>
    <li class="nav-item"><a href="{{ route('mitra.info') }}" class=""><i class="fa-solid fa-circle-info"></i>Informasi Mitra</a></li>
    <li class="nav-item"><a href="{{ route('data_validasi') }}" class="active"><i class="fa-solid fa-circle-exclamation"></i>Validasi Data</a></li>
    <li class="nav-item"><a href="{{ route('pengaturan.index') }}"><i class="fa-solid fa-gear"></i>Pengaturan</a></li>
    <li class="nav-item"><a href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();"><i class="fa-solid fa-power-off"></i>Keluar</a></li>

    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
        @csrf
    </form>
@endsection

@section('body')
    <div class="content border">
        <div class="fw-bold mt-2">Pembuatan Validasi Data</div>

        <div class="panel">
            <form action="" method="POST">
                <div class="mb-3 row">
                    <label for="nama-pembuat" class="col-sm-4 col-form-label">1. Nama pembuat:</label>
                    <div class="col-sm-8">
                        <input type="text" id="nama-pembuat" name="nama-pembuat" class="form-control nama-pembuat" placeholder="Nama" />
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="ditujukan-kepada" class="col-sm-4 col-form-label">2. Ditujukan kepada:</label>
                    <div class="col-sm-8">
                        <input type="text" id="ditujukan-kepada" name="ditujukan-kepada" class="form-control ditujukan-kepada" placeholder="Ditujukan kepada" />
                    </div>
                </div>
                
                <div class="mb-3 row">
                    <label for="tempat-dibuat" class="col-sm-4 col-form-label">3. Tempat dibuat:</label>
                    <div class="col-sm-8">
                        <input type="text" id="tempat-dibuat" name="tempat-dibuat" class="form-control tempat-dibuat" placeholder="Tempat data dibuat" />
                    </div>
                </div>

                <div class="mb-3 row">
                    <label for="tanggal-dibuat" class="col-sm-4 col-form-label">4. Tanggal dibuat:</label>
                    <div class="col-sm-8">
                        <input type="text" id="tanggal-dibuat" name="tanggal-dibuat" class="form-control tanggal-dibuat" placeholder="Tanggal" />
                    </div>
                </div>
                
                <div class="mb-3 row">
                    <label for="deskripsi" class="col-sm-4 col-form-label">5. Deskripsi:</label>
                    <div class="col-sm-8">
                        <textarea rows="5" id="deskripsi" name="deskripsi" class="form-control deskripsi" placeholder="Deskripsi"></textarea>
                    </div>
                </div>
                
                <div class="mb-3 row">
                    <label for="bukti-pendukung" class="col-sm-4 col-form-label">6. Upload bukti pendukung:</label>
                    <div class="col-sm-8">
                        <label class="btn btn-upload" for="bukti-pendukung">Upload File</label>
                        <input type="file" class="d-none bukti-pendukung" id="bukti-pendukung" accept="image/*">
                        <img src="#" class="bukti-pendukung-img mt-2" alt="bukti image" style="display: none;">
                    </div>
                </div>

                <div class="text-end">
                    <button type="button" class="btn btn-success saveBtn">Simpan</button>
                </div>
            </form>
        </div>

        <div class="panel">
            <div class="panel-header">Data E-Sign yang sudah dibuat:</div>
            <div class="panel-body">
                <table class="datatable table table-sm table-striped table-bordered" style="width:100%;"></table>
            </div>
        </div>
    </div>
@endsection

@section('css')
<style>
    .bukti-pendukung-img {
        max-width: 100%;
    }
    .deskripsi {
        resize: no-resize;
    }
</style>
@endsection

@section('script')
    <div class="modal" tabindex="-1" id="modalEdit">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">Edit keterangan</div>
                <div class="modal-body">
                    <form action="" method="POST">
                        
                        <div class="mb-3 row">
                            <label for="nama-pembuat-edit" class="col-sm-4 col-form-label">1. Nama pembuat:</label>
                            <div class="col-sm-8">
                                <input type="text" id="nama-pembuat-edit" name="nama-pembuat" class="form-control nama-pembuat" placeholder="Nama" />
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label for="ditujukan-kepada-edit" class="col-sm-4 col-form-label">2. Ditujukan kepada:</label>
                            <div class="col-sm-8">
                                <input type="text" id="ditujukan-kepada-edit" name="ditujukan-kepada" class="form-control ditujukan-kepada" placeholder="Ditujukan kepada" />
                            </div>
                        </div>
                        
                        <div class="mb-3 row">
                            <label for="tempat-dibuat-edit" class="col-sm-4 col-form-label">3. Tempat dibuat:</label>
                            <div class="col-sm-8">
                                <input type="text" id="tempat-dibuat-edit" name="tempat-dibuat" class="form-control tempat-dibuat" placeholder="Tempat data dibuat" />
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label for="tanggal-dibuat-edit" class="col-sm-4 col-form-label">4. Tanggal dibuat:</label>
                            <div class="col-sm-8">
                                <input type="text" id="tanggal-dibuat-edit" name="tanggal-dibuat" class="form-control tanggal-dibuat" placeholder="Tanggal" />
                            </div>
                        </div>
                        
                        <div class="mb-3 row">
                            <label for="deskripsi-edit" class="col-sm-4 col-form-label">5. Deskripsi:</label>
                            <div class="col-sm-8">
                                <textarea rows="5" id="deskripsi-edit" name="deskripsi" class="form-control deskripsi" placeholder="Deskripsi"></textarea>
                            </div>
                        </div>
                        
                        <div class="mb-3 row">
                            <label for="bukti-pendukung-edit" class="col-sm-4 col-form-label">6. Upload bukti pendukung:</label>
                            <div class="col-sm-8">
                                <label class="btn btn-upload" for="bukti-pendukung-edit">Upload File</label>
                                <input type="file" class="d-none bukti-pendukung" id="bukti-pendukung-edit" accept="image/*">
                                <img src="#" class="bukti-pendukung-img mt-2" alt="bukti image" style="display: none;">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-6"></div>
                            <div class="col-6 d-flex justify-content-between">
                                <button type="button" class="btn btn-danger btn-cancel">Cancel</button>
                                <button type="button" class="btn btn-success btn-popup-save">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/moment.js') }}"></script>
    <script>
        $(document).ready(function () {
            // element
            const modalEdit = $('#modalEdit')
            const modal = new bootstrap.Modal(modalEdit)

            // data
            var selectedUpdate = null

            // datatable
            var datatable = $('.datatable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('data_validasi.list') }}",
                "columns":[
                    {
                        "title": "No",
                        "data": null,
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row, meta) {
                            return parseInt(meta.row) + parseInt(meta.settings._iDisplayStart) + 1
                        }
                    },
                    {
                        "title": "Nama Pembuat",
                        "data": "nama",
                    },
                    {
                        "title": "Tanggal Dibuat",
                        "data": "tanggal_dibuat",
                    },
                    {
                        "title": "Link",
                        "data": null,
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row) {
                            return `<a href='${row.link}'>Link</a>`
                        }
                    },
                    {
                        "title":"Action",
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row) {
                            let response = '<button class="btn btn-sm btn-update-validation"><i class="fa-solid fa-pen-to-square"></i></button>'
                            response += '<button class="btn btn-sm btn-delete-validation"><i class="fa-solid fa-trash-can"></i></button>'
                            return response
                        }
                    },
                ],
                "order": [[ 4, "asc" ]],
            });

            // on show update popup clicked
            $('.datatable').on('click', '.btn-update-validation', function() {
                const rowData = datatable.row( $(this).parents('tr') ).data();

                selectedUpdate = rowData

                modalEdit.find('.nama-pembuat').val(rowData.nama)
                modalEdit.find('.ditujukan-kepada').val(rowData.tujuan)
                modalEdit.find('.tempat-dibuat').val(rowData.tempat_dibuat)
                modalEdit.find('.tanggal-dibuat').val(rowData.tanggal_dibuat)
                modalEdit.find('.deskripsi').val(rowData.deskripsi)
                modalEdit.find('.bukti-pendukung').val('')
                if (rowData.bukti) {
                    modalEdit.find('.bukti-pendukung-img').attr('src', rowData.bukti_url)
                    modalEdit.find('.bukti-pendukung-img').show()
                } else {
                    modalEdit.find('.bukti-pendukung-img').hide()
                }

                modal.show()
            })

            // on delete user btn clicked
            $('.datatable').on('click', '.btn-delete-validation', function() {
                const rowData = datatable.row( $(this).parents('tr') ).data();

                swal.fire({
                    title: '',
                    icon: 'success',
                    text: 'Yakin data akan dihapus?',
                    showCancelButton: true,
                    confirmButtonText: 'Hapus',
                    reverseButtons: true
                }).then(function(result) {
                    if (result.isConfirmed) {
                        const params = {
                            _token: '{{ csrf_token() }}',
                            data_validation: rowData.id,
                        }

                        $.ajax({
                            url: '{{ route("data_validasi.delete") }}',
                            method: 'POST',
                            data: params,
                            success: function(response) {
                                const data = response
                                if (data.status === "success") {
                                    swal.fire({
                                        title: '',
                                        icon: 'success',
                                        text: data.message,
                                        showConfirmButton: false
                                    })
                                    datatable.ajax.reload(null, false)
                                } else {
                                    swal.fire({
                                        title: '',
                                        icon: 'warning',
                                        text: data.message,
                                        showConfirmButton: false
                                    })
                                }
                            }
                        })
                    }
                })
            })

            // on popup change logo
            $('body').on('change', '.bukti-pendukung', function() {
                const parent = $(this).parent()
                parent.find('.bukti-pendukung-img').attr('src', window.URL.createObjectURL(this.files[0]))
                parent.find('.bukti-pendukung-img').show()
            })

            // on popup cancel button
            modalEdit.on('click', '.btn-cancel', function() {
                selectedUpdate = null
                modal.hide()
            })

            // on popup save button
            modalEdit.on('click', '.btn-popup-save', function() {
                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('data_validation', selectedUpdate.id);
                formData.append('nama', modalEdit.find('.nama-pembuat').val())
                formData.append('tujuan', modalEdit.find('.ditujukan-kepada').val())
                formData.append('tempat_dibuat', modalEdit.find('.tempat-dibuat').val())
                formData.append('tanggal_dibuat', modalEdit.find('.tanggal-dibuat').val())
                formData.append('deskripsi', modalEdit.find('.deskripsi').val())
                if (modalEdit.find('.bukti-pendukung')[0].files.length > 0) {
                    formData.append('bukti', modalEdit.find('.bukti-pendukung')[0].files[0])
                }


                $.ajax({
                    url: '{{ route("data_validasi.update") }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        const data = response
                        if (data.status === "success") {
                            swal.fire({
                                title: '',
                                icon: 'success',
                                text: data.message,
                                showConfirmButton: false
                            })
                            datatable.ajax.reload(null, false)
                        } else {
                            swal.fire({
                                title: '',
                                icon: 'warning',
                                text: data.message,
                                showConfirmButton: false
                            })
                        }

                        modal.hide()
                    }
                })
            })

            // create validasi data
            $('.saveBtn').click(function() {
                const formData = new FormData()
                formData.append('_token', '{{ csrf_token() }}')
                formData.append('nama', $('.nama-pembuat').val())
                formData.append('tujuan', $('.ditujukan-kepada').val())
                formData.append('tempat_dibuat', $('.tempat-dibuat').val())
                formData.append('tanggal_dibuat', $('.tanggal-dibuat').val())
                formData.append('deskripsi', $('.deskripsi').val())
                if ($('.bukti-pendukung')[0].files.length > 0) {
                    formData.append('bukti', $('.bukti-pendukung')[0].files[0])
                }

                $.ajax({
                    url: "{{ route('data_validasi.create') }}",
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        const data = response
                        if (data.status === "success") {
                            swal.fire({
                                title: '',
                                icon: 'success',
                                text: data.message,
                                showConfirmButton: false
                            })
                            datatable.ajax.reload(null, false)

                            // reset field
                            $('.nama-pembuat').val('')
                            $('.ditujukan-kepada').val('')
                            $('.tempat-dibuat').val('')
                            $('.tanggal-dibuat').val('')
                            $('.deskripsi').val('')
                            $('.bukti-pendukung').val('')
                            $('.bukti-pendukung-img').attr('src', '#')
                            $('.bukti-pendukung-img').hide()

                        } else {
                            swal.fire({
                                title: '',
                                icon: 'warning',
                                text: data.message,
                                showConfirmButton: false
                            })
                        }
                    }
                })
            })
        });
    </script>
@endsection