@extends('dashboard.layouts.app')

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

@section('content')
<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Data Sekolah</h5>
            <div class="btn-group">
                <form method="POST" action="{{ route('sekolah.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('sekolah.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('sekolah.import-geojson') }}" style="display: inline;" onsubmit="return confirm('Apakah Anda yakin ingin mengimpor data GeoJSON ke tabel sekolah? 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('sekolah.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('sekolah.index') }}" class="mb-3">
            <div class="input-group">
                <input type="text" class="form-control" name="search"
                    value="{{ request('search') }}" placeholder="Cari nama sekolah atau NPSN...">
                <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>NPSN</th>
                        <th>Nama Sekolah</th>
                        <th>Jenjang</th>
                        <th>Status</th>
                        <th>Kecamatan</th>
                        <th>Desa</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($sekolahs as $sekolah)
                        <tr>
                            <td>{{ ($sekolahs->currentPage() - 1) * $sekolahs->perPage() + $loop->iteration }}</td>
                            <td>{{ $sekolah->npsn }}</td>
                            <td>{{ $sekolah->nama_sekolah }}</td>
                            <td>
                                <span class="badge bg-info">{{ ucfirst($sekolah->jenjang) }}</span>
                            </td>
                            <td>
                                <span class="badge bg-{{ $sekolah->status == 'Negeri' ? 'success' : 'warning' }}">
                                    {{ ucfirst($sekolah->status) }}
                                </span>
                            </td>
                            <td>{{ $sekolah->kecamatan?->nama_kecamatan ?? '-' }}</td>
                            <td>{{ $sekolah->desa?->nama_desa ?? '-' }}</td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('sekolah.show', $sekolah) }}" class="btn btn-info btn-sm">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('sekolah.edit', $sekolah) }}" class="btn btn-warning btn-sm">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form method="POST" action="{{ route('sekolah.destroy', $sekolah) }}"
                                        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($sekolahs->hasPages())
        <div class="d-flex justify-content-center mt-4">
            <div class="custom-pagination-container">
                <span>
                    @php
                        $currentPage = $sekolahs->currentPage();
                        $lastPage = $sekolahs->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="' . $sekolahs->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="' . $sekolahs->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="' . $sekolahs->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;
}

.custom-pagination-container .pagination-svg {
    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');
    const svgCircle = svg ? svg.querySelector('.svg-circle') : null;
    let cur = -1;
    
    // Fungsi untuk menghitung posisi SVG berdasarkan index
    function updateSvgPosition(index, immediate = false) {
        const indexElement = indexes[index];
        if (!indexElement) return;
        
        const updatePosition = () => {
            // Gunakan getBoundingClientRect untuk akurasi lebih tinggi
            const containerRect = container.getBoundingClientRect();
            const indexRect = indexElement.getBoundingClientRect();
            
            // Hitung posisi tengah elemen index relatif terhadap container
            const indexCenterX = indexRect.left - containerRect.left + (indexRect.width / 2);
            
            // SVG width 46px, jadi kita perlu offset -23px dari center untuk membuat SVG berada di tengah
            const svgWidth = 46;
            const offsetX = indexCenterX - (svgWidth / 2);
            
            if (svg) {
                svg.style.left = '0px';
                svg.style.transform = `translateX(${offsetX}px)`;
            }
        };
        
        if (immediate) {
            updatePosition();
        } else {
            // Tunggu sebentar untuk memastikan layout sudah selesai
            requestAnimationFrame(() => {
                requestAnimationFrame(updatePosition);
            });
        }
    }
    
    // Cari index aktif saat ini dan set posisi awal
    const activeIndex = indexes.findIndex(index => index.classList.contains('active'));
    if (activeIndex !== -1) {
        cur = activeIndex;
        container.classList.add('open');
        // Tunggu sedikit untuk memastikan semua elemen sudah dirender
        setTimeout(() => {
            updateSvgPosition(activeIndex, true);
        }, 50);
    }
    
    // Update posisi saat window resize
    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;
            
            // Tentukan arah perpindahan
            const isMovingLeft = cur > i;
            
            // Clear classes dan reset animasi
            container.className = 'custom-pagination-container';
            void container.offsetWidth; // Reflow
            
            // Update posisi SVG terlebih dahulu (tanpa animasi) - tunggu layout selesai
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    updateSvgPosition(i, true);
                    
                    // Tunggu sedikit untuk posisi terupdate
                    setTimeout(() => {
                        // Add classes untuk trigger animasi
                        container.classList.add('open');
                        
                        if (isMovingLeft) {
                            container.classList.add('flip');
                        } else {
                            container.classList.remove('flip');
                        }
                        
                        cur = i;
                        
                        // Navigate to page setelah animasi selesai
                        setTimeout(() => {
                            window.location.href = url;
                        }, 500);
                    }, 10);
                });
            });
        });
    });
});
</script>
@endsection