@extends('dashboard.layouts.app')

@section('title', 'Pengaturan Layer')

@section('content')
<div class="container-fluid">
    @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

    <div class="mb-4">
        <h2>Pengaturan Layer</h2>
        <p class="text-muted">Konfigurasi warna dan tampilan layer pada peta</p>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-4" id="layerTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="kecamatan-tab" data-bs-toggle="tab" data-bs-target="#kecamatan" type="button" role="tab">
                <i class="bi bi-map me-2"></i>Kecamatan
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="layerTabContent">
        <!-- Kecamatan Tab -->
        <div class="tab-pane fade show active" id="kecamatan" role="tabpanel">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Konfigurasi Warna Batas Kecamatan</h5>
                </div>
                <div class="card-body">
                    <form id="colorConfigForm">
                        @csrf
                        <div class="row">
                            @forelse ($kecamatans as $kecamatan)
                                @php
                                    $color = $colorConfig[$kecamatan] ?? [
                                        'fill' => 'rgba(231, 76, 60, 0.1)',
                                        'stroke' => '#e74c3c',
                                        'strokeWidth' => 2
                                    ];
                                @endphp
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <div class="card border">
                                        <div class="card-body">
                                            <h6 class="card-title mb-3">{{ $kecamatan }}</h6>
                                            
                                            <!-- Fill Color -->
                                            <div class="mb-3">
                                                <label class="form-label">Warna Isian (Fill)</label>
                                                <div class="input-group">
                                                    <input type="color" 
                                                           class="form-control form-control-color" 
                                                           id="fillColorPicker_{{ $loop->index }}"
                                                           name="colors[{{ $kecamatan }}][fillColor]"
                                                           data-fill-input="fillColor_{{ $loop->index }}"
                                                           onchange="updateFillColor(this, '{{ $kecamatan }}')">
                                                    <input type="text" 
                                                           class="form-control" 
                                                           id="fillColor_{{ $loop->index }}"
                                                           name="colors[{{ $kecamatan }}][fill]"
                                                           value="{{ $color['fill'] }}"
                                                           placeholder="rgba(231, 76, 60, 0.1)">
                                                </div>
                                                <small class="text-muted">Format: rgba(r, g, b, opacity)</small>
                                            </div>

                                            <!-- Stroke Color -->
                                            <div class="mb-3">
                                                <label class="form-label">Warna Garis (Stroke)</label>
                                                <div class="input-group">
                                                    <input type="color" 
                                                           class="form-control form-control-color" 
                                                           id="strokeColorPicker_{{ $loop->index }}"
                                                           name="colors[{{ $kecamatan }}][strokeColor]"
                                                           onchange="updateStrokeColor(this, '{{ $kecamatan }}')">
                                                    <input type="text" 
                                                           class="form-control" 
                                                           id="strokeColor_{{ $loop->index }}"
                                                           name="colors[{{ $kecamatan }}][stroke]"
                                                           value="{{ $color['stroke'] }}"
                                                           placeholder="#e74c3c">
                                                </div>
                                                <small class="text-muted">Format: #hex atau rgba()</small>
                                            </div>

                                            <!-- Stroke Width -->
                                            <div class="mb-3">
                                                <label class="form-label">Ketebalan Garis</label>
                                                <input type="number" 
                                                       class="form-control" 
                                                       name="colors[{{ $kecamatan }}][strokeWidth]"
                                                       value="{{ $color['strokeWidth'] ?? 2 }}"
                                                       min="1" 
                                                       max="10" 
                                                       step="1">
                                                <small class="text-muted">1-10 pixel</small>
                                            </div>

                                            <!-- Preview -->
                                            <div class="mt-3">
                                                <label class="form-label">Preview</label>
                                                <div class="border rounded p-2" style="background-color: {{ $color['fill'] }}; border: {{ $color['strokeWidth'] ?? 2 }}px solid {{ $color['stroke'] }} !important;">
                                                    <small class="text-muted">Contoh tampilan</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <div class="alert alert-warning">
                                        <i class="bi bi-exclamation-triangle me-2"></i>
                                        Tidak ada data kecamatan ditemukan di file GeoJSON.
                                    </div>
                                </div>
                            @endforelse
                        </div>

                        @if(count($kecamatans) > 0)
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-save me-2"></i>Simpan Konfigurasi
                                </button>
                                <button type="button" class="btn btn-secondary" onclick="resetColors()">
                                    <i class="bi bi-arrow-counterclockwise me-2"></i>Reset ke Default
                                </button>
                            </div>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .form-control-color {
        width: 60px;
        height: 38px;
    }
