@extends('layouts.app', ['activePage' => 'user', 'title' => 'Pengguna', 'navName' => 'Pengguna', 'activeButton' =>
'laravel'])

@section('content')
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 float-left">
                                <button type="button" class="btn btn-primary" class="btn btn-primary" onclick="addModal()">
                                    <!-- <a href="{{route('doc.add')}}"> -->
                                        <i class="nc-icon nc-simple-add"></i>
                                        {{ __("Tambah") }}
                                    <!-- </a> -->
                                </button>
                            </div>
                            <div class="col-md-12">
                                @if(session()->has('message'))

                                <div class="alert alert-success alert-dismissable custom-success-box"
                                    style="margin: 15px;">
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                    <strong> {{ session()->get('message') }} </strong>
                                </div>
                                @endif
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover" style="width:100%;" id="table_doc">
                                <thead>
                                    <tr class="odd">
                                        <th>
                                            No.
                                        </th>
                                        <th>
                                            Nama
                                        </th>
                                        <th>
                                            Email
                                        </th>
                                        <th>
                                            Aksi
                                        </th>
                                    </tr>

                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                        {{-- add doc --}}
                        <!-- Modal -->
                        <div class="modal fade" id="tambahDoc" tabindex="-1" aria-labelledby="tambahDocLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="tambahDocLabel">Tambah User</h5>
                                        {{-- <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                                    </div>
                                    <div class="modal-body">
                                        <form method="POST" id="userForm" name="userForm" >
                                            @csrf
                                            <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                                                <label class="form-control-label" for="input-name">
                                                    {{ __('Nama') }}
                                                </label>
                                                <input type="text" name="name" id="input-name"
                                                    class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                                                    placeholder="{{ __('Nama User') }}" required autofocus>
                                                <input type="hidden" name="id" id="input-id"
                                                    class="form-control{{ $errors->has('id') ? ' is-invalid' : '' }}"
                                                    placeholder="{{ __('Nama Dokumen') }}" required autofocus>

                                                @include('alerts.feedback', ['field' => 'name'])
                                            </div>

                                            <div class="form-group{{ $errors->has('nama') ? ' has-danger' : '' }}">
                                                <label class="form-control-label" for="input-nama">
                                                    {{ __('Email') }}
                                                </label>
                                                <input type="email" name="email" id="input-email"
                                                    class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                                    placeholder="{{ __('email user') }}" required autofocus>
                                                

                                                @include('alerts.feedback', ['field' => 'email'])
                                            </div>

                                            <div id="password" class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
                                                <label class="form-control-label" for="input-nama">
                                                    {{ __('Password') }}
                                                </label>
                                                <input type="password" name="password" id="input-password"
                                                    class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}"
                                                    placeholder="{{ __('password user') }}" required autofocus>
                                                

                                                @include('alerts.feedback', ['field' => 'password'])
                                            </div>

                                            
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal" onclick="closeModal()">Tutup</button>
                                            <button type="button" id="btn-save" class="btn btn-primary"
                                                onclick="save()">Simpan</button>
                                            <button type="button" id="btn-update" class="btn btn-primary"
                                                onclick="updateDoc()" style="display: none;">Update</button>
                                        </form>
                                    </div>
                                    <div class="modal-footer">

                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- Modal status user -->
                        <div class="modal fade" id="verifUser" tabindex="-1" aria-labelledby="tambahDocLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="tambahDocLabel">Verifikasi User</h5>
                                    </div>
                                    <div class="modal-body">
                                        <form method="POST" id="statusForm" name="statusForm" >
                                            @csrf
                                            <input type="hidden" name="id" id="id-status"
                                                    class="form-control{{ $errors->has('id') ? ' is-invalid' : '' }}"
                                                    placeholder="{{ __('Nama Dokumen') }}" required autofocus>

                                            <p>
                                                Status User : <span class="font-weight-bold" id="status-user"></span>
                                            </p>
                                            
                                                <div class="form-group" id="check-status" style="display: none;">
                                                    <div class="form-check">
                                                        <label class="form-check-label d-flex align-items-center">
                                                            <input class="form-check-input" name="status" type="checkbox" required>
                                                            <span class="form-check-sign"></span>
                                                            <b>Konfirmasi User</b>
                                                        </label>
                                                    </div>
                                                </div>

                                            
                                            <button type="button" id="btn-save" class="btn btn-primary"
                                                onclick="changeStatus()">Simpan</button>
                                        </form>
                                    </div>
                                    <div class="modal-footer">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $(document).ready(function () {
        // Javascript method's body can be found in assets/js/demos.js
        getTable();


    });
    function addModal(){
            $('#tambahDoc').modal('show');
            
            $('#btn-save').show();
            $('#btn-update').hide();
        }

    function closeModal(){
        $('#tambahDoc').modal('hide');
    }
    function getTable() {
        var table = $('#table_doc').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('user.json') }}",
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: true,
                    searchable: true
                },
            ]
        });
    }

    function refresh_table() {
        $('#table_doc').DataTable().ajax.reload();
    }

    function save() {

        // console.log($('#userForm').serialize())
        $.ajax({
            type: 'POST',
            url: "{{ route('user.save') }}",
            data: $('#userForm').serialize(),
            dataType: 'json',
            // cache: false,
            // contentType: false,
            // processData: false,
            success: (data) => {
                // this.reset();
                console.log(data)
                $('#userForm').trigger("reset");
                $('#tambahDoc').modal('hide');
                // table.draw();
                demo.notifSuccess(data.message)
                refresh_table()
            },
            error: function (data) {
                console.log(data);
            }
        });
    }

    function editModal(id) {
        console.log(id)
        $('#tambahDoc').modal('show');
        $('#password').hide();
        $('#btn-save').hide();
        $('#btn-update').show();
        $.ajax({
            data: $('#userForm').serialize(),
            url: "user/get/" + id,
            type: "GET",
            dataType: 'json',
            success: function (data) {
                console.log(data)
                // $('#userForm').trigger("reset");
                $('#input-id').val(data.data.id)
                $('#input-name').val(data.data.name)
                $('#input-email').val(data.data.email)
                // $('#input-password').val(data.data.password)
                // $('#tambahDoc').modal('hide');
                // table.draw();
                //    demo.notifSuccess("Jenis Dokumen berhasil disimpan!")

            },
            error: function (data) {
                console.log('Error:', data);
                // $('#saveBtn').html('Save Changes');
            }
        });
    }

    function activModal(id){
        $('#verifUser').modal('show')
        $('#statusUser').remove()
        $.ajax({
            data: $('#userForm').serialize(),
            url: "user/get/" + id,
            type: "GET",
            dataType: 'json',
            success: function (data) {
                $('#id-status').val(data.data.id)
                let status =''
                if(data.data.status == 0){
                    status = 'Menunggu Konfirmasi'
                    document.getElementById('check-status').style.display = 'block';
                }else{
                    status = 'Aktif'
                }
                $('#status-user').text(status)

            },
            error: function (data) {
                console.log('Error:', data);
                // $('#saveBtn').html('Save Changes');
            }
        });
    }



    function updateDoc() {
        $.ajax({
            data: $('#userForm').serialize(),
            url: "{{ route('user.update') }}",
            type: "POST",
            dataType: 'json',
            success: function (data) {
                console.log(data)
                $('#userForm').trigger("reset");
                $('#tambahDoc').modal('hide');
                // table.draw();
                demo.notifSuccess(data.message)
                refresh_table()

            },
            error: function (data) {
                console.log('Error:', data);
                // $('#saveBtn').html('Save Changes');
            }
        });
    }

    function changeStatus(){
        console.log($('#statusForm').serialize())
        $.ajax({
            data: $('#statusForm').serialize(),
            url: "{{ route('user.status') }}",
            type: "POST",
            dataType: 'json',
            success: function (data) {
                console.log(data)
                $('#statusForm').trigger("reset");
                // table.draw();
                $('#verifUser').modal('hide')
                demo.notifSuccess(data.message)
                refresh_table()

            },
            error: function (data) {
                console.log('Error:', data);
                // $('#saveBtn').html('Save Changes');
            }
        })
    }

    function hapus(id) {
        console.log(id)
        $.ajax({
            url: "/user/delete/" + id,
            type: "get",
            // dataType: 'json',
            success: function (data) {
                // console.log(data)
                // $('#userForm').trigger("reset");
                // $('#tambahDoc').modal('hide');
                // table.draw();
                demo.notifSuccess(data.message)
                refresh_table()

            },
            error: function (data) {
                console.log('Error:', data);
                // $('#saveBtn').html('Save Changes');
            }
        });
    }

</script>
@endpush