@extends('layouts.app')
@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>

    <div class="container-fluid p-0" style="background: #F4FFFF; min-height: 100vh; margin-left: 0;">
        <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">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb" style="background: none; padding: 0; margin-bottom: 0; font-size: 14px;">
                        <li class="breadcrumb-item"><i class="fa fa-home"></i></li>
                        <li class="breadcrumb-item">Senarai Permohonan</li>
                        <li class="breadcrumb-item">Permohonan 2024</li>
                        <li class="breadcrumb-item">Butiran Permohonan</li>
                    </ol>
                </nav>
                <div class="d-flex align-items-center" style="gap: 8px;">
                    @include('layouts.date-clock')
                </div>
            </div>
            <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2.2rem; margin-bottom: 0.5rem;">Cagaran Bangunan</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; border: 4px solid #0AD1C8;">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="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;">3</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;">4</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;">5</div>
                </div>
            </div>

            <!-- Form -->
            <div class="bg-white rounded shadow-sm p-4 mb-4">
                <!-- D1 - Status Cagaran & Countdown -->
                <div class="row mb-3 align-items-center">
                    <label class="col-md-2 col-form-label fw-semibold">Status Cagaran</label>
                    <div class="col-md-2">
                        <input type="text" id="status_cagaran" name="status_cagaran" class="form-control" readonly style="background: #F4F4F4;">
                    </div>
                    <div class="col-md-2">
                        <input type="text" id="countdown_cagaran" name="hari_lagi" class="form-control" readonly style="background: #F4F4F4;">
                    </div>
                    <div class="col-md-1">
                        <span>hari lagi</span>
                    </div>
                    <label class="col-md-3 col-form-label fw-semibold text-end">Tarikh Akhir Permohonan Cagaran</label>
                    <div class="col-md-2">
                        <input type="date" id="tarikh_akhir_permohonan_cagaran" name="tarikh_akhir_permohonan" class="form-control" readonly style="background: #F4F4F4;">
                    </div>
                </div>
                
                <!-- D4 - Tarikh Permohonan Cagaran -->
                <div class="row mb-3 align-items-center">
                    <label class="col-md-3 col-form-label fw-semibold">Tarikh Permohonan Cagaran</label>
                    <div class="col-md-3">
                        <input type="date" id="tarikh_permohonan_cagaran" name="tarikh_permohonan" class="form-control">
                    </div>
                </div>
                
                <!-- D5 - Tarikh Pemulangan Cagaran -->
                <div class="row mb-3 align-items-center">
                    <label class="col-md-3 col-form-label fw-semibold">Tarikh Pemulangan Cagaran</label>
                    <div class="col-md-3">
                        <input type="date" id="tarikh_pemulangan_cagaran" name="tarikh_pemulangan" class="form-control">
                    </div>
                </div>
                
                <!-- D6 - Pembinaan Mematuhi Syarat -->
                <div class="row mb-4 align-items-center">
                    <label class="col-md-3 col-form-label fw-semibold">Pembinaan Mematuhi Syarat</label>
                    <div class="col-md-2 d-flex align-items-center" style="gap: 24px;">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="mematuhi_syarat" id="syaratY" value="Y" {{ old('mematuhi_syarat') == 'Y' ? 'checked' : '' }}>
                            <label class="form-check-label" for="syaratY">Y</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="mematuhi_syarat" id="syaratN" value="N" {{ old('mematuhi_syarat') == 'N' ? 'checked' : '' }}>
                            <label class="form-check-label" for="syaratN">N</label>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" onclick="history.back()" 
                            class="btn btn-outline-info px-4 langkah-btn-custom" style="border: none;">
                        <span class="langkah-btn-text">LANGKAH SEBELUMNYA</span>
                    </button>
                    <button type="button" class="btn btn-primary px-4" style="background: #1B6B7A; border: none; font-weight: 600;" id="simpanHantarBtn">SIMPAN & HANTAR</button>
                </div>
            </div>
        </div>
    </div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const dateElement = document.getElementById('current-date');
        const timeElement = document.getElementById('current-time');

        const monthsInMalay = [
            'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun',
            'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember'
        ];

        function updateDateTime() {
            const now = new Date();
            const day = now.getDate();
            const month = monthsInMalay[now.getMonth()];
            const year = now.getFullYear();
            dateElement.textContent = `${day} ${month} ${year}`;
            
            timeElement.textContent = now.toLocaleTimeString('en-US', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: true
            });
        }

        updateDateTime();
        setInterval(updateDateTime, 1000);
    });
