@extends('layouts.main')

@section('style')
    <!-- CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- CSS Select2 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
@endsection

@section('content')
<div class="container-fluid">
    @if(Session::has('success'))
        <div class="alert alert-success">
            {{ Session::get('success') }}
        </div>
    @endif

    @if(Session::has('error'))
        <div class="alert alert-danger">
            {{ Session::get('error') }}
        </div>
    @endif

    <!-- DataTales import -->
    <br>
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-info">Table Peserta<h6><br>
            <div class="d-grid gap-2 d-md-flex justify-content-md-left">
                <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-8 my-2 my-md-0 mw-100"
                    method="GET" action="/public/mitra_umi">
                    <div class="input-group">
                        <select name="tuk" id="filter_tuk" class="form-control form-control-lg" onchange="filter()">
                            <option value=""><b>Pilih TUK</b></option>
                            <option value=""><b>Semua TUK</b></option>
                            <option value="Yogyakarta"{{ Request::get('tuk') == 'Yogyakarta' ? 'selected' : '' }}>
                                Yogyakarta
                            </option>
                           <option value="Solo"{{ Request::get('tuk') == 'Solo' ? 'selected' : '' }}>Solo
                                        </option>
                                        <option
                                            value="Purbalingga"{{ Request::get('tuk') == 'Purbalingga' ? 'selected' : '' }}>
                                            Purbalingga</option>
                                        <option value="Semarang"{{ Request::get('tuk') == 'Semarang' ? 'selected' : '' }}>
                                            Semarang
                                        </option>
                                        <option value="Purwodadi"{{ Request::get('tuk') == 'Purwodadi' ? 'selected' : '' }}>
                                            Purwodadi</option>
                                        <option value="Blora"{{ Request::get('tuk') == 'Blora' ? 'selected' : '' }}>Blora
                                        </option>
                                        <option value="Tegal"{{ Request::get('tuk') == 'Tegal' ? 'selected' : '' }}>Tegal
                                        </option>
                                        <option
                                            value="Pekalogan"{{ Request::get('tuk') == 'Pekalongan' ? 'selected' : '' }}>
                                            Pekalongan</option>
                                        <option value="Best Kanwil"{{ Request::get('tuk') == 'Best k' ? 'selected' : '' }}>
                                            Best
                                            Kanwil</option>
                                        <option value="Kudus"{{ Request::get('tuk') == 'Kudus' ? 'selected' : '' }}>Kudus
                                        </option>
                                        <option value="Pati"{{ Request::get('tuk') == 'Pati' ? 'selected' : '' }}>Pati
                                        </option>
                                        <option value="Sendik"{{ Request::get('tuk') == 'Sendik' ? 'selected' : '' }}>
                                            Sendik
                                        </option>
                                        <option
                                            value="Bangkalan"{{ Request::get('tuk') == 'Bangkalan' ? 'selected' : '' }}>
                                            Bangkalan</option>
                                        <option
                                            value="Mojokerto"{{ Request::get('tuk') == 'Mojokerto' ? 'selected' : '' }}>
                                            Mojokerto</option>
                                        <option value="Lamongan"{{ Request::get('tuk') == 'Lamongan' ? 'selected' : '' }}>
                                            Lamongan
                                        </option>
                                        <option
                                            value="Bojonegoro"{{ Request::get('tuk') == 'Bojonegoro' ? 'selected' : '' }}>
                                            Bojonegoro</option>
                                        <option value="Kediri"{{ Request::get('tuk') == 'Kediri' ? 'selected' : '' }}>
                                            Kediri
                                        </option>
                                        <option value="Nganjuk"{{ Request::get('tuk') == 'Nganjuk' ? 'selected' : '' }}>
                                            Nganjuk
                                        </option>
                                        <option value="Madiun"{{ Request::get('tuk') == 'Madiun' ? 'selected' : '' }}>
                                            Madiun
                                        </option>
                                        <option value="Jember"{{ Request::get('tuk') == 'Jember' ? 'selected' : '' }}>
                                            Jember
                                        </option>
                                        <option value="Malang"{{ Request::get('tuk') == 'Malang' ? 'selected' : '' }}>
                                            Malang
                                        </option>
                                        <option value="Pemalang"{{ Request::get('tuk') == 'Pemalang' ? 'selected' : '' }}>
                                            Pemalang
                                        </option>
                                        <option value="pemalang"{{ request::get('tuk') == 'pemlang' ? 'selected' : ''}}></option>
                                    </select>
                        </select>
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-info btn-sm">Cari TUK</button>
                        </div>
                    </div>
                </form>
                <!-- Tombol template -->
                <a href="/public/mitra_umi/export">
                    <button type="button" class="btn btn-info ">
                        Tempalte Excel
                    </button>
                </a>
                <!-- Tombol import -->
                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#importModal">
                    Import
                </button>
                   <!-- Modal -->
                            <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="importModalLabel">Import data</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <form action="{{ route('mitraumi.import') }}" method="post"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label for="formFile" class="form-label">upload data</label>
                                                    <div class="text text-danger">
                                                        <p>1. Pastikan file yang diimport memiliki format CSV"
                                                            yang berjumlah 26 kolom <br>
                                                            2. Pastikan NIK dan NO/ID tidak sama pada data yang sudah diinput
                                                        </p>
                                                    </div>
                                                    <input class="form-control" type="file" name="file">
                                                    @error('file')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary">Save changes</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                <!-- Tombol create -->
                <a href="/public/mitra_umi/create">
                    <button type="button" class="btn btn-info">
                        <i class="fas fa-fw fa-plus"></i>
                    </button>
                </a>
            </div>
        </div>
        <!-- Tabel -->
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead class="table-default">
                        <tr class="text-center">
                            <th>ID</th>
                            <th>Nama Lengkap</th>
                            <th>NIK</th>
                            <th>Jenis Kelamin</th>
                            <th>Tempat Lahir</th>
                            <th>Tanggal Lahir</th>
                            <th>HP</th>
                            <th>TUK</th>
                            <th>HUK</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($asesmen as $a)
                            <tr class="text-center">
                                <td>{{ $a->id }}</td>
                                <td>
                                    <a class="nav nav-link" href='/public/mitra_umi/{{ $a->id }}/detail'>
                                        {{ $a->nama_lengkap }}
                                    </a>
                                </td>
                                <td>{{ $a->nik }}</td>
                                <td>{{ $a->jenis_kelamin }}</td>
                                <td>{{ $a->tempat_lahir }}</td>
                                <td>{{ $a->tgl_lahir }}</td>
                                <td>{{ $a->telp_hp }}</td>
                               
                                <td>{{ $a->tuk }}</td>
                                <td>{{ $a->keputusan_asesmen }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
    <script type="text/javascript">
        $(document).ready(function() {
            var table = $('#dataTable').DataTable({
                dom: 'C<"clear">Bfrtip',
                buttons: ['copy', 'csv', 'excel', 'print'],
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#filter_tuk').select2();
        });
    </script>
    <!-- JavaScript Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <!-- JavaScript Select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
@endsection