@extends('layouts.app')
@section('title', 'Penyelarasan OSC')
@section('ibams', true)
@section('hide_footer', true)
@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="sidebar" style="position: unset; all: unset; display: block;">
    <div style="all: unset; display: block;">
        @include('layouts.auditTrail')
    </div>
</div>

@php
    $year = request('year') ?? date('Y');
    $nofail = request('nomborFail') ?? $data->nombor_fail;
@endphp

<style>
.form-control:focus, .form-select:focus {
    border-color: #0AD1C8;
    box-shadow: 0 0 0 0.2rem rgba(10, 209, 200, 0.25);
}

.required-field {
    border-left: 4px solid #0AD1C8;
}

.langkah-btn-custom {
    width: 215px !important;
    height: 37px !important;
    border-radius: 5px !important;
    border: 1.5px solid #0B6477 !important;
    color: #0B6477 !important;
    background: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.05em;
    line-height: 21px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    text-transform: uppercase;
    margin-top: 8px;
    margin-left: 23px;
    padding: 0 !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.langkah-btn-custom:hover {
    background: #0B6477 !important;
    color: #fff !important;
    text-decoration: none;
}

.langkah-btn-text {
    width: 100%;
    text-align: center;
    line-height: 21px;
    letter-spacing: 0.05em;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    display: block;
    white-space: nowrap;
}

.langkah-btn-custom:disabled, .langkah-btn-custom.disabled {
    opacity: 1 !important;
    background: #fff !important;
    color: #0B6477 !important;
    border: 1.5px solid #0B6477 !important;
}

.form-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    max-width: 1200px;
    margin: 0 auto 40px auto;
    padding: 2.5rem;
}

