@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>
                    Didukung Oleh
                    {{-- <small>Control panel</small> --}}
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-handshake-o"></i> Didukung oleh</a></li>
                    <li class="active">Daftar Pendukung</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <div class="box">
                    <div class="box-header">
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body no-padding">

                        <div class="col-lg-12">
                            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default">
                                ADD NEW PENDUKUNG
                            </button>
                        </div><!-- /.col-lg-6 -->
                    </div>

                    <div class="container-fluid">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Nomor</th>
                                    <th>Nama</th>
                                    <th>Image</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($result as $e => $r)
                                    <tr>
                                        <td>{{ $e + 1 }}</td>
                                        <td>{{ $r->name }}</td>
                                        <td>
                                            <img src="{{ asset($r->image) }}" style="height:60px" alt="">
                                        </td>
                                        <td>
                                            <a href="{{route('editPendukug',$r->id)}}" class="btn btn-warning">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>

                </div>
                <!-- /.box-body -->
    </div>

    <div class="modal fade" id="modal-default" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
        tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">ADD NEW PENDUKUNG</h5>
                </div>
                <div class="modal-body">
                    <form action="{{ route('savePendukung') }}" class="contactForm" id="cform" name="cform"
                        method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="formGroupExampleInput"> <span style="color: red; font-size:15px"> <b> (*)</b></span>
                                Nama</label>
                            <input type="text" name="name" class="form-control" id="formGroupExampleInput"
                                placeholder="Nama" required>
                        </div>
                        <div class="form-group">
                            <label> <span style="color: red; font-size:15px"> <b> (*)</b></span>Image</label>
                            <br>
                            <label class="label">
                                <input type="file" id="uploadFile" name="image" multiple />
                            </label>
                            <center>
                                <div id="image_preview"></div>
                            </center>
                        </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-success ">Simpan</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.modal -->
@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 type="text/javascript">
        $('.closes').on('click', function() {
            document.getElementById("cform").reset();
            $("#image_preview").remove();
        });

        $("#uploadFile").change(function() {
            $('#image_preview').html("");
            var total_file = document.getElementById("uploadFile").files.length;
            for (var i = 0; i < total_file; i++) {
                $('#image_preview').append("<img src='" + URL.createObjectURL(event.target.files[i]) + "'>");
            }

        });
    </script>
@stop