@extends('layouts.app')

@section('title', 'Daftar Laporan Jalan')
@section('page-title', 'Daftar Laporan Jalan')

@section('content')
<div class="container-fluid mt-4">
    <div class="card">
        <div class="card-body">
            <div class="mb-4">
                <button class="btn btn-primary" data-toggle="modal" data-target="#addLaporanModal">
                    <i class="fas fa-plus"></i> Tambah Laporan
                </button>
                <button class="btn btn-success" data-toggle="modal" data-target="#rekapModal">
                    <i class="fas fa-file-export"></i> Rekap Laporan
                </button>
            </div>

            <!-- <h5>Daftar Laporan Jalan</h5> -->
            <div class="table-responsive">
                <table class="table table-hover" id="laporanTable">
                    <thead class="thead-light">
                        <tr>
                            <th>No</th>
                            <th>Pelapor</th>
                            <th>Jenis Kerusakan</th>
                            <th>Lokasi</th>
                            <th>Status</th>
                            <th>Tanggal</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($laporanJalan as $index => $laporan)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $laporan->pelapor }}</td>
                            <td>
                                {{ ucfirst($laporan->jenis_rusak) }}
                            </td>
                            <td>
                                {{ $laporan->lokasi }}
                                <button class="btn btn-primary btn-sm view-location" 
                                        data-lat="{{ explode(',', str_replace(['Lat: ', ' Lng: '], '', $laporan->lokasi))[0] }}"
                                        data-lng="{{ explode(',', str_replace(['Lat: ', ' Lng: '], '', $laporan->lokasi))[1] }}"
                                        data-toggle="tooltip" 
                                        title="Lihat Lokasi">
                                    <i class="fas fa-map-marker-alt"></i>
                                </button>
                            </td>
                            <td>
                                <div class="dropdown">
                                    <button class="btn dropdown-toggle status-btn 
                                        {{ $laporan->status === 'menunggu' ? 'btn-warning' : 
                                           ($laporan->status === 'dalam_proses' ? 'btn-info' : 'btn-success') }}"
                                        type="button"
                                        data-toggle="dropdown"
                                        aria-haspopup="true"
                                        aria-expanded="false"
                                        data-id="{{ $laporan->id }}"
                                        style="width: 140px; text-align: left;">
                                        <i class="fas {{ 
                                            $laporan->status === 'menunggu' ? 'fa-clock' : 
                                            ($laporan->status === 'dalam_proses' ? 'fa-tools' : 'fa-check-circle') 
                                        }} mr-2"></i>
                                        {{ str_replace('_', ' ', ucfirst($laporan->status)) }}
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item status-item {{ $laporan->status === 'menunggu' ? 'active' : '' }}" 
                                           href="#" 
                                           data-status="menunggu">
                                            <i class="fas fa-clock text-warning mr-2"></i>
                                            Menunggu
                                        </a>
                                        <a class="dropdown-item status-item {{ $laporan->status === 'dalam_proses' ? 'active' : '' }}" 
                                           href="#" 
                                           data-status="dalam_proses">
                                            <i class="fas fa-tools text-info mr-2"></i>
                                            Dalam Proses
                                        </a>
                                        <a class="dropdown-item status-item {{ $laporan->status === 'selesai' ? 'active' : '' }}" 
                                           href="#" 
                                           data-status="selesai">
                                            <i class="fas fa-check-circle text-success mr-2"></i>
                                            Selesai
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>{{ \Carbon\Carbon::parse($laporan->created_at)->format('d M Y H:i') }}</td>
                            <td>
                                <button class="btn btn-info btn-sm view-foto" 
                                        data-foto="{{ $laporan->foto }}"
                                        data-toggle="tooltip" 
                                        title="Lihat Foto"
                                        {{ !$laporan->foto ? 'disabled' : '' }}>
                                    <i class="fas fa-image"></i>
                                </button>
                                <button class="btn btn-danger btn-sm delete-laporan" 
                                        data-id="{{ $laporan->id }}"
                                        data-lokasi="{{ $laporan->lokasi }}"
                                        data-toggle="tooltip" 
                                        title="Hapus Laporan">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah Laporan -->
