@extends('layouts.app')
@section('title', 'Butiran Permohonan')
@section('ibams', true)
@section('hide_footer', true)
@section('content')

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

@php
    $nofail = request('nomborFail') ?? ($data->nombor_fail ?? '');
    
    // Extract parts from the complete nombor fail
    $nofailParts = $nofail ? explode('/', $nofail) : [];
    $secondFromRight = count($nofailParts) >= 2 ? $nofailParts[count($nofailParts) - 2] : '';
    
    // Extract year from the last part of the nombor fail string (after last slash)
    $yearFromFail = count($nofailParts) >= 1 ? $nofailParts[count($nofailParts) - 1] : date('Y');
    
    // Ensure year is in full 4-digit format (e.g., "2024")
    if (strlen($yearFromFail) == 2 && is_numeric($yearFromFail)) {
        // Convert 2-digit year to 4-digit (assuming 2000s)
        $year = '20' . $yearFromFail;
    } elseif (strlen($yearFromFail) == 4 && is_numeric($yearFromFail)) {
        // Already 4-digit year
        $year = $yearFromFail;
    } else {
        // Fallback to current year if format is unexpected?
        $year = date('Y');
    }

    // Extract main part without last two slash-separated parts
    $mainNomborFail = $data->nombor_fail ?? '';
    if ($mainNomborFail) {
        $failParts = explode('/', $mainNomborFail);
        if (count($failParts) > 2) {
            // Remove last two parts and rejoin
            $mainParts = array_slice($failParts, 0, -2);
            $mainNomborFail = implode('/', $mainParts);
        }
    }

    $tarikhPermohonan = ($data && $data->tarikh_terima_fail) ? date('Y-m-d', strtotime($data->tarikh_terima_fail)) : null;
    $tarikhKelulusan = ($data && $data->tarikh_lulus) ? date('Y-m-d', strtotime($data->tarikh_lulus)) : null;
    $tarikhUlasanOSC = ($data && $data->tarikh_ulasan) ? date('Y-m-d', strtotime($data->tarikh_ulasan)) : null;

    // Calculate sasaran tarikh akhir (A8 + 19 business days)
    if (!function_exists('addBusinessDays')) {
        function addBusinessDays($date, $days) {
            if (!$date) return '';
            $dateObj = new DateTime($date);
            $added = 0;
            while ($added < $days) {
                $dateObj->modify('+1 day');
                if ($dateObj->format('N') < 6) { // 1 = Monday, 5 = Friday
                    $added++;
                }
            }
            return $dateObj->format('Y-m-d');
        }
    }
    
    if (!function_exists('businessDaysBetween')) {
        function businessDaysBetween($startDate, $endDate) {
            if (!$startDate || !$endDate) return 0;
            $start = new DateTime($startDate);
            $end = new DateTime($endDate);
            $businessDays = 0;
            if ($start <= $end) {
                while ($start <= $end) {
                    if ($start->format('N') < 6) {
                        $businessDays++;
                    }
                    $start->modify('+1 day');
                }
            }
            return $businessDays;
        }
    }

    $sasaranTarikhAkhir = $tarikhPermohonan ? addBusinessDays($tarikhPermohonan, 19) : '';
    
    // Calculate countdown ulasan
    $countdownUlasan = '';
    if ($sasaranTarikhAkhir && !$tarikhUlasanOSC) {
        $countdownUlasan = businessDaysBetween(date('Y-m-d'), $sasaranTarikhAkhir);
    }
@endphp

<style>
.warning-field {
    color: red !important;
    font-weight: bold !important;
    background-color: #ffe6e6 !important;
}

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

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

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

.checkbox-custom {
    width: 20px;
    height: 20px;
    accent-color: #0AD1C8;
}

.checkbox-container {
    border: 2px solid #666;
    border-radius: 4px;
    padding: 20px;
    background-color: #f8f9fa;
    margin-bottom: 15px;
}

.checkbox-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.checkbox-item:last-child {
    margin-bottom: 0;
}

.checkbox-item label {
    margin: 0;
    font-weight: 400;
    color: #333;
    font-size: 16px;
}

.status-batal {
    color: #dc3545 !important;
    font-weight: bold;
}

.status-tolak {
    color: #dc3545 !important;
    font-weight: bold;
}

.status-lulus {
    color: #28a745 !important;
    font-weight: bold;
}

.status-lulus-ccc {
    color: #28a745 !important;
    font-weight: bold;
}

.status-sedang-diproses {
    color: #333 !important;
    font-weight: normal;
}