.status-indicator {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-batal { background: #fee; color: #dc3545; }
.status-tolak { background: #fee; color: #dc3545; }
.status-lulus { background: #efe; color: #28a745; }
.status-lulus-pindaan { background: #f8f9fa; color: #333; font-weight: bold; }
.status-tangguh { background: #e3f2fd; color: #1976d2; }

/* Breadcrumb link styling */
.breadcrumb {
    pointer-events: auto !important;
}

.breadcrumb a {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    user-select: none !important;
}

.breadcrumb a:hover {
    color: #0AD1C8 !important;
    text-decoration: underline !important;
    background-color: rgba(10, 209, 200, 0.1) !important;
    border-radius: 3px !important;
}

.breadcrumb a:active {
    background-color: rgba(10, 209, 200, 0.2) !important;
}

.breadcrumb li {
    pointer-events: auto !important;
}

/* Custom Date Input Styling */
.date-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.date-input-custom {
    width: 100%;
    padding: 0.375rem 2.5rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.date-input-custom:focus {
    border-color: #0AD1C8;
    box-shadow: 0 0 0 0.2rem rgba(10, 209, 200, 0.25);
    outline: 0;
}

.date-input-custom.required-field {
    border-left: 4px solid #0AD1C8;
}

.date-input-custom.calculation-field {
    background-color: #f8f9fa !important;
}

.date-input-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
    font-size: 1rem;
}

/* Hide default calendar icon in WebKit browsers */
.date-input-custom::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 2rem;
    height: 100%;
    cursor: pointer;
}

/* Firefox date input styling */
.date-input-custom::-moz-focus-inner {
    border: 0;
}

/* Placeholder styling when showing as text */
.date-input-custom.placeholder-mode {
    color: #6c757d;
}

.date-input-custom.placeholder-mode::placeholder {
    color: #6c757d;
    opacity: 1;
}
</style>

<div class="container-fluid p-0" style="background: #F4FFFF; min-height: 100vh;">
    <div class="d-flex align-items-center justify-content-between" style= "height: 90px; padding: 0 40px 0 0;"></div>
    <div class="container" style="max-width: 1400px; margin-top: 32px;padding-left: 4rem">
        <div class="d-flex align-items-center justify-content-between mb-2" style="gap: 0;">
            <div style="flex:1;">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb" style="background: none; padding: 0; margin-bottom: 0; font-size: 14px;">
                        <li style="display: flex; align-items: center;">
                            <a href="/maindashboard" style="display: flex; align-items: center; text-decoration: none; cursor: pointer; z-index: 999;">
                                <img src="{{ asset('images/icon/home.svg') }}" alt="Home" style="width: 20px; height: 20px;">
                            </a>
                        </li>
                        <li style="display: flex; align-items: center; margin: 0 8px;">
                            <img src="{{ asset('images/icon/chevron-right.svg') }}" alt="" style="width: 15px; height: 15px;">
                        </li>
                        <li style="display: flex; align-items: center; font-family: 'Poppins', sans-serif; font-weight: 300; font-style: normal; font-size: 10px; line-height: 100%; letter-spacing: 0.05em;">
                            <a href="/ibuildingYears" style="color: inherit; text-decoration: none; cursor: pointer; padding: 2px 4px; z-index: 999;">
                                Senarai Permohonan
                            </a>
                        </li>
                        <li style="display: flex; align-items: center; margin: 0 8px;">
                            <img src="{{ asset('images/icon/chevron-right.svg') }}" alt="" style="width: 15px; height: 15px;">
                        </li>
                        <li style="display: flex; align-items: center; font-family: 'Poppins', sans-serif; font-weight: 300; font-style: normal; font-size: 10px; line-height: 100%; letter-spacing: 0.05em;">
                            <a href="/applicationlist/{{ $year }}" style="color: inherit; text-decoration: none; cursor: pointer; padding: 2px 4px; z-index: 999;">
                                Permohonan {{ $year }}
                            </a>
                        </li>
                        <li style="display: flex; align-items: center; margin: 0 8px;">
                            <img src="{{ asset('images/icon/chevron-right.svg') }}" alt="" style="width: 15px; height: 15px;">
                        </li>
                        <li style="display: flex; align-items: center; font-family: 'Poppins', sans-serif; font-weight: 300; font-style: normal; font-size: 10px; line-height: 100%; letter-spacing: 0.05em;">
                            <a href="javascript:void(0)" onclick="window.location.href='/step1?nomborFail={{ urlencode($nofail) }}'" style="color: inherit; text-decoration: none; cursor: pointer; padding: 2px 4px;">
                                Butiran Permohonan
                            </a>
                        </li>
                        <li style="display: flex; align-items: center; margin: 0 8px;">
                            <img src="{{ asset('images/icon/chevron-right.svg') }}" alt="" style="width: 15px; height: 15px;">
                        </li>
                        <li style="display: flex; align-items: center; font-family: 'Poppins', sans-serif; font-weight: 300; font-style: normal; font-size: 10px; line-height: 100%; letter-spacing: 0.05em; color: #666;">
                            Penyelarasan OSC
                        </li>
                    </ol>
                </nav>
            </div>
            <div style="display: flex; align-items: center;">
                @include('layouts.date-clock')
            </div>
        </div>
                <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2.2rem; margin-bottom: 0.5rem;">Penyelarasan OSC</h2>
        <hr style="margin-top: 0; margin-bottom: 32px; border-color: #D9D9D9;">
        
        <!-- Stepper -->
        <div class="d-flex align-items-center justify-content-center mb-4" style="gap: 32px;">
            <div class="d-flex align-items-center" style="gap: 32px;">
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #1B6B7A; color: #fff; font-size: 1.5rem; font-weight: 600;">1</div>
                <div style="height: 4px; width: 150px; background: #1B6B7A;"></div>
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #1B6B7A; color: #fff; font-size: 1.5rem; font-weight: 600; border: 4px solid #0AD1C8;">2</div>
                <div style="position: relative; height: 4px; width: 150px; background: #D9D9D9; border-radius: 2px; overflow: hidden;">
                    <div style="position: absolute; left: 0; top: 0; height: 100%; width: 50%; background: #1B6B7A;"></div>
                </div>
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #D9D9D9; color: #B0B0B0; font-size: 1.5rem; font-weight: 600;">3</div>
                <div style="height: 4px; width: 150px; background: #D9D9D9;"></div>
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #D9D9D9; color: #B0B0B0; font-size: 1.5rem; font-weight: 600;">4</div>
                <div style="height: 4px; width: 150px; background: #D9D9D9;"></div>
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #D9D9D9; color: #B0B0B0; font-size: 1.5rem; font-weight: 600;">5</div>
            </div>
        </div>

        <!-- OSC Coordination Form -->
        <div style="background: #fff; border-radius: 8px; padding: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-top: 32px;">
            <form method="POST" action="{{ route('permohonanstep2.store') }}" id="oscForm">
                @csrf
                
                <!-- Hidden fields to maintain data flow -->
                <input type="hidden" name="application_id" value="{{ $data->id ?? '' }}">
                <input type="hidden" name="nombor_fail" value="{{ $data->nombor_fail ?? $nofail }}">
                <input type="hidden" name="complete_nombor_fail" value="{{ $nofail }}">
                
                <div style="margin-bottom: 32px;">
                    <div style="display: flex; align-items: center; margin-bottom: 16px;">
                        <label style="width: 350px; font-family: 'Poppins', sans-serif; font-size: 16px; color: #222;">
                            Tarikh Mesyuarat Pemantauan Kali Pertama
                        </label>
                        <span style="margin: 0 16px;">:</span>
                        <div class="date-input-wrapper" style="flex: 1; max-width: 300px;">
                            <input type="date" 
                                   id="tarikh_mesyuarat_pertama"
                                   name="tarikh_mesyuarat_pertama" 
                                   class="date-input-custom" 
                                   data-placeholder="-- Pilih Tarikh --"
                                   value="{{ $data->tarikh_mesyuarat1 ?? '' }}">
                            <i class="fas fa-calendar-alt date-input-icon"></i>
                        </div>
                    </div>
                </div>

                <div style="margin-bottom: 32px;">
                    <div style="display: flex; align-items: center; margin-bottom: 16px;">
                        <label style="width: 350px; font-family: 'Poppins', sans-serif; font-size: 16px; color: #222;">
                            Bilangan Mesyuarat Pemantauan Kali Pertama
                        </label>
                        <span style="margin: 0 16px;">:</span>
                        <input type="text" 
                               name="bil_mesyuarat_1" 
                               class="form-control" 
                               style="flex: 1; max-width: 300px; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 12px;"
                               value="{{ $data->bil_mesyuarat1 ?? '' }}">
                    </div>
                </div>

                <div style="margin-bottom: 32px;">
                    <div style="display: flex; align-items: center; margin-bottom: 16px;">
                        <label style="width: 350px; font-family: 'Poppins', sans-serif; font-size: 16px; color: #222;">
                            Keputusan Akhir Mesyuarat
                        </label>
                        <span style="margin: 0 16px;">:</span>
                        <select name="keputusan_mesyuarat" 
                                id="keputusan_mesyuarat"
                                class="form-select" 
                                style="flex: 1; max-width: 300px; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 12px;">
                            <option value="">Pilih Keputusan</option>
                            <option value="batal" {{ ($data->keputusan_mesyuarat ?? '') === 'batal' ? 'selected' : '' }}>BATAL</option>
                            <option value="tolak" {{ ($data->keputusan_mesyuarat ?? '') === 'tolak' ? 'selected' : '' }}>TOLAK</option>
                            <option value="lulus dengan pindaan" {{ ($data->keputusan_mesyuarat ?? '') === 'lulus dengan pindaan' ? 'selected' : '' }}>LULUS DENGAN PINDAAN</option>
                            <option value="lulus" {{ ($data->keputusan_mesyuarat ?? '') === 'lulus' ? 'selected' : '' }}>LULUS</option>
                            <option value="tangguh" {{ ($data->keputusan_mesyuarat ?? '') === 'tangguh' ? 'selected' : '' }}>TANGGUH</option>
                        </select>
                    </div>
                </div>

                <div style="margin-bottom: 32px;">
                    <div style="display: flex; align-items: center; margin-bottom: 16px;">
                        <label style="width: 350px; font-family: 'Poppins', sans-serif; font-size: 16px; color: #222;">
                            Tarikh Keputusan Akhir
                        </label>
                        <span style="margin: 0 16px;">:</span>
                        <div class="date-input-wrapper" style="flex: 1; max-width: 300px;">
                            <input type="date" 
                                   id="tarikh_keputusan_akhir"
                                   name="tarikh_keputusan_akhir" 
                                   class="date-input-custom" 
                                   data-placeholder="-- Pilih Tarikh --"
                                   value="{{ $data->tarikh_keputusan ?? '' }}">
                            <i class="fas fa-calendar-alt date-input-icon"></i>
                        </div>
                    </div>
                </div>

                <div style="margin-bottom: 32px;">
                    <div style="display: flex; align-items: center; margin-bottom: 16px;">
                        <label style="width: 350px; font-family: 'Poppins', sans-serif; font-size: 16px; color: #222;">
                            Bilangan Mesyuarat Keputusan Akhir
                        </label>
                        <span style="margin: 0 16px;">:</span>
                        <input type="text" 
                               name="bil_mesyuarat_akhir" 
                               class="form-control" 
                               style="flex: 1; max-width: 300px; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 12px;"
                               value="{{ $data->bil_mesyuarat_keputusan ?? '' }}">
                    </div>
                </div>

                <!-- Action Buttons -->
                <div style="display: flex; justify-content: space-between; margin-top: 48px;">
                    <button type="button" onclick="history.back()" 
                            style="background: #fff; color: #0B6477; border: 1.5px solid #0B6477; border-radius: 5px; width: 215px; height: 37px; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; display: flex; align-items: center; justify-content: center;">
                        LANGKAH SEBELUMNYA
                    </button>
                    <button type="submit" 
                            style="background: #0B6477; color: #fff; border: none; border-radius: 5px; width: 215px; height: 37px; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; display: flex; align-items: center; justify-content: center;">
                        SIMPAN & SETERUSNYA
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Simple date input placeholder functionality
    function initDatePlaceholders() {
        const dateInputs = document.querySelectorAll('input[type="date"][data-placeholder]');
        
        dateInputs.forEach(input => {
            const placeholder = input.getAttribute('data-placeholder');
            
            // Set initial type to text if no value
            if (!input.value) {
                input.type = 'text';
                input.placeholder = placeholder;
                input.style.color = '#6c757d';
            }
            
            // When user focuses, change to date type
            input.addEventListener('focus', function() {
                this.type = 'date';
                this.style.color = '#495057';
            });
            
            // When user loses focus, check if empty
            input.addEventListener('blur', function() {
                if (!this.value) {
                    this.type = 'text';
                    this.placeholder = placeholder;
                    this.style.color = '#6c757d';
                }
            });
            
            // When value changes, keep as date type
            input.addEventListener('change', function() {
                if (this.value) {
                    this.type = 'date';
                    this.style.color = '#495057';
                } else {
                    this.type = 'text';
                    this.placeholder = placeholder;
                    this.style.color = '#6c757d';
                }
            });
        });
    }
    
    // Initialize date placeholders
    initDatePlaceholders();

    const form = document.getElementById('oscForm');
    const keputusanSelect = document.getElementById('keputusan_mesyuarat');
    const tarikhKeputusan = document.getElementById('tarikh_keputusan_akhir');
    const currentStatusEl = document.getElementById('current_status');

    // Update status indicator based on decision
    function updateStatusIndicator() {
        if (!keputusanSelect.value || !currentStatusEl) return;
        
        const selectedOption = keputusanSelect.options[keputusanSelect.selectedIndex];
        const statusClass = selectedOption.getAttribute('data-status');
        
        // Remove all status classes
        currentStatusEl.classList.remove('status-batal', 'status-tolak', 'status-lulus', 'status-lulus-pindaan', 'status-tangguh', 'status-sedang-diproses');
        
        // Add new status class and update text
        if (statusClass) {
            currentStatusEl.classList.add('status-' + statusClass);
            currentStatusEl.textContent = selectedOption.textContent;
        }
    }

    // Form validation
    function validateForm() {
        let isValid = true;
        const requiredFields = form.querySelectorAll('[required]');
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
                field.classList.add('is-valid');
            }
        });

        // Additional validation: Tarikh Keputusan should be after Tarikh Mesyuarat
        const tarikhMesyuarat = document.getElementById('tarikh_mesyuarat_pertama');
        if (tarikhMesyuarat.value && tarikhKeputusan.value) {
            if (new Date(tarikhKeputusan.value) < new Date(tarikhMesyuarat.value)) {
                tarikhKeputusan.classList.add('is-invalid');
                isValid = false;
                
                // Show custom error message
                let feedback = tarikhKeputusan.nextElementSibling;
                if (feedback && feedback.classList.contains('invalid-feedback')) {
                    feedback.textContent = 'Tarikh keputusan mestilah selepas tarikh mesyuarat.';
                }
            }
        }

        return isValid;
    }

    // Event listeners
    if (keputusanSelect) {
        keputusanSelect.addEventListener('change', updateStatusIndicator);
        // Initialize status on page load
        updateStatusIndicator();
    }

    // Real-time validation
    const allInputs = form.querySelectorAll('input, select, textarea');
    allInputs.forEach(input => {
        input.addEventListener('blur', function() {
            if (this.hasAttribute('required')) {
                if (!this.value.trim()) {
                    this.classList.add('is-invalid');
                    this.classList.remove('is-valid');
                } else {
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                }
            }
        });

        input.addEventListener('input', function() {
            if (this.classList.contains('is-invalid') && this.value.trim()) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            }
        });
    });

    // Form submission validation
    form.addEventListener('submit', function(e) {
        // Debug form submission
        console.log('Form submission attempt...');
        console.log('Form data before submission:', new FormData(form));
        
        // Log all form values
        const formData = new FormData(form);
        for (let [key, value] of formData.entries()) {
            console.log(key + ': ' + value);
        }
        
        if (!validateForm()) {
            console.log('Form validation failed');
            e.preventDefault();
            e.stopPropagation();
            
            // Focus on first invalid field
            const firstInvalid = form.querySelector('.is-invalid');
            if (firstInvalid) {
                firstInvalid.focus();
                firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        } else {
            console.log('Form validation passed, submitting...');
        }
    });

    // Auto-save functionality (optional)
    let autoSaveTimeout;
    function autoSave() {
        clearTimeout(autoSaveTimeout);
        autoSaveTimeout = setTimeout(() => {
            // Implement auto-save logic here if needed
            console.log('Auto-saving form data...');
        }, 2000);
    }

    allInputs.forEach(input => {
        input.addEventListener('input', autoSave);
    });

    // ENHANCED STEP 2 BUSINESS RULES IMPLEMENTATION
    // Based on specification images for Penyelarasan OSC (B1-B5 fields)
    
    // Get additional form elements for business rules
    const businessElements = {
        tarikhMesyuaratPertama: document.getElementById('tarikh_mesyuarat_pertama'),
        bilMesyuarat1: document.querySelector('input[name="bil_mesyuarat_1"]'),
        keputusanMesyuarat: document.getElementById('keputusan_mesyuarat'),
        tarikhKeputusanAkhir: document.getElementById('tarikh_keputusan_akhir'),
        bilMesyuaratAkhir: document.querySelector('input[name="bil_mesyuarat_akhir"]')
    };
    
    // B3 - Enhanced keputusan mesyuarat handling with cross-step communication
    function handleKeputusanMesyuarat() {
        if (!businessElements.keputusanMesyuarat) return;
        
        businessElements.keputusanMesyuarat.addEventListener('change', function() {
            const selectedValue = this.value;
            const selectedOption = this.options[this.selectedIndex];
            
            // Apply enhanced color styling based on selection
            this.classList.remove('status-batal', 'status-tolak', 'status-lulus', 'status-lulus-pindaan', 'status-tangguh');
            
            // Color coding based on specification
            if (selectedValue === 'batal') {
                this.classList.add('status-batal');
                this.style.color = '#dc3545';
                this.style.fontWeight = 'bold';
                this.style.backgroundColor = '#fee';
            } else if (selectedValue === 'tolak') {
                this.classList.add('status-tolak');
                this.style.color = '#dc3545';
                this.style.fontWeight = 'bold';
                this.style.backgroundColor = '#fee';
            } else if (selectedValue === 'lulus dengan pindaan') {
                this.classList.add('status-lulus-pindaan');
                this.style.color = '#333';
                this.style.fontWeight = 'bold';
                this.style.backgroundColor = '#f8f9fa';
            } else if (selectedValue === 'lulus') {
                this.classList.add('status-lulus');
                this.style.color = '#28a745';
                this.style.fontWeight = 'bold';
                this.style.backgroundColor = '#efe';
            } else if (selectedValue === 'tangguh') {
                this.classList.add('status-tangguh');
                this.style.color = '#1976d2';
                this.style.fontWeight = 'bold';
                this.style.backgroundColor = '#e3f2fd';
            }
            
            // Cross-step communication - update localStorage for other steps
            localStorage.setItem('b3_keputusan', selectedValue);
            localStorage.setItem('b3_updated', Date.now().toString());
            
            console.log('B3 Keputusan updated:', selectedValue);
        });
        
        // Initialize styling on page load
        const currentValue = businessElements.keputusanMesyuarat.value;
        if (currentValue) {
            const event = new Event('change');
            businessElements.keputusanMesyuarat.dispatchEvent(event);
        }
    }
    
    // B4 - Enhanced tarikh keputusan akhir handling
    function handleTarikhKeputusanAkhir() {
        if (!businessElements.tarikhKeputusanAkhir) return;
        
        businessElements.tarikhKeputusanAkhir.addEventListener('change', function() {
            const dateValue = this.value;
            
            // Cross-step communication - update localStorage for step1 integration
            localStorage.setItem('b4_tarikh', dateValue);
            localStorage.setItem('b4_updated', Date.now().toString());
            
            // Validate that B4 date is after B1 date
            if (businessElements.tarikhMesyuaratPertama && businessElements.tarikhMesyuaratPertama.value) {
                const tarikhMesyuarat = businessElements.tarikhMesyuaratPertama.value;
                
                if (new Date(dateValue) < new Date(tarikhMesyuarat)) {
                    this.classList.add('is-invalid');
                    
                    // Show custom error message
                    let feedback = this.nextElementSibling;
                    if (feedback && feedback.classList.contains('invalid-feedback')) {
                        feedback.textContent = 'Tarikh keputusan akhir mestilah selepas tarikh mesyuarat pertama.';
                    }
                } else {
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                }
            }
            
            console.log('B4 Tarikh Keputusan updated:', dateValue);
        });
    }
    
    // B1 - Handle tarikh mesyuarat pertama
    function handleTarikhMesyuaratPertama() {
        if (!businessElements.tarikhMesyuaratPertama) return;
        
        businessElements.tarikhMesyuaratPertama.addEventListener('change', function() {
            const dateValue = this.value;
            
            // Store in localStorage for potential future use
            localStorage.setItem('b1_tarikh_mesyuarat', dateValue);
            
            // Re-validate B4 if it has a value
            if (businessElements.tarikhKeputusanAkhir && businessElements.tarikhKeputusanAkhir.value) {
                const event = new Event('change');
                businessElements.tarikhKeputusanAkhir.dispatchEvent(event);
            }
            
            console.log('B1 Tarikh Mesyuarat updated:', dateValue);
        });
    }
    
    // B2 & B5 - Handle bilangan mesyuarat fields
    function handleBilanganMesyuarat() {
        if (businessElements.bilMesyuarat1) {
            businessElements.bilMesyuarat1.addEventListener('input', function() {
                localStorage.setItem('b2_bil_mesyuarat1', this.value);
            });
        }
        
        if (businessElements.bilMesyuaratAkhir) {
            businessElements.bilMesyuaratAkhir.addEventListener('input', function() {
                localStorage.setItem('b5_bil_mesyuarat_akhir', this.value);
            });
        }
    }
    
    // Enhanced form validation for B1-B5 fields
    function enhancedFormValidation() {
        const step2RequiredFields = [
            businessElements.tarikhMesyuaratPertama,
            businessElements.keputusanMesyuarat,
            businessElements.tarikhKeputusanAkhir
        ];
        
        step2RequiredFields.forEach(field => {
            if (field) {
                field.addEventListener('blur', function() {
                    if (!this.value.trim()) {
                        this.classList.add('is-invalid');
                        this.classList.remove('is-valid');
                    } else {
                        this.classList.remove('is-invalid');
                        this.classList.add('is-valid');
                    }
                });
            }
        });
    }
    
    // Cross-step status update function
    function updateCrossStepStatus() {
        // Notify other steps about changes in step2
        const b3Value = businessElements.keputusanMesyuarat ? businessElements.keputusanMesyuarat.value : '';
        const b4Value = businessElements.tarikhKeputusanAkhir ? businessElements.tarikhKeputusanAkhir.value : '';
        
        // Trigger updates in step1 if both B3 and B4 have values
        if (b3Value && b4Value) {
            // This will be picked up by step1's status update logic
            localStorage.setItem('step2_status_complete', 'true');
            localStorage.setItem('step2_status_updated', Date.now().toString());
        }
    }
    
    // Initialize all B1-B5 business rules
    handleTarikhMesyuaratPertama();
    handleKeputusanMesyuarat();
    handleTarikhKeputusanAkhir();
    handleBilanganMesyuarat();
    enhancedFormValidation();
    
    // Listen for changes to trigger cross-step updates
    const allBusinessInputs = Object.values(businessElements).filter(el => el);
    allBusinessInputs.forEach(input => {
        if (input) {
            input.addEventListener('change', updateCrossStepStatus);
        }
    });
    
    // Initialize form state
    console.log('Step 2 business rules initialized successfully');
    
    // Ensure breadcrumb links work
    const breadcrumbLinks = document.querySelectorAll('.breadcrumb a');
    breadcrumbLinks.forEach((link, index) => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const href = this.getAttribute('href');
            if (href && href !== '#' && href !== 'javascript:void(0)') {
                window.location.href = href;
            }
        });
    });
});
</script>

@endsection