@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>
                    Sosial Media
                    {{-- <small>Control panel</small> --}}
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i>
                            Sosial Media</a></li>
                    <li class="active">Daftar Sosial Media</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 New Konsultasi</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 SOSIAL MEDIA
                        </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>Nomor</th>
                                        <th>Link</th>
                                        <th>Tipe</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($result as $e => $r)
                                        <tr>
                                            <td>{{ $e + 1 }}</td>
                                            <td>{{ $r->link }} </td>
                                            <td>
                                                {{ $r->media }}
                                            </td>
                                            <td>
                                                <a href="#" class="btn btn-danger delete" berita="{{ $r->id }}"
                                                    x="{{ $r->link }}">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="addnewsos" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Silahkan Pilih Proses Selanjutnya</h4>
                </div>
                <div class="modal-body">
                    <form id="contactForm1" action="/EndChat" method="post">
                        <select class="form-control" name="nextproses" required>
                            <option value="">--Pilih Proses selanjutnya--</option>
                            <option value="2">Inkubator</option>
                            <option value="3">HKI</option>
                            <option value="Akhiri Konsultasi">Akhiri Konsultasi</option>
                        </select>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary submit-endchat">simpan</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div> --}}

    <div class="modal fade" id="ModalNewSosmed" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('saveSosialMedia') }}" class="contactForm" id="cform" name="cform" method="post"
                enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>New Link Sosial Media</h4>
                    </div>
                    <div class="modal-body">
                        @csrf
                        <div class="form-group">
                            <label for="formGroupExampleInput">
                                Link</label>
                            <input type="text" name="link" class="form-control" id="formGroupExampleInput"
                                placeholder="Link" required>
                        </div>
                        <div class="form-group">
                            <select class="form-control" name="sosialmedia" required>
                                <option value="">--Pilih jenis sosial media --</option>
                                <option value="Facebook">Facebook</option>
                                <option value="Instagram">Instagram</option>
                                <option value="Twitter">Twitter</option>
                                <option value="Youtube">Youtube</option>
                            </select>
                        </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>

@endsection
@section('footer')
    <script>
        $(function() {
            $('#example1').DataTable()
        })
    </script>
    <script>
        $('.delete').click(function() {
            var berita = $(this).attr('berita');
            var x = $(this).attr('x');
            Swal.fire({
                title: 'Apakah Anda Yakin ?',
                text: "Mau menghapus data  " + x + " ???",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                    )
                    window.location = berita + "/delete";
                }
            })
        })
    </script>
    <script>
        $(document).ready(function() {
            $('body').on('click', '#addnewsosmed', function(e) {
                $('#ModalNewSosmed').modal({
                    backdrop: 'static',
                    keyboard: false
                })
            });

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