@extends('layouts.master')

@push('styles')
    <style>
        .float {
            position: fixed !important;
            width: 60px !important;
            height: 60px !important;
            bottom: 40px !important;
            right: 40px !important;
            background-color: #25d366 !important;
            color: #FFF !important;
            border-radius: 50% !important;
            text-align: center !important;
            font-size: 30px !important;
            box-shadow: 2px 2px 3px #999 !important;
            z-index: 99999 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-decoration: none !important;
        }

        .my-float {
            margin: 0 !important;
        }

        .float:hover {
            background-color: #20ba5a !important;
            transform: scale(1.1) !important;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Daftar Masukkan OPD</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama</th>
                                        <th>Nama OPD</th>
                                        <th>Masukkan</th>
                                        <th>INI LUPA</th>
                                        <th style="width: 160px; vertical-align: top; text-align: center;">TTD</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($fpr->masukanFpr as $key => $dt)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $dt->user->name }}</td>
                                            <td>{{ $dt->opd->nama_opd }}</td>
                                            <td>{{ $dt->masukan }}</td>
                                            <td>-</td>
                                            <td>
                                                @if($dt->ttd)
                                                    @php
                                                        $ttdData = json_decode($dt->ttd, true);
                                                    @endphp
                                                    @if(isset($ttdData['dataURL']))
                                                        <img src="{{ $ttdData['dataURL'] }}" alt="Tanda Tangan" style="max-width: 150px; max-height: 100px;">
                                                    @else
                                                        Tidak ada tanda tangan
                                                    @endif
                                                @else
                                                    Tidak ada tanda tangan
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center">Tidak ada data</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tombol WhatsApp Mengambang -->
    <a href="https://wa.me/6281358721520" class="float" target="_blank">
        <i class="fab fa-whatsapp my-float"></i>
    </a>
@endsection