@extends('layouts.master')

@section('content')
<div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Data Demam Berdarah Dungue (DBD)</h1>
        <button type="button" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" data-toggle="modal" data-target="#uploadModal"><i
                class="fas fa-download fa-sm text-white-50"></i> Unggah File</button>
    </div>

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered data-table" id="data-table" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Kecamatan</th>
                            <th>Bulan</th>
                            <th>Tahun</th>
                            <th>Jumlah Kasus</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($dataDBD as $data)
                            <tr>
                                <td>{{ $data->kecamatan->nama_kecamatan }}</td>
                                <td>{{ $data->bulan }}</td>
                                <td>{{ $data->tahun }}</td>
                                <td>{{ $data->jumlah_kasus }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadModalLabel">Unggah File</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Formulir Unggah File -->
                <form id="uploadForm" method="POST" action="{{ route('upload.data') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="file">Pilih File</label>
                        <input type="file" class="form-control-file" id="file" name="file" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Unggah</button>
                </form>
                <!-- Akhir Formulir Unggah File -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
<script>
    $(document).ready(function() {
        @if (session('success'))
            alert('File berhasil diunggah');
        @elseif (session('error'))
            alert('Terjadi kesalahan saat mengunggah file. Silakan coba lagi.');
        @endif

        // Tambahkan event listener untuk submit form
        $(document).on('submit', '#uploadForm', function(e) {
            e.preventDefault(); // Mencegah pengiriman form bawaan

            var formData = new FormData($(this)[0]);

            $.ajax({
                url: '{{ route('upload.data') }}',
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        // Tampilkan modal upload berhasil
                        console.log();

                        // TODO: Lakukan pengolahan data Excel dan tampilkan di tabel
                    } else {
                        // Tampilkan modal upload gagal
                        console.log();
                    }
                },
                error: function(xhr, status, error) {
                    // Tampilkan modal upload gagal
                    console.log();
                }
            });
        });
    });
</script>
@endpush

@push('custom-scripts')

@endpush