@extends('layouts.app')

@section('content')
    <div class="col-md-8">
        <!-- kirim komplain form -->
        <div class="box box-primary">
            <div class="box-header">
                <i class="fa fa-paper-plane"></i>

                <h3 class="box-title">{{ $page_description }}</h3>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-md-8" style="border-right:1px solid #f3f3f3">
                        <!-- Post -->
                        <div class="post">
                            <div class="row">
                                <div class="col-md-12">
                                    <h5 class="bg-primary" style="padding: 2px;">LAPORAN:</h5>

                                    <p>Yth: {{ config('profil.sebutan_kepala_wilayah') . ' ' . config('profil.nama_kecamatan') }}</p>
                                    <br>
                                    <p>
                                        {{ $komplain->laporan }}
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h5 class="bg-primary" style="padding: 2px;">LAMPIRAN:</h5>
                                    @if ($komplain->lampiran1 == '' && $komplain->lampiran2 == '' && $komplain->lampiran3 == '' && $komplain->lampiran4 == '')
                                        <p>
                                            Tidak ada lampiran.
                                        </p>
                                    @else
                                        @if (!$komplain->lampiran1 == '')
                                            <a data-fancybox="gallery" href="{{ asset($komplain->lampiran1) }}">
                                                <img src="{{ asset($komplain->lampiran1) }}" alt="{{ $komplain->komplain_id }}-Lampiran1" class="img-thumbnail" style="width:80px; height:100px;">
                                            </a>
                                        @endif
                                        @if (!$komplain->lampiran2 == '')
                                            <a data-fancybox="gallery" href="{{ asset($komplain->lampiran2) }}">
                                                <img src="{{ asset($komplain->lampiran2) }}" alt="{{ $komplain->komplain_id }}-Lampiran2" class="img-thumbnail" style="width:80px; height:100px">
                                            </a>
                                        @endif
                                        @if (!$komplain->lampiran3 == '')
                                            <a data-fancybox="gallery" href="{{ asset($komplain->lampiran3) }}">
                                                <img src="{{ asset($komplain->lampiran3) }}" alt="{{ $komplain->komplain_id }}-Lampiran3" class="img-thumbnail" style="width:80px; height:100px">
                                            </a>
                                        @endif
                                        @if (!$komplain->lampiran4 == '')
                                            <a data-fancybox="gallery" href="{{ asset($komplain->lampiran4) }}">
                                                <img src="{{ asset($komplain->lampiran4) }}" alt="{{ $komplain->komplain_id }}-Lampiran4" class="img-thumbnail" style="width:80px; height:100px">
                                            </a>
                                        @endif
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <h5 class="bg-primary" style="padding: 2px;">TINDAK LANJUT:</h5>
                                    {!! Html::hidden('komplain_id', $komplain->komplain_id)->id('komplain_id') !!}
                                    <div id="jawabans"></div>
                                </div>
                            </div>
                        </div>
                        <!-- /.post -->
                    </div>
                    <div class="col-md-4">
                        <div class="user-block">
                            {{-- di ambil dari detail_penduduk - api database gabungan --}}
                            @if (!empty($komplain->detail_penduduk))
                                <img class="img-circle img-bordered-sm" src="{{ is_user(json_decode($komplain->detail_penduduk)->foto, json_decode($komplain->detail_penduduk)->sex) }}" alt="user image">
                            @else
                                {{-- diambil dari relasi penduduk --}}
                                <img class="img-circle img-bordered-sm" src="{{ is_user($komplain?->penduduk?->foto, $komplain?->penduduk?->sex) }}" alt="user image">
                            @endif

                            <span class="username">
                                <a href="{{ route('sistem-komplain.komplain', $komplain->slug) }}">TRACKING ID #{{ $komplain->komplain_id }}</a>
                            </span>
                            <span class="description">PELAPOR : {{ auth()->guest() && $komplain->anonim ? 'ANONIM' : $komplain->nama }}</span>
                        </div>
                        <!-- /.user-block -->
                        <br>
                        <table class="table table-bordered table-striped">
                            <tr>
                                <th>KATEGORI</th>
                                <td>{{ $komplain->kategori_komplain->nama }}</td>
                            </tr>
                            <tr>
                                <th>TANGGAL LAPOR</th>
                                <td>{{ format_datetime($komplain->created_at) }}</td>
                            </tr>
                            <tr>
                                <th>STATUS</th>
                                <td>{{ ucfirst(strtolower($komplain->status)) }}</td>
                            </tr>
                        </table>

                        <div class="pull-right">
                            <div class="control-group">
                                @php $user = auth()->user(); @endphp
                                @if (isset($user) && $user->can('access.admin_komplain'))
                                    @if ($komplain->status != 'SELESAI')
                                        <a id="btn-reply-admin" data-href="{{ route('sistem-komplain.reply', $komplain->komplain_id) }}" class="btn btn-sm btn-primary"><i class="fa fa-reply"></i> Jawab</a>
                                    @endif
                                @else
                                    @if ($komplain->status != 'SELESAI')
                                        <a id="btn-reply" data-href="{{ route('sistem-komplain.reply', $komplain->komplain_id) }}" class="btn btn-sm btn-primary"><i class="fa fa-reply"></i> Beri Komentar</a>
                                    @endif
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-footer clearfix">
                <a href="{{ route('sistem-komplain.index') }}" class="pull-right">
                    <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i> Kembali</button>
                </a>
            </div>
        </div>
    </div>
    <!-- Modal HTML -->
    <div id="modalReply" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold">Jawab Keluhan</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {!! Html::form('POST')->id('form-reply')->open() !!}
                <div class="modal-body mx-3">
                    <div id="form-errors"></div>
                    <div class="md-form mb-4">
                        <label>Jawaban</label>
                        @csrf
                        {!! Html::textarea('jawaban')->class('form-control')->id('jawab')->required() !!}
                    </div>

                    <legend>Verifikasi Data Penjawab</legend>

                    <div class="md-form mb-4{{ $errors->has('nik') ? ' has-error' : '' }}">
                        <label class="control-label">NIK <span class="required">*</span></label>

                        {!! Html::text('nik')->placeholder('NIK')->class('form-control')->required()->id('nik') !!}
                        @if ($errors->has('nik'))
                            <span class="help-block">
                                <strong>{{ $errors->first('nik') }}</strong>
                            </span>
                        @endif

                    </div>
                    <div class="md-form mb-4{{ $errors->has('tanggal_lahir') ? ' has-error' : '' }}">
                        <label class="control-label">Tanggal Lahir <span class="required">*</span></label>

                        {!! Html::text('tanggal_lahir')->placeholder('1990-01-01')->class(
                                'form-control
                                                                    datepicker',
                            )->required()->id('tanggal_lahir') !!}
                        @if ($errors->has('tanggal_lahir'))
                            <span class="help-block">
                                <strong>{{ $errors->first('tanggal_lahir') }}</strong>
                            </span>
                        @endif

                    </div>

                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
                {!! Html::form()->close() !!}
            </div>
        </div>
    </div>

    <div id="modalReplyAdmin" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalAdminLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold">Jawab Keluhan</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {!! Html::form('POST')->id('form-reply-admin')->open() !!}
                <div class="modal-body mx-3">
                    <div id="form-errors-admin"></div>
                    <div class="md-form mb-4">
                        <label>Jawaban</label>
                        {!! Html::textarea('jawaban')->class('form-control')->id('jawab-admin')->required() !!}
                        {!! Html::hidden('nik', '999') !!}
                    </div>

                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
                {!! Html::form()->close() !!}
            </div>
        </div>
    </div>

    <div id="modalUbahReplyAdmin" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalAdminLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold">Ubah Jawaban Keluhan</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {!! Html::form('POST')->id('form-ubah-reply-admin')->open() !!}
                <div class="modal-body mx-3">
                    <div id="form-errors-admin"></div>
                    <div class="md-form mb-4">
                        <label>Jawaban</label>
                        {!! Html::textarea('jawaban')->class('form-control')->id('ubah-jawab-admin')->required() !!}
                        {!! Html::hidden('nik', '999') !!}
                        {!! Html::hidden('id')->id('id_jawab') !!}
                        @method('PUT')
                    </div>

                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
                {!! Html::form()->close() !!}
            </div>
        </div>
    </div>

