@extends('template')

@section('content')
    <div class="h-screen pt-5">
        <div class="py-5 "style="background-color:#333;margin-top:53px;">
            <div class="container ">
                <h1 class="text-white text-center fw-bold hidden">PELATIH</h1>
            </div>

        </div>
        <div class="container">
            <div class="d-flex flex-wrap mt-5 justify-content-between">
                <h3 class="fw-bold ">DATA PELATIH</h3>
                <!-- Search form -->
                <form action="{{ route('searchPelatih') }}" method="post"
                    class=" form-inline d-flex justify-content-center align-items-center md-form form-sm">
                    @csrf
                    <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                        aria-label="Search" name="search">
                    <button class="no-background p-0" type="submit"><i class="fas fa-search "
                            aria-hidden="true"></i></button>

                </form>
                <!-- Search form -->
            </div>
            <div class="card mb-5">
                <div class="card-body" style="overflow-x:auto;">
                    <table class="table "id="table1">
                        <thead class="thead-dark">
                            <tr>
                                <th class="text-center">No.</th>
                                <th class="text-center fw-bold">Nama</th>
                                <th class="text-center ">Kab/Kota</th>
                                <th class="text-center ">Cabor</th>
                                <th class="text-center">Level Pelatih</th>
                                <th class="text-center">Pengalaman Melatih</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($pelatih as $item)
                                <tr>
                                    <td class="text-center fw-bold" ROWSPAN="{{ $item->sertifikatPelatih->count() + 1 }}">
                                        {{ $loop->iteration }}.
                                    </td>
                                    <td class="text-center fw-bold table-hv" style=" padding: 10px !important;"
                                        ROWSPAN="{{ $item->sertifikatPelatih->count() + 1 }}">
                                        <a class="link" id="show_bio" data-bs-toggle="modal" style="cursor: pointer;"
                                            data-photo="{{ asset('images/pelatih/' . $item->user->photo) }}"
                                            data-nama="{{ $item->nama_lengkap }}" data-umur="{{ $item->umur }}"
                                            data-cabor="{{ $item->cabor }}"
                                            data-jenis_kelamin="{{ $item->jenis_kelamin == 0 ? 'Laki-Laki' : 'Perempuan' }}"
                                            data-bs-target="#biodata">{{ $item->nama_lengkap }}</a>

                                    </td>
                                    <td class="text-center" ROWSPAN="{{ $item->sertifikatPelatih->count() + 1 }}">
                                        {{ $item->asal_kota }}
                                    </td>
                                    <td class="text-center" ROWSPAN="{{ $item->sertifikatPelatih->count() + 1 }}">
                                        {{ $item->cabor }}
                                    </td>
                                    <td class="text-center" ROWSPAN="{{ $item->sertifikatPelatih->count() + 1 }}">
                                        {{ $item->level }}
                                    </td>

                                </tr>
                                @foreach ($item->sertifikatPelatih as $item)
                                    <tr>
                                        <td class="text-center">
                                            {{ $item->pengalaman_melatih }}
                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                    <div class="center">

                        {{ $pelatih->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>



    </div>
    <!-- Modal PDf sertifikat -->
    <div class="modal fade" id="sertifikat" oncontextmenu="return false">
        <div class="modal-dialog modal-dialog-centered modal-lg"oncontextmenu="return false">
            <div class="modal-content" oncontextmenu="return false">
                <div id="my-iframe">

                    <iframe id="inframe" height="700px" width="100%"></iframe>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal PDF Sertifikat --}}

    {{-- Modal Biodata start --}}
    <div class="modal fade" id="biodata">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title" id="exampleModalLabel">Biodata</h5>
                    <button type="button" class="close text-white" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body d-flex flex-lg-row flex-column">
                    <div class="mr-lg-5 my-3  ">
                        <img style="height:200px;border-radius:10px" id="photo" alt="">
                    </div>
                    <div class="align-self-center ">
                        <table>
                            <tbody>
                                <tr class="border-bottom py-2">
                                    <td style="min-width: 150px">Nama</td>
                                    <td class="px-3">:</td>
                                    <td class="fw-bold border-bottom" id="nama"></td>
                                </tr>
                                <tr class="border-bottom py-2">
                                    <td>Umur</td>
                                    <td class="px-3">:</td>
                                    <td class="fw-bold border-bottom" id="umur"></td>
                                </tr>
                                <tr class="border-bottom py-2">
                                    <td>Jenis Kelamin</td>
                                    <td class="px-3">:</td>
                                    <td class="fw-bold border-bottom" id="jenis_kelamin"></td>
                                </tr>
                                <tr class="border-bottom py-2">
                                    <td>Cabang Olahraga</td>
                                    <td class="px-3">:</td>
                                    <td class="fw-bold border-bottom" id="cabor"></td>
                                </tr>


                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
    {{-- Modal Biodata end --}}








    @push('modal-stuff')
        <script>
            $(document).on('click', '#show', function() {
                let sertifikat = $(this).data('sertifikat');

                $('#inframe').attr('src', sertifikat);
            });
            $(document).on('click', '#show_bio', function() {
                let photo = $(this).data('photo');
                let nama = $(this).data('nama');
                let umur = $(this).data('umur');
                let jenis_kelamin = $(this).data('jenis_kelamin');

                let cabor = $(this).data('cabor');



                $('#photo').attr('src', photo);
                $('#nama').text(nama);
                $('#umur').text(umur);
                $('#jenis_kelamin').text(jenis_kelamin);

                $('#cabor').text(cabor);

            });
        </script>
    @endpush
@endsection