@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" href="{{ asset('theme/plugins/pickadate/themes/default.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/plugins/pickadate/themes/default.date.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/plugins/pickadate/themes/default.time.css') }}">

    <style>
        .browser-default {
            margin-top: 5px;
            margin-bottom: 15px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        .browser-default:focus {
            border-color: #26a69a;
            outline: none;
            box-shadow: 0 0 5px rgba(38, 166, 154, 0.3);
        }
        .browser-default.invalid {
            border-color: #f44336;
        }
        .input-field label.active {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
            display: block;
        }
        .preview-image {
            max-height: 300px;
            max-width: 100%;
            object-fit: cover;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .file-info {
            background: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
            margin-top: 10px;
        }
        .current-file {
            background: #e8f5e8;
            padding: 15px;
            border-radius: 4px;
            margin-top: 10px;
            border-left: 4px solid #4caf50;
        }
    </style>
@endsection

@section('content')
<div class="container">
    <div class="section">
        <div class="row">
            <div class="col s12">
                <div class="card">
                    <div class="card-content">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="card-title">
                                <i style="display: inline-flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 10px;">
                                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M11 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H16C17.1046 20 18 19.1046 18 18V11" stroke="#00bcd4" stroke-width="2.2" fill="none" />
                                        <path d="M18.5 2.5C19.3284 1.67157 20.6716 1.67157 21.5 2.5C22.3284 3.32843 22.3284 4.67157 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="#00bcd4" stroke-width="2.2" fill="none" />
                                    </svg>
                                </i>
                                Edit Data Drainase
                            </span>
                            <a href="{{ route('drainase.index') }}" class="btn waves-effect waves-light grey right">
                                <i class="mdi-navigation-arrow-back"></i> Kembali
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col s12">
                <div class="card">
                    <div class="card-content">
                        <form action="{{ route('drainase.update', $drainase->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="row">
                                <div class="col s12 m6">
                                    <div class="input-field">
                                        <select name="kecamatan_id" id="kecamatan_id" class="browser-default @error('kecamatan_id') invalid @enderror" required>
                                            <option value="">Pilih Kecamatan</option>
                                            @foreach($kecamatans as $kecamatan)
                                                <option value="{{ $kecamatan->id }}"
                                                    {{ (old('kecamatan_id', $drainase->kecamatan_id) == $kecamatan->id) ? 'selected' : '' }}>
                                                    {{ $kecamatan->nama_kecamatan }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label class="active">Kecamatan *</label>
                                        @error('kecamatan_id')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col s12 m6">
                                    <div class="input-field">
                                        <select name="desa_id" id="desa_id" class="browser-default @error('desa_id') invalid @enderror" required>
                                            <option value="">Pilih Desa</option>
                                        </select>
                                        <label class="active">Desa *</label>
                                        @error('desa_id')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12 m4">
                                    <div class="input-field">
                                        <input type="number" name="tahun" id="tahun" class="validate @error('tahun') invalid @enderror"
                                               min="2000" max="2099" value="{{ old('tahun', $drainase->tahun) }}" required>
                                        <label for="tahun" class="active">Tahun *</label>
                                        @error('tahun')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col s12 m4">
                                    <div class="input-field">
                                        <input type="text" name="tanggal_kejadian" id="tanggal_kejadian"
                                               class="pickadate validate @error('tanggal_kejadian') invalid @enderror"
                                               value="{{ old('tanggal_kejadian', $drainase->waktu_kejadian->format('Y-m-d')) }}" required>
                                        <label for="tanggal_kejadian" class="active">Tanggal Kejadian *</label>
                                        @error('tanggal_kejadian')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col s12 m4">
                                    <div class="input-field">
                                        <input type="text" name="jam_kejadian" id="jam_kejadian"
                                               class="timepicker validate @error('jam_kejadian') invalid @enderror"
                                               value="{{ old('jam_kejadian', $drainase->waktu_kejadian->format('H:i')) }}" required>
                                        <label for="jam_kejadian" class="active">Jam Kejadian *</label>
                                        @error('jam_kejadian')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12 m4">
                                    <div class="input-field">
                                        <input type="number" name="luas" id="luas" class="validate @error('luas') invalid @enderror"
                                               step="0.01" min="0" value="{{ old('luas', $drainase->luas) }}" required>
                                        <label for="luas" class="active">Luas (m²) *</label>
                                        @error('luas')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col s12 m4">
                                    <div class="input-field">
                                        <input type="number" name="lama_genangan" id="lama_genangan"
                                               class="validate @error('lama_genangan') invalid @enderror"
                                               min="0" value="{{ old('lama_genangan', $drainase->lama_genangan) }}" required>
                                        <label for="lama_genangan" class="active">Lama Genangan (menit) *</label>
                                        @error('lama_genangan')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col s12 m4">
                                    <div class="input-field">
                                        <input type="number" name="tinggi_genangan" id="tinggi_genangan"
                                               class="validate @error('tinggi_genangan') invalid @enderror"
                                               step="0.01" min="0" value="{{ old('tinggi_genangan', $drainase->tinggi_genangan) }}" required>
                                        <label for="tinggi_genangan" class="active">Tinggi Genangan (cm) *</label>
                                        @error('tinggi_genangan')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12 m6">
                                    <div class="input-field">
                                        <input type="number" name="latitude" id="latitude"
                                               class="validate @error('latitude') invalid @enderror"
                                               step="0.00000001" min="-90" max="90" value="{{ old('latitude', $drainase->latitude) }}">
                                        <label for="latitude" class="active">Latitude</label>
                                        @error('latitude')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col s12 m6">
                                    <div class="input-field">
                                        <input type="number" name="longitude" id="longitude"
                                               class="validate @error('longitude') invalid @enderror"
                                               step="0.00000001" min="-180" max="180" value="{{ old('longitude', $drainase->longitude) }}">
                                        <label for="longitude" class="active">Longitude</label>
                                        @error('longitude')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">
                                    <div class="map-info">
                                        <p><i class="mdi-action-info"></i> <strong>Mode Normal:</strong> Klik pada peta untuk menentukan lokasi drainase (koordinat lat/lon). <strong>Mode Drawing:</strong> Aktifkan tombol edit untuk menggambar polygon/garis GeoJSON. Kedua mode tidak dapat berjalan bersamaan.</p>
                                    </div>
                                    <div id="map">
                                        <div class="map-controls">
                                            <div class="radio-group">
                                                <p>
                                                    <input name="map-type" type="radio" id="layer-osm" value="osm" checked />
                                                    <label for="layer-osm">OSM</label>
                                                </p>
                                                <p>
                                                    <input name="map-type" type="radio" id="layer-satellite" value="satellite" />
                                                    <label for="layer-satellite">Satellite</label>
                                                </p>
                                            </div>
                                        </div>
                                        <div id="coordinate-display" class="coordinate-display">
                                            Klik pada peta untuk memilih lokasi
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">
                                    <div class="file-field input-field">
                                        <div class="btn teal">
                                            <span>Ganti File GeoJSON</span>
                                            <input type="file" name="file_geojason" id="file_geojason" accept=".json,.geojson,application/json">
                                        </div>
                                        <div class="file-path-wrapper">
                                            <input class="file-path validate @error('file_geojason') invalid @enderror"
                                                   type="text" placeholder="Upload file GeoJSON baru (.json/.geojson) atau gambar langsung di peta">
                                        </div>
                                        @error('file_geojason')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <input type="hidden" name="geojson_draw" id="geojson_draw">

                                    @if($drainase->file_geojason)
                                        <div id="current-geojson" class="current-file">
                                            <h6><i class="material-icons tiny">description</i> File GeoJSON Saat Ini</h6>
                                            <p><strong>File:</strong>
                                                <a href="{{ asset('storage/' . $drainase->file_geojason) }}" target="_blank" class="btn-flat waves-effect teal-text">
                                                    <i class="material-icons left tiny">file_download</i> Download File
                                                </a>
                                            </p>
                                        </div>
                                    @endif

                                    <div id="geojson-info" class="file-info" style="display: none;">
                                        <h6><i class="material-icons tiny">description</i> File GeoJSON Baru Terpilih</h6>
                                        <p><strong>Nama File:</strong> <span id="geojson-name"></span></p>
                                        <p><strong>Ukuran:</strong> <span id="geojson-size"></span></p>
                                        <p><strong>Tipe:</strong> <span id="geojson-type"></span></p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">
                                    <div class="file-field input-field">
                                        <div class="btn indigo">
                                            <span>Ganti Foto</span>
                                            <input type="file" name="file_foto" id="file_foto" accept="image/*">
                                        </div>
                                        <div class="file-path-wrapper">
                                            <input class="file-path validate @error('file_foto') invalid @enderror"
                                                   type="text" placeholder="Upload foto drainase baru">
                                        </div>
                                        @error('file_foto')
                                            <span class="helper-text red-text">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    @if($drainase->file_foto)
                                        <div id="current-photo" class="current-file">
                                            <h6><i class="material-icons tiny">photo</i> Foto Saat Ini</h6>
                                            <div class="center-align" style="margin-top: 10px;">
                                                <img src="{{ asset('storage/' . $drainase->file_foto) }}" alt="Foto Saat Ini" class="preview-image">
                                            </div>
                                        </div>
                                    @endif

                                    <div id="photo-preview" style="display: none; margin-top: 15px;">
                                        <div class="card">
                                            <div class="card-content">
                                                <span class="card-title"><i class="material-icons tiny">photo</i> Preview Foto Baru</span>
                                                <div class="center-align" style="margin-top: 10px;">
                                                    <img id="preview-img" class="preview-image" alt="Preview">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">
                                    <button type="submit" class="btn waves-effect waves-light indigo">
                                        <i class="mdi-content-save"></i> Update Data
                                    </button>
                                    <a href="{{ route('drainase.index') }}" class="btn waves-effect waves-light grey">
                                        <i class="mdi-navigation-cancel"></i> Batal
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script src="{{ asset('theme/plugins/pickadate/picker.js') }}"></script>
    <script src="{{ asset('theme/plugins/pickadate/picker.date.js') }}"></script>
    <script src="{{ asset('theme/plugins/pickadate/picker.time.js') }}"></script>
    <script src="{{ asset('theme/plugins/pickadate/legacy.js') }}"></script>
    @vite(['resources/js/drainase/mapDrainase.js'])

    <script>
        $(document).ready(function() {
            $('.pickadate').pickadate({
                format: 'yyyy-mm-dd',
                selectYears: true,
                selectMonths: true,
                clear: false,
                close: false
            });

            $('.timepicker').pickatime({
                format: 'HH:i',
                formatLabel: 'HH:i',
                interval: 15,
                clear: false,
                close: false
            });

            const getDesaByKecamatanUrl = "{{ url('get-desas-by-kecamatan') }}";

            $('#kecamatan_id').change(function() {
                const kecamatanId = $(this).val();
                const desaSelect = $('#desa_id');

                desaSelect.html('<option value="">Pilih Desa</option>');
                desaSelect.prop('disabled', true);

                if (kecamatanId) {
                    $.get(getDesaByKecamatanUrl + '/' + kecamatanId)
                        .done(function(data) {
                            if (data && data.length > 0) {
                                data.forEach(function(desa) {
                                    const isSelected = desa.id == {{ old('desa_id', $drainase->desa_id) }};
                                    desaSelect.append(`<option value="${desa.id}" ${isSelected ? 'selected' : ''}>${desa.nama_desa}</option>`);
                                });
                                desaSelect.prop('disabled', false);
                            }
                        })
                        .fail(function() {
                            console.error('Gagal mengambil data desa');
                        });
                }
            });

            $('#file_geojason').change(function() {
                const file = this.files[0];
                const infoDiv = $('#geojson-info');
                const currentDiv = $('#current-geojson');

                if (file) {
                    $('#geojson-name').text(file.name);
                    $('#geojson-size').text((file.size / 1024).toFixed(2) + ' KB');
                    $('#geojson-type').text(file.type || 'application/json');
                    infoDiv.show();
                    currentDiv.hide();
                } else {
                    infoDiv.hide();
                    currentDiv.show();
                }
            });

            $('#file_foto').change(function() {
                const file = this.files[0];
                const previewDiv = $('#photo-preview');
                const previewImg = $('#preview-img');
                const currentDiv = $('#current-photo');

                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImg.attr('src', e.target.result);
                        previewDiv.show();
                        currentDiv.hide();
                    };
                    reader.readAsDataURL(file);
                } else {
                    previewDiv.hide();
                    currentDiv.show();
                }
            });

            $('#kecamatan_id').trigger('change');
        });
    </script>
@endpush