<div class="modal fade" id="addLaporanModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Laporan Jalan Baru</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addLaporanForm">
                    <div class="form-group">
                        <label>Lokasi</label>
                        <input type="text" class="form-control" name="lokasi" id="lokasi" required readonly>
                    </div>
                    <div class="form-group">
                        <label>Pilih Lokasi di Peta</label>
                        <div id="map" style="height: 300px;"></div>
                    </div>
                    <div class="form-group">
                        <label>Jenis Kerusakan</label>
                        <select class="form-control" name="jenis_rusak" required>
                            <option value="jalan rusak ringan">Jalan Rusak Ringan</option>
                            <option value="jalan rusak berat">Jalan Rusak Berat</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Deskripsi</label>
                        <textarea class="form-control" name="deskripsi" required></textarea>
                    </div>
                    <div class="form-group">
                        <label>Foto</label>
                        <input type="file" class="form-control" name="foto">
                        <small class="text-muted">Opsional. Format gambar, maksimal 5MB.</small>
                    </div>
                    <input type="hidden" name="latitude" id="latitude" required>
                    <input type="hidden" name="longitude" id="longitude" required>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="saveLaporan">Simpan</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Foto -->
<div class="modal fade" id="fotoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Foto Kerusakan Jalan</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <img id="fotoPreview" src="" alt="Foto Kerusakan Jalan" class="img-fluid">
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Hapus -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi Hapus</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus laporan jalan di lokasi <span id="lokasiText"></span>?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Hapus</button>
            </div>
        </div>
    </div>
</div>

<!-- Tambahkan Modal untuk Peta -->
<div class="modal fade" id="locationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Lokasi Laporan</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="locationMap" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Rekap -->
<div class="modal fade" id="rekapModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Rekap Laporan Jalan</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="rekapForm">
                    <div class="form-group">
                        <label>Periode</label>
                        <select class="form-control" name="periode" id="periode" required>
                            <option value="bulan">Bulanan</option>
                            <option value="tahun">Tahunan</option>
                        </select>
                    </div>
                    <div class="form-group" id="bulanGroup">
                        <label>Bulan</label>
                        <select class="form-control" name="bulan" id="bulan">
                            <option value="1">Januari</option>
                            <option value="2">Februari</option>
                            <option value="3">Maret</option>
                            <option value="4">April</option>
                            <option value="5">Mei</option>
                            <option value="6">Juni</option>
                            <option value="7">Juli</option>
                            <option value="8">Agustus</option>
                            <option value="9">September</option>
                            <option value="10">Oktober</option>
                            <option value="11">November</option>
                            <option value="12">Desember</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Tahun</label>
                        <select class="form-control" name="tahun" id="tahun" required>
                            @for($i = date('Y'); $i >= date('Y')-5; $i--)
                                <option value="{{ $i }}">{{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Format Export</label>
                        <select class="form-control" name="format" required>
                            <option value="pdf">PDF</option>
                            <option value="excel">Excel</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="exportRekap">Export</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
    .card {
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .table thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }
    .badge {
        padding: 0.5em 0.8em;
        font-size: 85%;
    }
    .btn-sm {
        margin: 0 2px;
    }
    .btn-sm i {
        font-size: 0.9rem;
    }
    
    /* Status button styles */
    .status-btn {
        font-size: 0.9rem;
        padding: 0.375rem 0.75rem;
        color: white !important;
    }
    
    .status-btn::after {
        float: right;
        margin-top: 8px;
    }
    
    .dropdown-item {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    .dropdown-item.active,
    .dropdown-item:active {
        background-color: #e9ecef;
        color: #212529;
    }
    
    .dropdown-item:hover {
        background-color: #f8f9fa;
    }
    
    /* Responsive table styles */
    .table-responsive {
        padding: 0;
    }
    
    #laporanTable {
        width: 100% !important;
    }
    
    #laporanTable_wrapper .row {
        margin: 0;
        padding: 15px 0;
    }

    /* Modal styles */
    .modal {
        background: rgba(0, 0, 0, 0.5);
    }
    .modal-backdrop {
        display: none;
    }
    .modal-dialog {
        margin: 1.75rem auto;
        z-index: 1100;
    }
    .modal-content {
        position: relative;
        z-index: 1100;
        background: white;
        box-shadow: 0 3px 8px rgba(0,0,0,.3);
    }
    #addAdminModal {
        z-index: 1050;
    }
    #deleteModal {
        z-index: 1050;
    }
    
    /* Foto Modal Styles */
    #fotoModal .modal-dialog {
        max-width: 90%;
        max-height: 90vh;
        margin: 1.75rem auto;
    }
    
    #fotoModal .modal-content {
        max-height: 90vh;
        overflow: hidden;
    }
    
    #fotoModal .modal-body {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
    }
    
    #fotoModal .img-fluid {
        max-width: 100%;
        max-height: 85vh;
        object-fit: contain;
    }
    
    @media screen and (max-width: 768px) {
        .card-body {
            padding: 0.5rem;
        }
        
        .table td, .table th {
            padding: 0.5rem;
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }
        
        .status-btn {
            font-size: 0.8rem;
            width: 120px !important;
        }
        
        .dropdown-item {
            font-size: 0.8rem;
        }

        #fotoModal .modal-dialog {
            max-width: 95%;
            margin: 0.5rem auto;
        }
        
        #fotoModal .img-fluid {
            max-height: 80vh;
        }
    }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
