@extends('layouts.mobile_app')

@php
date_default_timezone_set("Asia/Jakarta");
@endphp

@section('title')
Lembar Konsultasi
@endsection

@section('content')
<section class="section">
    <div class="section-header justify-content-center p-3 rounded">
        <h1 class="text-center w-100">{{ $unit->name }}</h1>
    </div>
    <div class="section-body d-none" id="sectionDone">
        <div class="bg-white shadow-lg mb-3 pb-3  px-3 rounded d-flex justify-content-center">
            <div style="width: fit-content;">
                <lottie-player src="https://assets7.lottiefiles.com/private_files/lf30_ltuqrtmn.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop="" autoplay=""></lottie-player>
                <h2 style="font-size: 18px; color: #191d21; font-weight: 600; position: relative; margin: 10px 0 25px 0; text-align: center;line-height: 1.5;">Terima Kasih telah mengisi lembar konsultasi.</h2>
            </div>
        </div>
    </div>
    <form method="post" action="{{ route('form.consultation.store') }}" class="section-body" id="sectionForm">
        @csrf
        <input type="hidden" name="unit" value="{{ encrypt($unit->id) }}">
        <input type="hidden" name="officer" value="{{ encrypt($workUnit->id) }}">
        <input type="hidden" name="started_at" value="{{ date('H:i') }}">
        <div class="bg-white shadow-lg mb-3 pb-3 rounded">
            <div class="d-flex align-items-center" style="padding-top: 10px; padding-left: 17px; padding-bottom: 5px;padding-right: 10px;">
                <p class="font-weight-bold mx-0 mb-0 mr-3 text-dark" style="line-height: unset;">
                    <i class="far fa-user-circle" style="font-size: 2em !important"></i>
                </p>
                <p class="font-weight-bold mx-0 mb-0 text-dark flex-fill" style="line-height: unset;">Data Pengguna Layanan</p>
            </div>
            <div style="margin-top: 10px; margin-left: 17px; margin-right: 17px;">
                <div class="form-group">
                    <label class="w-100" for="rInpName">
                        Nama Pemohon
                        <sup class="ml-1">
                            <i class="fas fa-star-of-life text-danger" style="font-size: 8px;"></i>
                        </sup>
                    </label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="far fa-user"></i>
                            </div>
                        </div>
                        <input type="text" id="rInpName" maxlength="50" name="applicants_name" class="form-control" maxlength="50" required="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="w-100" for="rInpId">
                        NIP / NIK
                        <sup class="ml-1">
                            <i class="fas fa-star-of-life text-danger" style="font-size: 8px;"></i>
                        </sup>
                    </label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="far fa-address-card"></i>
                            </div>
                        </div>
                        <input type="number" id="rInpId" name="applicants_id" class="form-control" minlength="9999999999999999" maxlength="999999999999999999" required="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="w-100" for="rInpPosition">
                        Jabatan
                        <sup class="ml-1">
                            <i class="fas fa-star-of-life text-danger" style="font-size: 8px;"></i>
                        </sup>
                    </label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="far fa-id-badge"></i>
                            </div>
                        </div>
                        <input type="text" id="rInpPosition" name="applicants_position" class="form-control" style="text-transform: capitalize;" maxlength="125" required="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="w-100" for="rInpWorkUnit">
                        SKPD / OPD
                        <sup class="ml-1">
                            <i class="fas fa-star-of-life text-danger" style="font-size: 8px;"></i>
                        </sup>
                    </label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="far fa-building"></i>
                            </div>
                        </div>
                        <select id="rInpWorkUnit" name="from_unit" class="form-control select2" required=""></select> 
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white shadow-lg pb-3 rounded">
            <div class="d-flex align-items-center" style="padding-top: 10px; padding-left: 17px; padding-bottom: 5px;padding-right: 10px;">
                <p class="font-weight-bold mx-0 mb-0 mr-3 text-dark" style="line-height: unset;">
                    <i class="fab fa-wpforms" style="font-size: 2em !important"></i>
                </p>
                <p class="font-weight-bold mx-0 mb-0 text-dark flex-fill" style="line-height: unset;">Lembar Konsultasi</p>
            </div>
            <div style="margin-top: 10px; margin-left: 17px; margin-right: 17px;">
                <div class="form-group">
                    <label class="w-100" for="rInpIssue">
                        Ringkasan Materi Konsultasi
                        <sup class="ml-1">
                            <i class="fas fa-star-of-life text-danger" style="font-size: 8px;"></i>
                        </sup>
                    </label>
                    <textarea id="rInpIssue" name="problem" class="form-control" required=""></textarea>
                </div>
                <div class="form-group">
                    <label class="w-100" for="rInpSuggestion">
                        Ringkasan Hasil Konsultasi
                        <sup class="ml-1">
                            <i class="fas fa-star-of-life text-danger" style="font-size: 8px;"></i>
                        </sup>
                    </label>
                    <textarea id="rInpSuggestion" name="suggestion" class="form-control" required=""></textarea>
                </div>
                <div class="form-group">
                    <div class="d-flex justify-content-between mb-2 align-items-end">
                        <label class="w-100 mb-0" for="rInpSign">
                            Tanda Tangan
                            <sup class="ml-1">
                                <i class="fas fa-star-of-life text-danger" style="font-size: 8px;"></i>
                            </sup>
                        </label>
                        <button class="btn btn-sm btn-warning" id="bClearSign">Clear</button>
                    </div>
                    <div id="signaturePad" class="w-100">
                        <canvas id="rInpSign" class="border" style="touch-action: none; user-select: none; width: 100%; height: 150px;"></canvas>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-block btn-success text-uppercase">simpan</button>
                </div>
            </div>
        </div>
   </form>
