@extends('layouts.master')
@section('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>
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h4>Daftar Isian Contoh Peil Banjir</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Contoh Peil Banjir</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($isian_contoh_peil_banjir as $key => $isian)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $isian->nama }}</td>
                                            <td>
                                            @if(auth()->user()->to_role->d_contoh_isian_pb == 1)
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('isian_contoh_peil_banjir.download', $isian->id) }}"
                                                        class="btn btn-primary btn-sm">
                                                        <i class="fas fa-download"></i>
                                                    </a>
                                                </div>
                                                @endif
                                                @if(auth()->user()->to_role->u_contoh_isian_pb == 1)
                                                <div class="btn-group" role="group">
                                                        <button type="button" class="btn btn-success btn-sm"
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#formModal"
                                                        data-id="{{ $isian->id }}">
                                                        <i class="fas fa-upload"></i>
                                                    </button>
                                                </div>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center">Tidak ada data</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="formModalLabel">Form Isian</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="#" id="uploadForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="file" class="form-label">File</label>
                            <input type="file" class="form-control" id="file" name="file" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </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>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('formModal');
            modal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-id');
                const form = document.getElementById('uploadForm');
                form.action = `/isian_contoh_pengurugan/upload/${id}`;
            });
        });
    </script>
    @endpush
@endsection