@extends('dashboard.layouts.app')

@section('title', 'Data Jalan')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Data Jalan</h5>
            <div class="btn-group">
                <form method="POST" action="{{ route('jalan.import-strategi') }}" style="display: inline;" onsubmit="return confirm('Apakah Anda yakin ingin mengimpor strategi dari GeoJSON?')">
                    @csrf
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-file-import"></i> Import Strategi
                    </button>
                </form>
                <form method="POST" action="{{ route('jalan.import-program') }}" style="display: inline;" onsubmit="return confirm('Apakah Anda yakin ingin mengimpor program dari GeoJSON?')">
                    @csrf
                    <button type="submit" class="btn btn-info">
                        <i class="fas fa-file-import"></i> Import Program
                    </button>
                </form>
                <form method="POST" action="{{ route('jalan.import-kegiatan') }}" style="display: inline;" onsubmit="return confirm('Apakah Anda yakin ingin mengimpor kegiatan dari GeoJSON?')">
                    @csrf
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-file-import"></i> Import Kegiatan
                    </button>
                </form>
                <form method="POST" action="{{ route('jalan.import-geojson') }}" style="display: inline;" onsubmit="return confirm('Apakah Anda yakin ingin mengimpor data GeoJSON ke tabel jalan? Proses ini mungkin memakan waktu.')">
                    @csrf
                    <button type="submit" class="btn btn-secondary">
                        <i class="fas fa-file-import"></i> Import GeoJSON
                    </button>
                </form>
                <a href="{{ route('jalan.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Tambah Data
                </a>
            </div>
        </div>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('jalan.index') }}" class="mb-3">
            <div class="input-group">
                <input type="text" class="form-control" name="search"
                    value="{{ request('search') }}" placeholder="Cari nama jalan...">
                <button class="btn btn-outline-secondary" type="submit">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </form>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('import_errors'))
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <h6 class="alert-heading">Detail Error Import ({{ session('error_count') }} error):</h6>
                <hr>
                <pre class="mb-0" style="white-space: pre-wrap; font-size: 0.85rem; max-height: 400px; overflow-y: auto;">{{ session('import_errors') }}</pre>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama Jalan</th>
                        <th>Panjang (m)</th>
                        <th>Lebar (m)</th>
                        <th>Tipe Jalan</th>
                        <th>Kondisi</th>
                        <th>Kecamatan</th>
                        <th>Desa</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($jalans as $jalan)
                        <tr>
                            <td>{{ ($jalans->currentPage() - 1) * $jalans->perPage() + $loop->iteration }}</td>
                            <td>{{ $jalan->nama_jalan ?? '-' }}</td>
                            <td>{{ $jalan->panjang_jalan ?? '-' }}</td>
                            <td>{{ $jalan->lebar_jalan ?? '-' }}</td>
                            <td>
                                @if($jalan->tipe_jalan)
                                    Jalan {{ ucfirst($jalan->tipe_jalan) }}
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if($jalan->kondisi_jalan)
                                    <span class="badge bg-{{ $jalan->kondisi_jalan == 'baik' ? 'success' : ($jalan->kondisi_jalan == 'sedang' ? 'warning' : 'danger') }}">
                                        {{ ucfirst($jalan->kondisi_jalan) }}
                                    </span>
                                @else
                                    -
                                @endif
                            </td>
                            <td>{{ $jalan->kecamatan->nama_kecamatan ?? '-' }}</td>
                            <td>{{ $jalan->desa->nama_desa ?? '-' }}</td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('jalan.show', $jalan) }}" class="btn btn-info btn-sm">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('jalan.edit', $jalan) }}" class="btn btn-warning btn-sm">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form method="POST" action="{{ route('jalan.destroy', $jalan) }}"
                                        style="display: inline;"
                                        onsubmit="return confirm('Apakah Anda yakin ingin menghapus data ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center">Tidak ada data</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($jalans->hasPages())
        <div class="d-flex justify-content-center mt-4">
            <div class="custom-pagination-container">
                <span>
                    @php
                        $currentPage = $jalans->currentPage();
                        $lastPage = $jalans->lastPage();
                        
                        // Selalu tampilkan halaman pertama
                        $showFirst = true;
                        $showLast = true;
                        
                        // Tentukan range halaman yang ditampilkan di tengah
                        $range = 2; // 2 halaman sebelum dan sesudah halaman aktif
                        $startPage = max(1, $currentPage - $range);
                        $endPage = min($lastPage, $currentPage + $range);
                        
                        // Jika halaman pertama sudah termasuk dalam range, jangan tampilkan terpisah
                        if ($startPage <= 1) {
                            $showFirst = false;
                            $startPage = 1;
                        }
                        
                        // Jika halaman terakhir sudah termasuk dalam range, jangan tampilkan terpisah
                        if ($endPage >= $lastPage) {
                            $showLast = false;
                            $endPage = $lastPage;
                        }
                        
                        // Tampilkan halaman pertama
                        if ($showFirst) {
                            $isActive = 1 == $currentPage;
                            $class = $isActive ? 'index active' : 'index';
                            echo '<a href="' . $jalans->url(1) . '" class="' . $class . '" data-page="1">1</a>';
                            
                            // Tampilkan ellipsis jika ada gap
                            if ($startPage > 2) {
                                echo '<span class="index-ellipsis">...</span>';
                            }
                        }
                        
                        // Tampilkan halaman dalam range
                        for ($i = $startPage; $i <= $endPage; $i++) {
                            // Skip halaman pertama dan terakhir jika sudah ditampilkan terpisah
                            if (($showFirst && $i == 1) || ($showLast && $i == $lastPage)) {
                                continue;
                            }
                            
                            $isActive = $i == $currentPage;
                            $class = $isActive ? 'index active' : 'index';
                            echo '<a href="' . $jalans->url($i) . '" class="' . $class . '" data-page="' . $i . '">' . $i . '</a>';
                        }
                        
                        // Tampilkan halaman terakhir
                        if ($showLast) {
                            // Tampilkan ellipsis jika ada gap
                            if ($endPage < $lastPage - 1) {
                                echo '<span class="index-ellipsis">...</span>';
                            }
                            
                            $isActive = $lastPage == $currentPage;
                            $class = $isActive ? 'index active' : 'index';
                            echo '<a href="' . $jalans->url($lastPage) . '" class="' . $class . '" data-page="' . $lastPage . '">' . $lastPage . '</a>';
                        }
                    @endphp
                </span>
                <svg viewBox="0 0 100 100" class="pagination-svg">
                    <circle class="svg-circle" cx="50" cy="50" r="42.857" fill="none" stroke="#2FB468" stroke-width="15" />
                </svg>
            </div>
        </div>
        @endif
    </div>