// Modal logic
document.addEventListener("DOMContentLoaded", function () {
    const simpanBtn = document.getElementById('simpanHantarBtn');
    const modal = document.getElementById('successModal');
    const okBtn = document.getElementById('successOkBtn');
    const closeBtn = document.getElementById('successCloseBtn');
    if (simpanBtn && modal) {
        simpanBtn.addEventListener('click', function() {
            modal.style.display = 'flex';
        });
    }
    if (okBtn && modal) {
        okBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });
    }
    if (closeBtn && modal) {
        closeBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });
    }
});

// STEP 5 BUSINESS RULES IMPLEMENTATION
// Based on specification images for Cagaran Bangunan
document.addEventListener('DOMContentLoaded', function() {
    // Get form elements
    const elements = {
        statusCagaran: document.getElementById('status_cagaran'),
        countdownCagaran: document.getElementById('countdown_cagaran'),
        tarikhAkhirPermohonanCagaran: document.getElementById('tarikh_akhir_permohonan_cagaran'),
        tarikhPermohonanCagaran: document.getElementById('tarikh_permohonan_cagaran'),
        tarikhPemulanganCagaran: document.getElementById('tarikh_pemulangan_cagaran'),
        memathuhiSyaratY: document.getElementById('syaratY'),
        memathuhiSyaratN: document.getElementById('syaratN')
    };
    
    // Utility functions
    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;
    }
    
    function getTodayDate() {
        return new Date().toISOString().split('T')[0];
    }
    
    // D1 - Status Cagaran logic based on C8 field and B3/B4 from previous steps
    function updateStatusCagaran() {
        if (!elements.statusCagaran) return;
        
        // Get status from localStorage (cross-step communication)
        const c8Value = localStorage.getItem('c8_tarikh') || '';
        const b3Status = localStorage.getItem('b3_keputusan') || '';
        const b4Date = localStorage.getItem('b4_tarikh') || '';
        
        // Apply D1 business logic from specification
        if (c8Value) {
            // C8 field has value -> "Cagaran Belum Dituntut"
            elements.statusCagaran.value = 'Cagaran Belum Dituntut';
            elements.statusCagaran.style.color = '#dc3545';
            elements.statusCagaran.style.fontWeight = 'bold';
        } else if (b3Status === 'batal' && b4Date) {
            // B3 = "Batal" AND B4 has date
            elements.statusCagaran.value = 'Batal';
            elements.statusCagaran.style.color = '#dc3545';
            elements.statusCagaran.style.fontWeight = 'bold';
        } else if (b3Status === 'tolak' && b4Date) {
            // B3 = "Tolak" AND B4 has date
            elements.statusCagaran.value = 'Tolak';
            elements.statusCagaran.style.color = '#dc3545';
            elements.statusCagaran.style.fontWeight = 'bold';
        } else {
            // Default status
            elements.statusCagaran.value = 'Sedang Diproses';
            elements.statusCagaran.style.color = '#333';
            elements.statusCagaran.style.fontWeight = 'normal';
        }
    }
    
    // D3 - Auto-calculate Tarikh Akhir Permohonan Cagaran
    // Based on specification: C2 + 60 business days
    function updateTarikhAkhirPermohonanCagaran() {
        if (!elements.tarikhAkhirPermohonanCagaran) return;
        
        // Get C2 value from localStorage (from step3)
        const c2Value = localStorage.getItem('c2_tarikh_akhir_kelulusan') || '';
        
        if (c2Value) {
            // Add 60 business days to C2
            const c2Date = new Date(c2Value);
            let businessDaysAdded = 0;
            let currentDate = new Date(c2Date);
            
            while (businessDaysAdded < 60) {
                currentDate.setDate(currentDate.getDate() + 1);
                if (currentDate.getDay() !== 0 && currentDate.getDay() !== 6) {
                    businessDaysAdded++;
                }
            }
            
            elements.tarikhAkhirPermohonanCagaran.value = currentDate.toISOString().split('T')[0];
            updateCountdownCagaran(); // Trigger countdown update
        }
    }
    
    // D2 - Countdown calculation (days between today and D3)
    function updateCountdownCagaran() {
        if (!elements.countdownCagaran || !elements.tarikhAkhirPermohonanCagaran) return;
        
        const tarikhAkhir = elements.tarikhAkhirPermohonanCagaran.value;
        
        if (tarikhAkhir) {
            const today = getTodayDate();
            const daysLeft = calculateBusinessDays(today, tarikhAkhir);
            
            elements.countdownCagaran.value = daysLeft;
            
            // Warning styling if approaching deadline
            if (daysLeft <= 7) {
                elements.countdownCagaran.style.color = '#dc3545';
                elements.countdownCagaran.style.fontWeight = 'bold';
                elements.countdownCagaran.style.backgroundColor = '#ffe6e6';
            } else if (daysLeft <= 30) {
                elements.countdownCagaran.style.color = '#856404';
                elements.countdownCagaran.style.fontWeight = 'bold';
                elements.countdownCagaran.style.backgroundColor = '#fff3cd';
            } else {
                elements.countdownCagaran.style.color = '#333';
                elements.countdownCagaran.style.fontWeight = 'normal';
                elements.countdownCagaran.style.backgroundColor = '#F4F4F4';
            }
        } else {
            elements.countdownCagaran.value = '';
        }
    }
    
    // Event listeners for form interactions
    if (elements.tarikhPermohonanCagaran) {
        elements.tarikhPermohonanCagaran.addEventListener('change', function() {
            // Store in localStorage for potential future calculations
            localStorage.setItem('d4_tarikh_permohonan', this.value);
        });
    }
    
    if (elements.tarikhPemulanganCagaran) {
        elements.tarikhPemulanganCagaran.addEventListener('change', function() {
            localStorage.setItem('d5_tarikh_pemulangan', this.value);
        });
    }
    
    // Radio button listeners
    if (elements.memathuhiSyaratY) {
        elements.memathuhiSyaratY.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('d6_mematuhi_syarat', 'Y');
            }
        });
    }
    
    if (elements.memathuhiSyaratN) {
        elements.memathuhiSyaratN.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('d6_mematuhi_syarat', 'N');
            }
        });
    }
    
    // Listen for updates from other steps
    window.addEventListener('storage', function(e) {
        if (e.key === 'c8_tarikh' || e.key === 'b3_keputusan' || e.key === 'b4_tarikh') {
            updateStatusCagaran();
        }
        if (e.key === 'c2_tarikh_akhir_kelulusan') {
            updateTarikhAkhirPermohonanCagaran();
        }
    });
    
    // Initialize all calculations on page load
    updateStatusCagaran();
    updateTarikhAkhirPermohonanCagaran();
    updateCountdownCagaran();
    
    // Set up periodic countdown updates (every minute)
    setInterval(function() {
        updateCountdownCagaran();
    }, 60000);
    
    console.log('Step 5 business rules initialized successfully');
});
</script>