@endsection

@include('partials.asset_fancybox')
@push('scripts')
    <script type="application/javascript">
    $(function () {

        var id_komplain = $('#komplain_id').val();
        refresh_jawaban(id_komplain);

        var url = '';
        $(document).on('click', '#btn-reply', function(e) {
            url = $(this).attr('data-href');
            $('#form-reply').attr('action', url );
            $('#modalReply').modal({
                backdrop: 'static',
                keyboard: false
            });
            e.preventDefault();
        });

        $(document).on('click', '#btn-reply-admin', function(e) {
            url = $(this).attr('data-href');
            $('#form-reply-admin').attr('action', url );
            $('#modalReplyAdmin').modal({
                backdrop: 'static',
                keyboard: false
            });
            e.preventDefault();
        });

        $('#modalReplyAdmin').on('hidden.bs.modal', function () {
            $('#jawab-admin').val('');
            $('#form-errors-admin').html('');
        })

        $('#modalReply').on('hidden.bs.modal', function () {
            $('#jawab').val('');
            $('#nik').val('');
            $('#tanggal_lahir').val('');
            $('#form-errors').html('');
        });

        $('#form-reply-admin').on('submit', function(e) {
            e.preventDefault();
            var jawab = $('#jawab').val();
            var komplain_id = $('#komplain_id').val();

            $.ajax({
                type: "POST",
                url: url,
                data: $("#form-reply-admin").serialize(),
                success: function( msg ) {
                    if(msg.status == 'success'){
                        refresh_jawaban(id_komplain);
                        $('#jawab-admin').val('');
                        $('#modalReplyAdmin').modal('hide');
                    }
                },
                error :function( jqXhr ) {
                    if( jqXhr.status === 401 ) //redirect if not authenticated user.
                        $( location ).prop( 'pathname', 'auth/login' );
                    if( jqXhr.status === 422 ) {
                        //process validation errors here.
                        $errors = jqXhr.responseJSON; //this will get the errors response data.
                        console.log($errors);
                        //show them somewhere in the markup
                        //e.g
                        errorsHtml = '<div class="alert alert-danger"><ul>';

                        $.each( $errors.errors, function( key, value ) {
                            errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error.
                        });
                        errorsHtml += '</ul></di>';

                        $( '#form-errors-admin' ).html( errorsHtml ); //appending to a <div id="form-errors"></div> inside form
                    } else {
                        /// do some thing else
                    }
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
        });

        $('#form-reply').on('submit', function(e) {
            e.preventDefault();
            var jawab = $('#jawab').val();
            var komplain_id = $('#komplain_id').val();

            $.ajax({
                type: "POST",
                url: url,
                data: $("#form-reply").serialize(),
                success: function( msg ) {
                    if(msg.status == 'success'){
                        refresh_jawaban(id_komplain);
                        $('#jawab').val('');
                        $('#modalReply').modal('hide');
                    }
                },
                error :function( jqXhr ) {
                    if( jqXhr.status === 401 ) //redirect if not authenticated user.
                        $( location ).prop( 'pathname', 'auth/login' );
                    if( jqXhr.status === 422 ) {
                        //process validation errors here.
                        $errors = jqXhr.responseJSON; //this will get the errors response data.
                        console.log($errors);
                        //show them somewhere in the markup
                        //e.g
                        errorsHtml = '<div class="alert alert-danger"><ul>';

                        $.each( $errors.errors, function( key, value ) {
                            errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error.
                        });
                        errorsHtml += '</ul></di>';

                        $( '#form-errors' ).html( errorsHtml ); //appending to a <div id="form-errors"></div> inside form
                    } else {
                        /// do some thing else
                    }
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
        });

        $(document).on('click', '#btn-ubah-reply-admin', function(e) {
            url = $(this).attr('data-href');
            $('#form-ubah-reply-admin').attr('action', url );
            
            $.ajax({
                type: "GET",
                url: url,
                success: function( data ) {
                    $('#modalUbahReplyAdmin').modal({
                        backdrop: 'static',
                        keyboard: false,
                        show: true
                    });
                    $('#ubah-jawab-admin').val(data.data.jawaban);
                    $('#id_jawab').val(data.data.id);
                },
            });
            e.preventDefault();
        });

        $('#modalUbahReplyAdmin').on('hidden.bs.modal', function () {
            $('#ubah-jawab-admin').val('');
            $('#form-errors-admin').html('');
        })

        $('#form-ubah-reply-admin').on('submit', function(e) {
            e.preventDefault();
            var jawab = $('#jawab').val();
            var komplain_id = $('#komplain_id').val();
            var id_jawab = $('#id_jawab').val();
            url = url.replace('getkomentar', 'updatekomentar');
            
            $.ajax({
                type: "POST",
                url: url,
                data: $("#form-ubah-reply-admin").serialize(),
                success: function( msg ) {
                    if(msg.status == 'success'){
                        refresh_jawaban(id_komplain);
                        $('#ubah-jawab-admin').val('');
                        $('#modalUbahReplyAdmin').modal('hide');
                    }
                },
                error :function( jqXhr ) {
                    if( jqXhr.status === 401 ) //redirect if not authenticated user.
                        $( location ).prop( 'pathname', 'auth/login' );
                    if( jqXhr.status === 422 ) {
                        //process validation errors here.
                        $errors = jqXhr.responseJSON; //this will get the errors response data.
                        console.log($errors);
                        //show them somewhere in the markup
                        //e.g
                        errorsHtml = '<div class="alert alert-danger"><ul>';

                        $.each( $errors.errors, function( key, value ) {
                            errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error.
                        });
                        errorsHtml += '</ul></di>';

                        $( '#form-errors-admin' ).html( errorsHtml ); //appending to a <div id="form-errors"></div> inside form
                    } else {
                        /// do some thing else
                    }
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
        });
    });

    function refresh_jawaban(id_komplain)
    {
        $.ajax({
            type: "GET",
            url: '{{ route('sistem-komplain.jawabans') }}',
            data: {id:id_komplain} ,
            success: function( data ) {
                $('#jawabans').html(data);
            },
        });
    }
</script>
@endpush
@include('partials.asset_datetimepicker')
@push('scripts')
    <script type="text/javascript">
        $(function() {

            $('.datepicker').each(function() {
                var $this = $(this);
                $this.datetimepicker({
                    format: 'YYYY-MM-DD'
                });
            });

        })
    </script>
@endpush