/* 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;">
                            <img src="{{ asset('images/icon/home.svg') }}" alt="Home" style="width: 20px; height: 20px;">
                        </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;">
                            Senarai Permohonan
                        </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;">
                            {{-- Permohonan @if($year){{ $year }}@endif --}}
                        </li>
                    </ol>
                </nav>
                <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2.2rem; margin-bottom: 0.5rem;">Butiran Permohonan</h2>
            </div>
            <div style="display: flex; align-items: center;">
                @include('layouts.date-clock')
            </div>
        </div>
        <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; border: 4px solid #0AD1C8;">1</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;">2</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;">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>

        <!-- Display Validation Errors -->
        @if ($errors->any())
            <div class="alert alert-danger mb-4">
                <h6>Terdapat ralat dalam borang:</h6>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Display Success Message -->
        @if (session('success'))
            <div class="alert alert-success mb-4">
                {{ session('success') }}
            </div>
        @endif

        <!-- Form -->
        <div style="height: 32px;"></div>
        <form method="POST" action="{{ route('permohonanstep1.store') }}" id="step1Form">
            @csrf
            <div class="row g-3">
                <div class="col-12">
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Nombor Fail</div>
                        <div class="col-md-4 col-8 d-flex align-items-center">
                            <input type="text" name="nombor_fail" class="form-control me-1 required-field" style="max-width: 243px; max-height: 25px;" value="{{ $mainNomborFail }}"> /
                            <input type="text" name="nomborFailMiddle" class="form-control mx-1" style="max-width: 55px; max-height: 25px;" value="{{ $secondFromRight }}" readonly> /
                            @php
                                $isNewApplication = !request('nomborFail') && !request('statusFail') && !$data;
                                $currentYear = date('Y');
                                $selectedYear = $year ?? $currentYear;
                            @endphp
                            @if($isNewApplication)
                                <select name="nomborFailYear" id="nomborFailYear" class="form-select" style="min-width: 85px; max-width: 85px; height: 25px; font-size: 13px; padding: 2px 24px 2px 8px;">
                                    @for($i = $currentYear; $i >= 2000; $i--)
                                        <option value="{{ $i }}" {{ $selectedYear == $i ? 'selected' : '' }}>{{ $i }}</option>
                                    @endfor
                                </select>
                            @else
                                <span style="font-size: 14px; padding: 0 8px; display: inline-block; min-width: 40px;">{{ $selectedYear }}</span>
                                <input type="hidden" name="nomborFailYear" value="{{ $selectedYear }}">
                            @endif
                        </div>
                        <div class="col-md-2 col-4">Pegawai Penyemak</div>
                        <div class="col-md-4 col-8"><input type="text" class="form-control" name="pegawai" value="{{ $data->pegawai_penyemak ?? '' }}"></div>
                    </div>
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Status</div>
                        <div class="col-md-4 col-8">
                            <input type="text" id="status_fail" name="status_fail" class="form-control calculation-field" readonly value="{{ request('statusFail') ?? '' }}">
                        </div>
                    </div>
                    <!-- Hidden business logic fields for OSC and Site Monitoring -->
                    <!-- Penyelarasan OSC (B1-B5) - Corresponds to Step 2 form -->
                    <input type="hidden" id="field_b1" name="tarikh_mesyuarat_pertama" value="{{ $data->tarikh_mesyuarat_pertama ?? '' }}">
                    <input type="hidden" id="field_b2" name="bil_mesyuarat_1" value="{{ $data->bil_mesyuarat1 ?? '' }}">
                    <select id="field_b3" name="keputusan_mesyuarat" style="display: none;">
                        <option value="">Pilih Keputusan</option>
                        <option value="batal" style="color: #dc3545; font-weight: bold;">BATAL</option>
                        <option value="tolak" style="color: #dc3545; font-weight: bold;">TOLAK</option>
                        <option value="lulus dengan pindaan" style="color: #28a745; font-weight: bold;">LULUS DENGAN PINDAAN</option>
                        <option value="lulus" style="color: #28a745; font-weight: bold;">LULUS</option>
                        <option value="tangguh" style="color: #007bff; font-weight: bold;">TANGGUH</option>
                    </select>
                    <input type="hidden" id="field_b4" name="tarikh_keputusan_akhir" value="{{ $data->tarikh_keputusan_akhir ?? '' }}">
                    <input type="hidden" id="field_b5" name="bil_mesyuarat_akhir" value="{{ $data->bil_mesyuarat_keputusan ?? '' }}">
                    
                    <!-- Pemantauan Kerja Tapak (C1-C8) - For Step 3 form -->
                    <input type="hidden" id="field_c1" name="status_tapak" value="{{ $data->status_tapak ?? '' }}">
                    <input type="hidden" id="field_c2" name="tarikh_akhir_kelulusan" value="{{ $data->tarikh_akhir_kelulusan ?? '' }}">
                    <input type="hidden" id="field_c3" name="jumlah_tahun_pembaharuan" value="{{ $data->jumlah_tahun_pembaharuan ?? '' }}">
                    <input type="hidden" id="field_c4" name="countdown_akhir_pelan" value="{{ $data->countdown_akhir_pelan ?? '' }}">
                    <input type="hidden" id="field_c5" name="tarikh_borang_b" value="{{ $data->tarikh_borang_b ?? '' }}">
                    <input type="hidden" id="field_c6" name="tarikh_akhir_permit" value="{{ $data->tarikh_akhir_permit ?? '' }}">
                    <input type="hidden" id="field_c7" name="countdown_akhir_permit" value="{{ $data->countdown_akhir_permit ?? '' }}">
                    <input type="hidden" id="field_c8" name="tarikh_borang_fi" value="{{ $data->tarikh_borang_fi ?? '' }}">
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Kategori</div>
                        <div class="col-md-4 col-8 d-flex align-items-center">
                            <select id="kategori_dropdown" name="kategori" class="form-select" style="max-width: 300px;">
                                <option value="" disabled selected hidden>Pilih Kategori</option>
                                <option value="LBT/600-6/3" data-category="A">LBT / 600-6/3</option>
                                <option value="LB1/600-5/1" data-category="A">LB1 / 600-5/1</option>
                                <option value="LB2/600-5/2" data-category="A">LB2 / 600-5/2</option>
                                <option value="LB3/600-5/3" data-category="A">LB3 / 600-5/3</option>
                                <option value="LB4/600-5/4" data-category="A">LB4 / 600-5/4</option>
                                <option value="LB5/600-5/5" data-category="B">LB5 / 600-5/5</option>
                                <option value="LB5X/600-5/6" data-category="B">LB5X / 600-5/6</option>
                                <option value="LB6/600-5/7" data-category="B">LB6 / 600-5/7</option>
                                <option value="LB6X/600-5/8" data-category="B">LB6X / 600-5/8</option>
                                <option value="LB7/600-5/9" data-category="B">LB7 / 600-5/9</option>
                                <option value="LB8/600-5/10" data-category="B">LB8 / 600-5/10</option>
                                <option value="LB9/600-5/11" data-category="B">LB9 / 600-5/11</option>
                            </select>
                            <input type="text" id="kategori_auto" name="kategori_auto" class="form-control ms-2 calculation-field" style="max-width: 100px;" readonly>
                        </div>
                    </div>
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Nama Pemohon</div>
                        <div class="col-md-4 col-8"><input type="text" class="form-control required-field" name="nama_pemohon" value="{{ $data->nama_pemohon ?? '' }}"></div>
                    </div>
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Tarikh Terima Fail</div>
                        <div class="col-md-4 col-8">
                            <div class="date-input-wrapper">
                                <input type="date" id="tarikh_permohonan" name="tarikh_terima_fail" class="date-input-custom required-field" value="{{ $tarikhPermohonan }}" data-placeholder="-- Pilih Tarikh --">
                                <i class="fas fa-calendar-alt date-input-icon"></i>
                            </div>
                        </div>
                        <div class="col-md-2 col-4">Tarikh Lulus</div>
                        <div class="col-md-4 col-8">
                            <div class="date-input-wrapper">
                                <input type="date" id="tarikh_kelulusan" name="tarikh_lulus" class="date-input-custom" value="{{ $tarikhKelulusan }}" data-placeholder="-- Pilih Tarikh --">
                                <i class="fas fa-calendar-alt date-input-icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Kawasan</div>
                        <div class="col-md-4 col-8"><input type="text" class="form-control" name="kawasan" value="{{ $data->kawasan ?? '' }}"></div>
                        <div class="col-md-2 col-4">Tempoh Piagam</div>
                        <div class="col-md-3 col-7">
                            <input type="number" id="tempoh_piagam" name="tempoh_piagam" class="form-control calculation-field" value="{{ $data->tempoh_piagam ?? '' }}" readonly>
                        </div>
                        <div class="col-md-1 col-1">hari</div>
                    </div>
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Tajuk Permohonan</div>
                        <div class="col-md-10 col-8"><textarea class="form-control" name="tajuk_permohonan" rows="2">{{ request('tajukPermohonan') }}</textarea></div>
                    </div>
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Sasaran Tarikh Akhir</div>
                        <div class="col-md-4 col-8">
                            <div class="date-input-wrapper">
                                <input type="date" id="sasaran_tarikh_akhir" name="sasaran_tarikh_akhir" class="date-input-custom calculation-field" value="{{ $sasaranTarikhAkhir }}" readonly>
                                <i class="fas fa-calendar-alt date-input-icon"></i>
                            </div>
                        </div>
                        <div class="col-md-2 col-4">Countdown Ulasan</div>
                        <div class="col-md-4 col-8">
                            <input type="text" id="countdown_ulasan" name="countdown_ulasan" class="form-control calculation-field" value="{{ $countdownUlasan }}" readonly>
                        </div>
                    </div>
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Tarikh Ulasan OSC 3.0 Plus</div>
                        <div class="col-md-4 col-8">
                            <div class="date-input-wrapper">
                                <input type="date" id="tarikh_ulasan_osc" name="tarikhUlasanOSC" class="date-input-custom" value="{{ $tarikhUlasanOSC }}" data-placeholder="-- Pilih Tarikh --">
                                <i class="fas fa-calendar-alt date-input-icon"></i>
                            </div>
                        </div>
                        <div class="col-md-2 col-4">Tempoh Hari Pengeluaran Ulasan</div>
                        <div class="col-md-3 col-7"><input type="number" id="tempoh_ulasan" name="tempoh_ulasan" class="form-control calculation-field" value="{{ $data->tempoh_piagam_1 ?? '' }}" readonly></div>
                        <div class="col-md-1 col-1">hari</div>
                    </div>
                    <div class="row align-items-center mb-2">
                        <div class="col-md-2 col-4">Ulasan Jabatan</div>
                        <div class="col-md-10 col-8"><textarea class="form-control" name="ulasan_jabatan" rows="2">{{ $data->ulasan_jabatan ?? '' }}</textarea></div>
                    </div>
                </div>
            </div>
            
            <div class="row g-3 mt-3">
                <div class="col-md-8">
                    <table class="table table-bordered align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Kategori Bangunan</th>
                                <th>Jumlah Unit</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td>Teres 1T</td><td><input type="number" name="teres_1t" class="form-control" min="0" value="{{ $data->teres_1t ?? 0 }}"></td></tr>
                            <tr><td>Teres 2T+</td><td><input type="number" name="teres_2t_plus" class="form-control" min="0" value="{{ $data->teres_2t_plus ?? 0 }}"></td></tr>
                            <tr><td>Kluster 1T</td><td><input type="number" name="kluster_1t" class="form-control" min="0" value="{{ $data->kluster_1t ?? 0 }}"></td></tr>
                            <tr><td>Kluster 2T+</td><td><input type="number" name="kluster_2t_plus" class="form-control" min="0" value="{{ $data->kluster_2t_plus ?? 0 }}"></td></tr>
                            <tr><td>Berkembar 1T</td><td><input type="number" name="berkembar_1t" class="form-control" min="0" value="{{ $data->berkembar_1t ?? 0 }}"></td></tr>
                            <tr><td>Berkembar 2T+</td><td><input type="number" name="berkembar_2t_plus" class="form-control" min="0" value="{{ $data->berkembar_2t_plus ?? 0 }}"></td></tr>
                            <tr><td>Sesebuah 1T</td><td><input type="number" name="sesebuah_1t" class="form-control" min="0" value="{{ $data->sesebuah_1t ?? 0 }}"></td></tr>
                            <tr><td>Sesebuah 2T+</td><td><input type="number" name="sesebuah_2t_plus" class="form-control" min="0" value="{{ $data->sesebuah_2t_plus ?? 0 }}"></td></tr>
                            <tr><td>Apartmen</td><td><input type="number" name="apartment" class="form-control" min="0" value="{{ $data->apartment ?? 0 }}"></td></tr>
                            <tr class="table-info"><th>Jumlah Keseluruhan Unit</th><th><input type="number" name="jumlah_unit" class="form-control calculation-field" min="0" readonly value="{{ $data->jumlah_unit ?? 0 }}"></th></tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-4">
                    <div class="checkbox-container">
                        <div class="checkbox-item">
                            <label for="spah">SPAH :</label>
                            <input type="checkbox" id="spah" name="spah" class="checkbox-custom" value="1" {{ ($data && $data->spah) ? 'checked' : '' }}>
                        </div>
                        <div class="checkbox-item">
                            <label for="oku">Keperluan OKU :</label>
                            <input type="checkbox" id="oku" name="oku" class="checkbox-custom" value="1" {{ ($data && $data->oku) ? 'checked' : '' }}>
                        </div>
                    </div>
                    <div class="row mb-2 align-items-center">
                        <div class="col-6">Jumlah SPAH Unit Berkembar</div>
                        <div class="col-6"><input type="number" name="jumlahunit_berkembar" class="form-control calculation-field" min="0" readonly value="{{ $data->unit_spah_berkembar ?? 0 }}"></div>
                    </div>
                    <div class="row mb-2 align-items-center">
                        <div class="col-6">Jumlah SPAH Unit Sebuah</div>
                        <div class="col-6"><input type="number" name="jumlahunit_sesebuah" class="form-control calculation-field" min="0" readonly value="{{ $data->unit_spah_sesebuah ?? 0 }}"></div>
                    </div>
                    <div class="row mb-2 align-items-center">
                        <div class="col-6">Jumlah Unit Bangunan Keperluan OKU</div>
                        <div class="col-6"><input type="number" name="jumlahunit_bgn_oku" class="form-control calculation-field" min="0" readonly value="{{ $data->unit_oku ?? 0 }}"></div>
                    </div>
                    <div class="row mb-2 align-items-center">
                        <div class="col-6">Latitude</div>
                        <div class="col-6"><input type="text" name="latitude" class="form-control" value="{{ $data->latitude ?? '' }}"></div>
                    </div>
                    <div class="row mb-2 align-items-center">
                        <div class="col-6">Longitude</div>
                        <div class="col-6"><input type="text" name="longitude" class="form-control" value="{{ $data->longitude ?? '' }}"></div>
                    </div>
                </div>
            </div>
            
            <div class="d-flex justify-content-end mt-4">
                <button type="submit" class="btn" style="background: #0B6477; color: #fff; border: none; border-radius: 5px; font-family: 'Poppins', sans-serif; width: 215px; height: 37px; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: 0.05em; transition: background 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center;">
                    SIMPAN & SETERUSNYA
                </button>    
            </div>
        </form>
    </div>
</div>

<!-- Include the business rules JavaScript -->
<script>
/*
HIDDEN BUSINESS LOGIC IMPLEMENTATION:

This form includes hidden fields that get populated from subsequent steps:

STEP 2 - Penyelarasan OSC (B1-B5):
- B1: tarikh_mesyuarat_pertama (Tarikh Mesyuarat Pemantauan Kali Pertama)
- B2: bil_mesyuarat_1 (Bilangan Mesyuarat Pemantauan Kali Pertama)  
- B3: keputusan_mesyuarat (Keputusan Akhir Mesyuarat)
- B4: tarikh_keputusan_akhir (Tarikh Keputusan Akhir)
- B5: bil_mesyuarat_akhir (Bilangan Mesyuarat Keputusan Akhir)

STEP 3 - Pemantauan Kerja Tapak (C1-C8):
- C1-C8: Various site monitoring fields

B3 dropdown values from Step 2 trigger A4 status updates:
- "batal" + B4 date → Status: "Batal" (Red)
- "tolak" + B4 date → Status: "Tolak" (Red)
- "lulus" → Combined with A9 for "Lulus" (Green)
- "lulus dengan pindaan" → Status variations
- "tangguh" → Postponed status

Testing via Browser Console:
setB3Status('batal');         // Set B3 to batal
setB4Date('2024-01-15');      // Set B4 date
setC8Value('2024-02-20');     // Set C8 value for CCC status
*/

