@extends('layouts.app')

@section('title')
@endsection


@push('prepend-style')
@endpush
@push('addon-style')
@endpush

@section('content')

<!--app-content open-->
<div class="main-content app-content mt-0">
    <div class="side-app">

        <!-- CONTAINER -->
        <div class="main-container container-fluid">

            <!-- PAGE-HEADER -->
            <div class="page-header">
                <h1 class="page-title">Data Seminar</h1>
                <div>
                    <ol class="breadcrumb">
                         <a href="{{ route('tambah-seminar') }}" class="btn btn-primary">Tambah Data</a>
                    </ol>
                </div>

            </div>
            <!-- PAGE-HEADER END -->

            <!-- Row -->
            <div class="row row-sm">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">File Export</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="file-datatable" class="table table-bordered text-nowrap key-buttons border-bottom">
                                    <thead>
                                        <tr>
                                            <th class="border-bottom-0">Seminar</th>
                                            <th class="border-bottom-0">Tanggal</th>
                                            <th class="border-bottom-0">Kota</th>
                                            <th class="border-bottom-0">Alamat</th>
                                            <th class="border-bottom-0">Status</th>
                                            <th class="border-bottom-0">Keterangan</th>
                                            <th class="border-bottom-0">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                         @foreach ( $seminar as $dataseminar )
                                        <tr>
                                            <td>{{ $dataseminar->nama_seminar }}</td>
                                            <td>
                                               {{ $dataseminar->tanggal }}
                                            </td>
                                            <td>{{ $dataseminar->kota->name }}</td>
                                            <td>{{ $dataseminar->alamat }}</td>
                                            <td>
                                                @if ($dataseminar->status == 'Aktif')
                                                    <span class="badge rounded-pill bg-info badge-sm me-1 mb-1 mt-1 text-white"> {{ $dataseminar->status }}</span>
                                                @else
                                                    <a href="{{ route('aktif-seminar', $dataseminar->slug) }}" class="badge rounded-pill bg-danger badge-sm me-1 mb-1 mt-1"> {{ $dataseminar->status }}</a>
                                                @endif
                                            </td>
                                            <td>{{ $dataseminar->keterangan }}</td>
                                            <td>
                                                <a href="{{ route('peserta', $dataseminar->slug) }}" type="button" class="btn btn-icon btn-facebook" data-bs-placement="top" data-bs-toggle="tooltip" title="Lihat">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                <a href="{{ route('edit-seminar', $dataseminar->slug) }}" class="btn btn-icon btn-twitter" data-bs-placement="top" data-bs-toggle="tooltip" title="Edit Data">
                                                    <i class="fa fa-pencil-square-o"></i>
                                                </a>
                                                <a  class="btn btn-icon btn-youtube" data-bs-effect="effect-scale" data-bs-toggle="modal" href="#modalHapus" title="Hapus Data"
                                                 data-id="{{ $dataseminar->slug }}"
                                                 data-seminar="{{ $dataseminar->nama_seminar }}"
                                                >
                                                    <i class="fa fa-trash-o"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Row -->

        </div>
        <!-- CONTAINER CLOSED -->

         <!-- MODAL EFFECTS -->
        <div class="modal fade" id="modalHapus">
            <div class="modal-dialog modal-dialog-centered text-center" role="document">
                <div class="modal-content modal-content-demo">
                    <div class="modal-header">
                        <h3 class="modal-title">Hapus Data</h3>
                        <button aria-label="Close" class="btn-close" data-bs-dismiss="modal">
                            <span aria-hidden="true">&times;</span></button>
                    </div>
                    <form class="form" method="post" action="{{ route('hapus-seminar') }}">
                        @csrf
                    <div class="modal-body">
                        <h3>Kamu Yakin <br>ingin menghapus data seminar ini ?</h3>
                        <p>Menghapus data ini dapat menyebabkan data peserta seminar tidak dapat diakses !!!</p>
                        <input type="text" id="seminar" class="form-control mb-4 text-center" disabled>
                            <input type="hidden" name="id" id="id">
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-danger" type="submit">Yakin, Hapus Data</button>
                        <button class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<!--app-content closed-->
@endsection



@push('addon-script')

 <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>

<script>
    $('#modalHapus').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget) // Button that triggered the modal
    var seminar = button.data('seminar')
    var id = button.data('id')

    var modal = $(this)
    modal.find('.modal-body #seminar').val(seminar)
    modal.find('.modal-body #id').val(id)

    })
</script>

@endpush