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

@push('styles')
    <style>
        /* Mobile Responsiveness */
        @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;
            }

            .text-sm {
                font-size: 0.65rem !important;
            }

            /* Hide some columns on mobile */
            .items-table th:nth-child(4),
            .items-table td:nth-child(4) {
                display: none;
            }
        }

        @media (max-width: 576px) {
            .card-body {
                padding: 1rem;
            }

            .card-header {
                padding: 0.75rem 1rem;
            }

            h5,
            h6 {
                font-size: 0.95rem;
            }

            .action-buttons {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
            }

            .action-buttons .btn {
                width: 100%;
            }
        }
    </style>
@endpush

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

    <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('trsout.index') }}'"><i
                                class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                        @if ($authorize->edit == '1' && in_array($document->status, ['PENDING', 'REVERSED'], true))
                            <a href="{{ route('trsout.edit', $document->out_doc_id) }}" class="btn btn-warning mb-0 ms-2">
                                <i class="fas fa-edit me-1"></i><span class="font-weight-bold">Edit</span>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">

        <div class="row">
            <div class="col-lg-8">
                {{-- Document Info --}}
                <div class="card shadow-sm mb-4">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                Informasi Dokumen
                            </h6>
                            @php
                                $typeClass = match ($document->out_type_id) {
                                    'PRODUCTION' => 'bg-info',
                                    'RETURN_VENDOR' => 'bg-warning',
                                    'SCRAP' => 'bg-danger',
                                    default => 'bg-secondary',
                                };
                            @endphp
                            <span class="badge badge-sm {{ $typeClass }}">
                                {{ $document->out_type_name ?? $document->out_type_id }}
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td class="text-muted text-sm text-uppercase w-40">No. Dokumen</td>
                                <td class="font-weight-bold">{{ $document->out_doc_no }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted text-sm text-uppercase">Tanggal</td>
                                <td>{{ \Carbon\Carbon::parse($document->out_date)->format('d F Y') }}</td>
                            </tr>
                            @if ($document->vendor_id)
                                <tr>
                                    <td class="text-muted text-sm text-uppercase">Vendor</td>
                                    <td>{{ $document->vendor_name ?? $document->vendor_id }}</td>
                                </tr>
                            @endif
                            <tr>
                                <td class="text-muted text-sm text-uppercase">PIC Pengirim</td>
                                <td>{{ $document->pic_pengirim_name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted text-sm text-uppercase">PIC Penerima</td>
                                <td>{{ $document->pic_penerima_name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted text-sm text-uppercase">Catatan</td>
                                <td>{{ $document->remarks ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted text-sm text-uppercase">Waktu Dibuat</td>
                                <td>{{ \Carbon\Carbon::parse($document->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">{{ count($items) }}</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">{{ number_format($items->sum('berat'), 2) }}</h3>
                                    <p class="text-white text-sm mb-0">Total Kg</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                {{-- Items List (full width under info + summary) --}}
                <div class="card shadow-sm">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                Daftar Bag Dikeluarkan
                            </h6>
                            <a href="{{ route('trsout.print', $document->out_doc_id) }}" class="btn btn-warning btn-s"
                                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 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>Lokasi Terakhir</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->bag_no ?? '-' }}</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->material_name ?? '-' }}
                                                </p>
                                                <p class="text-sm text-secondary mb-0">{{ $item->material_id ?? '-' }}</p>
                                            </td>
                                            <td>
                                                <p class="text-sm mb-0">{{ $item->layout_name ?? '-' }}</p>
                                                <p class="text-sm text-secondary mb-0">{{ $item->warehouse_name ?? '-' }}
                                                </p>
                                            </td>
                                            <td class="text-center"><span
                                                    class="text-sm font-weight-bold">{{ number_format($item->berat ?? 0, 2) }}</span>
                                            </td>
                                            <td class="text-center">
                                                @php
                                                    $bagStatus = strtoupper($item->status_id ?? '-');

                                                    $statusClass = match ($bagStatus) {
                                                        'AVAILABLE' => 'bg-success',
                                                        'CONSUMED' => 'bg-secondary',
                                                        'PENDING' => 'bg-primary',
                                                        'REVERSED' => 'bg-secondary',
                                                        'CANCELLED' => 'bg-danger',
                                                        'MISSING' => 'bg-danger',
                                                        'ADJUSTED' => 'bg-danger',
                                                        default => 'bg-secondary',
                                                    };
                                                @endphp

                                                <span class="badge badge-sm {{ $statusClass }}">
                                                    {{ $bagStatus }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" 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="4" class="text-end font-weight-bold">Total:</td>
                                            <td class="text-center font-weight-bold">
                                                {{ number_format($items->sum('berat'), 2) }} kg</td>
                                            <td></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
        });
    </script>
@endpush