@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ url($url_menu . '/index') }}'">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        {{-- check authorize edi --}}
                        @if ($authorize->edit == '1')
                            {{-- check status active --}}
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" style="display: none;" id="{{ $dmenu }}-save"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                            {{-- button edit --}}
                            @if($trs_pengiriman->status !== 'Complete')
                                <button class="btn btn-warning mb-0"
                                    onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($trs_pengiriman->id)) }}'"
                                    id="{{ $dmenu }}-edit">
                                    <i class="fas fa-edit me-1"></i>
                                    <span class="font-weight-bold">Edit</span>
                                </button>
                            @endif
                        @endif
                        <!-- {{-- <button class="btn btn-secondary mb-0"
                                    onclick="window.location='{{ route('trdrv.show', ['idencrypt' => encrypt($trs_pengiriman->id), 'pdf' => true]) }}'">
                                <span class="font-weight-bold">PDF</span>
                            </button> --}} -->
                        <button class="btn btn-secondary mb-0"
                            onclick="window.location='{{ url($url_menu . '/pdf/' . encrypt($trs_pengiriman->id)) }}?pdf=true'">
                            <span class="font-weight-bold">PDF</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card p-4">
                    {{-- Header Detail Kurir --}}
                    <h4 class="text-primary">Detail Penjadwalan {{ $trs_pengiriman->idroles }}</h4>
                    <hr class="horizontal dark mt-0">
                    <h3 class="fw-bold">{{ ucfirst($trs_pengiriman->idroles) }} 1 -
                        @php
                            $isManualValid =
                                is_string($trs_pengiriman->nomor_kendaraan_manual ?? '') &&
                                !empty($trs_pengiriman->nomor_kendaraan_manual);
                        @endphp

                        @if ($isManualValid)
                            {{ $trs_pengiriman->nomor_kendaraan_manual }}
                        @elseif (!empty($trs_pengiriman->no_plat))
                            {{ $trs_pengiriman->no_plat }}
                        @else
                            Nomor Kendaraan Tidak Ada
                        @endif
                    </h3>
                    <p class="text-muted" style="font-weight: bold; font-size: 17px; margin-top: -10px;">PT. MULTI SPUNINDO
                        JAYA</p>

                    {{-- Informasi Kurir --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row mb-1 mt-3">
                                <div class="col-4 fw-bold" style="font-weight: bold; font-size: 17px;">NAMA</div>
                                <div class="col-8" style="font-size: 17px;">: {{ $trs_pengiriman->nama_kurir }}</div>
                            </div>
                            <div class="row mb-1">
                                <div class="col-4 fw-bold" style="font-weight: bold; font-size: 17px;">HARI</div>
                                <div class="col-8" style="font-size: 17px;">
                                    :
                                    {{ \Carbon\Carbon::parse($trs_pengiriman->tanggal)->locale('id')->translatedFormat('l') }}
                                </div>
                            </div>
                            <div class="row mb-1">
                                <div class="col-4 fw-bold" style="font-weight: bold; font-size: 17px;">TANGGAL</div>
                                <div class="col-8" style="font-size: 17px;">
                                    :
                                    {{ \Carbon\Carbon::parse($trs_pengiriman->tanggal)->locale('id')->translatedFormat('d F Y') }}
                                </div>
                            </div>
                            <div class="row mb-1">
                                <div class="col-4 fw-bold" style="font-weight: bold; font-size: 17px;">NO. POL</div>
                                <div class="col-8" style="font-size: 17px;">
                                    @php
                                        $isManualValid =
                                            is_string($trs_pengiriman->nomor_kendaraan_manual ?? '') &&
                                            !empty($trs_pengiriman->nomor_kendaraan_manual);
                                    @endphp

                                    @if ($isManualValid)
                                        : {{ $trs_pengiriman->namakendaraan }} - {{ $trs_pengiriman->nomor_kendaraan_manual }}
                                    @elseif (!empty($trs_pengiriman->no_plat))
                                        : {{ $trs_pengiriman->namakendaraan }} - {{ $trs_pengiriman->no_plat }}
                                    @else
                                        Nomor Kendaraan Tidak Ada
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 d-flex justify-content-end align-items-center">
                            {{-- Box Informasi Keluar & Masuk --}}
                            <div class="d-flex flex-column flex-md-row w-100">
                                <!-- Card Keluar -->
                                <div class="card shadow-none border w-100 w-md-auto me-md-2 mb-2 mb-md-0"
                                    style="font-size: 0.85rem; min-width: 150px;">
                                    <div class="card-body text-center p-2">
                                        <h6 class="card-title fw-bold mb-2" style="font-size: 0.9rem;">KELUAR</h6>
                                        <div class="row align-items-center mb-2">
                                            <div class="col-6 text-start">
                                                <p>PUKUL</p>
                                            </div>
                                            <div class="col-6">
                                                <input type="time" class="form-control form-control-sm" id="masuk_pukul"
                                                    name="masuk_pukul" value="{{ $trs_pengiriman->masuk_pukul }}" readonly>
                                            </div>
                                        </div>
                                        <div class="row align-items-center">
                                            <div class="col-6 text-start">
                                                <p>ODOMETER</p>
                                            </div>
                                            <div class="col-6">
                                                <input type="text" class="form-control form-control-sm"
                                                    id="odometer_masuk" name="odometer_masuk"
                                                    value="{{ $trs_pengiriman->odometer_masuk }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Card Masuk -->
                                <div class="card shadow-none border w-100 w-md-auto"
                                    style="font-size: 0.85rem; min-width: 150px;">
                                    <div class="card-body text-center p-2">
                                        <h6 class="card-title fw-bold mb-2" style="font-size: 0.9rem;">MASUK</h6>
                                        <div class="row align-items-center mb-2">
                                            <div class="col-6 text-start">
                                                <p>PUKUL</p>
                                            </div>
                                            <div class="col-6">
                                                <input type="time" class="form-control form-control-sm" id="keluar_pukul"
                                                    name="keluar_pukul" value="{{ $trs_pengiriman->keluar_pukul }}"
                                                    readonly>
                                            </div>
                                        </div>
                                        <div class="row align-items-center">
                                            <div class="col-6 text-start">
                                                <p>ODOMETER</p>
                                            </div>
                                            <div class="col-6">
                                                <input type="text" class="form-control form-control-sm"
                                                    id="odometer_keluar" name="odometer_keluar"
                                                    value="{{ $trs_pengiriman->odometer_keluar }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Tabel Detail Perjalanan --}}
                    <div class="table-responsive mt-4">
                        <!-- TAMPILAN DESKTOP -->
                        <div class="d-none d-md-block">
                            @php
                                // Pastikan data sudah berada dalam koleksi
                                $trs_detail_pengiriman = collect($trs_detail_pengiriman);

                                // Fungsi untuk menentukan urutan berdasarkan kondisi warna
                                $trs_detail_pengiriman = $trs_detail_pengiriman
                                    ->sortBy(function ($detail) {
                                        $isFilled =
                                            !empty($detail->masuk) &&
                                            !empty($detail->keluar) &&
                                            !empty($detail->pic) &&
                                            !empty($detail->dt_tugas) &&
                                            !empty($detail->narahubung);

                                        if (isset($detail->isactive) && $detail->isactive == '0') {
                                            // Prioritas utama: tidak aktif
                                            $bgColor = 'rgba(255, 0, 0, 0.3)'; // Merah
                                            return 3; // Merah
                                        } elseif (
                                            !empty($detail->keterangan) &&
                                            str_contains(strtolower($detail->keterangan), 'tertunda')
                                        ) {
                                            // Kedua: tertunda
                                            $bgColor = 'rgba(255, 255, 0, 0.3)'; // Kuning
                                            return 2; // Kuning
                                        } elseif ($isFilled) {
                                            // Ketiga: lengkap
                                            $bgColor = 'rgba(0, 255, 0, 0.2)'; // Hijau
                                            return 1; // Hijau
                                        } else {
                                            // Default
                                            $bgColor = 'white';
                                            return 0; // Putih
                                        }
                                    })
                                    ->values(); // Menghapus index lama yang tidak terurut
                            @endphp
                            <table class="table table-bordered">
                                <thead class="text-center" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>No</th>
                                        <th>Tujuan</th>
                                        <th>Jenis Tugas</th>
                                        <th>Detail Tugas</th>
                                        <th>PIC</th>
                                        <th>Masuk</th>
                                        <th>Keluar</th>
                                        <th>Yang Ditemui</th>
                                        <th>Keterangan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($trs_detail_pengiriman as $key => $detail)
                                        @php
                                            $isFilled =
                                                !empty($detail->masuk) &&
                                                !empty($detail->keluar) &&
                                                !empty($detail->pic) &&
                                                !empty($detail->dt_tugas) &&
                                                !empty($detail->narahubung);

                                            if (isset($detail->isactive) && $detail->isactive == '0') {
                                                // Prioritas utama: tidak aktif
                                                $bgColor = 'rgba(255, 0, 0, 0.3)'; // Merah
                                            } elseif (
                                                !empty($detail->keterangan) &&
                                                str_contains(strtolower($detail->keterangan), 'tertunda')
                                            ) {
                                                // Kedua: tertunda
                                                $bgColor = 'rgba(255, 255, 0, 0.3)'; // Kuning
                                            } elseif ($isFilled) {
                                                // Ketiga: lengkap
                                                $bgColor = 'rgba(0, 255, 0, 0.2)'; // Hijau
                                            } else {
                                                // Default
                                                $bgColor = 'white';
                                            }

                                        @endphp
                                        <tr style="background-color: {{ $bgColor }};">
                                            <td class="text-center">{{ $key + 1 }}</td>
                                            <td>{{ $detail->tujuan ?? '-' }}</td>
                                            <td>{{ $detail->jenis_tugas ?? '-' }}</td>
                                            <td>{{ $detail->dt_tugas ?? '-' }}</td>
                                            <td>{{ $detail->pic ?? '-' }}</td>
                                            <td class="text-center">{{ $detail->masuk ?? '-' }}</td>
                                            <td class="text-center">{{ $detail->keluar ?? '-' }}</td>
                                            <td>{{ $detail->narahubung ?? '-' }}</td>
                                            <td class="text-center">{{ $detail->keterangan ?? '-' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>

                            </table>
                        </div>

                        <!-- TAMPILAN MOBILE -->
                        <div class="d-md-none">
                            @php
                                // Pastikan data sudah berada dalam koleksi
                                $trs_detail_pengiriman = collect($trs_detail_pengiriman);

                                // Fungsi untuk menentukan urutan berdasarkan kondisi warna
                                $trs_detail_pengiriman = $trs_detail_pengiriman
                                    ->sortBy(function ($detail) {
                                        $isFilled =
                                            !empty($detail->masuk) &&
                                            !empty($detail->keluar) &&
                                            !empty($detail->pic) &&
                                            !empty($detail->dt_tugas) &&
                                            !empty($detail->narahubung);

                                        if (isset($detail->isactive) && $detail->isactive == '0') {
                                            // Prioritas utama: tidak aktif
                                            $bgColor = 'rgba(255, 0, 0, 0.3)'; // Merah
                                            return 3; // Merah
                                        } elseif (
                                            !empty($detail->keterangan) &&
                                            str_contains(strtolower($detail->keterangan), 'tertunda')
                                        ) {
                                            // Kedua: tertunda
                                            $bgColor = 'rgba(255, 255, 0, 0.3)'; // Kuning
                                            return 2; // Kuning
                                        } elseif ($isFilled) {
                                            // Ketiga: lengkap
                                            $bgColor = 'rgba(0, 255, 0, 0.2)'; // Hijau
                                            return 1; // Hijau
                                        } else {
                                            // Default
                                            $bgColor = 'white';
                                            return 0; // Putih
                                        }
                                    })
                                    ->values(); // Menghapus index lama yang tidak terurut
                            @endphp
                            @foreach ($trs_detail_pengiriman as $key => $detail)
                                @php
                                    $isFilled =
                                        !empty($detail->masuk) &&
                                        !empty($detail->keluar) &&
                                        !empty($detail->pic) &&
                                        !empty($detail->dt_tugas) &&
                                        !empty($detail->narahubung);

                                    if (isset($detail->isactive) && $detail->isactive == '0') {
                                        // Prioritas utama: tidak aktif
                                        $bgColor = 'rgba(255, 0, 0, 0.3)'; // Merah
                                    } elseif (
                                        !empty($detail->keterangan) &&
                                        str_contains(strtolower($detail->keterangan), 'tertunda')
                                    ) {
                                        // Kedua: tertunda
                                        $bgColor = 'rgba(255, 255, 0, 0.3)'; // Kuning
                                    } elseif ($isFilled) {
                                        // Ketiga: lengkap
                                        $bgColor = 'rgba(0, 255, 0, 0.2)'; // Hijau
                                    } else {
                                        // Default
                                        $bgColor = 'white';
                                    }
                                @endphp
                                <div class="card mb-3 shadow-sm border" style="background-color: {{ $bgColor }};">
                                    <div class="card-body p-3">
                                        <h6 class="fw-bold mb-3">Detail #{{ $key + 1 }}</h6>
                                        <div class="row mb-2">
                                            <div class="col-5 fw-bold">Tujuan</div>
                                            <div class="col-7">: {{ $detail->tujuan }}</div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-5 fw-bold">Jenis Tugas</div>
                                            <div class="col-7">: {{ $detail->jenis_tugas }}</div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-5 fw-bold">Detail Tugas</div>
                                            <div class="col-7">: {{ $detail->dt_tugas }}</div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-5 fw-bold">PIC</div>
                                            <div class="col-7">: {{ $detail->pic }}</div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-5 fw-bold">Set Jam</div>
                                            <div class="col-7 mt-2">: <i class="fas fa-clock"></i></div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-5 fw-bold">Masuk</div>
                                            <div class="col-7">: {{ $detail->masuk }}</div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-5 fw-bold">Keluar</div>
                                            <div class="col-7">: {{ $detail->keluar }}</div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-5 fw-bold">Yang Ditemui</div>
                                            <div class="col-7">: {{ $detail->narahubung }}</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-5 fw-bold">Keterangan</div>
                                            <div class="col-7">: {{ $detail->keterangan }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                    <!-- Legenda Warna Status Tugas -->
                    <div class="row mt-3" id="legenda-warna">
                        <div class="col-6 col-md-3 d-flex align-items-center gap-2">
                            <div class="rounded-circle"
                                style="width: 15px; height: 15px; background-color: rgba(255, 0, 0, 0.3); border: 1px solid black;">
                            </div>
                            <span>Dibatalkan</span>
                        </div>
                        <div class="col-6 col-md-3 d-flex align-items-center gap-2">
                            <div class="rounded-circle"
                                style="width: 15px; height: 15px; background-color: rgba(255, 255, 0, 0.3); border: 1px solid black;">
                            </div>
                            <span>Tertunda</span>
                        </div>
                        <div class="col-6 col-md-3 d-flex align-items-center gap-2">
                            <div class="rounded-circle"
                                style="width: 15px; height: 15px; background-color: rgba(0, 255, 0, 0.2); border: 1px solid black;">
                            </div>
                            <span>Selesai</span>
                        </div>
                        <div class="col-6 col-md-3 d-flex align-items-center gap-2">
                            <div class="rounded-circle"
                                style="width: 15px; height: 15px; background-color: white; border: 1px solid black;">
                            </div>
                            <span>Belum selesai</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <h5 class="text-primary">Dokumentasi Penjadwalan</h5>
                <hr class="horizontal dark mt-0 mb-4">

                <div class="row g-4">
                    {{-- Kolom Gambar --}}
                    <div class="col-md-6">
                        @if($dokumentasi->isEmpty())
                            <div class="text-center fst-italic text-secondary">-- Belum ada gambar --</div>
                        @else
                            <div class="row g-3">
                                @foreach($dokumentasi as $img)
                                    <div class="col-6 col-sm-4 col-lg-6">
                                        <div class="border rounded-3 overflow-hidden shadow-sm bg-light p-2 h-100 d-flex flex-column align-items-center justify-content-between">
                                            <img src="{{ asset('storage/' . $img->gambar) }}"
                                                alt="Gambar {{ $loop->iteration }}"
                                                class="img-fluid rounded mb-2"
                                                style="max-height: 150px; object-fit: contain;">
                                            <button class="btn btn-primary btn-sm btn-outline-primary"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#imageModal"
                                                    data-img-src="{{ asset('storage/' . $img->gambar) }}">
                                                Lihat Gambar
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    {{-- Kolom Keterangan --}}
                    <div class="col-md-6">
                        <div class="bg-light p-3 rounded shadow-sm border h-100">
                            <label class="form-label text-muted mb-1">Keterangan</label>
                            <div class="text-dark" style="white-space: pre-line;">
                                {{ $trs_pengiriman->description }}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Modal untuk memperbesar gambar -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content bg-transparent border-0">
                <div class="modal-body p-0 text-center">
                    <img src="" alt="Zoomed Gambar" id="modalImage" class="img-fluid rounded shadow">
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
<style>
    @media (max-width: 768px) {
        table.responsive-table thead {
            display: none;
        }

        table.responsive-table,
        table.responsive-table tbody,
        table.responsive-table tr,
        table.responsive-table td {
            display: block;
            width: 100%;
        }

        table.responsive-table tr {
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            padding: 0.5rem;
            border-radius: 10px;
            background-color: #f9f9f9;
        }

        table.responsive-table td {
            text-align: right;
            padding-left: 50%;
            position: relative;
        }

        table.responsive-table td::before {
            content: attr(data-label);
            position: absolute;
            left: 15px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            font-weight: bold;
            text-align: left;
        }
    }
</style>

<script>
    // Fungsi untuk mengacak elemen-elemen di dalam kontainer
    function shuffleElements() {
        var container = document.getElementById('legenda-warna');
        var elements = Array.from(container.children);

        // Mengacak urutan elemen
        for (let i = elements.length - 1; i > 0; i--) {
            let j = Math.floor(Math.random() * (i + 1));
            container.appendChild(elements[j]);
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        const modalImage = document.getElementById('modalImage');
        const buttons = document.querySelectorAll('button[data-bs-target="#imageModal"]');

        buttons.forEach(button => {
            button.addEventListener('click', function () {
                const imgSrc = this.getAttribute('data-img-src');
                modalImage.setAttribute('src', imgSrc);
            });
        });
    });

    // Jalankan fungsi untuk mengacak elemen-elemen setelah halaman dimuat
    window.onload = shuffleElements;
</script>