@extends('layouts.index')

@push('style')
    <style>
        .card img {
            transition: transform .2s ease;
        }

        .card:hover img {
            transform: scale(1.05);
        }
    </style>
@endpush)

@section('content')
    <div class="row">
        <!-- DataTable with Hover -->
        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Daftar Layanan</h6>
                </div>
                <div class="table-responsive p-3">
                    <table class="table align-items-center table-flush table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>#</th>
                                <th>Layanan</th>
                                <th>Jumlah</th>
                                <th>Harga Layanan</th>
                                <th>Sub Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($data->obatRm as $obat)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $obat->obat->nama_obat }}</td>
                                    <td>{{ $obat->jumlah }}</td>
                                    <td>Rp. {{ number_format($obat->harga) }}</td>
                                    <td>Rp. {{ number_format($obat->jumlah * $obat->harga) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4" align="right"> <b>Total</b></td>
                                <td><b>Rp. {{ number_format($data->total) }}</b></td>
                            </tr>
                            <tr>
                                <td colspan="4" align="right"> <b>Diskon</b></td>
                                <td><b>Rp. {{ number_format(($data->total * $data->diskon) / 100) }}</b></td>
                            </tr>
                            <tr>
                                <td style="font-size: 20px;" colspan="4" align="right"> <b>Total Akhir</b></td>
                                <td style="font-size: 20px;"> <b>Rp. {{ number_format($data->total_dengan_diskon) }}</b>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Detail Rekam Medis</h6>
                </div>
                <div class="table-responsive p-3">
                    <table class="py-3">
                        <tr>
                            <td>Nomor Rekam Medis</td>
                            <td> : </td>
                            <td class="text-primary font-weight-bold"> {{ $data->nomor_rekam_medis }} </td>
                        </tr>
                        <tr>
                            <td>Tgl Periksa</td>
                            <td> : </td>
                            <td class="text-primary font-weight-bold"> {{ $data->tgl_periksa }} </td>
                        </tr>
                        <tr>
                            <td>Pasien</td>
                            <td> : </td>
                            <td class="text-primary font-weight-bold"> {{ $data->pasien->nama_pasien }} </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>Keluhan</td>
                            <td> : </td>
                            <td class="font-weight-bold"> {{ $data->keluhan }} </td>
                        </tr>
                        <tr>
                            <td>Diagnosa</td>
                            <td> : </td>
                            <td class="font-weight-bold"> {{ $data->diagnosa }} </td>
                        </tr>
                        <tr>
                            <td>Penanganan</td>
                            <td> : </td>
                            <td class="font-weight-bold"> {{ $data->penanganan }} </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Daftar Terapis Yang Menangani</h6>
                </div>
                <div class="table-responsive p-3">
                    <table class="table align-items-center table-flush table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>#</th>
                                <th>Nama Terapis</th>
                                <th>No. Hp</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($data->dokterRm as $dokter)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $dokter->dokter->nama_dokter }} <b>({{ $dokter->jenis_terapis }})</b> </td>
                                    <td>{{ $dokter->dokter->no_hp }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        @if ($data->fotos->count() > 0)
            <div class="col-lg-12">
                <div class="card mb-4">
                    <div class="card-header py-3 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold text-primary">
                            Foto Rekam Medis
                        </h6>
                        <span class="badge badge-info">
                            {{ $data->fotos->count() }} foto
                        </span>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            @foreach ($data->fotos as $foto)
                                <div class="col-md-3 col-sm-4 col-6 mb-4">
                                    <div class="card h-100 shadow-sm">
                                        <a href="{{ asset('storage/' . $foto->path) }}" target="_blank">
                                            <img src="{{ asset('storage/' . $foto->path) }}" class="card-img-top img-fluid"
                                                style="height: 180px; object-fit: cover;" alt="Foto Rekam Medis">
                                        </a>

                                        <div class="card-body p-2">
                                            <small class="text-muted d-block text-truncate">
                                                {{ $foto->original_name }}
                                            </small>
                                            <small class="text-muted">
                                                {{ number_format($foto->size / 1024, 0) }} KB
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="col-lg-12">
                <div class="alert alert-light text-center">
                    <i class="fa fa-image text-muted"></i><br>
                    Tidak ada foto rekam medis.
                </div>
            </div>
        @endif

    </div>
@endsection