@extends('layouts.admin.app')

@section('content')


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <section class="content-header">
                <h1>
                    Kabupaten
                    {{-- <small>Control panel</small> --}}
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>
                            Kabupaten</a></li>
                    <li class="active">Daftar Kabupaten</li>
                </ol>
            </section>
        </section>
        <!-- Main content -->
        <section class="content">
            <section class="col-lg-12 connectedSortable">
                <!-- TABLE: LATEST ORDERS -->
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">List Kabupaten</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default"
                            data-backdrop="static" id="addnewsosmed">
                            ADD NEW KABUPATEN
                        </button>
                        {{-- <a class="btn btn-success akhir" href="javascript:void(0)" id="addnewsosmed"  data-toggle="modal" data-backdrop="static" data-keyboard="false">ADD NEW LINK SOSMED</a> --}}

                        <div class="table-responsive">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th width="5%">Nomor</th>
                                        <th>Nama</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($results as $e => $r)
                                        <tr>
                                            <td>{{ $e + 1 }}</td>
                                            <td>{{ $r->name }} </td>
                                            <td>
                                                <a href="#" class="btn btn-warning" id="kabupten"
                                                    idKabupaten="{{ $r->id }}" name="{{ $r->name }}">Edit</a>
                                                {{-- |
                                                <a href="#" class="btn btn-danger delete" berita="{{ $r->id }}"
                                                    x="{{ $r->name }}">Delete</a> --}}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>

                                <tfoot>
                                </tfoot>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.box-body -->

                    <!-- /.box-footer -->
                </div>
                <!-- /.box -->
            </section>
        </section>
        <!-- /.content -->

    </div>
    <!-- /.content-wrapper -->
    {{-- Modal --}}

    <div class="modal fade" id="ModalNewSosmed" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('KabupatenPost') }}" class="contactForm" id="cform" name="cform" method="post"
                enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>New Kabupaten</h4>
                    </div>
                    <div class="modal-body">
                        @csrf
                        <div class="form-group">
                            <label for="formGroupExampleInput">
                                Nama</label>
                            <input type="text" name="name" class="form-control" id="formGroupExampleInput"
                                placeholder="Nama" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger closes" data-dismiss="modal"
                            aria-label="Close">Tutup</button>
                        <button type="submit" class="btn btn-primary submit-endchat">simpan</button>
                    </div>
                </div>
            </form>
            <!-- /.modal-content -->
        </div>
    </div>


    <div class="modal fade" id="kabupatenNew" aria-hidden="true">
        <div class="modal-dialog">
            <form class="contactForm" id="cformx" name="cformx" method="post" enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>Kabupaten update</h4>
                    </div>
                    <div class="modal-body">
                        @csrf
                        <div class="form-group">
                            <label for="formGroupExampleInput">Name</label>
                            <input type="text" name="password" class="form-control namekabupaten" id="formGroupExampleInput"
                                placeholder="password (ex:sumsel12)" value="" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger closesx" data-dismiss="modal"
                            aria-label="Close">Tutup</button>
                        <button type="button" class="btn btn-primary submitPassword">simpan</button>
                    </div>
                </div>
            </form>
            <!-- /.modal-content -->
        </div>
    </div>

@endsection
@section('footer')
    <script>
        $(function() {
            $('#example1').DataTable()
        })
    </script>
    <script>
        let idKabupaten = null;
        let namekabupaten = null;
        $('body').on('click', '#kabupten', function(e) {
            $('#kabupatenNew').modal({
                backdrop: 'static',
                keyboard: false
            })
            idKabupaten = $(this).attr('idKabupaten');
            namekabupaten = $(this).attr('name');
            // console.log(namekabupaten);
            $('.namekabupaten').val(namekabupaten);
        })

        $('body').on('click', '.submitPassword', function(e) {


            let datastr = "name=" + $('.namekabupaten').val();
            // console.log(datastr);

            $.ajax({
                type: "POST",
                url: "/Kabupaten/" + idKabupaten + "/update", // need to create this post route
                data: datastr,
                cache: false,
                success: function(data) {
                    Swal.fire(
                        'Success!',
                        'Berhasil Menganti Password',
                        'success'
                    )
                    window.location = "/Kabupaten/list"
                },
                error: function(jqXHR, status, err) {}
            })
        });

        $('.delete').click(function() {
            var berita = $(this).attr('berita');
            var x = $(this).attr('x');
            Swal.fire({
                title: 'Apakah Anda Yakin ?',
                text: "Mau Menghapus   " + x + " ???",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire(
                        'Success!',
                        'Berhasil Mengganti status',
                        'success'
                    )
                    window.location = berita + "/delete";
                }
            })
        })
    </script>
    <script>
        $(document).ready(function() {
            $('body').on('click', '#addnewsosmed', function(e) {
                $('#ModalNewSosmed').modal({
                    backdrop: 'static',
                    keyboard: false
                })
            });

            $('.closesx').on('click', function() {
                document.getElementById("cformx").reset();
            });

            $('.closes').on('click', function() {
                document.getElementById("cform").reset();
            });
        });
    </script>
@stop