@extends('layouts.app')

@section('title', 'Kegiatan Warga')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Form Kegiatan Warga</h3>
            <a href="{{ route('data-warga-tp-pkk.index', $dataWarga->rumah_tangga_id) }}" class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
                <i class="fas fa-arrow-left mr-2"></i> Kembali
            </a>
        </div>
        <div class="p-6">
                    <form id="kegiatanWargaForm" method="POST" action="{{ route('kegiatan-warga.store', $dataWarga->id) }}">
                        @csrf
                        
                        <!-- Data Warga (Read Only) -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kepala Rumah Tangga</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" value="{{ $dataWarga->nama_kepala_rumah_tangga }}" readonly>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Warga</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" value="{{ $dataWarga->nama_warga }}" readonly>
                            </div>
                        </div>

                        <!-- Penghayatan dan Pengamalan Pancasila -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Penghayatan dan Pengamalan Pancasila <span class="text-red-500">*</span></label>
                                <div class="space-y-2">
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="penghayatan_pengamalan_pancasila" id="pancasila_ya" value="Ya" 
                                               {{ old('penghayatan_pengamalan_pancasila', $kegiatanWarga->penghayatan_pengamalan_pancasila ?? '') == 'Ya' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="pancasila_ya">Ya</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="penghayatan_pengamalan_pancasila" id="pancasila_tidak" value="Tidak"
                                               {{ old('penghayatan_pengamalan_pancasila', $kegiatanWarga->penghayatan_pengamalan_pancasila ?? '') == 'Tidak' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="pancasila_tidak">Tidak</label>
                                    </div>
                                </div>
                            </div>
                            <div id="jenis_kegiatan_pancasila_div" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Kegiatan Yang Diikuti</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" name="jenis_kegiatan_pancasila" 
                                       value="{{ old('jenis_kegiatan_pancasila', $kegiatanWarga->jenis_kegiatan_pancasila ?? '') }}">
                            </div>
                        </div>

                        <!-- Kerja Bakti -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Kerja Bakti <span class="text-red-500">*</span></label>
                                <div class="space-y-2">
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="kerja_bakti" id="kerja_bakti_ya" value="Ya"
                                               {{ old('kerja_bakti', $kegiatanWarga->kerja_bakti ?? '') == 'Ya' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="kerja_bakti_ya">Ya</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="kerja_bakti" id="kerja_bakti_tidak" value="Tidak"
                                               {{ old('kerja_bakti', $kegiatanWarga->kerja_bakti ?? '') == 'Tidak' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="kerja_bakti_tidak">Tidak</label>
                                    </div>
                                </div>
                            </div>
                            <div id="jenis_kegiatan_kerja_bakti_div" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Kegiatan Yang Diikuti</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" name="jenis_kegiatan_kerja_bakti"
                                       value="{{ old('jenis_kegiatan_kerja_bakti', $kegiatanWarga->jenis_kegiatan_kerja_bakti ?? '') }}">
                            </div>
                        </div>

                        <!-- Rukun Kematian -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Rukun Kematian <span class="text-red-500">*</span></label>
                                <div class="space-y-2">
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="rukun_kematian" id="rukun_kematian_ya" value="Ya"
                                               {{ old('rukun_kematian', $kegiatanWarga->rukun_kematian ?? '') == 'Ya' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="rukun_kematian_ya">Ya</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="rukun_kematian" id="rukun_kematian_tidak" value="Tidak"
                                               {{ old('rukun_kematian', $kegiatanWarga->rukun_kematian ?? '') == 'Tidak' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="rukun_kematian_tidak">Tidak</label>
                                    </div>
                                </div>
                            </div>
                            <div id="jenis_kegiatan_rukun_kematian_div" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Kegiatan Yang Diikuti</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" name="jenis_kegiatan_rukun_kematian"
                                       value="{{ old('jenis_kegiatan_rukun_kematian', $kegiatanWarga->jenis_kegiatan_rukun_kematian ?? '') }}">
                            </div>
                        </div>

                        <!-- Kegiatan Keagamaan -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Kegiatan Keagamaan <span class="text-red-500">*</span></label>
                                <div class="space-y-2">
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="kegiatan_keagamaan" id="kegiatan_keagamaan_ya" value="Ya"
                                               {{ old('kegiatan_keagamaan', $kegiatanWarga->kegiatan_keagamaan ?? '') == 'Ya' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="kegiatan_keagamaan_ya">Ya</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="kegiatan_keagamaan" id="kegiatan_keagamaan_tidak" value="Tidak"
                                               {{ old('kegiatan_keagamaan', $kegiatanWarga->kegiatan_keagamaan ?? '') == 'Tidak' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="kegiatan_keagamaan_tidak">Tidak</label>
                                    </div>
                                </div>
                            </div>
                            <div id="jenis_kegiatan_keagamaan_div" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Kegiatan Yang Diikuti</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" name="jenis_kegiatan_keagamaan"
                                       value="{{ old('jenis_kegiatan_keagamaan', $kegiatanWarga->jenis_kegiatan_keagamaan ?? '') }}">
                            </div>
                        </div>

                        <!-- Jumpitan -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Jumpitan <span class="text-red-500">*</span></label>
                                <div class="space-y-2">
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="jumpitan" id="jumpitan_ya" value="Ya"
                                               {{ old('jumpitan', $kegiatanWarga->jumpitan ?? '') == 'Ya' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="jumpitan_ya">Ya</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="jumpitan" id="jumpitan_tidak" value="Tidak"
                                               {{ old('jumpitan', $kegiatanWarga->jumpitan ?? '') == 'Tidak' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="jumpitan_tidak">Tidak</label>
                                    </div>
                                </div>
                            </div>
                            <div id="jenis_kegiatan_jumpitan_div" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Kegiatan Yang Diikuti</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" name="jenis_kegiatan_jumpitan"
                                       value="{{ old('jenis_kegiatan_jumpitan', $kegiatanWarga->jenis_kegiatan_jumpitan ?? '') }}">
                            </div>
                        </div>

                        <!-- Arisan -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Arisan <span class="text-red-500">*</span></label>
                                <div class="space-y-2">
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="arisan" id="arisan_ya" value="Ya"
                                               {{ old('arisan', $kegiatanWarga->arisan ?? '') == 'Ya' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="arisan_ya">Ya</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2" type="radio" name="arisan" id="arisan_tidak" value="Tidak"
                                               {{ old('arisan', $kegiatanWarga->arisan ?? '') == 'Tidak' ? 'checked' : '' }}>
                                        <label class="ml-2 text-sm text-gray-700 dark:text-gray-300" for="arisan_tidak">Tidak</label>
                                    </div>
                                </div>
                            </div>
                            <div id="jenis_kegiatan_arisan_div" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Kegiatan Yang Diikuti</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" name="jenis_kegiatan_arisan"
                                       value="{{ old('jenis_kegiatan_arisan', $kegiatanWarga->jenis_kegiatan_arisan ?? '') }}">
                            </div>
                        </div>

                        <!-- Lain-lain -->
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Lain-lain</label>
                            <textarea class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" name="lain_lain" rows="3" placeholder="Masukkan kegiatan lain yang diikuti...">{{ old('lain_lain', $kegiatanWarga->lain_lain ?? '') }}</textarea>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-3">
                            <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
                                <i class="fas fa-save mr-2"></i> Simpan Data
                            </button>
                            <a href="{{ route('data-warga-tp-pkk.index', $dataWarga->rumah_tangga_id) }}" class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-600 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                                <i class="fas fa-times mr-2"></i> Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

@push('scripts')
<script>
$(document).ready(function() {
    // Function to toggle conditional fields
    function toggleConditionalField(radioName, targetDiv) {
        $('input[name="' + radioName + '"]').change(function() {
            if ($(this).val() === 'Ya' && $(this).is(':checked')) {
                $('#' + targetDiv).show();
            } else {
                $('#' + targetDiv).hide();
                $('#' + targetDiv + ' input').val('');
            }
        });
    }

    // Initialize conditional fields
    toggleConditionalField('penghayatan_pengamalan_pancasila', 'jenis_kegiatan_pancasila_div');
    toggleConditionalField('kerja_bakti', 'jenis_kegiatan_kerja_bakti_div');
    toggleConditionalField('rukun_kematian', 'jenis_kegiatan_rukun_kematian_div');
    toggleConditionalField('kegiatan_keagamaan', 'jenis_kegiatan_keagamaan_div');
    toggleConditionalField('jumpitan', 'jenis_kegiatan_jumpitan_div');
    toggleConditionalField('arisan', 'jenis_kegiatan_arisan_div');

    // Show conditional fields on page load if 'Ya' is selected
    if ($('input[name="penghayatan_pengamalan_pancasila"]:checked').val() === 'Ya') {
        $('#jenis_kegiatan_pancasila_div').show();
    }
    if ($('input[name="kerja_bakti"]:checked').val() === 'Ya') {
        $('#jenis_kegiatan_kerja_bakti_div').show();
    }
    if ($('input[name="rukun_kematian"]:checked').val() === 'Ya') {
        $('#jenis_kegiatan_rukun_kematian_div').show();
    }
    if ($('input[name="kegiatan_keagamaan"]:checked').val() === 'Ya') {
        $('#jenis_kegiatan_keagamaan_div').show();
    }
    if ($('input[name="jumpitan"]:checked').val() === 'Ya') {
        $('#jenis_kegiatan_jumpitan_div').show();
    }
    if ($('input[name="arisan"]:checked').val() === 'Ya') {
        $('#jenis_kegiatan_arisan_div').show();
    }

    // Form submission with AJAX
    $('#kegiatanWargaForm').submit(function(e) {
        e.preventDefault();
        
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message,
                        confirmButtonText: 'OK'
                    }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = "{{ route('data-warga-tp-pkk.index', $dataWarga->rumah_tangga_id) }}";
                            }
                        });
                }
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                let errorMessage = 'Terjadi kesalahan:\n';
                
                if (errors) {
                    Object.keys(errors).forEach(function(key) {
                        errorMessage += '- ' + errors[key][0] + '\n';
                    });
                } else {
                    errorMessage = 'Terjadi kesalahan saat menyimpan data.';
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: errorMessage,
                    confirmButtonText: 'OK'
                });
            }
        });
    });
});
</script>
@endpush
@endsection