@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.4rem 0.6rem;
                font-size: 0.8rem;
            }

            .form-control,
            .form-select {
                font-size: 16px !important;
            }

            .badge {
                font-size: 0.65rem;
                padding: 0.3em 0.45em;
            }

            .table th,
            .table td {
                padding: 0.5rem 0.35rem;
                font-size: 0.75rem;
            }
        }

        .bag-row-waiting {
            background-color: #fff8e1 !important;
        }

        .bag-row-removed {
            background-color: #f8d7da !important;
            opacity: 0.65;
        }

        .badge-soft-warning {
            background-color: #fff3cd;
            color: #856404;
        }

        .badge-soft-success {
            background-color: #d4edda;
            color: #155724;
        }

        .badge-soft-danger {
            background-color: #f8d7da;
            color: #842029;
        }

        .revision-action-btn {
            width: 32px;
            height: 32px;
            padding: 0 !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .revision-layout-select {
            min-width: 260px;
        }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Edit Revisi 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.show', $movement->pnd_doc_id) }}'">
                            <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
            $docStatus = $movement->status ?? 'ACTIVE';

            $formatBerat = function ($value) {
                $formatted = number_format((float) $value, 2, ',', '.');
                return rtrim(rtrim($formatted, '0'), ',');
            };
        @endphp

        @if ($docStatus !== 'REVERSED')
            <div class="card shadow-sm">
                <div class="card-body">
                    <p class="text-sm text-warning mb-0">
                        Dokumen ini belum berstatus <strong>REVERSED</strong>, sehingga belum bisa diedit untuk revisi.
                    </p>
                </div>
            </div>
        @else
            <form action="{{ route('trspnd.submit-revision', $movement->pnd_doc_id) }}" method="POST" id="revisionForm">
                @csrf

                <input type="hidden" name="submit_action" id="submit_action">

                <div class="row mb-4">
                    <div class="col-lg-8">
                        <div class="card shadow-sm">
                            <div class="card-header pb-0">
                                <h6 class="mb-0">Informasi Dokumen Revisi</h6>
                            </div>

                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">No. Dokumen</label>
                                        <input type="text" class="form-control" value="{{ $movement->pnd_doc_no }}"
                                            readonly>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Tanggal Perpindahan</label>
                                        <input type="text" class="form-control"
                                            value="{{ \Carbon\Carbon::parse($movement->pnd_date)->format('d/m/Y') }}"
                                            readonly>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Layout Asal</label>
                                        <input type="text" class="form-control"
                                            value="{{ ($movement->from_layout_count ?? 0) > 1 ? 'Multi Layout' : $movement->from_layout_name ?? '-' }}"
                                            readonly>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Layout Tujuan Lama</label>
                                        <input type="text" class="form-control"
                                            value="{{ $movement->to_layout_name ?? '-' }}" readonly>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Catatan Revisi</label>
                                    <textarea name="notes" class="form-control" rows="2" placeholder="Contoh: revisi penempatan layout">{{ old('notes', $movement->revision_notes ?? '') }}</textarea>
                                </div>

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

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

                            <div class="card-body">
                                <table class="table table-sm">
                                    <tr>
                                        <td class="text-muted">Total Bag</td>
                                        <td class="font-weight-bold text-end">{{ count($items) }}</td>
                                    </tr>

                                    <tr>
                                        <td class="text-muted">Total Berat</td>
                                        <td class="font-weight-bold text-end">
                                            {{ $formatBerat($items->sum('berat')) }} kg
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="text-muted">Status Dokumen</td>
                                        <td class="text-end">
                                            <span class="badge bg-secondary">
                                                {{ $movement->status ?? '-' }}
                                            </span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="text-muted">Dibuat Oleh</td>
                                        <td class="text-end">{{ $movement->user_create ?? '-' }}</td>
                                    </tr>

                                    <tr>
                                        <td class="text-muted">Reverse Oleh</td>
                                        <td class="text-end">{{ $movement->reversed_by ?? '-' }}</td>
                                    </tr>

                                    <tr>
                                        <td class="text-muted">Waktu Reverse</td>
                                        <td class="text-end">
                                            {{ $movement->reversed_at ? \Carbon\Carbon::parse($movement->reversed_at)->format('d/m/Y H:i') : '-' }}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card shadow-sm">
                            <div class="card-header pb-0">
                                <h6 class="mb-0">Daftar Bag Revisi</h6>
                            </div>

                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table align-items-center mb-0" id="tableRevisionBags">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th class="ps-3">No</th>
                                                <th>Bag ID / Barcode</th>
                                                <th>Material Info</th>
                                                <th class="text-center">Berat Per Bag (kg)</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Layout Saat Ini</th>
                                                <th>Layout Tujuan Revisi</th>
                                                <th class="text-center">Action</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            @forelse ($items as $index => $item)
                                                @php
                                                    $statusText = match ($item->current_status ?? null) {
                                                        'PENDING' => 'Siap Dipost Revisi',
                                                        'AVAILABLE' => 'Available',
                                                        'CONSUMED' => 'Consumed',
                                                        'MISSING' => 'Missing',
                                                        'ADJUSTED' => 'Adjusted',
                                                        default => $item->current_status ?? '-',
                                                    };

                                                    $statusClass = match ($item->current_status ?? null) {
                                                        'PENDING' => 'badge-soft-warning',
                                                        'AVAILABLE' => 'badge-soft-success',
                                                        'CONSUMED', 'MISSING', 'ADJUSTED' => 'badge-soft-danger',
                                                        default => 'bg-light text-secondary',
                                                    };

                                                    $rowClass =
                                                        ($item->current_status ?? null) === 'PENDING'
                                                            ? 'bag-row-waiting'
                                                            : '';

                                                    $displayBagCode = $item->barcode_value ?: $item->bag_id;
                                                    $layoutInfo = $item->current_layout_name ?? '-';
                                                @endphp

                                                <tr class="border-bottom {{ $rowClass }}">
                                                    <td class="ps-3 text-sm">
                                                        {{ $index + 1 }}
                                                    </td>

                                                    <td title="{{ $item->bag_id }}">
                                                        <div class="d-flex flex-column">
                                                            <span class="text-sm font-weight-bold text-dark">
                                                                {{ $displayBagCode }}
                                                            </span>

                                                            <span class="text-xs text-muted">
                                                                Bag ID: {{ $item->bag_id }}
                                                            </span>
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <div class="d-flex flex-column">
                                                            <span class="text-sm font-weight-bold">
                                                                {{ $item->sku_code ?? '-' }}
                                                            </span>

                                                            <span class="text-sm text-muted">
                                                                {{ $item->nama_material ?? '-' }}
                                                            </span>
                                                        </div>
                                                    </td>

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

                                                    <td class="text-center">
                                                        <div class="d-flex flex-column align-items-center gap-1">
                                                            <span class="badge {{ $statusClass }}">
                                                                {{ $statusText }}
                                                            </span>
                                                        </div>
                                                    </td>

                                                    <td class="text-center">
                                                        <span class="text-sm font-weight-bold text-uppercase">
                                                            {{ $layoutInfo }}
                                                        </span>
                                                    </td>

                                                    <td>
                                                        <input type="hidden"
                                                            name="items[{{ $item->pnd_item_id }}][pnd_item_id]"
                                                            value="{{ $item->pnd_item_id }}" class="revision-input">

                                                        <input type="hidden"
                                                            name="items[{{ $item->pnd_item_id }}][bag_id]"
                                                            value="{{ $item->bag_id }}" class="revision-input">

                                                        <select name="items[{{ $item->pnd_item_id }}][to_layout_id]"
                                                            class="form-select form-select-sm revision-layout-select select2-layout revision-input"
                                                            required>
                                                            <option value="">Pilih Layout</option>

                                                            @foreach ($layouts as $layout)
                                                                @php
                                                                    $occupiedBags = (int) ($layout->occupied_bags ?? 0);
                                                                    $pendingLayoutApprovals =
                                                                        (int) ($layout->pending_layout_approvals ?? 0);
                                                                    $hasBaris =
                                                                        trim((string) ($layout->baris ?? '')) !== '';

                                                                    $isOldToLayout =
                                                                        $layout->id_layout === $item->to_layout_id;

                                                                    $isLayoutUsed =
                                                                        !$isOldToLayout &&
                                                                        $hasBaris &&
                                                                        ($occupiedBags > 0 ||
                                                                            $pendingLayoutApprovals > 0);
                                                                @endphp

                                                                <option value="{{ $layout->id_layout }}"
                                                                    {{ $item->to_layout_id === $layout->id_layout ? 'selected' : '' }}
                                                                    @disabled($isLayoutUsed)>
                                                                    {{ $layout->nama_layout }}{{ $hasBaris ? ' - BARIS ' . $layout->baris : '' }}

                                                                    @if ($layout->is_gray_area)
                                                                        (Gray Area)
                                                                    @elseif ($hasBaris && $pendingLayoutApprovals > 0)
                                                                        (Menunggu Approval)
                                                                    @elseif ($hasBaris && $occupiedBags > 0)
                                                                        (Terisi)
                                                                    @elseif (!$hasBaris && ($occupiedBags > 0 || $pendingLayoutApprovals > 0))
                                                                        (Isi: {{ $occupiedBags }}
                                                                        Bag{{ $pendingLayoutApprovals > 0 ? ', Pending: ' . $pendingLayoutApprovals : '' }})
                                                                    @endif
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>

                                                    <td class="text-center">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger revision-action-btn mb-0"
                                                            title="Hapus dari revisi" onclick="removeRevisionRow(this)">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </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 bag</p>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>

                                        @if (count($items) > 0)
                                            <tfoot>
                                                <tr>
                                                    <td colspan="3" class="text-end font-weight-bold">Total Berat:</td>
                                                    <td class="text-center font-weight-bold">
                                                        {{ $formatBerat($items->sum('berat')) }} kg
                                                    </td>
                                                    <td colspan="4"></td>
                                                </tr>
                                            </tfoot>
                                        @endif
                                    </table>
                                </div>

                                <div class="col-lg mt-2">
                                    <div class="nav-wrapper" id="noted">
                                        <code>
                                            Note :
                                            <i aria-hidden="true" style="color: #ffc107;" class="fas fa-circle"></i>
                                            Siap dipost revisi

                                            &nbsp;&nbsp;

                                            <i aria-hidden="true" style="color: #dc3545;" class="fas fa-circle"></i>
                                            Dihapus dari revisi
                                        </code>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- Action Card --}}
                <div class="card shadow-lg mt-4">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-end align-items-center gap-2">
                            <button type="button" class="btn btn-primary mb-0" onclick="submitRevisionForm('save')">
                                <i class="fas fa-save me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>

                            <button type="button" class="btn btn-success mb-0" onclick="submitRevisionForm('post')">
                                <i class="fas fa-check-circle me-1"></i>
                                <span class="font-weight-bold">Post</span>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        @endif
    </div>
