@extends('layouts.app')
@section('title')
Data Responden
@endsection
@section('content')
<section class="section">
    <div class="card mb-3" style="border-radius: .75rem !important;">
        <div class="card-header">
            <h4 style="font-size:18px;"><span class="fas fa-restroom text-info mr-3" style="font-size:16px;"></span>Data Responden</h4>
            <div class="card-header-action">
                <button type="button" class="btn btn-primary btn-add">Responden<span class="ml-2 fas fa-plus"></span></button>
            </div>
        </div>
    </div>
    <div class="section-body">
       <div class="card">
            <div class="card-body px-0 py-1">
                {!! $dataTable->table(['width' => '100%', 'class' => 'table table-striped table-bordered table-hover']) !!}
            </div>
       </div>
   </div>    
</section>
@endsection
@section('modal')
<div id="respondenModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Responden</h5>
                <button type="button" aria-label="Close" class="close outline-none" data-dismiss="modal">×</button>
            </div>
            <form method="POST" id="respondenForm" action="">
                <input type="hidden" name="_token" value="">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="cName">Nama Lengkap <span class="required">*</span></label>
                        <input id="cName" type="text" name="name" class="form-control" maxlength="255" minlength="3" required>
                    </div>
                    <div class="form-group">
                        <label for="cPhone">No. Telp <span class="required">*</span></label>
                        <input id="cPhone" type="number" name="phone" class="form-control" maxlength="999999999999" required>
                    </div>
                    <div class="form-group">
                        <label for="cEmail">E-mail <span class="required">*</span></label>
                        <input id="cEmail" type="text" name="email" class="form-control" maxlength="125" required>
                    </div>
                    <div class="form-group">
                        <label for="cJob">Pekerjaan <span class="required">*</span></label>
                        <input id="cJob" type="text" name="job" class="form-control" maxlength="125" required>
                    </div>
                    <div>
                        <label for="cAddres">Alamat <span class="required">*</span></label>
                        <textarea id="cAddress" name="address" class="form-control" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="text-right">
                        <button type="button" class="btn btn-warning mr-3" data-dismiss="modal"><span class="fas fa-times mr-2"></span>Tutup</button>
                        <button type="submit" class="btn btn-primary" data-loading-text="<span class='spinner-border spinner-border-sm'></span> Menyimpan ..."><span class="fa fa-window-restore mr-2"></span>Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="detailRespondenModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Responden</h5>
                <button type="button" aria-label="Close" class="close outline-none" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Nama</label>
                    <p class="mb-0" id="dName"></p>
                </div>
                <div class="form-group">
                   <label>No. Telp</label>
                    <p class="mb-0" id="dPhone"></p>
                </div>
                <div class="form-group">
                    <label>E-Mail</label>
                    <p class="mb-0" id="dEmail"></p>
                </div>
                <div class="form-group">
                    <label>Pekerjaan</label>
                    <p class="mb-0" id="dJob"></p>
                </div>
                <div class="form-group">
                    <label>Alamat</label>
                    <p class="mb-0" id="dAddress"></p>
                </div>
            </div>
            <div class="modal-footer">
                <div class="text-center">
                    <button type="button" class="btn btn-warning" data-dismiss="modal"><span class="fas fa-check-double mr-3"></span>OK</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('css')
