@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">WASIT</h1>
            </div>

        </div>
        <div class="container">

            <div class="d-flex flex-wrap mt-5 justify-content-between">
                <h3 class="fw-bold ">DATA WASIT</h3>
                <!-- Search form -->
                <form action="{{ route('searchWasit') }}" 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 ">
                <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">Sertifikat</th>
                                <th class="text-center">Pengalaman Menjadi Wasit</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($wasit as $item)
                                <tr>
                                    <td class="text-center fw-bold" ROWSPAN="{{ $item->sertifikatWasit->count() + 1 }}">
                                        {{ $loop->iteration }}.
                                    </td>
                                    <td class="text-center fw-bold" ROWSPAN="{{ $item->sertifikatWasit->count() + 1 }}">
                                        <a class="link" id="show_bio" data-bs-toggle="modal" style="cursor: pointer;"
                                            data-photo="{{ asset('images/wasit/' . $item->user->photo) }}"
                                            data-nama="{{ $item->nama_lengkap }}" data-alamat="{{ $item->alamat_domisili }}"
                                            data-umur="{{ $item->umur }}" data-cabor="{{ $item->cabor }}"
                                            data-no_telp="{{ $item->no_telp }}"
                                            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->sertifikatWasit->count() + 1 }}">
                                        {{ $item->asal_kota }}
                                    </td>
                                    <td class="text-center" ROWSPAN="{{ $item->sertifikatWasit->count() + 1 }}">
                                        {{ $item->cabor }}
                                    </td>
                                    <td class="text-center" ROWSPAN="{{ $item->sertifikatWasit->count() + 1 }}">
                                        {{ $item->level }}
                                    </td>
                                    @if ($item->sertifikat == '')
                                        <td class="text-center" ROWSPAN="{{ $item->sertifikatWasit->count() + 1 }}"><a
                                                id="show" class="btn btn-secondary text-white">Tidak
                                                Disertakan
                                            </a></td>
                                    @else
                                        <td class="text-center" ROWSPAN="{{ $item->sertifikatWasit->count() + 1 }}"><a
                                                id="show" class="btn btn-info text-white"
                                                data-sertifikat="{{ asset('documents/wasit/' . $item->sertifikat . '#toolbar=0&navpanes=0&') }}"
                                                data-bs-toggle="modal" data-bs-target="#sertifikat">
                                                <i class="bi bi-patch-check mr-2"></i>Sertifikat
                                            </a></td>
                                    @endif
                                </tr>
                                @foreach ($item->sertifikatWasit as $item)
                                    <tr>
                                        <td class="text-center">
                                            {{ $item->pengalaman_melatih }}
                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                </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>
                                <tr class="border-bottom py-2">
                                    <td>Alamat</td>
                                    <td class="px-3">:</td>
                                    <td class="fw-bold border-bottom" id="alamat"></td>
                                </tr>
                                <tr class="border-bottom py-2">
                                    <td>Contact</td>
                                    <td class="px-3">:</td>
                                    <td class="fw-bold border-bottom" id="no_telp"></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 alamat = $(this).data('alamat');
                let cabor = $(this).data('cabor');
                let no_telp = $(this).data('no_telp');



                $('#photo').attr('src', photo);
                $('#nama').text(nama);
                $('#umur').text(umur);
                $('#jenis_kelamin').text(jenis_kelamin);
                $('#alamat').text(alamat);
                $('#cabor').text(cabor);
                $('#no_telp').text(no_telp);
            });
        </script>
    @endpush
@endsection