</div>

<style>
@import url('https://rsms.me/inter/inter-ui.css');

.custom-pagination-container {
    display: inline-block;
    position: relative;
    padding: 6px 30px;
    overflow: visible;
    min-height: 60px;
}

.custom-pagination-container span {
    display: inline-block;
}

.custom-pagination-container .index {
    cursor: pointer;
    display: inline-block;
    margin-right: 29.5px;
    padding: 5px;
    user-select: none;
    -moz-user-select: none;
    text-decoration: none;
    color: #555;
    font-size: 1.25em;
    font-family: 'Inter UI', sans-serif;
    transition: color 0.3s;
    position: relative;
    z-index: 2;
}

.custom-pagination-container .index:last-child {
    margin-right: 0;
}

.custom-pagination-container .index:hover {
    color: #2FB468;
}

.custom-pagination-container .index.active {
    color: #2FB468;
    font-weight: bold;
}

.custom-pagination-container .index-ellipsis {
    display: inline-block;
    margin-right: 29.5px;
    padding: 5px;
    color: #555;
    font-size: 1.25em;
    user-select: none;
}

.custom-pagination-container .pagination-svg {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 500ms ease-in-out;
    width: 46px;
    height: 46px;
    pointer-events: none;
    z-index: 1;
    transform-origin: center;
}

