@extends('layouts.app')

@section('content')
    <!-- Button trigger modal -->
    {{-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button> --}}

    <!-- Modal -->
    <div class="modal fade in" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Sinkronisasi Data</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @if (Session('notif'))
                        @foreach (Session('notif') as $a)
                            <div class="card">
                                <div class="card-header">
                                    {{ $a }}
                                </div>
                            </div>
                        @endforeach
                    @endif
                    {{-- Modal content --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Default box -->
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">{{ $title }}</h3>

            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
                    title="Collapse">
                    <i class="fa fa-minus"></i></button>

            </div>

        </div>
        <div class="box-body" style="overflow-x: scroll;">
            <form
                action="{{ url('/sinkron?limit=' . request()->input('limit', old('limit', 10)) . '&page=' . request()->input('page', old('page', 1))) }}"
                method="post">
                @csrf
                <div class="card" style="margin-top: 10px;">
                    <div style="float: left;">
                        <input class="form-check-input" type="checkbox" value="1" id="all" name="all">
                        <label class="form-check-label" for="all">
                            All
                        </label>
                    </div>
                    <div style="float: right;">
                        <button class="btn btn-success">UPDATE</button>
                    </div>
                </div>
                <br><br><br>
                <table id="example2" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>NIK</th>
                            <th>Nama Lengkap</th>
                            <th>Tempat Lahir</th>
                            <th>Tanggal Lahir</th>
                            <th>Jenis Kelamin</th>
                            <th>Alamat</th>
                            <th>RT</th>
                            <th>RW</th>
                            <th>Kelurahan</th>
                            <th>Kecamatan</th>
                            <th>Kabupaten</th>
                            <th>Status Perkawinan</th>
                            <th>Pekerjaan</th>
                            <th>Nomor Kontak</th>
                            <th>Status Snyc</th>
                            <th>Checkbox</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (@$result['info'])
                            <tr>
                                <td colspan="17" style="text-align: center; font-weight: bolder;">{{ $result['info'] }}
                                </td>
                            </tr>
                        @else
                            @foreach ($result as $a)
                                <tr>
                                    <td>{{ $no++ }}</td>
                                    <td>{{ $a['nik'] }}</td>
                                    <td>{{ $a['nama'] }}</td>
                                    <td>{{ $a['tempat_lahir'] }}</td>
                                    <td>{{ date('d/m/Y', strtotime($a['tanggal_lahir'])) }}</td>
                                    <td>{{ $a['jenis_kelamin'] == 'L' ? 'Laki-Laki' : 'Perempuan' }}</td>
                                    <td>{{ $a['alamat'] }}</td>
                                    <td>{{ $a['rt'] }}</td>
                                    <td>{{ $a['rw'] }}</td>
                                    <td>{{ $a['kelurahan'] }}</td>
                                    <td>{{ $a['kecamatan'] }}</td>
                                    <td>{{ $a['kabko'] }}</td>
                                    <td>{{ $a['status_perkawinan'] }}</td>
                                    <td>{{ $a['jenis_pekerjaan'] }}</td>
                                    <td>{{ $a['nomor_kontak'] }}</td>
                                    <td>{{ $a['sync'] == 0 ? 'Belum Sinkron' : 'Sudah Sinkron' }}</td>
                                    <td>
                                        <input class="form-check-input" type="checkbox" value="{{ $a['nik'] }}"
                                            class="data" name="data[]">
                                        {{-- <input type="hidden" name="nama_data[]" value="{{ $a['nama'] }}"> --}}
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                        {{-- <form method="post" action="{{ url($link . '/' . $data->id) }}">
                                    @csrf
                                    <input type="hidden" name="_method" value="delete">
                                    <a href="{{ url($link . '/' . $data->id . '/edit') }}"
                                        class="btn btn-sm btn-warning"><i class="fa fa-edit"></i></a>
                                    <button type="submit" class="btn btn-sm btn-danger"><i
                                            class="fa fa-trash"></i></button>
                                </form> --}}
                    </tbody>
                </table>
            </form>
            <form action="" method="GET">
                <div class="row">
                    <div class="col-sm-2 form-group">
                        <label for="">Limit Data</label>
                        <input type="number" min="1" name="limit" class="form-control" placeholder="Limit"
                            value="{{ request()->input('limit', old('limit', 10)) }}">
                    </div>
                    <div class="col-sm-2 form-group">
                        <label for="">Page</label>
                        <input type="number" min="1" name="page" class="form-control" placeholder="PAGE"
                            value="{{ request()->input('page', old('page', 1)) }}">
                    </div>
                    <div class="col-sm-2 form-group">
                        <label for="">*</label><br>
                        <button class="btn btn-primary">Change</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.box-footer-->
    </div>
    <!-- /.box -->
    <script>
        @section('jquery')
            $(document).ready(function() {
                @if (Session('notif'))
                    $('#exampleModal').modal('show');
                @endif
                $('#all').click(function() {
                    if (this.checked) {
                        // console.log("A");
                        var ele = document.getElementsByName('data[]');
                        for (var i = 0; i < ele.length; i++) {
                            if (ele[i].type == 'checkbox')
                                ele[i].checked = true;
                        }
                    } else {
                        // console.log("B");
                        var ele = document.getElementsByName('data[]');
                        for (var i = 0; i < ele.length; i++) {
                            if (ele[i].type == 'checkbox')
                                ele[i].checked = false;
                        }
                    }
                });
            });
        @endsection
    </script>
@endsection