document.addEventListener('DOMContentLoaded', function() {
    // Enhanced date input placeholder functionality with calendar icon
    function initDatePlaceholders() {
        const dateInputs = document.querySelectorAll('.date-input-custom[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.classList.add('placeholder-mode');
            }
            
            // When user focuses, change to date type
            input.addEventListener('focus', function() {
                this.type = 'date';
                this.classList.remove('placeholder-mode');
            });
            
            // When user loses focus, check if empty
            input.addEventListener('blur', function() {
            if (!this.value) {
                    this.type = 'text';
                    this.placeholder = placeholder;
                    this.classList.add('placeholder-mode');
                }
            });
            
            // When value changes, keep as date type
            input.addEventListener('change', function() {
                if (this.value) {
                    this.type = 'date';
                    this.classList.remove('placeholder-mode');
                } else {
                    this.type = 'text';
                    this.placeholder = placeholder;
                    this.classList.add('placeholder-mode');
                }
            });

            // Handle clicking on the calendar icon area
            const wrapper = input.closest('.date-input-wrapper');
            if (wrapper) {
                const icon = wrapper.querySelector('.date-input-icon');
                if (icon) {
                    icon.addEventListener('click', function() {
                        input.type = 'date';
                        input.classList.remove('placeholder-mode');
                        input.focus();
                        input.showPicker && input.showPicker();
                    });
                }
            }
        });
    }
    
    // Initialize date placeholders
    initDatePlaceholders();
    
    // Handle A4 (Status) rule - Auto-update status based on field conditions
    const statusField = document.getElementById('status_fail');
    const fieldB3 = document.getElementById('field_b3');
    const fieldB4 = document.getElementById('field_b4');
    const fieldC8 = document.getElementById('field_c8');
    
    function updateStatusField() {
        if (!statusField) return;
        
        const tarikhPermohonan = elements.tarikhPermohonan ? elements.tarikhPermohonan.value : '';
        const tarikhLulus = elements.tarikhKelulusan ? elements.tarikhKelulusan.value : '';
        const b3Value = fieldB3 ? fieldB3.value : '';
        const b4Value = fieldB4 ? fieldB4.value : '';
        const c8Value = fieldC8 ? fieldC8.value : '';
        
        // Check if this is a new application (no existing data and no query parameters)
        const urlParams = new URLSearchParams(window.location.search);
        const isNewApplication = !urlParams.has('statusFail') && !urlParams.has('nomborFail') && !tarikhPermohonan && !tarikhLulus && !b3Value && !b4Value && !c8Value;
        
        // Remove all status classes first
        statusField.classList.remove('status-batal', 'status-tolak', 'status-lulus', 'status-lulus-ccc', 'status-sedang-diproses');
        
        // For new applications, keep status blank until data is entered
        if (isNewApplication) {
            statusField.value = '';
            return;
        }
        
        // Apply A4 rules in order of priority (based on the business logic from image)
        if (b3Value === 'batal' && b4Value) {
            // Batal status (red) - Field B3 = "batal" AND Field B4 has date
            statusField.value = 'Batal';
            statusField.classList.add('status-batal');
        } else if (b3Value === 'tolak' && b4Value) {
            // Tolak status (red) - Field B3 = "tolak" AND Field B4 has date  
            statusField.value = 'Tolak';
            statusField.classList.add('status-tolak');
        } else if (tarikhLulus && c8Value) {
            // Lulus/CCC status (green) - A9 (Tarikh Lulus) AND C8 has value
            statusField.value = 'Lulus/CCC';
            statusField.classList.add('status-lulus-ccc');
        } else if (tarikhLulus) {
            // Lulus status (green) - Only A9 (Tarikh Lulus) has date
            statusField.value = 'Lulus';
            statusField.classList.add('status-lulus');
        } else if (tarikhPermohonan) {
            // Sedang Diproses status (normal) - Only A8 (Tarikh Terima Fail) has date
            statusField.value = 'Sedang Diproses';
            statusField.classList.add('status-sedang-diproses');
        } else {
            // Default status for existing applications
            statusField.value = '';
        }
    }

    // Function to programmatically set B3 field (for testing/admin purposes)
    window.setB3Status = function(status) {
        if (fieldB3) {
            fieldB3.value = status; // Use: 'batal', 'tolak', 'lulus', 'lulus dengan pindaan', 'tangguh'
            updateStatusField();
        }
    };

    // Function to set B4 date (for testing/admin purposes) 
    window.setB4Date = function(date) {
        if (fieldB4) {
            fieldB4.value = date;
            updateStatusField();
        }
    };

    // Function to set C8 value (for testing/admin purposes)
    window.setC8Value = function(value) {
        if (fieldC8) {
            fieldC8.value = value;
            updateStatusField();
        }
    };

    // Handle A5 (Kategori) rule - Auto-fill category based on dropdown selection
    const kategoriDropdown = document.getElementById('kategori_dropdown');
    const kategoriAuto = document.getElementById('kategori_auto');
    
    if (kategoriDropdown && kategoriAuto) {
        kategoriDropdown.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            const category = selectedOption.getAttribute('data-category');
            kategoriAuto.value = category || '';
        });
    }

    // Handle Nombor Fail combination
    const nomborFailMain = document.querySelector('input[name="nombor_fail"]');
    const nomborFailMiddle = document.querySelector('input[name="nomborFailMiddle"]');
    const nomborFailYear = document.querySelector('select[name="nomborFailYear"]') || document.querySelector('input[name="nomborFailYear"]');
    
    // Create hidden field to store complete nombor fail for submission
    const hiddenCompleteNomborFail = document.createElement('input');
    hiddenCompleteNomborFail.type = 'hidden';
    hiddenCompleteNomborFail.name = 'complete_nombor_fail';
    nomborFailMain.parentNode.appendChild(hiddenCompleteNomborFail);
    
    function updateCompleteNomborFail() {
        if (nomborFailMain.value && nomborFailMiddle.value && nomborFailYear && nomborFailYear.value) {
            const completeNumber = nomborFailMain.value + '/' + nomborFailMiddle.value + '/' + nomborFailYear.value;
            hiddenCompleteNomborFail.value = completeNumber;
        }
    }
    
    // Update when any field changes
    nomborFailMain.addEventListener('input', updateCompleteNomborFail);
    nomborFailMain.addEventListener('change', updateCompleteNomborFail);
    
    // Only add event listener for year dropdown if it exists (new applications only)
    if (nomborFailYear && nomborFailYear.tagName === 'SELECT') {
        nomborFailYear.addEventListener('change', updateCompleteNomborFail);
    }
    
    // Initial update
    updateCompleteNomborFail();

    // Get all form elements
    const elements = {
        tarikhPermohonan: document.getElementById('tarikh_permohonan'),
        tarikhKelulusan: document.getElementById('tarikh_kelulusan'),
        tempohPiagam: document.getElementById('tempoh_piagam'),
        tarikhUlasanOSC: document.getElementById('tarikh_ulasan_osc'),
        tempohUlasan: document.getElementById('tempoh_ulasan'),
        countdownUlasan: document.getElementById('countdown_ulasan'),
        sasaranTarikhAkhir: document.getElementById('sasaran_tarikh_akhir'),
        spahCheckbox: document.getElementById('spah'),
        okuCheckbox: document.getElementById('oku'),
        
        // Building category inputs
        teres1t: document.querySelector('input[name="teres_1t"]'),
        teres2tPlus: document.querySelector('input[name="teres_2t_plus"]'),
        kluster1t: document.querySelector('input[name="kluster_1t"]'),
        kluster2tPlus: document.querySelector('input[name="kluster_2t_plus"]'),
        berkembar1t: document.querySelector('input[name="berkembar_1t"]'),
        berkembar2tPlus: document.querySelector('input[name="berkembar_2t_plus"]'),
        sesebuah1t: document.querySelector('input[name="sesebuah_1t"]'),
        sesebuah2tPlus: document.querySelector('input[name="sesebuah_2t_plus"]'),
        apartment: document.querySelector('input[name="apartment"]'),
        jumlahUnit: document.querySelector('input[name="jumlah_unit"]'),
        
        // SPAH and OKU related fields
        jumlahunitBerkembar: document.querySelector('input[name="jumlahunit_berkembar"]'),
        jumlahunitSesebuah: document.querySelector('input[name="jumlahunit_sesebuah"]'),
        jumlahunitBgnOku: document.querySelector('input[name="jumlahunit_bgn_oku"]')
    };

    // Utility function to calculate business days between two dates
    function calculateBusinessDays(startDate, endDate) {
        if (!startDate || !endDate) return 0;
        
        let count = 0;
        let current = new Date(startDate);
        let end = new Date(endDate);
        
        if (current > end) return 0;
        
        while (current <= end) {
            const day = current.getDay();
            if (day !== 0 && day !== 6) { // Exclude weekends
                count++;
            }
            current.setDate(current.getDate() + 1);
        }
        return count;
    }

    // Utility function to add business days to a date
    function addBusinessDays(date, days) {
        if (!date || !days) return '';
        
        const dateObj = new Date(date);
        let added = 0;
        
        while (added < days) {
            dateObj.setDate(dateObj.getDate() + 1);
            if (dateObj.getDay() !== 0 && dateObj.getDay() !== 6) {
                added++;
            }
        }
        return dateObj.toISOString().split('T')[0];
    }

    // Utility function to get today's date in YYYY-MM-DD format
    function getTodayDate() {
        return new Date().toISOString().split('T')[0];
    }

    // Utility function to apply warning styles
    function applyWarningStyle(element, isWarning = false) {
        if (isWarning) {
            element.classList.add('warning-field');
        } else {
            element.classList.remove('warning-field');
        }
    }

    // Calculate tempoh piagam (business days between application received and approval dates)
    function updateTempohPiagam() {
        if (elements.tarikhPermohonan && elements.tarikhKelulusan && elements.tempohPiagam) {
            const start = elements.tarikhPermohonan.value;
            const end = elements.tarikhKelulusan.value;
            
            if (start && end) {
                const businessDays = calculateBusinessDays(start, end);
                elements.tempohPiagam.value = businessDays;
            } else {
                elements.tempohPiagam.value = '';
            }
        }
    }

    // Calculate sasaran tarikh akhir (application received date + 19 business days)
    function updateSasaranTarikhAkhir() {
        if (elements.tarikhPermohonan && elements.sasaranTarikhAkhir) {
            const startDate = elements.tarikhPermohonan.value;
            if (startDate) {
                const sasaranDate = addBusinessDays(startDate, 19);
                elements.sasaranTarikhAkhir.value = sasaranDate;
                updateCountdownUlasan(); // Trigger countdown update
            } else {
                elements.sasaranTarikhAkhir.value = '';
            }
        }
    }

    // Calculate countdown ulasan
    function updateCountdownUlasan() {
        if (elements.countdownUlasan && elements.sasaranTarikhAkhir) {
            const tarikhUlasan = elements.tarikhUlasanOSC ? elements.tarikhUlasanOSC.value : '';
            
            if (!tarikhUlasan && elements.sasaranTarikhAkhir.value) {
                // Trigger 1: Calculate days between today and sasaran tarikh akhir
                const today = getTodayDate();
                const sasaranDate = elements.sasaranTarikhAkhir.value;
                const daysLeft = calculateBusinessDays(today, sasaranDate);
                
                elements.countdownUlasan.value = daysLeft + ' hari';
                
                // Warning if less than 7 days
                applyWarningStyle(elements.countdownUlasan, daysLeft < 7);
            } else if (tarikhUlasan) {
                // Trigger 2: Clear countdown when review date is filled
                elements.countdownUlasan.value = '';
                applyWarningStyle(elements.countdownUlasan, false);
            }
        }
    }

    // Calculate tempoh ulasan (business days between application received and review dates)
    function updateTempohUlasan() {
        if (elements.tarikhPermohonan && elements.tarikhUlasanOSC && elements.tempohUlasan) {
            const start = elements.tarikhPermohonan.value;
            const end = elements.tarikhUlasanOSC.value;
            
            if (start && end) {
                const businessDays = calculateBusinessDays(start, end);
                elements.tempohUlasan.value = businessDays;
                
                // Warning if exceeds 19 days
                applyWarningStyle(elements.tempohUlasan, businessDays > 19);
            } else {
                elements.tempohUlasan.value = '';
                applyWarningStyle(elements.tempohUlasan, false);
            }
        }
    }

    // Calculate total units (sum of all building categories)
    function updateJumlahUnit() {
        if (elements.jumlahUnit) {
            const unitInputs = [
                elements.teres1t,
                elements.teres2tPlus,
                elements.kluster1t,
                elements.kluster2tPlus,
                elements.berkembar1t,
                elements.berkembar2tPlus,
                elements.sesebuah1t,
                elements.sesebuah2tPlus,
                elements.apartment
            ];
            
            let total = 0;
            unitInputs.forEach(input => {
                if (input && input.value) {
                    total += parseInt(input.value) || 0;
                }
            });
            
            elements.jumlahUnit.value = total;
            updateSpahOkuCalculations(); // Trigger SPAH/OKU calculations
        }
    }

    // A30 - SPAH Berkembar calculation (A22 + A23) when A28 is checked
    function updateSpahBerkembar() {
        if (elements.spahCheckbox && elements.spahCheckbox.checked && elements.jumlahunitBerkembar) {
            const berkembar1t = parseInt(elements.berkembar1t?.value) || 0;
            const berkembar2tPlus = parseInt(elements.berkembar2tPlus?.value) || 0;
            elements.jumlahunitBerkembar.value = berkembar1t + berkembar2tPlus;
        } else if (elements.jumlahunitBerkembar) {
            elements.jumlahunitBerkembar.value = 0;
        }
    }

    // A31 - SPAH Sesebuah calculation (A24 + A25) when A28 is checked
    function updateSpahSesebuah() {
        if (elements.spahCheckbox && elements.spahCheckbox.checked && elements.jumlahunitSesebuah) {
            const sesebuah1t = parseInt(elements.sesebuah1t?.value) || 0;
            const sesebuah2tPlus = parseInt(elements.sesebuah2tPlus?.value) || 0;
            elements.jumlahunitSesebuah.value = sesebuah1t + sesebuah2tPlus;
        } else if (elements.jumlahunitSesebuah) {
            elements.jumlahunitSesebuah.value = 0;
        }
    }

    // A32 - OKU calculation (A27 = total units) when A29 is checked
    function updateOkuCalculation() {
        if (elements.okuCheckbox && elements.okuCheckbox.checked && elements.jumlahunitBgnOku) {
            const totalUnits = parseInt(elements.jumlahUnit?.value) || 0;
            elements.jumlahunitBgnOku.value = totalUnits;
        } else if (elements.jumlahunitBgnOku) {
            elements.jumlahunitBgnOku.value = 0;
        }
    }

    // Combined SPAH and OKU calculations
    function updateSpahOkuCalculations() {
        updateSpahBerkembar();
        updateSpahSesebuah();
        updateOkuCalculation();
    }

    // Event listeners for date fields
    if (elements.tarikhPermohonan) {
        elements.tarikhPermohonan.addEventListener('change', function() {
            updateTempohPiagam();
            updateTempohUlasan();
            updateSasaranTarikhAkhir();
            updateStatusField(); // Update status when tarikh permohonan changes
        });
    }

    if (elements.tarikhKelulusan) {
        elements.tarikhKelulusan.addEventListener('change', function() {
            updateTempohPiagam();
            updateStatusField(); // Update status when tarikh lulus changes
        });
    }

    if (elements.tarikhUlasanOSC) {
        elements.tarikhUlasanOSC.addEventListener('change', function() {
            updateTempohUlasan();
            updateCountdownUlasan();
        });
    }

    // Event listeners for status-related hidden fields (B1-B5, C1-C8)
    const hiddenFields = [
        'field_b1', 'field_b2', 'field_b3', 'field_b4', 'field_b5',
        'field_c1', 'field_c2', 'field_c3', 'field_c4', 'field_c5', 
        'field_c6', 'field_c7', 'field_c8'
    ];
    
    hiddenFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            field.addEventListener('change', updateStatusField);
            // Also listen for direct value changes (for programmatic updates)
            field.addEventListener('input', updateStatusField);
        }
    });

    // Event listeners for unit calculations
    const unitInputs = [
        elements.teres1t, elements.teres2tPlus, elements.kluster1t, elements.kluster2tPlus,
        elements.berkembar1t, elements.berkembar2tPlus, elements.sesebuah1t, 
        elements.sesebuah2tPlus, elements.apartment
    ];

    unitInputs.forEach(input => {
        if (input) {
            input.addEventListener('input', updateJumlahUnit);
            input.addEventListener('change', updateJumlahUnit);
        }
    });

    // Event listeners for SPAH checkbox
    if (elements.spahCheckbox) {
        elements.spahCheckbox.addEventListener('change', updateSpahOkuCalculations);
    }

    // Event listeners for OKU checkbox
    if (elements.okuCheckbox) {
        elements.okuCheckbox.addEventListener('change', updateSpahOkuCalculations);
    }

    // CROSS-STEP INTEGRATION - Listen for localStorage changes from other steps
    window.addEventListener('storage', function(e) {
        // Listen for B3 (keputusan mesyuarat) changes from step2
        if (e.key === 'b3_keputusan') {
            const b3Value = e.newValue;
            if (fieldB3) {
                fieldB3.value = b3Value;
                updateStatusField();
                console.log('Step1: B3 updated from step2:', b3Value);
            }
        }
        
        // Listen for B4 (tarikh keputusan akhir) changes from step2  
        if (e.key === 'b4_tarikh') {
            const b4Value = e.newValue;
            if (fieldB4) {
                fieldB4.value = b4Value;
                updateStatusField();
                console.log('Step1: B4 updated from step2:', b4Value);
            }
        }
        
        // Listen for C8 (tarikh borang fi) changes from step3
        if (e.key === 'c8_tarikh') {
            const c8Value = e.newValue;
            if (fieldC8) {
                fieldC8.value = c8Value;
                updateStatusField();
                console.log('Step1: C8 updated from step3:', c8Value);
            }
        }
    });
    
    // Initialize localStorage values from other steps on page load
    function initializeCrossStepData() {
        // Check for existing B3 value from step2
        const storedB3 = localStorage.getItem('b3_keputusan');
        if (storedB3 && fieldB3) {
            fieldB3.value = storedB3;
            console.log('Step1: Initialized B3 from localStorage:', storedB3);
        }
        
        // Check for existing B4 value from step2
        const storedB4 = localStorage.getItem('b4_tarikh');
        if (storedB4 && fieldB4) {
            fieldB4.value = storedB4;
            console.log('Step1: Initialized B4 from localStorage:', storedB4);
        }
        
        // Check for existing C8 value from step3
        const storedC8 = localStorage.getItem('c8_tarikh');
        if (storedC8 && fieldC8) {
            fieldC8.value = storedC8;
            console.log('Step1: Initialized C8 from localStorage:', storedC8);
        }
    }

    // Initialize calculations on page load
    initializeCrossStepData(); // Load data from other steps first
    updateStatusField();
    updateTempohPiagam();
    updateTempohUlasan();
    updateSasaranTarikhAkhir();
    updateJumlahUnit();
    updateSpahOkuCalculations();

    // CLIENT-SIDE FORM VALIDATION
    const form = document.getElementById('step1Form');
    if (form) {
        form.addEventListener('submit', function(e) {
            let isValid = true;
            const errors = [];
            
            // Check required fields
            const nomborFail = document.querySelector('input[name="nombor_fail"]');
            const namaPemohon = document.querySelector('input[name="nama_pemohon"]');
            const tarikhTerimaFail = document.querySelector('input[name="tarikh_terima_fail"]');
            
            if (!nomborFail || !nomborFail.value.trim()) {
                errors.push('Nombor Fail diperlukan');
                if (nomborFail) nomborFail.style.borderColor = '#dc3545';
                isValid = false;
            }
            
            if (!namaPemohon || !namaPemohon.value.trim()) {
                errors.push('Nama Pemohon diperlukan');
                if (namaPemohon) namaPemohon.style.borderColor = '#dc3545';
                isValid = false;
            }
            
            if (!tarikhTerimaFail || !tarikhTerimaFail.value) {
                errors.push('Tarikh Terima Fail diperlukan');
                if (tarikhTerimaFail) tarikhTerimaFail.style.borderColor = '#dc3545';
                isValid = false;
            }
            
            if (!isValid) {
                e.preventDefault();
                alert('Sila lengkapkan medan yang diperlukan:\n- ' + errors.join('\n- '));
                console.log('Form validation failed:', errors);
                return false;
            }
            
            console.log('Form validation passed, submitting...');
        });
        
        // Reset border color when user starts typing
        const requiredInputs = form.querySelectorAll('.required-field');
        requiredInputs.forEach(input => {
            input.addEventListener('input', function() {
                this.style.borderColor = '';
            });
        });
    }

    // Set up periodic countdown update (every minute)
    setInterval(updateCountdownUlasan, 60000);
});
</script>

@endsection