.custom-pagination-container .pagination-svg circle {
    fill: none;
    stroke: #2FB468;
    stroke-dasharray: 270 270;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-width: 15;
    transform-origin: center;
}

.custom-pagination-container:not(.open) .svg-circle {
    stroke-dasharray: 270 270;
    stroke-dashoffset: 0;
    transform: rotate(0deg);
}

.custom-pagination-container.open:not(.flip) .svg-circle {
    animation: PacmanEatRight 500ms ease-in-out;
}

.custom-pagination-container.open.flip .svg-circle {
    animation: PacmanEatLeft 500ms ease-in-out;
}

@keyframes PacmanEatRight {
    0% { stroke-dasharray: 270 270; stroke-dashoffset: 0; transform: rotate(0deg); }
    15% { stroke-dasharray: 200 270; stroke-dashoffset: 0; transform: rotate(0deg); }
    30% { stroke-dasharray: 150 270; stroke-dashoffset: 0; transform: rotate(0deg); }
    50% { stroke-dasharray: 150 270; stroke-dashoffset: 0; transform: rotate(0deg); }
    70% { stroke-dasharray: 200 270; stroke-dashoffset: 0; transform: rotate(0deg); }
    100% { stroke-dasharray: 270 270; stroke-dashoffset: 0; transform: rotate(0deg); }
}

@keyframes PacmanEatLeft {
    0% { stroke-dasharray: 270 270; stroke-dashoffset: 0; transform: rotate(180deg); }
    15% { stroke-dasharray: 200 270; stroke-dashoffset: 0; transform: rotate(180deg); }
    30% { stroke-dasharray: 150 270; stroke-dashoffset: 0; transform: rotate(180deg); }
    50% { stroke-dasharray: 150 270; stroke-dashoffset: 0; transform: rotate(180deg); }
    70% { stroke-dasharray: 200 270; stroke-dashoffset: 0; transform: rotate(180deg); }
    100% { stroke-dasharray: 270 270; stroke-dashoffset: 0; transform: rotate(180deg); }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.custom-pagination-container');
    if (!container) return;
    
    const indexes = Array.from(container.querySelectorAll('.index'));
    const svg = container.querySelector('.pagination-svg');
    let cur = -1;
    
    function updateSvgPosition(index, immediate = false) {
        const indexElement = indexes[index];
        if (!indexElement) return;
        
        const updatePosition = () => {
            const containerRect = container.getBoundingClientRect();
            const indexRect = indexElement.getBoundingClientRect();
            const indexCenterX = indexRect.left - containerRect.left + (indexRect.width / 2);
            const svgWidth = 46;
            const offsetX = indexCenterX - (svgWidth / 2);
            
            if (svg) {
                svg.style.left = '0px';
                svg.style.transform = `translateX(${offsetX}px)`;
            }
        };
        
        if (immediate) {
            updatePosition();
        } else {
            requestAnimationFrame(() => {
                requestAnimationFrame(updatePosition);
            });
        }
    }
    
    const activeIndex = indexes.findIndex(index => index.classList.contains('active'));
    if (activeIndex !== -1) {
        cur = activeIndex;
        container.classList.add('open');
        setTimeout(() => {
            updateSvgPosition(activeIndex, true);
        }, 50);
    }
    
    let resizeTimer;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            if (cur !== -1) {
                updateSvgPosition(cur);
            }
        }, 100);
    });
    
    indexes.forEach((index, i) => {
        index.addEventListener('click', function(e) {
            e.preventDefault();
            const url = this.getAttribute('href');
            if (!url) return;
            
            const isMovingLeft = cur > i;
            container.className = 'custom-pagination-container';
            void container.offsetWidth;
            
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    updateSvgPosition(i, true);
                    setTimeout(() => {
                        container.classList.add('open');
                        if (isMovingLeft) {
                            container.classList.add('flip');
                        } else {
                            container.classList.remove('flip');
                        }
                        cur = i;
                        setTimeout(() => {
                            window.location.href = url;
                        }, 500);
                    }, 10);
                });
            });
        });
    });
});
</script>
@endsection