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

@push('css')
    <style>
        .status-badge-accepted {
            background: #2dce89;
            color: #fff;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: .75rem;
            font-weight: 700;
        }

        .status-badge-not_accepted {
            background: #f5365c;
            color: #fff;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: .75rem;
            font-weight: 700;
        }

        .status-badge-null {
            background: #adb5bd;
            color: #fff;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: .75rem;
            font-weight: 700;
        }

        .attachment-link {
            font-size: .8rem;
        }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Detail Feedback Customer'])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="nav-wrapper d-flex gap-2 flex-wrap">
                <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                    <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
                </a>
                @if ($authorize->edit == '1')
                    <a href="{{ url($url_menu . '/edit/' . encrypt($header->id_ps)) }}" class="btn btn-warning mb-0">
                        <i class="fas fa-edit me-1"></i><span class="font-weight-bold">Edit</span>
                    </a>
                @endif
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        {{-- Header Info --}}
        <div class="card mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <label class="form-control-label">ID PS</label>
                        <input class="form-control bg-light" value="{{ $header->id_ps }}" disabled>
                    </div>
                    <div class="col-md-6">
                        <label class="form-control-label">Tanggal PS</label>
                        <input class="form-control bg-light"
                            value="{{ $header->ps_date ? \Carbon\Carbon::parse($header->ps_date)->format('d/m/Y') : '-' }}"
                            disabled>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-6">
                        <label class="form-control-label">Customer</label>
                        <input class="form-control bg-light" value="{{ $header->customer ?? '-' }}" disabled>
                    </div>
                    <div class="col-md-6">
                        <label class="form-control-label">Salesman</label>
                        <input class="form-control bg-light" value="{{ $header->salesman ?? '-' }}" disabled>
                    </div>
                </div>
            </div>
        </div>

        {{-- Detail Table (View Only) --}}
        <div class="card">
            <div class="card-header pb-0">
                <h6 class="mb-0 text-uppercase text-sm font-weight-bold">Detail Material Feedback</h6>
            </div>
            <div class="card-body p-0">
                <hr class="horizontal dark mt-0 mx-3">
                <div class="table-responsive px-3 pb-3">
                    <table class="table table-sm align-items-center mb-0">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th class="text-center">No</th>
                                <th>PP / PET</th>
                                <th class="text-center">Gsm</th>
                                <th>Color</th>
                                <th class="text-center">Width</th>
                                <th class="text-center">Length</th>
                                <th class="text-center">Qty</th>
                                <th>Feedback Customer</th>
                                <th style="min-width:140px;">Status</th>
                                <th style="min-width:180px;">Attachment</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($items as $i => $item)
                                <tr>
                                    <td class="text-center text-sm">
                                        {{ $i + 1 }}
                                    </td>
                                    <td class="text-sm font-weight-bold">{{ $item->material_code ?? '-' }}</td>
                                    <td class="text-center text-sm">{{ $item->gsm ?? '-' }}</td>
                                    <td class="text-sm">{{ $item->color ?? '-' }}</td>
                                    <td class="text-center text-sm">{{ $item->width ?? '-' }}</td>
                                    <td class="text-center text-sm">{{ $item->length ?? '-' }}</td>
                                    <td class="text-center text-sm">{{ $item->qty_sales ?? '-' }}
                                        {{ strtoupper($item->sales_unit ?? '') }}
                                    </td>
                                    <td class="text-sm">
                                        {{ $item->feedback_customer ?: '-' }}
                                    </td>

                                    {{-- Status Feedback --}}
                                    <td>
                                        @if ((string) ($item->status_feedback ?? '') === '1')
                                            <span class="status-badge-accepted">Accepted</span>
                                        @elseif((string) ($item->status_feedback ?? '') === '0')
                                            <span class="status-badge-not_accepted">Not Accepted</span>
                                        @else
                                            <span class="status-badge-null">Belum</span>
                                        @endif
                                    </td>

                                    {{-- Attachment --}}
                                    <td>
                                        @if (!empty($item->attachment_feedback))
                                            <a href="{{ Storage::url($item->attachment_feedback) }}" target="_blank"
                                                class="attachment-link text-primary d-block mb-1">
                                                <i class="fas fa-paperclip me-1"></i>Lihat Lampiran
                                            </a>
                                        @else
                                            <span class="text-sm text-secondary">Tidak ada lampiran</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="text-center py-3 text-secondary">Tidak ada material.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            $(document).ready(function () {
                @if (Session::has('message'))
                    @php
                        $msg = addslashes((string) Session::get('message'));
                        $cls = Session::get('class', 'info');
                        $icon = $cls === 'success' ? 'success' : ($cls === 'danger' || $cls === 'error' ? 'error' : 'info');
                    @endphp
                    Swal.fire({
                        icon: '{{ $icon }}',
                        title: '{{ $cls === "success" ? "Berhasil!" : "Info" }}',
                        text: '{{ $msg }}'
                        });
                @endif
            });
            </script>
    @endpush

@endsection