@extends('backoffice.layouts.main')

@section('title', 'Skrining')

@section('content')
<!-- Content -->

<h4 class="fw-bold py-3 mb-4">Skrining</h4>

<!-- Basic Bootstrap Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between">
        <h5>Daftar Skrining</h5>
        <form action="{{route('bo.skrining')}}" method="GET">
            @csrf
            <input type="hidden" name="export" value="true">
            <a href="{{route('bo.skrining', ['export' => true])}}" class="btn btn-success">Export Excel</a>
        </form>
    </div>


    <div class="card-body">
        <form class="mb-3" action="{{route('bo.skrining')}}" method="GET">
            @csrf
            <div class="row mb-3">
                <div class="col-6 form-group">
                    <label for="start_date" class="form-label">Awal</label>
                    <input value="{{$data['start_date']}}" class="form-control" type="date" name="start_date" id="start_date">
                </div>
                <div class="col-6  form-group">
                    <label for="end_date" class="form-label">Akhir</label>
                    <input value="{{$data['end_date']}}" class="form-control" type="date" name="end_date" id="end_date">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-6 form-group">
                    <label for="kota_uuid" class="mb-2">Kota</label>
                    <select class="form-select select2" id="kota_uuid" name="kota_uuid">
                        <option selected value="">Seluruh Kota</option>
                        @foreach ($data['kota'] as $item)
                        <option @if ($item->uuid == $data['kota_uuid'])
                            selected
                        @endif value="{{$item->uuid}}">{{$item->nama}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 form-group">
                    <label for="status" class="mb-2">Diagonsa</label>
                    <select class="form-select select2" id="status" name="status">
                        <option selected value="">Seluruh Diagnosa</option required>
                        <option @if ($data['status'] == 1)
                            selected
                        @endif value="1">Ya</option>
                        <option @if ($data['status'] == 2)
                        selected 
                        @endif value="2">Tidak</option>
                        <option @if ($data['status'] == 3)
                        selected
                        @endif value="3">Kemungkinan</option>
                    </select>
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-100 mt-3">Filter</button>
        </form>

        <table class="table data-table">
            <thead>
                <tr>
                    <th>No HP</th>
                    <th class="text-center">Kota</th>
                    <th class="text-center">Diagnosa</th>
                    <th class="text-center">Dibuat Pada</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="table-border-bottom-0">
                @foreach ($data['skrining'] as $item)
                <tr>
                    <td>{{$item->no_hp}}</td>
                    <td class="text-center">{{$item->kota->nama}}</td>
                    <td class="text-center">
                        @switch($item->hasil)
                        @case(1)
                        <span class="badge rounded-pill bg-danger">Ya</span>
                        @break
                        @case(2)
                        <span class="badge rounded-pill bg-success">Tidak</span>
                        @break
                        @case(3)
                        <span class="badge rounded-pill bg-warning">Kemungkinan</span>
                        @break
                        @endswitch
                    </td>
                    <td class="text-center">{{$item->created_at}}</td>
                    <td class="text-center">
                        <button data-bs-toggle="modal" data-bs-target="#detailModal-{{$item->uuid}}"
                            class="btn btn-success">
                            <i class="fas fa-eye"></i>
                        </button>
                    </td>
                </tr>

                <!-- Detail Modal -->
                <div class="modal fade" id="detailModal-{{$item->uuid}}" tabindex="-1"
                    aria-labelledby="detailModalLabel-{{$item->uuid}}" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content" style="height: 600px !important; overflow: auto">
                            <div class="modal-header">
                                <h5 class="modal-title" id="detailModalLabel-{{$item->uuid}}">Detail Skrining</h5>
                            </div>
                            <div class="modal-body ">
                                <h5>Data</h5>
                                <ul class="list-group w-100 mb-3">
                                    <li class="list-group-item d-flex justify-content-between">
                                        <span>Usia</span>
                                        <span>{{$item->usia}}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between">
                                        <span>Tingkat Pendidikan</span>
                                        <span>{{$item->tingkat_pendidikan}}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between">
                                        <span>Status Pernikahan</span>
                                        <span>{{$item->status_pernikahan}}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between">
                                        <span>Penghasilan</span>
                                        <span>{{$item->penghasilan}}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between">
                                        <span>Kebiasaan Merokok</span>
                                        <span>{{$item->kebiasaan_merokok}}
                                            @if ($item->kebiasaan_merokok != 'Tidak Merokok')
                                            {{$item->jumlah_merokok}}
                                            @if ($item->kebiasaan_merokok == 'Merokok')
                                            Batang
                                            @else
                                            ml
                                            @endif
                                            /Hari
                                            @endif
                                        </span>
                                    </li>
                                </ul>

                                <h5>Jawaban</h5>
                                <ul class="list-group w-100">
                                    @foreach ($item->jawaban as $item2)
                                    <li class="list-group-item d-flex justify-content-between">
                                        <span>{{$loop->iteration}}. {{$item2->pertanyaan->nama}}</span>
                                        <span
                                            class="badge rounded-pill bg-{{$item2->jawab ? 'success' : 'danger'}}">{{$item2->jawab ? 'YA' : 'TIDAK'}}</span>
                                    </li>
                                    @endforeach
                                </ul>

                                @switch($item->hasil)
                                @case(1)
                                <div class="text-center mt-3">
                                    <div class="col-12">
                                        <h2 class="mb-3">Hasil Skrining</h2>
                                        <div class="alert alert-danger w-100 p-2" role="alert">
                                            <small class="alert-heading">Kemungkinan Mengalami Andropause!</small>
                                        </div>
                                    </div>
                                </div>
                                @break
                                @case(2)
                                <div class="text-center mt-3">
                                    <div class="col-12">
                                        <h2 class="mb-3">Hasil Skrining</h2>
                                        <div class="alert alert-success w-100 p-2" role="alert">
                                            <small class="alert-heading">Kecil kemungkinan mengalami Andropause!</small>
                                        </div>
                                    </div>
                                </div>
                                @break

                                @case(3)
                                <div class="text-center mt-3">
                                    <div class="col-12">
                                        <h2 class="mb-3">Hasil Skrining</h2>
                                        <div class="alert alert-warning w-100 p-2" role="alert">
                                            <small class="alert-heading">Kecil kemungkinan mengalami Andropause!</small>
                                        </div>
                                    </div>
                                </div>
                                @break

                                @endswitch
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </tbody>
        </table>
    </div>

</div>
</div>
<!--/ Basic Bootstrap Table -->

@if (session('error'))
<script>
    Swal.fire({
        title: 'Proses Gagal',
        text: '{{session("error")[1]}} | Line : {{session("error")[2]}}',
        icon: 'error',
        confirmButtonText: 'Tutup'
    })

</script>
@endif
@endsection