let laporanIdToDelete = null;
let table = null;

$(document).ready(function() {
    // Inisialisasi tooltip
    $('[data-toggle="tooltip"]').tooltip();

    // Inisialisasi DataTable
    table = $('#laporanTable').DataTable({
        responsive: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/id.json'
        },
        columnDefs: [
            { responsivePriority: 1, targets: 0 }, // Nomor
            { responsivePriority: 2, targets: 2 }, // Jenis Kerusakan
            { responsivePriority: 3, targets: 4 }, // Status
            { responsivePriority: 4, targets: -1 }, // Aksi
            { responsivePriority: 5, targets: 1 }, // Pelapor
            { responsivePriority: 6, targets: 3 }, // Lokasi
            { responsivePriority: 7, targets: 5 }  // Tanggal
        ]
    });

    // Update Status
    $('.status-item').click(function(e) {
        e.preventDefault();
        const status = $(this).data('status');
        const button = $(this).closest('.dropdown').find('.status-btn');
        const laporanId = button.data('id');
        
        $.ajax({
            url: `/jalan/${laporanId}/status`,
            type: 'PUT',
            data: {
                _token: '{{ csrf_token() }}',
                status: status
            },
            success: function(response) {
                if (response.success) {
                    // Update button appearance
                    button.removeClass('btn-warning btn-info btn-success');
                    let newClass = '';
                    let icon = '';
                    
                    switch(status) {
                        case 'menunggu':
                            newClass = 'btn-warning';
                            icon = '<i class="fas fa-clock mr-2"></i>';
                            break;
                        case 'dalam_proses':
                            newClass = 'btn-info';
                            icon = '<i class="fas fa-tools mr-2"></i>';
                            break;
                        case 'selesai':
                            newClass = 'btn-success';
                            icon = '<i class="fas fa-check-circle mr-2"></i>';
                            break;
                    }
                    
                    button.addClass(newClass);
                    button.html(icon + status.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()));
                    
                    // Show success message
                    // alert('Status berhasil diperbarui');
                } else {
                    alert(response.message || 'Gagal mengupdate status');
                }
            },
            error: function() {
                alert('Terjadi kesalahan saat mengupdate status');
            }
        });
    });

    // Lihat foto
    $('.view-foto').click(function() {
        const foto = $(this).data('foto');
        if (foto) {
            $('#fotoPreview').attr('src', '/storage/' + foto);
            $('#fotoModal').modal('show');
        }
    });

    // Hapus laporan
    $('.delete-laporan').click(function() {
        laporanIdToDelete = $(this).data('id');
        const lokasi = $(this).data('lokasi');
        
        $('#lokasiText').text(lokasi);
        $('#deleteModal').modal('show');
    });

    // Konfirmasi hapus
    $('#confirmDelete').click(function() {
        if (laporanIdToDelete) {
            $.ajax({
                url: `/jalan/${laporanIdToDelete}`,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        const row = table.row($(`button[data-id="${laporanIdToDelete}"]`).closest('tr'));
                        row.remove().draw();
                        alert('Laporan jalan berhasil dihapus');
                    } else {
                        alert('Gagal menghapus laporan jalan');
                    }
                },
                error: function() {
                    alert('Terjadi kesalahan saat menghapus laporan jalan');
                }
            });
        }
        $('#deleteModal').modal('hide');
    });

    // Resize table
    $(window).resize(function() {
        table.columns.adjust().responsive.recalc();
    });

    // Tambahkan fungsi untuk menampilkan peta lokasi
    let locationMap = null;

    $('.view-location').click(function() {
        const lat = $(this).data('lat');
        const lng = $(this).data('lng');
        
        $('#locationModal').modal('show');
        
        $('#locationModal').on('shown.bs.modal', function () {
            if (locationMap) {
                locationMap.remove();
            }
            
            locationMap = L.map('locationMap').setView([lat, lng], 15);
            
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© OpenStreetMap contributors'
            }).addTo(locationMap);
            
            L.marker([lat, lng]).addTo(locationMap);
            
            setTimeout(function() {
                locationMap.invalidateSize();
            }, 100);
        });
        
        $('#locationModal').on('hidden.bs.modal', function () {
            if (locationMap) {
                locationMap.remove();
                locationMap = null;
            }
        });
    });

    // Handle perubahan periode
    $('#periode').change(function() {
        if ($(this).val() === 'bulan') {
            $('#bulanGroup').show();
        } else {
            $('#bulanGroup').hide();
        }
    });

    // Export rekap
    $('#exportRekap').click(function() {
        const form = $('#rekapForm');
        const formData = new FormData(form[0]);
        formData.append('_token', '{{ csrf_token() }}');

        const format = formData.get('format');
        const periode = formData.get('periode');
        const tahun = formData.get('tahun');
        const bulan = formData.get('bulan');

        let url = `/jalan/rekap/${format}?tahun=${tahun}`;
        if (periode === 'bulan') {
            url += `&bulan=${bulan}`;
        }

        window.location.href = url;
    });
});

