@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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
/* Breadcrumb hover effects */
.breadcrumb a:hover img {
    opacity: 0.7;
}

.breadcrumb a:hover {
    color: #0B6477 !important;
}

/* Form styling improvements */
.form-control:focus, .form-select:focus {
    border-color: #1B6B7A;
    box-shadow: 0 0 0 0.2rem rgba(27, 107, 122, 0.25);
}

/* Enhanced container styling */
.main-content {
    font-family: 'Poppins', sans-serif;
    text-align: left;
}

/* Timeline section enhancements */
.timeline-section {
    margin-bottom: 24px;
}

.timeline-date-header:hover {
    background-color: #f8f9fa;
    border-radius: 6px;
    margin: -8px;
    padding: 8px;
}
</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>
    
    <!-- Centered Main Container -->
    <div style="width: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 0; margin: 0;">
        <div class="main-content" style="max-width: 98%; width: 98%; margin: 32px 1% 0 1%; padding: 0; box-sizing: border-box;">
            <!-- Breadcrumb -->
            <div class="d-flex align-items-center mb-2" style="gap: 12px; width: 100%; margin-left: 0;">
                <nav aria-label="breadcrumb" style="background: none; margin-bottom: 0; margin-left: 0;">
                    <ol class="breadcrumb" style="background: none; padding: 0; margin-bottom: 0; font-size: 16px; display: flex; align-items: center; gap: 0;">
                        <li style="display: flex; align-items: center;">
                            <a href="{{ route('maindashboard') }}" style="display: flex; align-items: center; text-decoration: none;">
                                <img src="{{ asset('images/icon/home.svg') }}" alt="Home" style="width: 20px; height: 20px; cursor: pointer; transition: opacity 0.2s;">
                            </a>
                        </li>
                        <li style="display: flex; align-items: center; margin: 0 8px;">
                            <i class="fa fa-chevron-right" style="font-size: 15px; color: #A0A0A0;"></i>
                        </li>
                        <li style="font-family: 'Poppins', sans-serif; font-weight: 300; font-style: normal; font-size: 10px; line-height: 100%; letter-spacing: 0.05em;">
                            <a href="{{ route('ibuildingYears') }}" style="text-decoration: none; color: inherit; cursor: pointer; transition: color 0.2s;">
                                Senarai Permohonan
                            </a>
                        </li>
                        <li style="display: flex; align-items: center; margin: 0 8px;">
                            <i class="fa fa-chevron-right" style="font-size: 15px; color: #A0A0A0;"></i>
                        </li>
                        <li style="font-family: 'Poppins', sans-serif; font-weight: 300; font-style: normal; font-size: 10px; line-height: 100%; letter-spacing: 0.05em;">
                            <a href="{{ route('applicationList', ['year' => 2024]) }}" style="text-decoration: none; color: inherit; cursor: pointer; transition: color 0.2s;">
                                Permohonan 2024
                            </a>
                        </li>
                        <li style="display: flex; align-items: center; margin: 0 8px;">
                            <i class="fa fa-chevron-right" style="font-size: 15px; color: #A0A0A0;"></i>
                        </li>
                        <li style="font-family: 'Poppins', sans-serif; font-weight: 300; font-style: normal; font-size: 10px; line-height: 100%; letter-spacing: 0.05em;">
                            Rekod Pergerakan Fail
                        </li>
                    </ol>
                </nav>
            </div>
            
            <!-- Title and Date Row -->
            <div class="d-flex align-items-center justify-content-between" style="margin-bottom: 8px; width: 100%; margin-left: 0;">
                <h2 style="font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 32px; margin-bottom: 0; margin-left: 0; color: #2c3e50;">Rekod Pergerakan Fail</h2>
                <div style="min-width: 261px;">
                    @include('layouts.date-clock')
                </div>
            </div>
            <hr style="margin-top: 0; margin-bottom: 32px; border-color: #D9D9D9;">


            <div class="row" style="margin: 0; width: 100%;">
                <!-- Left: Rekod Pergerakan Fail Form -->
                <div class="col-md-5" style="padding-left: 0; padding-right: 15px;">
                    <div class="p-4" style="background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
                        <div class="mb-4">
                            <label class="form-label" style="font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 400; color: #333; margin-bottom: 8px;">Nombor Fail :</label>
                            <div style="color: #FF2D2D; font-size: 18px; font-weight: 600; font-family: 'Poppins', sans-serif;">OSC(002-A)\L/B/1/1/2/2024</div>
                        </div>
                        <form>
                            <div class="mb-4">
                                <label for="tarikh" class="form-label" style="font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 400; color: #333; margin-bottom: 8px; display: block;">Tarikh :</label>
                                <input type="date" class="form-control" id="tarikh" style="font-size: 16px; height: 44px; border: 1px solid #ddd; border-radius: 6px; font-family: 'Poppins', sans-serif;">
                            </div>
                            <div class="mb-4">
                                <label for="pegawai" class="form-label" style="font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 400; color: #333; margin-bottom: 8px; display: block;">Pegawai :</label>
                                <select class="form-select" id="pegawai" style="font-size: 16px; height: 44px; border: 1px solid #ddd; border-radius: 6px; font-family: 'Poppins', sans-serif;">
                                    <option selected disabled style="color: #999;">Pilih Pegawai</option>
                                    <option>PB Tun</option>
                                    <option>PPBB(KB)</option>
                                    <option>PT Nana</option>
                                </select>
                            </div>
                            <button type="submit" class="btn w-100" style="background: #1B6B7A; border: none; color: white; border-radius: 6px; font-size: 16px; font-weight: 500; font-family: 'Poppins', sans-serif; height: 44px; transition: all 0.2s ease;" onmouseover="this.style.background='#0f4a54'" onmouseout="this.style.background='#1B6B7A'">Simpan</button>
                        </form>
                    </div>
                </div>
                <!-- Right: Senarai Pergerakan Fail -->
                <div class="col-md-7" style="padding-left: 15px; padding-right: 0;">
                    <div class="p-4" style="background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
                        <h3 class="mb-4" style="font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 24px; text-align: center; color: #333; margin-bottom: 32px;">SENARAI PERGERAKAN FAIL</h3>
                    <div id="timeline-list">
                        <!-- 15 FEB 2024 -->
                        <div class="timeline-section">
                            <div class="d-flex align-items-center timeline-date-header" style="cursor: pointer; padding: 8px 0; border-bottom: 1px solid #f0f0f0; margin-bottom: 16px;" onclick="toggleTimeline('date-15feb')">
                                <span id="arrow-15feb" style="font-size: 18px; margin-right: 12px; transition: transform 0.2s ease; color: #666;">&#9660;</span>
                                <span class="fw-bold" style="font-size: 18px; font-family: 'Poppins', sans-serif; color: #333; font-weight: 600;">15 FEB 2024</span>
                            </div>
                            <div id="date-15feb" class="timeline-date-section mt-2">
                                <div class="d-flex align-items-start mb-3">
                                    <div class="timeline-icon-col">
                                        <div class="timeline-icon" style="background: #00CFFF;"><i class="fa-regular fa-clipboard-check"></i></div>
                                        <div class="timeline-connector"></div>
                                        <div class="timeline-icon" style="background: #00CFFF;"><i class="fa-regular fa-folder-open"></i></div>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="timeline-card mb-2">
                                            <div class="timeline-time">15:34</div>
                                            <div class="timeline-desc">Cagaran Bangunan – PB Tun</div>
                                        </div>
                                        <div class="timeline-card">
                                            <div class="timeline-time">08:56</div>
                                            <div class="timeline-desc">Muat Naik Dokumen Dan Fail – PPBB(KB)</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 14 FEB 2024 -->
                        <div class="timeline-section">
                            <div class="d-flex align-items-center timeline-date-header" style="cursor: pointer; padding: 8px 0; border-bottom: 1px solid #f0f0f0; margin-bottom: 16px;" onclick="toggleTimeline('date-14feb')">
                                <span id="arrow-14feb" style="font-size: 18px; margin-right: 12px; transition: transform 0.2s ease; color: #666;">&#9660;</span>
                                <span class="fw-bold" style="font-size: 18px; font-family: 'Poppins', sans-serif; color: #333; font-weight: 600;">14 FEB 2024</span>
                            </div>
                            <div id="date-14feb" class="timeline-date-section mt-2">
                                <div class="d-flex align-items-start mb-3">
                                    <div class="timeline-icon-col">
                                        <div class="timeline-icon" style="background: #0097A7;"><i class="fa-regular fa-file-lines"></i></div>
                                        <div class="timeline-connector"></div>
                                        <div class="timeline-icon" style="background: #0097A7;"><i class="fa-regular fa-file-lines"></i></div>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="timeline-card mb-2">
                                            <div class="timeline-time">15:34</div>
                                            <div class="timeline-desc">Penyelaras OSC – PB Tun</div>
                                        </div>
                                        <div class="timeline-card">
                                            <div class="timeline-time">08:56</div>
                                            <div class="timeline-desc">Butiran Pemohon – PT Nana</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <style>
                        .timeline-icon-col {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 48px;
                            position: relative;
                        }
                        .timeline-icon {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            color: #fff;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 18px;
                            margin-bottom: 0;
                        }
                        .timeline-connector {
                            width: 4px;
                            height: 40px;
                            background: #E0F7FA;
                            margin: 0 auto;
                        }
                        .timeline-card {
                            background: #F7F7F7;
                            border-radius: 8px;
                            border-left: 4px solid #00CFFF;
                            padding: 12px 16px;
                            margin-bottom: 12px;
                            min-width: 280px;
                            transition: all 0.2s ease;
                        }
                        .timeline-card:hover {
                            background: #f0f8ff;
                            transform: translateX(2px);
                        }
                        .timeline-time {
                            color: #A0A0A0;
                            font-size: 14px;
                            font-family: 'Poppins', sans-serif;
                            font-weight: 400;
                            margin-bottom: 4px;
                        }
                        .timeline-desc {
                            font-size: 16px;
                            font-family: 'Poppins', sans-serif;
                            color: #333;
                            font-weight: 400;
                            line-height: 1.4;
                        }
                        .timeline-date-section {
                            transition: max-height 0.2s;
                        }
                    </style>
                    <script>
                        function toggleTimeline(id) {
                            var section = document.getElementById(id);
                            var arrow = document.getElementById('arrow-' + id.split('-')[1]);
                            if (section.style.display === 'none') {
                                section.style.display = 'block';
                                arrow.innerHTML = '&#9660;';
                            } else {
                                section.style.display = 'none';
                                arrow.innerHTML = '&#9654;';
                            }
                        }
                        // Default: all open
                        document.addEventListener('DOMContentLoaded', function() {
                            document.getElementById('date-15feb').style.display = 'block';
                            document.getElementById('date-14feb').style.display = 'block';
                        });
                    </script>
                </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>



@endsection