@section('title', 'Rekapitulasi')
@section('styles')
    <link href="{{ asset('assets/admin/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css') }}" rel="stylesheet">
@endsection
<div>
    <div x-data="{ tab: 'research' }">
        <div class="row g-3 mb-3">
            <div class="col-12 d-flex justify-content-between align-items-center">
                <h3 class="fw-semibold mb-0">Rekapitulasi</h3>
                <div class="d-flex gap-2">
                    <button :class="tab === 'research' ? 'btn-success' : 'btn-outline-success'" class="btn btn-sm" x-data x-on:click="tab = 'research'">Rekapitulasi Penelitian <i class="fa-solid fa-list-check fa-fw ms-2"></i></button>
                    <button :class="tab === 'summary' ? 'btn-info' : 'btn-outline-info'" class="btn btn-sm" x-data x-on:click="tab = 'summary'">Ringkasan Bulanan <i class="fa-solid fa-dollar-sign fa-fw ms-2"></i></button>
                    <template x-if="tab == 'research'">
                        <button class="btn btn-primary btn-sm" wire:click="export" wire:loading.attr="disabled">Export Excel <i class="fa-solid fa-file-excel fa-fw ms-2"></i></button>
                    </template>
                    <template x-if="tab == 'summary'">
                        <button class="btn btn-primary btn-sm" wire:click="exportMonthly" wire:loading.attr="disabled">Export Excel <i class="fa-solid fa-file-excel fa-fw ms-2"></i></button>
                    </template>
                </div>
            </div>
        </div>
        <hr class="my-3">
        <div class="row g-3">
            <div class="col-12" x-show="tab == 'research'" x-transition>
                <div class="card">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-lg-3 col-6 d-flex align-items-center gap-2">
                                <div>Lihat</div>
                                <select class="form-select" wire:model.live="perPage">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <div>Hasil</div>
                            </div>
                            <div class="col-lg-2 col-6">
                                <select class="form-select" wire:model.live="status_filter">
                                    <option value="all">Semua Status</option>
                                    <option value="proses">Dalam Proses</option>
                                    <option value="done">Selesai</option>
                                    <option value="rejected">Ditolak</option>
                                </select>
                            </div>
                            <div class="col-lg-4 col-6 text-end">
                                <div class="input-group input-daterange" x-data x-init="$($refs.input).datepicker({
                                    endDate: '1',
                                    todayHighlight: true,
                                    format: 'yyyy-mm-dd',
                                    orientation: isRtl ? 'auto right' : 'auto left'
                                }).on('change', function(e) {
                                    @this.set('start_date', $('#start_date').val());
                                    @this.set('end_date', $('#end_date').val());
                                });" x-ref="input">
                                    <span class="input-group-text"><i class="fa-light fa-calendar-alt fa-fw"></i></span>
                                    <input class="form-control" id="start_date" placeholder="YYYY-MM-DD" type="text" value="{{ $start_date }}" wire:model.live="start_date">
                                    <span class="input-group-text"><i class="fa-light fa-angle-right fa-fw"></i></span>
                                    <input class="form-control" id="end_date" placeholder="YYYY-MM-DD" type="text" value="{{ $end_date }}" wire:model.live="end_date">
                                </div>
                            </div>
                            <div class="col-lg-3 col-6">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa-regular fa-magnifying-glass fa-fw"></i></span>
                                    <input class="form-control" placeholder="Cari Sesuatu.." type="text" wire:model.live="search">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive scrollbar-x">
                        <table class="table-bordered table">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" rowspan="3">No</th>
                                    <th rowspan="3">No Protokol</th>
                                    <th rowspan="3">Judul</th>
                                    <th rowspan="2">PI</th>
                                    <th rowspan="2">Strata</th>
                                    <th colspan="2">Keikutsertaan manusia sebagai subjek</th>
                                    <th class="text-center" rowspan="2">Pemanfaatan<br>Hewan Coba</th>
                                    <th class="text-center" rowspan="2">Tidak melibatkan manusia<br>dan hewan coba sebagai<br>subjek</th>
                                    <th rowspan="2">Institusi</th>
                                    <th class="text-center" colspan="3">Jalur telaah awal</th>
                                    <th rowspan="2">Reviewer</th>
                                    <th class="text-center" colspan="3">Status Persetujuan</th>
                                    <th class="text-center" colspan="4">Telaah Lanjutan</th>
                                </tr>
                                <tr>
                                    <th class="text-center">Klinik</th>
                                    <th class="text-center">Non Klinik</th>
                                    <th class="text-center">Exempted</th>
                                    <th class="text-center">Expedited</th>
                                    <th class="text-center">Full board</th>
                                    <th class="text-center">Status<br>Penelitian</th>
                                    <th class="text-center">Tanggal<br>penerimaan berkas</th>
                                    <th class="text-center">Tanggal<br>persetujuan</th>
                                    <th class="text-center">Amandemen</th>
                                    <th class="text-center">Protokol<br>deviation/violation</th>
                                    <th class="text-center">SAE</th>
                                    <th class="text-center">Final report</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($research as $result)
                                    <tr>
                                        @php
                                            $researcherMember = $result->researchers()->where('position', 'ketua')->first();
                                            $researcher = $researcherMember?->researcher;
                                            $researcher_detail = $researcher?->researcherDetail;
                                        @endphp
                                        <td class="text-center">{{ $research->currentPage() * $perPage - $perPage + $loop->iteration }}</td>
                                        <td>{{ $result->number }}</td>
                                        <td>{{ Str::limit($result->research_title, 20) }}</td>
                                        <td>{{ $researcher->name ?? '-' }}</td>
                                        <td>{{ $researcher_detail?->degree?->name ?: $researcher_detail?->other_degree ?: '-' }}</td>
                                        <td class="text-center">{{ $result->researchCategory?->name == 'Manusia Sebagai Subyek' ? 'Ya' : '-' }}</td>
                                        <td class="text-center">{{ $result->researchCategory?->name == 'Non Klinik' ? 'Ya' : '-' }}</td>
                                        <td class="text-center">{{ $result->researchCategory?->name == 'Hewan Coba' ? 'Ya' : '-' }}</td>
                                        <td class="text-center">{{ $result->researchCategory?->name == 'Non Klinik' ? '-' : 'Melibatkan' }}</td>
                                        <td>{{ Str::limit($result->research_place, 20) }}</td>
                                        <td class="text-center">{{ $result->research_type == 'exempted' ? 'Ya' : '-' }}</td>
                                        <td class="text-center">{{ $result->research_type == 'expedited' ? 'Ya' : '-' }}</td>
                                        <td class="text-center">{{ $result->research_type == 'full-board' ? 'Ya' : '-' }}</td>
                                        <td>
                                            @if (count($result->researchReviewers))
                                                {{ Str::limit($result->researchReviewers->pluck('user.name')->join(', '), 20, '...') }}
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if ($result->status === 'done')
                                                <span class="badge bg-success">Selesai</span>
                                            @elseif ($result->status === 'rejected')
                                                <span class="badge bg-danger">Ditolak</span>
                                            @elseif ($result->status === 'awaiting-admin-verification')
                                                <span class="badge bg-warning">Verifikasi Admin</span>
                                            @elseif ($result->status === 'awaiting-secretary-verification')
                                                <span class="badge bg-warning">Verifikasi Sekretaris</span>
                                            @elseif ($result->status === 'under-review')
                                                <span class="badge bg-primary">Ditinjau Penelaah</span>
                                            @elseif ($result->status === 'revision')
                                                <span class="badge bg-danger">Direvisi</span>
                                            @else
                                                <span class="badge bg-secondary">{{ ucfirst(str_replace('-', ' ', $result->status)) }}</span>
                                            @endif
                                        </td>
                                        <td class="text-center">{{ $result->researchHistories()->where('description', 'like', '%' . 'Sekretaris' . '%')->orderBy('id', 'asc')->first()?->created_at?->format('d/m/Y') ?? '' }}</td>
                                        <td class="text-center">{{ $result->done_at?->format('d/m/Y') ?? '-' }}</td>
                                        <td class="text-center">{{ $result->amandments->count() }}</td>
                                        <td class="text-center">0</td>
                                        <td class="text-center">-</td>
                                        <td class="text-center">-</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="text-center" colspan="21">Belum Ada Data</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="card-body">
                        <div class="row d-flex align-items-center g-3">
                            <div class="col-lg-6 col-12">Menampilkan {{ $research->firstItem() }} sampai {{ $research->lastItem() }} dari {{ $research->total() }} hasil</div>
                            <div class="col-lg-6 col-12">{{ $research->links('vendor.livewire.bootstrap') }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12" x-show="tab == 'summary'" x-transition>
                <div class="card">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-lg-5 col-6">
                                <div class="row">
                                    <div class="col-lg-6 col-12 d-flex align-items-center gap-2">
                                        <div>Lihat</div>
                                        <select class="form-select" wire:model.live="perPage">
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                        <div class="ms-auto">Hasil</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-6 text-end">
                                <div class="input-group input-daterange" x-data x-init="$($refs.input2).datepicker({
                                    endDate: '1',
                                    todayHighlight: true,
                                    format: 'yyyy-mm-dd',
                                    orientation: isRtl ? 'auto right' : 'auto left'
                                }).on('change', function(e) {
                                    @this.set('start_date', $('#start_date_summary').val());
                                    @this.set('end_date', $('#end_date_summary').val());
                                });" x-ref="input2">
                                    <span class="input-group-text"><i class="fa-light fa-calendar-alt fa-fw"></i></span>
                                    <input class="form-control" id="start_date_summary" placeholder="YYYY-MM-DD" type="text" value="{{ $start_date }}" wire:model.live="start_date">
                                    <span class="input-group-text"><i class="fa-light fa-angle-right fa-fw"></i></span>
                                    <input class="form-control" id="end_date_summary" placeholder="YYYY-MM-DD" type="text" value="{{ $end_date }}" wire:model.live="end_date">
                                </div>
                            </div>
                            <div class="col-lg-3 col-6"></div>
                        </div>
                    </div>
                    <div class="table-responsive scrollbar-x">
                        <table class="table-bordered table">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center">NO</th>
                                    <th>BULAN</th>
                                    <th class="text-end">PENDAPATAN (IDR)</th>
                                    <th class="text-center">PENELITIAN SELESAI</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $total_income = 0;
                                    $total_completed = 0;
                                @endphp
                                @forelse ($summary as $row)
                                    @php
                                        $total_income += $row['income'];
                                        $total_completed += $row['completed'];
                                    @endphp
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td>{{ $row['month'] }}</td>
                                        <td class="text-end">@number($row['income'])</td>
                                        <td class="text-center">{{ $row['completed'] }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="text-center" colspan="4">Belum Ada Data</td>
                                    </tr>
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th class="text-end" colspan="2">TOTAL</th>
                                    <th class="text-end">@number($total_income)</th>
                                    <th class="text-center">{{ $total_completed }}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script src="{{ asset('assets/admin/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js') }}"></script>
@endpush