<style>
    .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;
    }
    .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;
        color: #0B6477;
        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;
    }
/* Success Modal Styles */
.success-modal-bg {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.08);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.success-modal {
  background: #fff;
  border-radius: 32px;
  max-width: 540px;
  width: 90vw;
  padding: 48px 32px 32px 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  text-align: center;
  position: relative;
}
.success-modal .success-close {
  position: absolute;

  color: #fff;
  border: none;
  border-radius: 32px;
  font-size: 1.35rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  padding: 10px 0;
  width: 60%;
  margin: 0 auto;
  display: block;
  transition: background 0.2s;
}
.success-modal .success-ok-btn:hover {
  background: #0AD1C8;
}
/* Ensure sidebar overlays content and does not push it */
@media (min-width: 0px) {
  .container-fluid {
    margin-left: 0 !important;
  }
}
</style>


<!-- Success Modal Popup -->
<div class="success-modal-bg" id="successModal">
  <div class="success-modal">
    <button class="success-close" id="successCloseBtn" aria-label="Tutup">&times;</button>
    <div class="success-icon-bg">
      <img src="{{ asset('images/all/Group 1000001225.svg') }}" alt="Success" style="width: 165.78px; height: 130px; display: block; margin: 0 auto;" />
    </div>
    <div class="success-title">Berjaya !</div>
    <div class="success-desc">Terima kasih! Data anda telah berjaya disimpan dan dihantar.</div>
    <button class="success-ok-btn" id="successOkBtn">OK</button>
  </div>
</div>

@endsection