@endsection

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

            @if (session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: '{{ session('success') }}',
                    confirmButtonColor: '#028284'
                });
            @endif

            if ($.fn.select2) {
                $('.select2-layout').select2({
                    width: '100%',
                    allowClear: false,
                    placeholder: 'Pilih Layout Tujuan'
                });
            }
        });

        function removeRevisionRow(button) {
            const row = $(button).closest('tr');

            Swal.fire({
                title: 'Hapus dari Revisi',
                text: 'Bag ini tidak akan ikut disimpan/post revisi. Bag tetap berada di layout asal dengan status PENDING.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#f5365c'
            }).then((result) => {
                if (result.isConfirmed) {
                    row.find('.revision-input').prop('disabled', true);
                    row.addClass('bag-row-removed');

                    row.find('.badge')
                        .removeClass('badge-soft-warning badge-soft-success bg-light text-secondary')
                        .addClass('badge-soft-danger')
                        .text('Tidak Ikut Revisi');

                    row.fadeOut(250);
                }
            });
        }

        function submitRevisionForm(action) {
            $('#submit_action').val(action);

            let activeRows = 0;
            let invalidLayout = false;

            $('#tableRevisionBags tbody tr:visible').each(function() {
                const layoutSelect = $(this).find('.revision-layout-select');

                if (layoutSelect.length) {
                    activeRows++;

                    if (!layoutSelect.val()) {
                        invalidLayout = true;
                    }
                }
            });

            if (activeRows === 0) {
                Swal.fire('Peringatan', 'Minimal harus ada 1 bag yang dipilih.', 'warning');
                return;
            }

            if (invalidLayout) {
                Swal.fire('Peringatan', 'Pastikan semua bag yang dipilih sudah memiliki layout tujuan revisi.', 'warning');
                return;
            }

            const title = action === 'post' ? 'Post Revisi' : 'Simpan Draft Revisi';

            const html = action === 'post' ?
                `Post revisi untuk <strong>${activeRows}</strong> bag?<br><br>Bag akan berpindah ke layout baru dan dokumen berstatus <strong>ACTIVE</strong>.` :
                `Simpan draft revisi untuk <strong>${activeRows}</strong> bag?`;

            Swal.fire({
                title: title,
                html: html,
                icon: action === 'post' ? 'warning' : 'question',
                showCancelButton: true,
                confirmButtonText: action === 'post' ? 'Ya, Post' : 'Ya, Simpan',
                cancelButtonText: 'Batal',
                confirmButtonColor: action === 'post' ? '#2dce89' : '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#revisionForm').submit();
                }
            });
        }
    </script>
@endpush