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

@push('styles')
    <style>
        @media (max-width: 768px) {
            .container-fluid {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            .card-header h6 {
                font-size: 0.9rem;
            }

            .btn {
                padding: 0.5rem 0.75rem;
                font-size: 0.85rem;
            }

            .badge {
                font-size: 0.7rem;
                padding: 0.35em 0.5em;
            }

            .table th,
            .table td {
                padding: 0.5rem 0.35rem;
                font-size: 0.75rem;
            }
        }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Detail Perpindahan'])

    <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 class="btn btn-secondary mb-0" onclick="window.location='{{ route('trspnd.index') }}'">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        @php
            $formatKg = function ($value) {
                $formatted = number_format((float) $value, 2, ',', '.');
                return rtrim(rtrim($formatted, '0'), ',');
            };
        @endphp
        <div class="row">
            <div class="col-lg-8">
                <div class="card shadow-sm mb-4">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Informasi Batch Perpindahan</h6>
                    </div>

                    <div class="card-body">
                        <table class="table table-sm table-borderless mb-0" style="table-layout: fixed; width: 100%;">
                            <tr>
                                <td class="text-muted text-sm text-uppercase" style="width: 115px;">No. Dokumen</td>
                                <td class="text-muted text-sm text-center" style="width: 12px;">:</td>
                                <td class="font-weight-bold">{{ $movement->pnd_doc_no }}</td>
                            </tr>

                            <tr>
                                <td class="text-muted text-sm text-uppercase">Tanggal</td>
                                <td class="text-muted text-sm text-center">:</td>
                                <td>{{ \Carbon\Carbon::parse($movement->pnd_date)->format('d F Y') }}</td>
                            </tr>

                            <tr>
                                <td class="text-muted text-sm text-uppercase">Layout Asal</td>
                                <td class="text-muted text-sm text-center">:</td>
                                <td>
                                    @if (($movement->from_layout_count ?? 0) > 1)
                                        Multi Layout
                                    @else
                                        {{ $movement->from_layout_name ?? '-' }}
                                    @endif
                                </td>
                            </tr>

                            <tr>
                                <td class="text-muted text-sm text-uppercase">Layout Tujuan</td>
                                <td class="text-muted text-sm text-center">:</td>
                                <td>{{ $movement->to_layout_name ?? '-' }}</td>
                            </tr>

                            <tr>
                                <td class="text-muted text-sm text-uppercase align-top">Catatan</td>
                                <td class="text-muted text-sm text-center align-top">:</td>
                                <td>
                                    <div class="text-break" style="white-space: normal; overflow-wrap: anywhere;">
                                        {{ $movement->revision_notes ?? '-' }}
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted text-sm text-uppercase align-top">History</td>
                                <td class="text-muted text-sm text-center align-top">:</td>
                                <td>
                                    <div class="text-break" style="white-space: normal; overflow-wrap: anywhere;">
                                        {{ $movement->remarks ?? '-' }}
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="text-muted text-sm text-uppercase">Waktu Dibuat</td>
                                <td class="text-muted text-sm text-center">:</td>
                                <td>{{ \Carbon\Carbon::parse($movement->time_create)->format('d/m/Y H:i') }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card shadow-sm mb-4">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Ringkasan</h6>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <div class="text-center p-2 bg-primary rounded">
                                    <h3 class="text-white mb-0">{{ $summary['total_bags'] ?? 0 }}</h3>
                                    <p class="text-white text-sm mb-0">Total Bag</p>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="text-center p-2 bg-info rounded">
                                    <h3 class="text-white mb-0">
                                        {{ $formatKg($summary['total_berat'] ?? 0) }}
                                    </h3>
                                    <p class="text-white text-sm mb-0">Total Kg</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Daftar Bag --}}
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header px-4 py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">Daftar Bag Dipindahkan</h6>

                            <div class="d-flex gap-2">
                                @if (($movement->status ?? 'ACTIVE') === 'REVERSED')
                                    <button type="button" class="btn btn-info btn-sm mb-0"
                                        onclick="window.location='{{ route('trspnd.edit', $movement->pnd_doc_id) }}'">
                                        <i class="fas fa-edit me-1"></i>
                                        Edit Revisi
                                    </button>
                                @endif

                                <a href="{{ route('trspnd.print', $movement->pnd_doc_id) }}"
                                    class="btn btn-warning btn-sm mb-0 px-3" target="_blank" data-bs-toggle="tooltip"
                                    data-bs-placement="left" title="Cetak Dokumen">
                                    <i class="fas fa-print me-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th class="ps-3">No</th>
                                        <th>Bag</th>
                                        <th>Material</th>
                                        <th>Dari Layout</th>
                                        <th>Ke Layout</th>
                                        <th class="text-center">Berat (kg)</th>
                                        <th class="text-center">Status</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse($items as $index => $item)
                                        <tr>
                                            <td class="ps-3">
                                                <span class="text-secondary text-sm">{{ $index + 1 }}</span>
                                            </td>

                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">{{ $item->barcode_value ?? '-' }}</h6>
                                                        <p class="text-sm text-secondary mb-0">{{ $item->bag_id }}</p>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <p class="text-sm font-weight-bold mb-0">
                                                    {{ $item->nama_material ?? '-' }}
                                                </p>
                                                <p class="text-sm text-secondary mb-0">{{ $item->sku_code ?? '-' }}</p>
                                            </td>

                                            <td>
                                                <span class="badge badge-sm bg-secondary">
                                                    {{ $item->from_layout_name ?? '-' }}
                                                </span>
                                            </td>

                                            <td>
                                                <span class="badge badge-sm bg-success">
                                                    {{ $item->to_layout_name ?? '-' }}
                                                </span>
                                            </td>

                                            <td class="text-center">
                                                <span class="text-sm font-weight-bold">
                                                    {{ $formatKg($item->berat ?? 0) }}
                                                </span>
                                            </td>

                                            <td class="text-center">
                                                @php
                                                    // Status terakhir dari kondisi bag sekarang.
                                                    // Kalau current_status tidak ada, fallback ke new_status dari log.
                                                    $latestStatus = $item->current_status ?? ($item->new_status ?? '-');

                                                    $statusClass = match ($latestStatus) {
                                                        'PENDING' => 'bg-warning',
                                                        'AVAILABLE' => 'bg-success',
                                                        'CONSUMED' => 'bg-dark',
                                                        'MISSING' => 'bg-danger',
                                                        'ADJUSTED' => 'bg-danger',
                                                        default => 'bg-secondary',
                                                    };
                                                @endphp

                                                <span class="badge badge-sm {{ $statusClass }}">
                                                    {{ $latestStatus }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center py-4">
                                                <div class="text-muted">
                                                    <i class="fas fa-box-open fa-2x mb-2"></i>
                                                    <p class="mb-0">Tidak ada item</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>

                                @if (count($items) > 0)
                                    <tfoot>
                                        <tr>
                                            <td colspan="5" class="text-end font-weight-bold">Total:</td>
                                            <td class="text-center font-weight-bold">
                                                {{ $formatKg($summary['total_berat'] ?? 0) }} kg
                                            </td>
                                            <td colspan="2"></td>
                                        </tr>
                                    </tfoot>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if (session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: '{{ session('success') }}',
                    confirmButtonColor: '#028284'
                });
            @endif

            @if ($errors->any())
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '{{ $errors->first() }}',
                    confirmButtonColor: '#028284'
                });
            @endif
        });

        function submitRevisionData(event, docNo) {
            event.preventDefault();

            Swal.fire({
                title: 'Ajukan Revisi',
                text: `Ajukan revisi dokumen ${docNo}? Semua bag pada dokumen ini akan masuk approval ulang.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Ajukan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
@endpush