function initMap() {
    var map = L.map('map').setView([-8.132932, 113.221684], 10); // Koordinat awal

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        minZoom: 10.5,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var marker;

    // Event untuk menambahkan marker saat peta diklik
    map.on('click', function(e) {
        if (marker) {
            map.removeLayer(marker); // Hapus marker sebelumnya
        }
        marker = L.marker(e.latlng).addTo(map); // Tambahkan marker baru
        document.getElementById('latitude').value = e.latlng.lat; // Set latitude
        document.getElementById('longitude').value = e.latlng.lng; // Set longitude
        document.getElementById('lokasi').value = `Lat: ${e.latlng.lat}, Lng: ${e.latlng.lng}`; // Set lokasi
    });
}

// Inisialisasi peta saat modal dibuka
$('#addLaporanModal').on('shown.bs.modal', function () {
    initMap();
});

// Kirim laporan jalan
$('#saveLaporan').on('click', function(e) {
    e.preventDefault();
    
    const form = $('#addLaporanForm');
    const formData = new FormData(form[0]);
    formData.append('_token', '{{ csrf_token() }}');

    $.ajax({
        url: '{{ route("jalan.store") }}', // Ganti dengan route yang sesuai
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function(response) {
            if (response.success) {
                alert('Laporan berhasil ditambahkan!');
                form[0].reset();
                $('#addLaporanModal').modal('hide');
                location.reload(); // Reload halaman untuk melihat laporan baru
            } else {
                alert(response.message || 'Gagal menambahkan laporan');
            }
        },
        error: function(xhr) {
            alert('Terjadi kesalahan saat menambahkan laporan: ' + xhr.responseJSON.message);
        }
    });
});
</script>
@endpush