</section>
@endsection

@push('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/select2/css/select2.min.css') }}">
@endpush

@push('js')
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script src="{{ asset('assets/select2/js/select2.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#rInpWorkUnit').select2({
            placeholder: "Pilih Unit Kerja",
            data: {!! json_encode($units) !!}
        });

        const signaturePad = new SignaturePad($('#rInpSign').get(0), {backgroundColor: 'rgb(255, 255, 255)'});

        $(document).on('click', '#bClearSign', function (e) {
            e.preventDefault();
            signaturePad.clear();
        });

        function resizeCanvas() {
            const ratio =  Math.max(window.devicePixelRatio || 1, 1);
            const canvas = $('#rInpSign').get(0);
            canvas.width = $('#signaturePad').get(0).offsetWidth * ratio;
            canvas.height = $('#signaturePad').get(0).offsetHeight * ratio;
            canvas.getContext("2d").scale(ratio, ratio);
            signaturePad.clear();
        }

        window.addEventListener("resize", resizeCanvas);
        resizeCanvas();        

        $('.navbar.navbar-expand-lg.main-navbar').addClass('d-sm-none');
        $('.main-content').addClass('px-3');
        $('.select2-container').css('width', '');

        $(document).on('submit', '#sectionForm', function (e) {
            e.preventDefault();
            
            if (!signaturePad.isEmpty()) {
                var data = new FormData($('#sectionForm').get(0));
                data.append('applicants_sign', signaturePad.toDataURL());

                var bLoader = $('#btnFinish');
                bLoader.button('loading');
                
                $.ajax({
                    url: $('#sectionForm').attr('action'),
                    type: 'POST',
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(r) {
                        if (r != undefined && r.success) {
                            $('#sectionDone').removeClass('d-none');
                            $('#sectionForm').addClass('d-none');
                            iziToast.success({title: 'OK', message: 'Berhasil menyimpan lembar konsultasi.', position: 'topRight'});
                        } else {
                            iziToast.warning({title: 'Galat!', message: 'Gagal menyimpan lembar konsultasi!', position: 'topRight'});
                        }
                    },
                    error: function(x, s, e) {
                        iziToast.error({title: 'Server Error!', message: 'Gagal menyimpan lembar konsultasi!', position: 'topRight'});
                    },
                    complete: function complete() {
                        bLoader.button('reset');
                    }
                });
            } else {
                iziToast.error({title: 'Galat!', message: 'Lembar konsultasi harus ditandatangani!', position: 'topRight'});
            }

            return false;
        });
    });
</script>
@endpush