</style>

<script>
    // Convert hex to rgba
    function hexToRgba(hex, opacity) {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        return `rgba(${r}, ${g}, ${b}, ${opacity || 0.1})`;
    }

    // Convert rgba to hex
    function rgbaToHex(rgba) {
        if (rgba.startsWith('#')) return rgba;
        const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
        if (match) {
            const r = parseInt(match[1]).toString(16).padStart(2, '0');
            const g = parseInt(match[2]).toString(16).padStart(2, '0');
            const b = parseInt(match[3]).toString(16).padStart(2, '0');
            return `#${r}${g}${b}`;
        }
        return '#e74c3c';
    }

    // Update fill color when color picker changes
    function updateFillColor(colorPicker, kecamatan) {
        const hex = colorPicker.value;
        const fillInput = document.querySelector(`input[name="colors[${kecamatan}][fill]"]`);
        const rgba = hexToRgba(hex, 0.1);
        if (fillInput) {
            fillInput.value = rgba;
            updatePreview(kecamatan);
        }
    }

    // Update stroke color when color picker changes
    function updateStrokeColor(colorPicker, kecamatan) {
        const hex = colorPicker.value;
        const strokeInput = document.querySelector(`input[name="colors[${kecamatan}][stroke]"]`);
        if (strokeInput) {
            strokeInput.value = hex;
            updatePreview(kecamatan);
        }
    }

    // Update preview
    function updatePreview(kecamatan) {
        const fillInput = document.querySelector(`input[name="colors[${kecamatan}][fill]"]`);
        const strokeInput = document.querySelector(`input[name="colors[${kecamatan}][stroke]"]`);
        const strokeWidthInput = document.querySelector(`input[name="colors[${kecamatan}][strokeWidth]"]`);
        
        if (fillInput && strokeInput && strokeWidthInput) {
            const cardBody = fillInput.closest('.card-body');
            const preview = cardBody.querySelector('.border.rounded.p-2');
            if (preview) {
                preview.style.backgroundColor = fillInput.value;
                preview.style.border = `${strokeWidthInput.value}px solid ${strokeInput.value}`;
                preview.style.borderStyle = 'solid';
            }
        }
    }

    // Reset colors to default
    function resetColors() {
        if (confirm('Apakah Anda yakin ingin mereset semua warna ke default?')) {
            document.querySelectorAll('input[name*="[fill]"]').forEach(input => {
                input.value = 'rgba(231, 76, 60, 0.1)';
                const match = input.name.match(/colors\[([^\]]+)\]/);
                if (match) {
                    const colorPicker = input.closest('.input-group').querySelector('input[type="color"]');
                    if (colorPicker && input.name.includes('[fill]')) {
                        colorPicker.value = '#e74c3c';
                    }
                    updatePreview(match[1]);
                }
            });
            
            document.querySelectorAll('input[name*="[stroke]"]').forEach(input => {
                if (!input.type || input.type !== 'color') {
                    input.value = '#e74c3c';
                    const match = input.name.match(/colors\[([^\]]+)\]/);
                    if (match) {
                        const colorPicker = input.closest('.input-group').querySelector('input[type="color"]');
                        if (colorPicker) {
                            colorPicker.value = '#e74c3c';
                        }
                        updatePreview(match[1]);
                    }
                }
            });
            
            document.querySelectorAll('input[name*="[strokeWidth]"]').forEach(input => {
                input.value = 2;
                const match = input.name.match(/colors\[([^\]]+)\]/);
                if (match) {
                    updatePreview(match[1]);
                }
            });
        }
    }

    // Form submission
    document.getElementById('colorConfigForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const colors = {};
        
        // Convert form data to object
        for (let [key, value] of formData.entries()) {
            if (key.startsWith('colors[')) {
                const match = key.match(/colors\[([^\]]+)\]\[([^\]]+)\]/);
                if (match) {
                    const kecamatan = match[1];
                    const prop = match[2];
                    
                    if (!colors[kecamatan]) {
                        colors[kecamatan] = {};
                    }
                    
                    if (prop === 'fill') {
                        colors[kecamatan].fill = value;
                    } else if (prop === 'stroke') {
                        colors[kecamatan].stroke = value;
                    } else if (prop === 'strokeWidth') {
                        colors[kecamatan].strokeWidth = parseInt(value);
                    }
                }
            }
        }

        // Send to server
        fetch('{{ route("layer.update-colors") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ colors: colors })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Konfigurasi warna berhasil disimpan!');
                location.reload();
            } else {
                alert('Gagal menyimpan konfigurasi: ' + (data.message || 'Terjadi kesalahan'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat menyimpan konfigurasi');
        });
    });

    // Update preview on input change
    document.querySelectorAll('input[name*="[fill]"], input[name*="[stroke]"], input[name*="[strokeWidth]"]').forEach(input => {
        input.addEventListener('input', function() {
            const match = this.name.match(/colors\[([^\]]+)\]/);
            if (match) {
                updatePreview(match[1]);
            }
        });
    });

    // Function to convert rgba to hex
    function rgbaToHex(rgba) {
        if (rgba.startsWith('#')) return rgba;
        const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
        if (match) {
            const r = parseInt(match[1]).toString(16).padStart(2, '0');
            const g = parseInt(match[2]).toString(16).padStart(2, '0');
            const b = parseInt(match[3]).toString(16).padStart(2, '0');
            return `#${r}${g}${b}`;
        }
        return '#e74c3c';
    }

    // Initialize color pickers with saved values when page loads
    document.addEventListener('DOMContentLoaded', function() {
        @foreach($kecamatans as $kecamatan)
            @php
                $color = $colorConfig[$kecamatan] ?? [
                    'fill' => 'rgba(231, 76, 60, 0.1)',
                    'stroke' => '#e74c3c',
                    'strokeWidth' => 2
                ];
                // Convert rgba to hex for color picker
                $fillHex = '#e74c3c'; // default
                if (preg_match('/rgba?\((\d+),\s*(\d+),\s*(\d+)/', $color['fill'], $matches)) {
                    $r = str_pad(dechex((int)$matches[1]), 2, '0', STR_PAD_LEFT);
                    $g = str_pad(dechex((int)$matches[2]), 2, '0', STR_PAD_LEFT);
                    $b = str_pad(dechex((int)$matches[3]), 2, '0', STR_PAD_LEFT);
                    $fillHex = '#' . $r . $g . $b;
                }
            @endphp
            const fillPicker{{ $loop->index }} = document.getElementById('fillColorPicker_{{ $loop->index }}');
            const strokePicker{{ $loop->index }} = document.getElementById('strokeColorPicker_{{ $loop->index }}');
            
            if (fillPicker{{ $loop->index }}) {
                fillPicker{{ $loop->index }}.value = '{{ $fillHex }}';
            }
            if (strokePicker{{ $loop->index }}) {
                // Ensure stroke value is hex format for color picker
                @php
                    $strokeHex = '#e74c3c'; // default
                    if (preg_match('/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/', $color['stroke'])) {
                        $strokeHex = $color['stroke'];
                    } elseif (preg_match('/rgba?\((\d+),\s*(\d+),\s*(\d+)/', $color['stroke'], $matches)) {
                        $r = str_pad(dechex((int)$matches[1]), 2, '0', STR_PAD_LEFT);
                        $g = str_pad(dechex((int)$matches[2]), 2, '0', STR_PAD_LEFT);
                        $b = str_pad(dechex((int)$matches[3]), 2, '0', STR_PAD_LEFT);
                        $strokeHex = '#' . $r . $g . $b;
                    }
                @endphp
                strokePicker{{ $loop->index }}.value = '{{ $strokeHex }}';
            }
        @endforeach
    });
</script>
@endsection