@extends('layouts.master')

@section('title', 'Edit Adaptation')

@section('content')
    @php
        $user = Auth::user();
    @endphp

    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="mb-0 font-weight-bold" style="color: #278074; font-size: 20px;">EDIT ADAPTASI</h3>
        </div>
    </div>

    <br/><br/>
    <form action="{{ route('adaptasi-form.update', $adaptation->id) }}" method="POST" onsubmit="return false;">
        @csrf

        <div class="ml-1 mt-4 d-flex justify-content-between align-items-center">
            <p style="font-size: 15px; font-weight: 400; line-height: 100%; letter-spacing: 0%;">Formulir Jenis Adaptasi</p>
        </div>

        <div id="accordion" class="accordion">
            <!-- Section 1 -->
            <div class="card" style="border-bottom: 1px solid #C3C3C3;">
                <div class="card-header" id="heading1">
                    <h5 class="mb-0">
                        <button class="btn d-flex justify-content-between w-100 align-items-center form-title-accordion" data-toggle="collapse" data-target="#collapse1" aria-expanded="true">
                            INFORMASI UMUM
                            <span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
                        </button>
                    </h5>
                </div>
                <div id="collapse1" class="accordion-collapse collapse show" data-parent="#accordion">
                    <div class="card-body">
                        <div class="form-group">
                            <label class="required-label bold" for="nama_kegiatan">Nama Kegiatan</label>
                            <input type="text" class="form-control" name="nama_kegiatan" placeholder="Masukkan Nama Kegiatan" value="{{ old('nama_kegiatan', $adaptation->nama_kegiatan) }}">
                        </div>
                        <div class="form-group mt-4">
                            <label class="required-label bold" for="tahun_kegiatan">Tahun Kegiatan</label>
                            <select class="form-control select-button" name="tahun_kegiatan" required>
                                @foreach($years as $year)
                                    <option value="{{ $year }}" {{ old('tahun_kegiatan', $adaptation->tahun_kegiatan) == $year ? 'selected' : '' }}>
                                        {{ $year }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group mt-4">
                            <label class="required-label bold" for="sektor">Sektor</label>
                            <select class="form-control select-button select2" name="sektor" id="sektor-dropdown" required data-placeholder="Pilih Sektor">
                                <option value="">Pilih Sektor</option>
                            </select>
                        </div>
                        <div class="form-group mt-4">
                            <label class="required-label bold" for="sub_sektor">Sub-Sektor</label>
                            <select class="form-control select-button select2" name="sub_sektor" id="subsektor-dropdown" required data-placeholder="Pilih Sub-Sektor">
                                <option value="">Pilih Sub-Sektor</option>
                            </select>
                        </div>
                        <div class="form-group mt-4">
                            <label class="required-label bold" for="kategori_aksi">Kategori Aksi</label>
                            <select class="form-control select-button select2" name="kategori_aksi" id="kategoriaksi-dropdown" required data-placeholder="Pilih Kategori Aksi">
                                <option value="">Pilih Kategori Aksi</option>
                            </select>
                        </div>
                        <div class="form-group mt-4">
                            <label class="label-title bold" for="jenis_aksi">Jenis Aksi</label>
                            <select class="form-control select-button select2" name="jenis_aksi" id="jenisaksi-dropdown" data-placeholder="Pilih Jenis Aksi">
                                <option value="">Pilih Jenis Aksi</option>
                            </select>
                        </div>
                        <div class="form-group mt-4">
                            <label class="label-title bold" for="aksi">Aksi</label>
                            <select class="form-control select-button select2" name="aksi" id="aksi-dropdown" data-placeholder="Pilih Aksi">
                                <option value="">Pilih Aksi</option>
                            </select>
                        </div>
                        <div class="form-group mt-4">
                            <label class="label-title bold" for="pelaksana_kegiatan">Pelaksana Kegiatan</label>
                            <input type="text" class="form-control" name="pelaksana_kegiatan" placeholder="Masukkan Pelaksana Kegiatan" value="{{ old('pelaksana_kegiatan', $adaptation->pelaksana_kegiatan) }}">
                        </div>
                        <div class="form-group mt-4">
                            <label class="label-title bold" for="lokasi_kegiatan">Lokasi Pelaksana Kegiatan Aksi</label>
                            <input type="text" class="form-control" name="lokasi_kegiatan" placeholder="Masukkan Lokasi Kegiatan Aksi" value="{{ old('lokasi_kegiatan', $adaptation->lokasi_kegiatan) }}">
                        </div>
                        <div class="form-group mt-4">
                            <label class="label-title bold" for="waktu_kegiatan">Waktu Pelaksana Kegiatan Aksi</label>
                            <input type="text" class="form-control" name="waktu_kegiatan" placeholder="Masukkan Waktu Kegiatan Aksi" value="{{ old('waktu_kegiatan', $adaptation->waktu_kegiatan) }}">
                        </div>
                        <div class="form-group mt-4">
                            <label class="label-title bold" for="dokumen">Dokumen / Kebijakan Terkait</label>
                            <input type="text" class="form-control" name="dokumen" placeholder="Masukkan Dokumen/Kebijakan" value="{{ old('dokumen', $adaptation->dokumen) }}">
                        </div>
                        <div class="mt-4 mb-4 text-right">
                            <button type="button" class="btn btn-submit px-4 py-2" data-target="#collapse2">
                                Selanjutnya
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Section 2 -->
            <div class="card" style="border-bottom: 1px solid #C3C3C3;">
                <div class="card-header" id="heading2">
                    <h5 class="mb-0">
                        <button class="btn d-flex justify-content-between w-100 align-items-center collapsed form-title-accordion" data-toggle="collapse" data-target="#collapse2">
                            INFORMASI ALOKASI/REALISASI ANGGARAN    
                            <span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
                        </button>
                    </h5>
                </div>
                <div id="collapse2" class="accordion-collapse collapse" data-parent="#accordion">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p class="text-muted" style="font-size: 14px;">1.2.1 INFORMASI ALOKASI ANGGARAN</p>
                                <p class="text-muted mt-4" style="font-size: 12px;">Silakan tambahkan informasi alokasi anggaran kegiatan dalam rupiah.</p>
                                <div class="form-group mt-4">
                                    <label class="label-title" for="alokasi_apbn">APBN</label>
                                    <input type="text" class="form-control" name="alokasi_apbn" id="alokasi_apbn" value="{{ old('alokasi_apbn', $adaptation->alokasi_apbn) }}">
                                </div>
                                <div class="form-group mt-4">
                                    <label class="label-title" for="alokasi_apbd">APBD</label>
                                    <input type="text" class="form-control" name="alokasi_apbd" id="alokasi_apbd" value="{{ old('alokasi_apbd', $adaptation->alokasi_apbd) }}">
                                </div>
                                <div class="form-group mt-4">
                                    <label class="label-title" for="alokasi_swasta">SWASTA</label>
                                    <input type="text" class="form-control" name="alokasi_swasta" id="alokasi_swasta" value="{{ old('alokasi_swasta', $adaptation->alokasi_swasta) }}">
                                </div>
                                <div class="form-group mt-4">
                                    <label class="label-title" for="alokasi_sumber_dana_lain">LAIN-LAIN</label>
                                    <input type="text" class="form-control" name="alokasi_sumber_dana_lain" id="alokasi_sumber_dana_lain" value="{{ old('alokasi_sumber_dana_lain', $adaptation->alokasi_sumber_dana_lain) }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <p class="text-muted" style="font-size: 14px;">1.2.2 INFORMASI REALISASI ANGGARAN</p>
                                <p class="text-muted mt-4" style="font-size: 12px;">Silakan tambahkan informasi realisasi anggaran kegiatan dalam rupiah.</p>
                                <div class="form-group mt-4">
                                    <label class="label-title" for="realisasi_apbn">APBN</label>
                                    <input type="text" class="form-control" name="realisasi_apbn" id="realisasi_apbn" value="{{ old('realisasi_apbn', $adaptation->realisasi_apbn) }}">
                                </div>
                                <div class="form-group mt-4">
                                    <label class="label-title" for="realisasi_apbd">APBD</label>
                                    <input type="text" class="form-control" name="realisasi_apbd" id="realisasi_apbd" value="{{ old('realisasi_apbd', $adaptation->realisasi_apbd) }}">
                                </div>
                                <div class="form-group mt-4">
                                    <label class="label-title" for="realisasi_swasta">SWASTA</label>
                                    <input type="text" class="form-control" name="realisasi_swasta" id="realisasi_swasta" value="{{ old('realisasi_swasta', $adaptation->realisasi_swasta) }}">
                                </div>
                                <div class="form-group mt-4">
                                    <label class="label-title" for="realisasi_sumber_dana_lain">LAIN-LAIN</label>
                                    <input type="text" class="form-control" name="realisasi_sumber_dana_lain" id="realisasi_sumber_dana_lain" value="{{ old('realisasi_sumber_dana_lain', $adaptation->realisasi_sumber_dana_lain) }}">
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 mb-4 text-right">
                            <button type="button" class="btn btn-submit px-4 py-2" data-target="#collapse3">
                                Selanjutnya
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Section 3 -->
            <div class="card" style="border-bottom: 1px solid #C3C3C3;">
                <div class="card-header" id="heading3">
                    <h5 class="mb-0">
                        <button class="btn d-flex justify-content-between w-100 align-items-center collapsed form-title-accordion" data-toggle="collapse" data-target="#collapse3">
                            KEGIATAN
                            <span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
                        </button>
                    </h5>
                </div>
                <div id="collapse3" class="collapse" data-parent="#accordion">
                    <div class="card-body">
                        <div class="form-group">
                            <label class="label-title" for="detail_kegiatan">Detail Kegiatan</label>
                            <textarea class="form-control" name="detail_kegiatan" id="detail_kegiatan" rows="3" placeholder="Isi detail kegiatan di sini">{{ old('detail_kegiatan', $adaptation->detail_kegiatan) }}</textarea>
                        </div>
                        <div class="mt-4 mb-4 text-right">
                            <button type="submit" id="final-submit" class="btn btn-submit px-4 py-2">
                                Simpan
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.5.2/dist/select2-bootstrap4.min.css" rel="stylesheet" />
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    // ------- ALOKASI AND REALISASI --------
    function formatCurrency(val) {
        if (!val) return '';
        // Tambahkan titik sebagai pemisah ribuan, contoh: 1234567 => 1.234.567
        return val.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }

    function parseCurrencyToFloat(val) {
        // Hapus titik (ribuan) dan ganti koma desimal jadi titik untuk parseFloat
        if (!val) return 0;
        const normalized = val.replace(/\./g, '').replace(',', '.');
        return parseFloat(normalized) || 0;
    }

    function validateRealisasi() {
        const targetRaw = $('#target').val();
        const realisasiRaw = $('#realisasi').val();

        const target = parseCurrencyToFloat(targetRaw);
        const realisasi = parseCurrencyToFloat(realisasiRaw);

        const $formGroup = $('#realisasi').closest('.form-group');
        let $warning = $formGroup.find('.help-block.realisasi');

        if (realisasi > target) {
            if ($warning.length === 0) {
                $formGroup.append(
                    '<p class="help-block mt-2 realisasi text-danger"><i class="ti ti-alert"></i> Nilai realisasi lebih besar dari target.</p>'
                );
            }
        } else {
            $warning.remove();
        }
    }

    function isDigitKey(e) {
        let charCode = e.which || e.keyCode;
        if (charCode < 48 || charCode > 57) {
            e.preventDefault();
            return false;
        }

        const $input = $(e.target);
        let val = $input.val().replace(/\D/g, '');
        if (val.length >= 12) {
            e.preventDefault();
            return false;
        }
    }

    function formatInput($input, callValidate = false) {
        let val = $input.val().replace(/\D/g, '');
        if (val.length > 12) {
            val = val.slice(0, 12); // potong digit ke 13 dst
        }
        if (val === '') {
            $input.val('');
            return;
        }
        $input.val(formatCurrency(val));
        if (callValidate) validateRealisasi();
    }

    function formatInputOnBlur($input) {
        let val = $input.val().replace(/\D/g, '');
        if (val.length > 12) {
            val = val.slice(0, 12);
        }
        if (val === '') {
            $input.val('');
            return;
        }
        $input.val(formatCurrency(val) + ',00');
    }

    function attachNumberFormatting(selector, callValidate = false) {
        const $el = $(selector);

        $el.on('keypress', isDigitKey);

        $el.on('keyup', function () {
            formatInput($(this), callValidate);
        });

        $el.on('blur', function () {
            formatInputOnBlur($(this));
        });
    }

    // -------- DROPDOWN LOADING FUNCTIONS WITH PROMISE --------
    function decodeHtml(html) {
        const txt = document.createElement('textarea');
        txt.innerHTML = html;
        return txt.value;
    }
    function loadSektor(selectedValue = null) {
        return $.get('/adaptasi/form-adaptasi-sector-dropdown', {})
            .then(data => {
                const $dropdown = $('#sektor-dropdown').empty();
                $dropdown.append('<option value="">Pilih Sektor</option>')
                data.forEach(item => {
                    const selected = item === selectedValue ? 'selected' : '';
                    $dropdown.append(`<option value="${item}" ${selected}>${item}</option>`);
                });
            })
            .catch(() => alert('Gagal memuat data Sektor'));
    }

    function loadSubSektor(sector, selectedValue = null) {
        return $.get('/adaptasi/form-adaptasi-subsector-dropdown', { sector })
            .then(data => {
                const $dropdown = $('#subsektor-dropdown').empty();
                $dropdown.append('<option value="">Pilih Sub-Sektor</option>');
                data.forEach(item => {
                    const selected = decodeHtml(item) === decodeHtml(selectedValue) ? 'selected' : '';
                    $dropdown.append(`<option value="${decodeHtml(item)}" ${selected}>${decodeHtml(item)}</option>`);
                });
            })
            .catch(() => alert('Gagal memuat data Sub-Sektor'));
    }

    function loadKategoriAksi(sector, subSector, selectedValue = null) {
        return $.get('/adaptasi/form-adaptasi-kategoriaksi-dropdown', { sub_sector: subSector, sector: sector })
            .then(data => {
                const $dropdown = $('#kategoriaksi-dropdown').empty();
                $dropdown.append('<option value="">Pilih Kategori Aksi</option>');
                data.forEach(item => {
                    const selected = item === selectedValue ? 'selected' : '';
                    $dropdown.append(`<option value="${item}" ${selected}>${item}</option>`);
                });
            })
            .catch(() => alert('gagal memuat data Kategori Aksi'));
    }

    function loadJenisAksi(sector, subSector, kategori, selectedValue = null) {
        return $.get('/adaptasi/form-adaptasi-jenisaksi-dropdown', { sub_sector: subSector, sector: sector, kategori: kategori })
            .then(data => {
                const $dropdown = $('#jenisaksi-dropdown').empty();
                $dropdown.append('<option value="">Pilih Jenis Aksi</option>');
                data.forEach(item => {
                    const selected = item === selectedValue ? 'selected' : '';
                    $dropdown.append(`<option value="${item}" ${selected}>${item}</option>`);
                });
            })
            .catch(() => alert('gagal memuat data Jenis Aksi'));
    }

    function loadAksi(sector, subSector, kategori, jenis, selectedValue = null) {
        return $.get('/adaptasi/form-adaptasi-aksi-dropdown', { sub_sector: subSector, sector: sector, kategori: kategori, jenis: jenis })
            .then(data => {
                const $dropdown = $('#aksi-dropdown').empty();
                $dropdown.append('<option value="">Pilih Aksi</option>');
                data.forEach(item => {
                    const selected = item.aksi === selectedValue ? 'selected' : '';
                    $dropdown.append(`<option value="${item.aksi}" data-id="${item.id}" ${selected}>${item.aksi}</option>`);
                });
            })
            .catch(() => alert('gagal memuat data Aksi'));
    }

    $(document).ready(async function() {
        let adaptationId;
        const kegiatanId = "{{ $adaptation->id }}";
        const dataSektor = "{{ $adaptation->sektor }}";
        const dataSubSektor = "{{ $adaptation->sub_sektor }}";
        const dataKategori = "{{ $adaptation->kategori_aksi }}";
        const dataJenis = "{{ $adaptation->jenis_aksi }}";
        const dataAksi = "{{ $adaptation->aksi }}";
        const adaptation_id = "{{ $adaptation->adaptation_id }}";
        adaptationId = adaptation_id;

        // Prefill dropdowns if session data available
        const sessionSektor = "{{ $sessionData['sektor'] ?? '' }}";
        const sessionSubSektor = "{{ $sessionData['sub_sektor'] ?? '' }}";
        const sessionKategori = "{{ $sessionData['kategori_aksi'] ?? '' }}";
        const sessionJenis = "{{ $sessionData['jenis_aksi'] ?? '' }}";
        const sessionAksi = "{{ $sessionData['aksi'] ?? '' }}";
        const sessionAdaptationId = "{{ $sessionData['adaptation_id'] ?? '' }}";
        
        if(sessionAdaptationId) {
            adaptationId = sessionAdaptationId;
        }

        attachNumberFormatting('#alokasi_apbn');
        attachNumberFormatting('#alokasi_apbd');
        attachNumberFormatting('#alokasi_swasta');
        attachNumberFormatting('#alokasi_sumber_dana_lain');
        attachNumberFormatting('#realisasi_apbn');
        attachNumberFormatting('#realisasi_apbd');
        attachNumberFormatting('#realisasi_swasta');
        attachNumberFormatting('#realisasi_sumber_dana_lain');

        // Initialize Select2 with Bootstrap 4 theme
        $('.select2').select2({
            width: '100%',
            theme: 'bootstrap4',
            placeholder: function() {
                return $(this).data('placeholder');
            }
        });

        await loadSektor(dataSektor);
        if(dataSektor) {
            $('#sektor-dropdown').val(dataSektor).trigger('change');
            await loadSubSektor(dataSektor, dataSubSektor);
            if(dataSubSektor) {
                $('#subsektor-dropdown').val(dataSubSektor).trigger('change');
                await loadKategoriAksi(dataSektor, dataSubSektor, dataKategori);
                if(dataKategori) {
                    $('#kategoriaksi-dropdown').val(dataKategori).trigger('change');
                    await loadJenisAksi(dataSektor, dataSubSektor, dataKategori, dataJenis);
                    if(dataJenis) {
                        $('#jenisaksi-dropdown').val(dataJenis).trigger('change');
                        await loadAksi(dataSektor, dataSubSektor, dataKategori, dataJenis, dataAksi);

                        if(dataAksi && dataAksi !== "null") {
                            $('#aksi-dropdown').val(dataAksi).trigger('change');
                        }
                    }
                }
            }
        }

        // Event Handlers for dropdown cascading
        let sector = sessionSektor;
        let subSector = sessionSubSektor;
        let kategori = sessionKategori;
        let jenis = sessionJenis;
        let aksi = sessionAksi;
        $('#sektor-dropdown').on('change', async function() {
            sector = $(this).val();
            if(sector) {
                await loadSubSektor(sector);
            } else {
                $('#subsektor-dropdown').empty().append('<option value="">Pilih Sub-Sektor</option>');
            }
        });

         $('#subsektor-dropdown').on('change', async function() {
            subSector = $(this).val();
            if(subSector){
                await loadKategoriAksi(sector, subSector);
            } else {
                $('#kategoriaksi-dropdown').empty().append('<option value="">Pilih Kategori Aksi</option>');
            }
        });

        $('#kategoriaksi-dropdown').on('change', async function() {
            kategori = $(this).val();
            if(kategori) {
                await loadJenisAksi(sector, subSector, kategori);
            } else {
                $('#jenisaksi-dropdown').empty().append('<option value="">Pilih Jenis Aksi</option>');
            }
        });

        $('#jenisaksi-dropdown').on('change', async function() {
            jenis = $(this).val();
            if(jenis) {
                await loadAksi(sector, subSector, kategori, jenis);
            } else {
                $('#aksi-dropdown').empty().append('<option value="">Pilih Aksi</option>');
            }
        });

        $('#aksi-dropdown').on('change', async function() {
            let selectedOption = $(this).find(':selected');
            let adaptation_id = selectedOption.data('id');
            adaptationId = adaptation_id;
        });

        // Form validation & accordion auto-open on invalid input
        $('form').on('submit', function(e) {
            if(!this.checkValidity()){
                e.preventDefault();
                const firstInvalid = this.querySelector(':invalid');
                if(firstInvalid){
                    const collapseParent = firstInvalid.closest('.collapse');
                    if(collapseParent && !collapseParent.classList.contains('show')){
                        new bootstrap.Collapse(collapseParent, { toggle: true });
                    }
                    firstInvalid.focus();
                }
            }
        });

        // Handle partial save and accordion navigation
        $('.btn-submit[data-target="#collapse2"]').on('click', function(e) {
            e.preventDefault();
            console.log(adaptationId);
            let formData = $('#collapse1').find('input, select, textarea').serialize();
            formData += '&adaptation_id=' + encodeURIComponent(adaptationId);
            formData += '&_token=' + $('meta[name="csrf-token"]').attr('content');

            $.post("{{ route('adaptasi-form.store-part1') }}", formData)
                .done(response => {
                    if(response.success) {
                        $('#collapse1').one('hidden.bs.collapse', () => {
                            $('#collapse2').collapse('show');
                        });
                        $('#collapse1').collapse('hide');
                    } else {
                        alert(response.message || 'Gagal Menyimpan data bagian Informasi Umum');
                    }
                })
                .fail(xhr => {
                    let msg = 'Terjadi kesalahan saat menyimpan data Informasi Umum';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    alert(msg);
                });
        });

        $('.btn-submit[data-target="#collapse3"]').click(function(e) {
            e.preventDefault();

            let formData = $('#collapse2').find('input, select, textarea').serialize();
            formData += '&_token=' + $('meta[name="csrf-token"]').attr('content');

            $.post("{{ route('adaptasi-form.store-part2') }}", formData)
                .done(function(response) {
                    if(response.success) {
                        $('#collapse2').one('hidden.bs.collapse', () => {
                            $('#collapse3').collapse('show');
                        });
                        $('#collapse2').collapse('hide');
                    } else {
                        alert(response.message || 'Gagal menyimpan data bagian Informasi Alokasi/Realisasi Anggaran');
                    }
                })
                .fail(function() {
                    alert('Terjadi kesalahan saat menyimpan Data Informasi Alokasi/Realisasi Anggaran');
                });
        });

        $(document).on('click', '#final-submit', function() {
            // Tambahkan & sebelum mitigation_id dan encodeURIComponent
            const formData = $('form').serialize()
                            + '&adaptation_id=' + encodeURIComponent(adaptationId)
                            + '&_method=PUT';
            console.log(formData);
            $.ajax({
                url: "/adaptasi/" + kegiatanId,
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                success(response) {
                    if (response.success) {
                        alert('Data berhasil disimpan!');
                        window.location.href = response.redirect;
                    } else {
                        alert(response.message || 'Gagal menyimpan data.');
                    }
                },
                error(xhr) {
                    console.error(xhr);
                    alert('Terjadi kesalahan saat menyimpan data.');
                }
            });
        });
    });
</script>
@endsection
rror(xhr);
                    alert('Terjadi kesalahan saat menyimpan data.');
                }
            });
        });
    });
</script>
@endsection
    });
    });
</script>
@endsection