@extends('layouts.app')

@section('content')
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">

    <div class="container col-12">
        <div row justify-content-center>
            <div class="card">
                <div class="card-header">CRUD Login</div>
                <div class="card-body">
                    <div class="row align-items-center mb-1">
                        <div class="col-md-10">
                            <a href="{{ url('tambah') }}" class="btn btn-primary">Input Data Baru</a>
                        </div>
                        <div class="col-md-1">
                            <a href="{{ url('export_excel') }}" class="btn btn-success my-3" target="_blank">Export</a>
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                Import
                            </button>
                        </div>
                    </div>
                    <br>
                    <table id="client" class="table-responsive table-sm table-striped table-bordered" style="width: 100%">
                        <thead>
                            <tr>
                                <th >No</th>
                                <th style="width: 300px">Nama</th>
                                <th >No Hp</th>
                                <th >Kategori</th>
                                <th style="width: 100px">Jenis</th>
                                <th >Paket Feed+Story</th>
                                <th >Paket Spotlight</th>
                                <th >Paket Advertorial</th>
                                <th style="width: 200px">Paket Photo Pruduct</th>
                                <th >Paket Explore</th>
                                <th >Paket Interactive Story</th>
                                <th style="width: 90px">Live IG</th>
                                <th >opsi</th>                                
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($home as $m)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $m->nama }}</td>
                                    <td>{{ $m->nohp }}</td>
                                    <td>{{ $m->kategori }}</td>
                                    <td>{{ $m->jenis }}</td>
                                    <td style="font-size: 25px"><b><center>{{ $m->ad }}</center></b></td>
                                    <td style="font-size: 25px"><b><center>{{ $m->spotlight }}</center></b></td>
                                    <td style="font-size: 25px"><b><center>{{ $m->advertorial }}</center></b></td>
                                    <td style="font-size: 25px"><b><center>{{ $m->photo }}</center></b></td>
                                    <td style="font-size: 25px"><b><center>{{ $m->explore }}</center></b></td>
                                    <td style="font-size: 25px"><b><center>{{ $m->interactive }}</center></b></td>
                                    <td style="font-size: 25px"><b><center>{{ $m->live }}</center></b></td>
                                    <td>
                                        <a href="{{ url('edit',$m->id) }}"><img src="{{ asset('edit.png') }}" style="width: 25px"/></a> <br><br> <a href="{{ url('hapus',$m->id) }}"><img src="{{ asset('trash.png') }}" style="width: 25px"/></a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Modal -->
            <div class="modal fade" 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">Import Data</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="{{ route('import') }}" method="post" enctype="multipart/form-data">
                            <div class="modal-body">
                                <div class="form-group">
                                    {{ csrf_field() }}
                                    <div class="form-gorup">
                                        <input type="file" name="file" required="required">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Import</button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#client').DataTable();
        });
    </script>
@endsection