@extends('dashboard.layouts.app')

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

@section('content')
    <div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Data Drainase</h5>
            <div class="btn-group">
                <form method="POST" action="{{ route('drainase.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('drainase.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('drainase.import-geojson') }}" style="display: inline;" onsubmit="return confirm('Apakah Anda yakin ingin mengimpor data GeoJSON ke tabel drainase? 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('drainase.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('drainase.index') }}" class="mb-3">
            <div class="input-group">
                <input type="text" class="form-control" name="search"
                    value="{{ request('search') }}" placeholder="Cari nama saluran...">
                <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 Saluran</th>
                            <th>Panjang (m)</th>
                            <th>Lebar (m)</th>
                            <th>Kedalaman (m)</th>
                            <th>Tipe Saluran</th>
                            <th>Kondisi</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($drainases as $drainase)
                            <tr>
                                <td>{{ ($drainases->currentPage() - 1) * $drainases->perPage() + $loop->iteration }}</td>
                                <td>{{ $drainase->nama_saluran }}</td>
                                <td>{{ $drainase->panjang }}</td>
                                <td>{{ $drainase->lebar }}</td>
                                <td>{{ $drainase->kedalaman }}</td>
                                <td>{{ ucfirst($drainase->tipe_saluran) }}</td>
                            <td>
                                <span class="badge bg-{{ $drainase->kondisi == 'Baik' ? 'success' : ($drainase->kondisi == 'Sedang' ? 'warning' : 'danger') }}">
                                    {{ ucfirst($drainase->kondisi) }}
                                </span>
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('drainase.show', $drainase) }}" class="btn btn-info btn-sm">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('drainase.edit', $drainase) }}" class="btn btn-warning btn-sm">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form method="POST" action="{{ route('drainase.destroy', $drainase) }}"
                                        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="8" class="text-center">Tidak ada data</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        
        @if($drainases->hasPages())
        <div class="d-flex justify-content-center mt-4">
            <div class="custom-pagination-container">
                <span>
                    @php
                        $currentPage = $drainases->currentPage();
                        $lastPage = $drainases->lastPage();
                        $showFirst = true;
                        $showLast = true;
                        $range = 2;
                        $startPage = max(1, $currentPage - $range);
                        $endPage = min($lastPage, $currentPage + $range);
                        if ($startPage <= 1) {
                            $showFirst = false;
                            $startPage = 1;
                        }
                        if ($endPage >= $lastPage) {
                            $showLast = false;
                            $endPage = $lastPage;
                        }
                        if ($showFirst) {
                            $isActive = 1 == $currentPage;
                            $class = $isActive ? 'index active' : 'index';
                            echo '<a href="' . $drainases->url(1) . '" class="' . $class . '" data-page="1">1</a>';
                            if ($startPage > 2) {
                                echo '<span class="index-ellipsis">...</span>';
                            }
                        }
                        for ($i = $startPage; $i <= $endPage; $i++) {
                            if (($showFirst && $i == 1) || ($showLast && $i == $lastPage)) {
                                continue;
                            }
                            $isActive = $i == $currentPage;
                            $class = $isActive ? 'index active' : 'index';
                            echo '<a href="' . $drainases->url($i) . '" class="' . $class . '" data-page="' . $i . '">' . $i . '</a>';
                        }
                        if ($showLast) {
                            if ($endPage < $lastPage - 1) {
                                echo '<span class="index-ellipsis">...</span>';
                            }
                            $isActive = $lastPage == $currentPage;
                            $class = $isActive ? 'index active' : 'index';
                            echo '<a href="' . $drainases->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>
@endsection

<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>