@extends('layouts.main')

@section('subtitle', 'Analisa')

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Analisa</h1>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form content -->
        <section class="content">
            <div class="container-fluid">
                <!-- Main row -->
                <div class="row">
                    <!-- Left col -->
                    <section class="col-sm-12 ">
                        <!-- general form elements -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Analisa Metode KNN</h3>
                            </div>
                            <form action="{{ route('analisa.store') }}" method="POST" onsubmit="return validateForm()">
                                @csrf
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="rt">RT/RW</label>
                                        <input type="text" class="form-control" name="rt" id="rt"
                                            placeholder="RT/RW">
                                    </div>
                                    <div class="form-group">
                                        <label for="nik">NIK</label>
                                        <input type="text" class="form-control" name="nik" id="nik"
                                            placeholder="NIK">
                                    </div>
                                    <div class="form-group">
                                        <label for="nama">Nama</label>
                                        <input type="text" class="form-control" name="nama" id="nama"
                                            placeholder="Nama">
                                    </div>
                                    @foreach ($kriteria as $kriteriaItem)
                                        <div class="form-group">
                                            <label for="{{ $kriteriaItem->nama }}">{{ $kriteriaItem->nama }}</label>
                                            <select class="form-control select2" id="select2"
                                                name="{{ str_replace(' ', '_', $kriteriaItem->nama) }}_kriteria"
                                                style="width: 100%;" required>
                                                <option disabled selected>Pilih
                                                    {{ $kriteriaItem->nama }}</option>
                                                @foreach ($detailKriteria->where('kriteria', $kriteriaItem->nama) as $detail)
                                                    <option value="{{ $detail->id_subkriteria }}">
                                                        {{ $detail->subkriteria }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="modal-footer justify-content-end">
                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.card -->
                    </section>
                    <!-- /.Left col -->
                </div>
                <!-- /.row (main row) -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->

        <!-- Training content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Data Training</h3>
                            </div>
                            <div class="card-body">
                                <table id="myTableTraining" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>RT/RW</th>
                                            <th>NIK</th>
                                            <th>Nama Lengkap</th>
                                            @foreach ($kriteria as $item)
                                                <th>{{ $item->nama }}</th>
                                            @endforeach
                                            <th>Keputusan</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->

        <!-- Testing content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Data Testing</h3>
                            </div>
                            <div class="card-body">
                                <table id="myTableTesting" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>RT/RW</th>
                                            <th>NIK</th>
                                            <th>Nama Lengkap</th>
                                            @foreach ($kriteria as $item)
                                                <th>{{ $item->nama }}</th>
                                            @endforeach
                                            <th>Keputusan</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->

        <!-- Distance content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Encludean Distance</h3>
                            </div>
                            <div class="card-body">
                                <table id="myTableEncludean" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>RT/RW</th>
                                            <th>NIK</th>
                                            <th>Nama Lengkap</th>
                                            @foreach ($kriteria as $item)
                                                <th>{{ $item->nama }}</th>
                                            @endforeach
                                            <th>Encludean Distance</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->

        <!-- Klasifikasi content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Klasifikasi Nearest Neighbors</h3>
                            </div>
                            <div class="card-body">
                                <table id="myTableKlasifikasi" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>RT/RW</th>
                                            <th>NIK</th>
                                            <th>Nama Lengkap</th>
                                            <th>Encludean Distance</th>
                                            <th>Rangking</th>
                                            <th>Pilihan</th>
                                            <th>Keputusan</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Kesimpulan</h3>
                            </div>
                            <div class="card-body">
                                <h1>Hasil Analisa : {{ $kesimpulan }}</h1>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>

    @if (session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: '{{ session('success') }}'
            });
        </script>
    @endif
    @if ($errors->any())
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Oopss...',
                text: '{{ $errors->first() }}'
            });
        </script>
    @endif

    <script>
        $(document).ready(function() {
            $("#myTableTraining").DataTable({
                processing: true,
                ordering: true,
                responsive: true,
                serverSide: true,
                ajax: "{{ route('training') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'rt_rw',
                        name: 'rt_rw'
                    },
                    {
                        data: 'nik',
                        name: 'nik'
                    },
                    {
                        data: 'nama',
                        name: 'nama'
                    },
                    @foreach ($kriteria as $kriteriaItem)
                        {
                            data: 'subkriteria.{{ $kriteriaItem->nama }}',
                            name: '{{ $kriteriaItem->nama }}',
                            render: function(data) {
                                return data ? data : 'N/A';
                            }
                        },
                    @endforeach {
                        data: 'keputusan',
                        name: 'keputusan',
                        render: function(data) {
                            return data ? data : '?';
                        }
                    }
                ],
                rowCallback: function(row, data, index) {
                    var dt = this.api();
                    $(row).attr('data-id', data.id);
                    $('td:eq(0)', row).html(dt.page.info().start + index + 1);
                }
            });

            $("#myTableTesting").DataTable({
                processing: true,
                ordering: true,
                responsive: true,
                serverSide: true,
                ajax: "{{ route('analisa') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'rt_rw',
                        name: 'rt_rw'
                    },
                    {
                        data: 'nik',
                        name: 'nik'
                    },
                    {
                        data: 'nama',
                        name: 'nama'
                    },
                    @foreach ($kriteria as $kriteriaItem)
                        {
                            data: 'subkriteria.{{ $kriteriaItem->nama }}',
                            name: '{{ $kriteriaItem->nama }}',
                            render: function(data) {
                                return data ? data : 'N/A';
                            }
                        },
                    @endforeach {
                        data: 'keputusan',
                        name: 'keputusan',
                        render: function(data) {
                            return data ? data : '?';
                        }
                    }
                ],
                rowCallback: function(row, data, index) {
                    var dt = this.api();
                    $(row).attr('data-id', data.id);
                    $('td:eq(0)', row).html(dt.page.info().start + index + 1);
                }
            });

            $("#myTableEncludean").DataTable({
                processing: true,
                ordering: true,
                responsive: true,
                serverSide: true,
                ajax: '{{ route('analisa.data') }}',
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'rt_rw',
                        name: 'rt_rw'
                    },
                    {
                        data: 'nik',
                        name: 'nik'
                    },
                    {
                        data: 'nama',
                        name: 'nama'
                    },
                    @foreach ($kriteria as $kriteriaItem)
                        {
                            data: 'subkriteria.{{ $kriteriaItem->nama }}',
                            name: '{{ $kriteriaItem->nama }}',
                            render: function(data) {
                                return data ? data : '0';
                            }
                        },
                    @endforeach {
                        data: 'distance',
                        name: 'distance',
                        render: function(data) {
                            return data ? data : '?';
                        }
                    }
                ],
                rowCallback: function(row, data, index) {
                    var dt = this.api();
                    $(row).attr('data-id', data.id);
                    $('td:eq(0)', row).html(dt.page.info().start + index + 1);
                }
            });

            $("#myTableKlasifikasi").DataTable({
                processing: true,
                ordering: true,
                responsive: true,
                serverSide: true,
                ajax: '{{ route('analisa.klasifikasi') }}',
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'rt_rw',
                        name: 'rt_rw'
                    },
                    {
                        data: 'nik',
                        name: 'nik'
                    },
                    {
                        data: 'nama',
                        name: 'nama'
                    },
                    {
                        data: 'distance',
                        name: 'distance',
                    },
                    {
                        data: 'rangking',
                        name: 'rangking',
                    },
                    {
                        data: 'pilihan',
                        name: 'pilihan',
                    },
                    {
                        data: 'keputusan',
                        name: 'keputusan',
                    }
                ],
                order: [[5, 'asc']],
            });

            $('.datatable-input').on('input', function() {
                var searchText = $(this).val().toLowerCase();

                $('.table tr').each(function() {
                    var rowData = $(this).text().toLowerCase();
                    if (rowData.indexOf(searchText) === -1) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            });
        });

        function validateForm() {
            var selects = document.querySelectorAll('#select2');

            for (var i = 0; i < selects.length; i++) {
                if (!selects[i].value) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Mohon pilih semua kriteria sebelum menyimpan.'
                    });
                    return false;
                }
            }
            return true;
        }
    </script>
@endsection