@extends('layouts.default')

@section('title', 'Monitoring Pengajuan')

@push('css')
    <link href="{{ asset('assets/plugins/nvd3/nvd3.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/jquery-jvectormap/jquery-jvectormap.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/bootstrap-calendar/css/bootstrap_calendar.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/gritter/css/jquery.gritter.css') }}" rel="stylesheet" />

    <style>
        /* ====================== TIMELINE HYBRID ====================== */
        .timeline-wrapper {
            position: relative;
            padding-left: 200px;
            /* ruang agar garis, circle, dan tanggal muat */
            margin-top: 30px;
        }

        /* Garis vertikal utama */
        .timeline-wrapper::before {
            content: '';
            position: absolute;
            left: 155px;
            top: 0;
            bottom: 0;
            width: 3px;
            background: #dee2e6;
            border-radius: 2px;
            z-index: 1;
            overflow: hidden;
        }

        /* Garis progres animasi */
        .timeline-wrapper::after {
            content: '';
            position: absolute;
            left: 155px;
            top: 0;
            width: 3px;
            height: 0;
            background: linear-gradient(180deg, #0d6efd, #198754);
            border-radius: 2px;
            animation: growLine 1.6s ease-in-out forwards;
            z-index: 2;
        }

        @keyframes growLine {
            from {
                height: 0;
            }

            to {
                height: 100%;
            }
        }

        /* Tiap langkah */
        .timeline-step {
            position: relative;
            margin-bottom: 40px;
            z-index: 3;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.6s ease forwards;
        }

        .timeline-step:nth-child(1) {
            animation-delay: 0.2s;
        }

        .timeline-step:nth-child(2) {
            animation-delay: 0.4s;
        }

        .timeline-step:nth-child(3) {
            animation-delay: 0.6s;
        }

        .timeline-step:nth-child(4) {
            animation-delay: 0.8s;
        }

        .timeline-step:nth-child(5) {
            animation-delay: 1s;
        }

        .timeline-step:nth-child(6) {
            animation-delay: 1.2s;
        }

        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Titik circle */
        .timeline-step::before {
            content: '';
            position: absolute;
            left: -52px;
            top: 25px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: var(--circle-color, #0d6efd);
            border: 3px solid #fff;
            box-shadow: 0 0 0 2px var(--circle-color, #0d6efd);
            z-index: 3;
            transition: transform 0.3s ease;
        }

        .timeline-step:hover::before {
            transform: scale(1.2);
        }

        /* Badge tanggal */
        .timeline-badge {
            position: absolute;
            left: -200px;
            top: 22px;
            background: #343a40;
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 5px;
            white-space: nowrap;
            min-width: 80px;
            text-align: center;
            z-index: 4;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }

        /* Kartu informasi */
        .timeline-card {
            background: #fff;
            border: 1px solid #dee2e6;
            border-left: 6px solid var(--status-color, #6c757d);
            border-radius: 10px;
            padding: 15px 20px;
            margin-left: 40px;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 15px;
            position: relative;
            z-index: 2;
        }

        .timeline-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
        }

        /* Ikon status di dalam card */
        .timeline-icon {
            flex-shrink: 0;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: var(--status-color, #6c757d);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        /* Konten card */
        .timeline-info {
            flex-grow: 1;
        }

        .timeline-info h5 {
            margin: 0;
            font-weight: 600;
            color: #212529;
        }

        .timeline-info small {
            color: #6c757d;
            display: block;
        }

        .timeline-info p {
            margin-top: 6px;
            color: #495057;
            font-size: 14px;
        }

        .timeline-info img {
            margin-top: 10px;
            border-radius: 8px;
            max-height: 160px;
            object-fit: cover;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .timeline-info img:hover {
            transform: scale(1.02);
        }

        /* ====================== RESPONSIVE FIX ====================== */
        @media (max-width: 768px) {
            .timeline-wrapper {
                padding-left: 60px;
            }

            .timeline-wrapper::before,
            .timeline-wrapper::after {
                left: 15px;
            }

            .timeline-step::before {
                
            }

            .timeline-card {
                margin-left: 0px;
                flex-direction: column;
                padding: 15px;
            }

            .timeline-icon {
                margin: 0 auto 10px auto;
            }

            .timeline-info h5 {
                text-align: center;
            }

            .timeline-badge {
                display: block;
                position: relative;
                left: 0;
                top: -10px;
                margin-bottom: 5px;
                text-align: center;
            }




        }
    </style>
@endpush



@section('content')
    <ol class="breadcrumb pull-right">
        <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
        <li class="breadcrumb-item"><a href="javascript:;">Monitoring</a></li>
        <li class="breadcrumb-item active">Pengajuan</li>
    </ol>

    <h1 class="page-header">Monitoring Pengajuan <small>Lacak status dan progres pengajuan anda</small></h1>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default"
                            data-click="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success"
                            data-click="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                            data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                            data-click="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                    <h4 class="panel-title">Cari Nomor Pengajuan</h4>
                </div>
                <div class="panel-body">

                    <!-- 🔍 Input Pencarian -->
                    <div class="card mb-4 p-3">
                        <div class="row align-items-center">


                            <div class="input-group">
                                <input type="text" id="nomor_pengajuan_search" class="form-control"
                                    placeholder="Masukkan Nomor Pengajuan...">
                                <span class="input-group-append">
                                    <button id="btn-search-timeline" class="btn btn-primary" type="button"><i
                                            class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- 📜 Timeline Hybrid -->
                    <div id="timeline-wrapper" class="timeline-wrapper">
                        <div id="timeline-container">
                            <div class="text-center text-muted py-4">Masukkan nomor pengajuan untuk melihat riwayat.</div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/id.min.js"></script>
    <script>
        moment.locale('id');

        $(function() {
            $('#btn-search-timeline').on('click', function() {
                const nomor = $('#nomor_pengajuan_search').val().trim();
                if (!nomor) return Swal.fire('Peringatan', 'Masukkan nomor pengajuan terlebih dahulu.',
                    'warning');

                $('#timeline-container').html(
                    '<div class="text-center text-muted py-4">Memuat data...</div>');
                $.getJSON(`/pengajuan/timeline/${nomor}`, function(response) {
                    const data = response.data || [];
                    if (!data.length) {
                        $('#timeline-container').html(
                            `<div class="text-center text-muted py-4">Tidak ada data untuk nomor <b>${nomor}</b>.</div>`
                            );
                        return;
                    }

                    const iconMap = {
                        'Pengajuan Baru': 'fa-file-alt',
                        'Verifikasi TURT': 'fa-clipboard"',
                        'Verifikasi PPK': 'fa-check',
                        'Verifikasi Pejabat Pengadaan': 'fa-check',
                        'Pengerjaan': 'fa-cogs',
                        'Selesai': 'fa-check-circle'
                    };

                    const colorMap = {
                        'Pengajuan Baru': '#6c757d',
                        'Verifikasi TURT': '#0dcaf0',
                        'Verifikasi PPK': '#0d6efd',
                        'Verifikasi Pejabat Pengadaan': '#ffc107',
                        'Pengerjaan': '#fd7e14',
                        'Selesai': '#198754'
                    };

                    const baseUrl = `{{ asset('assets/images/pengajuan') }}`;
                    const defaultImg = `{{ asset('assets/images/default.png') }}`;

                    $('#timeline-container').empty();

                    data.forEach(item => {
                        const color = colorMap[item.status] || '#6c757d';
                        const icon = iconMap[item.status] || 'fa-circle';
                        const date = moment(item.created_at).format('DD MMM YYYY hh:mm:ss');
                        const imgSrc = item.gambar_pendukung ?
                            `${baseUrl}/${item.gambar_pendukung}` : defaultImg;

                        // buat elemen card secara dinamis
                        const $step = $('<div>', {
                            class: 'timeline-step',
                            css: {
                                '--circle-color': color
                            }
                        });
                        const $badge = $('<span>', {
                            class: 'timeline-badge',
                            text: date
                        });
                        const $card = $('<div>', {
                            class: 'timeline-card',
                            css: {
                                '--status-color': color
                            }
                        });
                        const $icon = $('<div>', {
                            class: 'timeline-icon'
                        }).append(`<i class="fa ${icon}"></i>`);
                        const $info = $('<div>', {
                            class: 'timeline-info'
                        });

                        // konten utama
                        $info.append(`<h5>${item.status}</h5>`);
                        $info.append(
                            `<small><i class="fa fa-user"></i> ${item.nama_user || 'Sistem'} • ${date}</small><hr>`
                            );

                        if (item.is_pengajuan_utama) {
                            $info.append(`
                        <div class="card border-primary mb-3">
                            <div class="card-header bg-primary text-white">
                                <i class="fa fa-file-alt mr-2"></i> Informasi Pengajuan Pemeliharaan
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered mb-0">
                                        <tbody>
                                            <tr>
                                                <th width="30%" class="bg-light text-right">Nomor Pengajuan</th>
                                                <td>${item.nomor_pengajuan}</td>
                                            </tr>
                                            <tr>
                                                <th class="bg-light text-right">Tanggal Pengajuan</th>
                                                <td>${moment(item.tanggal_kegiatan).format('DD MMM YYYY')}</td>
                                            </tr>
                                            <tr>
                                                <th class="bg-light text-right">Uraian Kerusakan</th>
                                                <td>${item.uraian_kerusakan || '-'}</td>
                                            </tr>
                                            <tr>
                                                <th class="bg-light text-right">Usulan Tindakan</th>
                                                <td>${item.usulan_tindakan || '-'}</td>
                                            </tr>
                                            <tr>
                                                <th class="bg-light text-right">Dibuat Oleh</th>
                                                <td>${item.nama_user || 'Sistem'}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    `);
                        }

                        $info.append(`
                    <div class="card border-0 mb-3">
                        <div class="card-body bg-light">
                            <h6 class="text-secondary mb-2">
                                <i class="fa fa-sticky-note mr-2"></i> Catatan:
                            </h6>
                            <p class="mb-0">${item.catatan || '-'}</p>
                        </div>
                    </div>
                `);




                        $info.append($('<div>', {
                            class: 'text-center mt-2'
                        }).append(
                            $('<img>', {
                                src: imgSrc,
                                alt: 'Gambar pendukung'
                            })
                        ));

                        $card.append($icon).append($info);
                        $step.append($badge).append($card);
                        $('#timeline-container').append($step);
                    });
                }).fail(() => {
                    $('#timeline-container').html(
                        '<div class="text-danger text-center py-4">Gagal memuat timeline.</div>'
                        );
                });
            });
        });
    </script>
@endpush