@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;
        }
    </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="M12 5V19" stroke="#00bcd4" stroke-width="2.2" fill="none" />
                                            <path d="M5 12H19" stroke="#00bcd4" stroke-width="2.2" fill="none" />
                                        </svg>
                                    </i>
                                    Tambah 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.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf

                                <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') == $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') }}" required>
                                            <label for="tahun">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') }}" 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') }}" 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') }}" required>
                                            <label for="luas">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') }}" required>
                                            <label for="lama_genangan">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') }}"
                                                required>
                                            <label for="tinggi_genangan">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') }}">
                                            <label for="latitude">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') }}">
                                            <label for="longitude">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>Pilih 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 (.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">
                                        <div id="geojson-info" class="file-info" style="display: none;">
                                            <h6>File GeoJSON 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>Pilih 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">
                                            </div>
                                            @error('file_foto')
                                                <span class="helper-text red-text">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <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</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> Simpan 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) {
                                    desaSelect.append(
                                        `<option value="${desa.id}">${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');

                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();
                } else {
                    infoDiv.hide();
                }
            });

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

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

            @if (old('kecamatan_id'))
                $('#kecamatan_id').trigger('change');
                @if (old('desa_id'))
                    setTimeout(function() {
                        $('#desa_id').val('{{ old('desa_id') }}');
                    }, 500);
                @endif
            @endif
        });
    </script>
@endpush