@extends('layout') 
@section("main")
    <div class="row">
        <div class="col-sm-12" >
            <div class="bg-white p-3" id="mainContent">
                @if(Session::has('response'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{Session::get('message')}}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @elseif(Session::has('message'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{Session::get('message')}}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif 
                <button id="btnAdd" class="btn btn-primary mb-3">Tambah Data</button>
                <button class="btn btn-secondary mb-3" data-bs-toggle="modal" data-bs-target="#importMpdal">Import Data</button>
                <div class="table-responsive table-bordered">
                    <table class="table">
                        <thead>
                            <tr>
                                <th width=5>No.</th>
                                <th>Nama Peserta</th>
                                <th>Sertifikat</th>
                                <th>Nomor Sertifikat</th>
                                <th>Instansi</th>
                                <th>Sebagai</th>
                                <th>Unduh</th>
                                <th width=155>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                           @foreach ($peserta as $item)
                            <tr>
                                <td>{{$loop->iteration}}</td>
                                <td>{{$item->nama_peserta}}</td>
                                <td>{{$item->nama_sertifikat}}</td>
                                <td>{{$item->nomor_sertifikat}}</td>
                                <td>{{$item->instansi_peserta}}</td>
                                <td>{{$item->sertifikat_sebagai}}</td>
                                <td><a href="{{route('peserta.download.sertifikat',['user' => $item->id,'sertifikat' => $item->pesertaid])}}" class="btn btn-sm btn-warning w-100"><i class="fas fa-download"></i></a></td>
                                <td >
                                    <button onclick="return update({{$item->pesertaid}})" class="btn btn-sm btn-outline-primary mb-1"><i class="fas fa-pencil"></i></a></button>
                                    <button onclick="return confirmDel({{$item->pesertaid}})" class="btn btn-sm btn-outline-danger mb-1"><i class="fas fa-trash"></i></a></button>
                                </td>
                            </tr>
                           @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @include('peserta.create') 
        
        <div class="col-lg-8" id="editContent" style="display: none"></div>
        <div class="col-lg-8" id="delContent" style="display: none">
            <div class="bg-white p-3">
                <h4>Konfirmasi</h4>
                <p>Menghapus tidak dapat mengembalikan data. Yakin ingin menghapus data ini?</p>
                <form action="" method="POST" id="delForm">
                    <button class="btn btn-danger" type="submit">Ya, Hapus</button>
                    <button id="btnBack3" class="btn btn-secondary" type="button">Tidak</button>
                    <input type="hidden" id="sertifikatid">
                    @csrf @method("DELETE") 
                </form>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal" id="importMpdal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{route('peserta.upload')}}" method="POST" enctype="multipart/form-data">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Import Data </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label for="">Tambahkan data peserta menggunakan file XLS</label>
                    <input type="file" name="upload_file" class="form-control mb-3" accept=".xls,.xlsx" required>
                    Contoh format dapat diunduh <a href="/samplefile/peserta/samplefile.xlsx">di sini</a>.
                </div>
                <div class="modal-footer">
                    @csrf 
                    <button type="submit" class="btn btn-primary">Import Data</button>
                </div>
                </form>
        </div>
        </div>
    </div>
@include('peserta.js') 
@endsection