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

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

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<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">
            <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;">Pemantauan Kerja Tapak</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="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="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: #fff; 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>


    <form method="POST" action="{{ route('permohonanstep3.store') }}" id="oscForm">
        @csrf

        <input type="hidden" id="tarikh_akhir_kelulusan" name="nomborFail" class="form-control" value="{{ $nofail }}">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="bg-white rounded-4 shadow-sm p-5">
                    <!-- C1 - Status Tapak -->
                    <div class="row mb-4 align-items-center">
                        <div class="col-md-4 fw-semibold" style="font-size: 1.1rem;">Status</div>
                        <div class="col-md-8">
                            <input type="text" id="status_binaan" name="status_binaan" class="form-control bg-light" readonly>
                        </div>
                    </div>
                    
                    <!-- C2 - Tarikh Akhir Kelulusan Pelan -->
                    <div class="row mb-4 align-items-center">
                        <div class="col-md-4 fw-semibold" style="font-size: 1.1rem;">Tarikh Akhir Kelulusan Pelan</div>
                        <div class="col-md-8">
                            <input type="date" id="tarikh_akhir_kelulusan" name="tarikh_akhir_kelulusan" class="form-control">
                        </div>
                    </div>
                    
                    <!-- C3 - Jumlah Tahun Pembaharuan -->
                    <div class="row mb-4 align-items-center">
                        <div class="col-md-4 fw-semibold" style="font-size: 1.1rem;">Jumlah Tahun Pembaharuan</div>
                        <div class="col-md-8">
                            <select type="number" id="jumlah_tahun_pembaharuan" name="jumlah_tahun_pembaharuan" class="form-select">
                                <option value="{{$data->tahun_pembaharuan}}" selected disabled></option>
                                <option value=1>1</option>
                                <option value=2>2</option>
                                <option value=3>3</option>
                                <option value=4>4</option>
                                <option value=5>5</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- C4 - Countdown Tarikh Akhir Pelan -->
                    <div class="row mb-4 align-items-center">
                        <div class="col-md-4 fw-semibold" style="font-size: 1.1rem;">Countdown Tarikh Akhir Pelan</div>
                        <div class="col-md-8">
                            <input type="text" id="countdown_akhir_pelan" name="countdown_akhir_pelan" class="form-control bg-light" readonly>
                        </div>
                    </div>
                    
                    <!-- C5 - Tarikh Borang B -->
                    <div class="row mb-4 align-items-center">
                        <div class="col-md-4 fw-semibold" style="font-size: 1.1rem;">Tarikh Borang B</div>
                        <div class="col-md-8">
                            <input type="date" id="tarikh_borang_b" name="tarikh_borang_b" class="form-control">
                        </div>
                    </div>
                    
                    <!-- C6 - Tarikh Akhir Permit -->
                    <div class="row mb-4 align-items-center">
                        <div class="col-md-4 fw-semibold" style="font-size: 1.1rem;">Tarikh Akhir Permit</div>
                        <div class="col-md-8">
                            <input type="date" id="tarikh_akhir_permit" name="tarikh_akhir_permit" class="form-control bg-light" readonly>
                        </div>
                    </div>
                    
                    <!-- C7 - Countdown Tarikh Akhir Permit -->
                    <div class="row mb-4 align-items-center">
                        <div class="col-md-4 fw-semibold" style="font-size: 1.1rem;">Countdown Tarikh Akhir Permit</div>
                        <div class="col-md-8">
                            <input type="text" id="countdown_akhir_permit" name="countdown_akhir_permit" class="form-control bg-light" readonly>
                        </div>
                    </div>
                    
                    <!-- C8 - Tarikh Borang F/F1 -->
                    <div class="row mb-4 align-items-center">
                        <div class="col-md-4 fw-semibold" style="font-size: 1.1rem;">Tarikh Borang F/F1</div>
                        <div class="col-md-8">
                            <input type="date" id="tarikh_borang_fi" name="tarikh_borang_fi" class="form-control">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-5">
                        <button type="button" onclick="history.back()" 
                                class="btn btn-outline-info langkah-btn-custom" style="border: none;">
                            <span class="langkah-btn-text">LANGKAH SEBELUMNYA</span>
                        </button>
                    <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>
                </div>
            </div>
        </div>
    </form>


    