@include('layouts.datatables_css')
@endpush
@push('js')
@include('layouts.datatables_js')
{!! $dataTable->scripts() !!}
<script type="text/javascript">
    $(document).ready(function () {
        var token = $('meta[name=csrf-token]').attr('content');

        function refreshDTB(isKeepPage) {
            if (isDTB(window.LaravelDataTables["dataTableBuilder"])) {
                if (isKeepPage) {
                    window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, false);
                } else {
                    window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, true);
                }
            }
        }

        $(document).on('click', '.btn-add', function (e) {
            e.preventDefault();

            let mdl = $('#respondenModal');
            mdl.find('h5.modal-title').text('Tambah Responden');
            mdl.find('form').attr('method', 'post');
            mdl.find('form').attr('action', '{{ route('respondent.store') }}');
            mdl.find('input[name=_token]').val(token);
            mdl.modal('show');
        });

        $('#dataTableBuilder').on('click', '.btn-show', function (e) {
            let tr = $(this).closest('tr');
            let row = window.LaravelDataTables["dataTableBuilder"].rows(tr.data('index')).data();

            if (row) {
                let r = row[0];
                let mdl = $('#detailRespondenModal');
                mdl.find('#dName').text(r.nm);
                mdl.find('#dPhone').text(r.ntlp);
                mdl.find('#dEmail').text(r.email);
                mdl.find('#dJob').text(r.pekerjaan);
                mdl.find('#dAddress').text(r.alamat);
                mdl.modal('show');
            } else {
                iziToast.warning({
                    title: 'Galat!',
                    message: 'Data Responden tidak ditemukan!',
                    position: 'topRight'
                });
            }
        });

        $('#dataTableBuilder').on('click', '.btn-edit', function (e) {
            let tr = $(this).closest('tr');
            let row = window.LaravelDataTables["dataTableBuilder"].rows(tr.data('index')).data();

            if (row) {
                let r = row[0];
                let mdl = $('#respondenModal');
                mdl.find('h5.modal-title').text('Edit Responden');
                mdl.find('form').attr('method', 'put');
                mdl.find('form').attr('action', $(this).attr('href'));
                mdl.find('input[name=_token]').val(token);
                mdl.find('#cJob').val(r.pekerjaan);

                if (tr.attr("data-crn")) {
                    mdl.find('#cName').attr('disabled', true);
                    mdl.find('#cName').closest('div.form-group').addClass('d-none');
                } else {
                    mdl.find('#cName').val(r.nm);
                }

                if (tr.attr("data-crp")) {
                    mdl.find('#cPhone').attr('disabled', true);
                    mdl.find('#cPhone').closest('div.form-group').addClass('d-none');
                } else {
                    mdl.find('#cPhone').val(r.ntlp);
                }

                mdl.find('#cEmail').val(r.email);
                mdl.find('#cAddress').text(r.alamat);
                mdl.modal('show');
            } else {
                iziToast.warning({
                    title: 'Galat!',
                    message: 'Data Responden tidak ditemukan!',
                    position: 'topRight'
                });
            }
        });

        $(document).on('submit', '#respondenForm', function (e) {
            e.preventDefault();
            
            var f = $(this);

            if (f.attr('action') && (f.attr('method') == 'post' || f.attr('method') == 'put')) {
                var bLoader = f.find('button[type=submit]');
                var p = new FormData(f.get(0));
                var t = f.attr('method');

                if (f.attr('method') == 'put') {
                    p.append('_method', 'put');
                    t = 'post';
                }

                $.ajax({
                    url: f.attr('action'),
                    type: t,
                    data: p,
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
                        bLoader.button('loading');
                    },
                    success: function success(r) {
                        bLoader.button('reset');
                        
                        if (r.success) {
                            f.closest('div.modal').modal('hide');
                            f.get(0).reset();
                            refreshDTB(false);

                            let m = r.message ? r.message : 'Data berhasil disimpan.';
                            iziToast.success({title: 'OK', message: m, position: 'topRight'});
                        } else {
                            let m = r.message ? r.message : 'Data gagal disimpan!';
                            iziToast.warning({title: 'Galat!', message: m, position: 'topRight'});
                        }
                    },
                    error: function error(r) {
                        bLoader.button('reset');
                        iziToast.error({title: 'Server Error!', message: 'Data gagal disimpan!', position: 'topRight'});
                    }
                });
            } else {
                iziToast.warning({title: 'Galat!', message: 'Something Error!', position: 'topRight'});
            }

            return false;
        });

        $(document).on('submit', 'form.form-destroy', function (e) {
            e.preventDefault();

            var f = $(this);
            if (f.attr('action') && f.attr('method') == 'delete') {
                var bLoader = f.find('button[type=submit]');
                
                $.ajax({
                    url: f.attr('action'),
                    type: f.attr('method'),
                    beforeSend: function () {
                        bLoader.button('loading');
                    },
                    success: function success(r) {
                        bLoader.button('reset');
                        
                        if (r.success) {
                            refreshDTB(false);
                            f.find('button[type=submit]').tooltip('dispose');

                            let m = r.message ? r.message : 'Data berhasil dihapus.';
                            iziToast.success({title: 'OK', message: m, position: 'topRight'});
                        } else {
                            let m = r.message ? r.message : 'Data gagal dihapus!';
                            iziToast.warning({title: 'Galat!', message: m, position: 'topRight'});
                        }
                    },
                    error: function error(r) {
                        bLoader.button('reset');
                        iziToast.error({title: 'Server Error!', message: 'Data gagal dihapus!', position: 'topRight'});
                    }
                });
            } else {
                iziToast.warning({title: 'Galat!', message: 'Something Error!', position: 'topRight'});
            }

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