@extends('layouts.app', ['activePage' => 'dokumen', 'title' => 'Dokumen', 'navName' => 'Dokumen', '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">
                                    <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 Dokumen
                                        </th>
                                        <th>
                                            Jenis Dokumen
                                        </th>
                                        <th>
                                            File
                                        </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 Dokumen</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="docForm" name="docForm" enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group{{ $errors->has('nama') ? ' has-danger' : '' }}">
                                                <label class="form-control-label" for="input-nama">
                                                    {{ __('Nama Dokumen') }}
                                                </label>
                                                <input type="text" name="nama" id="input-nama"
                                                    class="form-control{{ $errors->has('nama') ? ' is-invalid' : '' }}"
                                                    placeholder="{{ __('Nama Dokumen') }}" 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' => 'nama'])
                                            </div>
                                            <div class="form-group{{ $errors->has('docs') ? ' has-danger' : '' }}">
                                                <label class="form-control-label" for="input-docs">
                                                    {{ __('File') }}
                                                </label>
                                                <input type="file" name="docs" id="input-docs"
                                                    class="form-control{{ $errors->has('docs') ? ' is-invalid' : '' }}"
                                                    placeholder="{{ __('File Dokumen') }}" required autofocus>

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

                                            <div class="form-group{{ $errors->has('jenisDoc') ? ' has-danger' : '' }}">
                                                <label class="form-control-label" for="jenisDoc">
                                                    {{ __('Jenis Dokumen') }}
                                                </label>
                                                <select id="jenisDoc" class="form-control" name="jenis_doc">
                                                    <option value="">Pilih Jenis Dokumen</option>
                                                    <option value="0">1</option>
                                                    <option value="1">2</option>
                                                </select>

                                                @include('alerts.feedback', ['field' => 'jenis_dokumens_id'])
                                            </div>
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">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> -->

                                        <form id="docForm" method="post" enctype="multipart/form-data">
                                            {{ csrf_field() }}
                                            <div class="form-group">
                                                <label for="Product Name">Product Name</label>
                                                <input type="text" name="nama" class="form-control"
                                                    placeholder="Product Name">
                                                <input type="hidden" name="id" class="form-control"
                                                    placeholder="Product Name">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-control-label" for="jenisDoc">
                                                    {{ __('Jenis Dokumen') }}
                                                </label>
                                                <select id="jenisDoc" class="form-control" name="jenis_doc">
                                                    <option value="">Pilih Jenis Dokumen</option>
                                                    <option value="0">1</option>
                                                    <option value="1">2</option>
                                                </select>
                                            </div>
                                            <label for="Product Name">Product photos (can attach more than one):</label>
                                            <br />
                                            <input type="file" class="form-control" name="file[]" />
                                            <br /><br />
                                            <input type="button" onclick="save()" class="btn btn-primary"
                                                value="Upload" />
                                        </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();

        // $('#docForm').submit(function (e) {
        //     e.preventDefault();
        //     var form = $("#form_id")[0];
        //     var formData = new FormData(form);
        //     var nama = $('#input-nama').val()
        //     var jenisDoc = $('#jenisDoc').val()
        //     var file = $('#input-docs').val()
        //     var _token = "{{ csrf_token() }}"

        //     var data = 'nama=' + nama + '&jenisDoc=' + jenisDoc + '&file=' + file + '&_token=' + _token;
        //     $.ajax({
        //         type: 'POST',
        //         url: "{{ route('doc.save') }}",
        //         data: formData,
        //         dataType: 'json',
        //         cache: false,
        //         contentType: false,
        //         // processData: false,
        //         success: (data) => {
        //             this.reset();
        //             // $('#docForm').trigger("reset");
        //             $('#tambahDoc').modal('hide');
        //             // table.draw();
        //             demo.notifSuccess(data.message)
        //             refresh_table()
        //         },
        //         error: function (data) {
        //             console.log(data);
        //         }
        //     });
        // });

    });

    function getTable() {
        var table = $('#table_doc').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('doc.json') }}",
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'nama',
                    name: 'nama'
                },
                {
                    data: 'jenisDoc',
                    name: 'jenisDoc'
                },
                {
                    data: 'downloadFile',
                    name: 'downloadFile'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: true,
                    searchable: true
                },
            ]
        });
    }

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

    function save() {

        console.log($('#docForm').serialize())
        // console.log($('#input-file').val())
        // var nama = $('#input-nama').val()
        // var jenisDoc = $('#jenisDoc').val()
        // var file = $('#input-docs').val()
        // var _token = "{{ csrf_token() }}"

        // var data = 'nama=' + nama + '&jenisDoc=' + jenisDoc + '&file=' + file + '&_token=' + _token;
        // $.ajax({
        //     data: data,
        //     url: "{{ route('doc.save') }}",
        //     type: "POST",
        //     dataType: 'json',
        //     success: function (data) {

        //         $('#docForm').trigger("reset");
        //         $('#tambahDoc').modal('hide');
        //         // table.draw();
        //         demo.notifSuccess(data.message)
        //         refresh_table()
        //     },
        //     error: function (data) {
        //         console.log('Error:', data);
        //         // $('#saveBtn').html('Save Changes');
        //     }
        // });
        // var form = $("#form_id")[0];
        // var formData = new FormData(form);
        var nama = $('#input-nama').val()
        var jenisDoc = $('#jenisDoc').val()
        var file = $('#input-docs').val()
        var _token = "{{ csrf_token() }}"

        var data = 'nama=' + nama + '&jenisDoc=' + jenisDoc + '&file=' + file + '&_token=' + _token;
        $.ajax({
            type: 'POST',
            url: "{{ route('doc.save') }}",
            data: data,
            dataType: 'json',
            // cache: false,
            // contentType: false,
            // processData: false,
            success: (data) => {
                // this.reset();
                // $('#docForm').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');
        $('#btn-save').hide();
        $('#btn-update').show();
        $.ajax({
            data: $('#docForm').serialize(),
            url: "jenis_doc/get/" + id,
            type: "GET",
            dataType: 'json',
            success: function (data) {
                console.log(data.data.nama)
                // $('#docForm').trigger("reset");
                $('#input-id').val(data.data.id)
                $('#input-nama').val(data.data.nama)
                $('#levelSelect').val(data.data.level)
                // $('#tambahDoc').modal('hide');
                // table.draw();
                //    demo.notifSuccess("Jenis Dokumen berhasil disimpan!")

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

    function getFile(id) {
        $.ajax({
            url: "doc/download/" + id,
            type: "GET",
            dataType: 'json',
            success: function (data) {
                console.log(data)
                // $('#docForm').trigger("reset");
                // $('#input-id').val(data.data.id)
                // $('#input-nama').val(data.data.nama)
                // $('#levelSelect').val(data.data.level)
                // $('#tambahDoc').modal('hide');
                // table.draw();
                //    demo.notifSuccess("Jenis Dokumen berhasil disimpan!")

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

    function updateDoc() {
        $.ajax({
            data: $('#docForm').serialize(),
            url: "{{ route('jenis.update') }}",
            type: "POST",
            dataType: 'json',
            success: function (data) {
                console.log(data)
                $('#docForm').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 hapus(id) {
        console.log(id)
        $.ajax({
            url: "/doc/delete/" + id,
            type: "get",
            // dataType: 'json',
            success: function (data) {
                // console.log(data)
                // $('#docForm').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