<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;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // STEP 3 BUSINESS RULES IMPLEMENTATION
    // Based on specification images for Pemantauan Kerja Tapak
    
    // Get form elements
    const elements = {
        statusTapak: document.getElementById('status_binaan'),
        tarikhAkhirKelulusan: document.getElementById('tarikh_akhir_kelulusan'),
        jumlahTahunPembaharuan: document.getElementById('jumlah_tahun_pembaharuan'),
        countdownAkhirPelan: document.getElementById('countdown_akhir_pelan'),
        tarikhBorangB: document.getElementById('tarikh_borang_b'),
        tarikhAkhirPermit: document.getElementById('tarikh_akhir_permit'),
        countdownAkhirPermit: document.getElementById('countdown_akhir_permit'),
        tarikhBorangFI: document.getElementById('tarikh_borang_fi')
    };
    
    // 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 addYearsToDate(date, years) {
        if (!date || !years) return '';
        const dateObj = new Date(date);
        dateObj.setFullYear(dateObj.getFullYear() + parseInt(years));
        return dateObj.toISOString().split('T')[0];
    }
    
    function getTodayDate() {
        return new Date().toISOString().split('T')[0];
    }
    
    // C1 - Status update based on C8 field (from step1 integration)
    function updateStatusTapak() {
        if (!elements.statusTapak) return;
        
        // Get status from localStorage or check C8 field
        const c8Value = elements.tarikhBorangFI ? elements.tarikhBorangFI.value : '';
        const b3Status = localStorage.getItem('b3_keputusan') || '';
        
        if (c8Value) {
            elements.statusTapak.value = 'Cagaran Belum Dituntut';
            elements.statusTapak.style.color = '#dc3545';
            elements.statusTapak.style.fontWeight = 'bold';
        } else if (b3Status === 'batal') {
            elements.statusTapak.value = 'Batal';
            elements.statusTapak.style.color = '#dc3545';
            elements.statusTapak.style.fontWeight = 'bold';
        } else if (b3Status === 'tolak') {
            elements.statusTapak.value = 'Tolak';
            elements.statusTapak.style.color = '#dc3545';
            elements.statusTapak.style.fontWeight = 'bold';
        } else {
            elements.statusTapak.value = 'Sedang Diproses';
            elements.statusTapak.style.color = '#333';
            elements.statusTapak.style.fontWeight = 'normal';
        }
    }
    
    // C6 - Auto calculate Tarikh Akhir Permit (C2 + C3 years)
    function updateTarikhAkhirPermit() {
        if (elements.tarikhAkhirKelulusan && elements.jumlahTahunPembaharuan && elements.tarikhAkhirPermit) {
            const tarikhKelulusan = elements.tarikhAkhirKelulusan.value;
            const tahunPembaharuan = elements.jumlahTahunPembaharuan.value;
            
            if (tarikhKelulusan && tahunPembaharuan) {
                const tarikhAkhir = addYearsToDate(tarikhKelulusan, tahunPembaharuan);
                elements.tarikhAkhirPermit.value = tarikhAkhir;
                updateCountdownAkhirPermit(); // Trigger countdown update
            } else {
                elements.tarikhAkhirPermit.value = '';
            }
        }
    }
    
    // C4 - Countdown Tarikh Akhir Pelan (days between today and C2)
    function updateCountdownAkhirPelan() {
        if (elements.countdownAkhirPelan && elements.tarikhAkhirKelulusan) {
            const tarikhAkhir = elements.tarikhAkhirKelulusan.value;
            
            if (tarikhAkhir) {
                const today = getTodayDate();
                const daysLeft = calculateBusinessDays(today, tarikhAkhir);
                
                elements.countdownAkhirPelan.value = daysLeft + ' hari';
                
                // Warning styling if less than 60 days
                if (daysLeft < 60) {
                    elements.countdownAkhirPelan.style.color = '#dc3545';
                    elements.countdownAkhirPelan.style.fontWeight = 'bold';
                } else {
                    elements.countdownAkhirPelan.style.color = '#333';
                    elements.countdownAkhirPelan.style.fontWeight = 'normal';
                }
            } else {
                elements.countdownAkhirPelan.value = '';
            }
        }
    }
    
    // C7 - Countdown Tarikh Akhir Permit (days between today and C6)
    function updateCountdownAkhirPermit() {
        if (elements.countdownAkhirPermit && elements.tarikhAkhirPermit) {
            const tarikhAkhir = elements.tarikhAkhirPermit.value;
            
            if (tarikhAkhir) {
                const today = getTodayDate();
                const daysLeft = calculateBusinessDays(today, tarikhAkhir);
                
                elements.countdownAkhirPermit.value = daysLeft + ' hari';
                
                // Warning styling if less than 60 days
                if (daysLeft < 60) {
                    elements.countdownAkhirPermit.style.color = '#dc3545';
                    elements.countdownAkhirPermit.style.fontWeight = 'bold';
                } else {
                    elements.countdownAkhirPermit.style.color = '#333';
                    elements.countdownAkhirPermit.style.fontWeight = 'normal';
                }
            } else {
                elements.countdownAkhirPermit.value = '';
            }
        }
    }
    
    // Event listeners
    if (elements.tarikhAkhirKelulusan) {
        elements.tarikhAkhirKelulusan.addEventListener('change', function() {
            updateTarikhAkhirPermit();
            updateCountdownAkhirPelan();
            
            // Store C2 value for step5 integration
            localStorage.setItem('c2_tarikh_akhir_kelulusan', this.value);
            localStorage.setItem('c2_updated', Date.now().toString());
        });
    }
    
    if (elements.jumlahTahunPembaharuan) {
        elements.jumlahTahunPembaharuan.addEventListener('change', function() {
            updateTarikhAkhirPermit();
        });
    }
    
    if (elements.tarikhBorangFI) {
        elements.tarikhBorangFI.addEventListener('change', function() {
            updateStatusTapak();
            
            // Update localStorage for cross-step communication
            localStorage.setItem('c8_tarikh', this.value);
            localStorage.setItem('c8_updated', Date.now().toString());
            
            // Trigger status update in parent window if available (for step1 integration)
            if (window.parent && window.parent.setC8Value) {
                window.parent.setC8Value(this.value);
            }
        });
    }
    
    // Listen for updates from other steps
    window.addEventListener('storage', function(e) {
        if (e.key === 'b3_keputusan' || e.key === 'b4_tarikh') {
            updateStatusTapak();
        }
    });
    
    // Initialize calculations on page load
    updateStatusTapak();
    updateTarikhAkhirPermit();
    updateCountdownAkhirPelan();
    updateCountdownAkhirPermit();
    
    // Set up periodic countdown updates (every minute)
    setInterval(function() {
        updateCountdownAkhirPelan();
        updateCountdownAkhirPermit();
    }, 60000);
    
    console.log('Step 3 business rules initialized successfully');
});
</script>

    @endsection