@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 mb-3">
        <div class="card-body p-3">
            <div class="row gx-4 align-items-center">
                <div class="col">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history. back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(empty($movement))
        <div class="container-fluid py-4">
            <div class="alert alert-warning">Data movement tidak ditemukan.</div>
        </div>
    @else
    <div class="container-fluid py-4">
        <div class="row">
            <!-- LEFT: FORM -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm mb-2">Form Movement Asset</p>
                        <hr class="horizontal dark mt-0">

                        <form role="form" id="movement-show-form">
                            <div class="row g-3">
                                <div class="col-lg-12">
                                    {{-- Row:  ID + Date + MoveType --}}
                                    <div class="row g-2 align-items-center">
                                        <div class="col-md-4">
                                            <label class="form-label mb-0">ID</label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->id }}" readonly>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label mb-0">Date</label>
                                            <input type="date" class="form-control form-control-sm" value="{{ $movement->date ??  '' }}" readonly>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label mb-0">Move Type</label>
                                                @php
                                                $moveTypeMap = [
                                                    'TF' => 'Transfer',
                                                    'DF' => 'Defect',
                                                ];
                                                $moveTypeLabel = $moveTypeMap[$movement->move_type] ?? $movement->move_type;
                                            @endphp
                                            <input type="text" class="form-control form-control-sm" 
                                                value="{{ $moveTypeLabel }}" readonly>
                                        </div>
                                    </div>

                                    {{-- Row:  Kategori + Code --}}
                                    <div class="row g-2 align-items-end mt-1">
                                        <div class="col-md-4">
                                            <label class="form-label mb-0">Kategori</label>
                                            <input id="movement-category" type="text" class="form-control form-control-sm" value="{{ $movement->kategori ?? '' }}" readonly>
                                        </div>

                                        <div class="col-md-8">
                                            <label class="form-label mb-0">Code</label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->code ?? '' }}" readonly>
                                        </div>
                                    </div>

                                    {{-- FIELD DINAMIS --}}
                                    <div class="row g-2 mt-2">
                                        {{-- USER - untuk CPU & LCD --}}
                                        <div class="col-md-6 d-none" id="fld-from-user">
                                            <label class="form-label mb-0"><span id="label-from-user">User Sebelumnya</span></label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->from_user_name ?? '-' }}" readonly>
                                        </div>

                                        <div class="col-md-6 d-none" id="fld-to-user">
                                            <label class="form-label mb-0">User Saat Ini</label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->to_user_name ?? '-' }}" readonly>
                                        </div>

                                        {{-- LOCATION - untuk PRN, SCN, SWT, OTH --}}
                                        <div class="col-md-6 d-none" id="fld-from-location">
                                            <label class="form-label mb-0"><span id="label-from-location">Lokasi Sebelumnya</span></label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->from_location_name ?? '-' }}" readonly>
                                        </div>

                                        <div class="col-md-6 d-none" id="fld-to-location">
                                            <label class="form-label mb-0">Lokasi Saat Ini</label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->to_location_name ?? '-' }}" readonly>
                                        </div>

                                        {{-- DEPARTEMEN --}}
                                        <div class="col-md-6" id="fld-from-dept">
                                            <label class="form-label mb-0"><span id="label-from-dept">Dept Sebelumnya</span></label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->deptname ?? '-' }}" readonly>
                                        </div>

                                        <div class="col-md-6" id="fld-to-dept">
                                            <label class="form-label mb-0">Departemen Saat Ini</label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->deprnamee ?? '-' }}" readonly>
                                        </div>

                                        {{-- AREA --}}
                                        <div class="col-md-6" id="fld-from-area">
                                            <label class="form-label mb-0"><span id="label-from-area">Area Sebelumnya</span></label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->from_area ??  '-' }}" readonly>
                                        </div>

                                        <div class="col-md-6" id="fld-to-area">
                                            <label class="form-label mb-0">Area Saat Ini</label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $movement->to_area ?? '-' }}" readonly>
                                        </div>
                                    </div>

                                    <p></p>
                                    <hr class="horizontal dark mt-0">

                                    {{-- Catatan --}}
                                    <div class="mt-2">
                                        <label class="form-label mb-0">Catatan</label>
                                        <textarea class="form-control form-control-sm" rows="2" readonly>{{ $movement->remark ?? '-' }}</textarea>
                                    </div>

                                    {{-- Status --}}
                                    <div class="mt-2">
                                        <label class="form-label mb-0">Status</label>
                                        @php
                                            $status = $movement->status ?? null;
                                            if ($status === 'E') {
                                                $statusLabel = 'Entry';
                                                $statusClass = 'bg-info';
                                            } elseif ($status === 'F') {
                                                $statusLabel = 'Finish';
                                                $statusClass = 'bg-success';
                                            } else {
                                                $statusLabel = $status ?? '-';
                                                $statusClass = 'bg-secondary';
                                            }
                                        @endphp
                                        <div class="form-control form-control-sm {{ $statusClass }} text-white fw-bold text-center" style="cursor: default;">
                                            {{ $statusLabel }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- RIGHT: ASSET INFO CARDS -->
            <div class="col-md-6">
                {{-- FROM ASSET --}}
                <div class="card mb-3">
                    <div class="card-body">
                        <p class="text-uppercase text-xs text-muted mb-2">From Asset</p>
                        <hr class="horizontal dark mt-0">

                        <div class="d-md-flex justify-content-between align-items-center mb-3">
                            <!-- USER / LOCATION -->
                            <div>
                                <div class="text-xs text-muted mb-1">User / Location</div>
                                <h4 class="mb-1">{{ $movement->from_user_name ?? $movement->from_location_name ?? '-' }}</h4>
                                <span class="badge bg-gradient-info rounded-pill">{{ $movement->deptname ?? '-' }}</span>
                            </div>

                            <!-- AREA -->
                            <div class="mt-3 mt-md-0 text-md-end">
                                <div class="text-xs text-muted mb-1">Area</div>
                                <h4 class="mb-1">{{ $movement->from_area ?? '-' }}</h4>
                                <span class="badge bg-light text-dark border rounded-pill">
                                    @php
                                        $cat = strtoupper($movement->kategori ?? '');
                                        $iconClass = 'fa-tag';
                                        if ($cat === 'CPU') $iconClass = 'fa-hard-drive';
                                        else if ($cat === 'LCD') $iconClass = 'fa-desktop';
                                        else if ($cat === 'PRN') $iconClass = 'fa-print';
                                        else if ($cat === 'SCN') $iconClass = 'fa-qrcode';
                                        else if ($cat === 'SWT') $iconClass = 'fa-network-wired';
                                    @endphp
                                    <i class="fas {{ $iconClass }} me-1"></i> {{ $movement->kategori ?? '-' }}
                                </span>
                            </div>
                        </div>

                        <hr class="horizontal dark my-3">

                        <div class="row g-3 text-sm">
                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Code</small>
                                <div class="fw-semibold">{{ $movement->code ?? '-' }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Detail Info</small>
                                <div class="fw-semibold">{{ $movement->from_detail ?? '-' }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Tanggal Pembelian</small>
                                <div class="fw-semibold">{{ $movement->date_gr ?? '-' }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Kode SAP</small>
                                <div class="fw-semibold">{{ $movement->kode_sap ??  '-' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- TO ASSET --}}
                <div class="card" id="move-to-card">
                    <div class="card-body">
                        <p class="text-uppercase text-xs text-muted mb-2">Move To: </p>
                        <hr class="horizontal dark mt-0">

                        <div class="d-md-flex justify-content-between align-items-center mb-3">
                            <!-- USER / LOCATION -->
                            <div>
                                <div class="text-xs text-muted mb-1" id="label-move-to">User / Location</div>
                                <h4 class="mb-1" id="value-move-to">{{ $movement->to_user_name ?? $movement->to_location_name ??  '-' }}</h4>
                                <span class="badge bg-gradient-info rounded-pill">{{ $movement->deprnamee ?? '-' }}</span>
                            </div>

                            <!-- AREA -->
                            <div class="mt-3 mt-md-0 text-md-end">
                                <div class="text-xs text-muted mb-1">Area</div>
                                <h4 class="mb-1">{{ $movement->to_area ??  '-' }}</h4>
                                <span class="badge bg-light text-dark border rounded-pill">
                                    <i class="fas {{ $iconClass }} me-1"></i> {{ $movement->kategori ?? '-' }}
                                </span>
                            </div>
                        </div>

                        <hr class="horizontal dark my-3">

                        <div class="row g-3 text-sm">
                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Code</small>
                                <div class="fw-semibold">{{ $movement->new_code ??  '-' }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Detail Info</small>
                                <div class="fw-semibold">{{ $movement->to_detail ?? '-' }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Tanggal Pembelian</small>
                                <div class="fw-semibold">{{ $movement->date_gr ??  '-' }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Kode SAP</small>
                                <div class="fw-semibold">{{ $movement->kode_sap ?? '-' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <script>
        document. addEventListener('DOMContentLoaded', function () {
            const moveType = ("{{ strtoupper($movement->move_type ??  '') }}").trim();
            const cat = ("{{ strtoupper($movement->kategori ?? '') }}").trim();

            // Definisi kategori
            const showUserCats = ['CPU', 'LCD'];
            const showLocCats = ['PRN', 'SCN', 'SWT', 'OTH'];

            // Movement Asset
            const fldFromUser = document.getElementById('fld-from-user');
            const fldToUser = document.getElementById('fld-to-user');
            const fldFromLoc = document. getElementById('fld-from-location');
            const fldToLoc = document.getElementById('fld-to-location');
            const fldFromDept = document. getElementById('fld-from-dept');
            const fldToDept = document.getElementById('fld-to-dept');
            const fldFromArea = document.getElementById('fld-from-area');
            const fldToArea = document.getElementById('fld-to-area');

            // Move To Card
            const labelMoveTo = document.getElementById('label-move-to');
            const valueMoveTo = document.getElementById('value-move-to');
            const moveToCard = document.getElementById('move-to-card');

            const toUserName = "{{ $movement->to_user_name ??  '' }}";
            const toLocationName = "{{ $movement->to_location_name ?? '' }}";

            if (moveType === 'DF') {
                fldToUser?. classList.add('d-none');
                fldToLoc?. classList.add('d-none');
                fldToDept?.classList.add('d-none');
                fldToArea?.classList.add('d-none');
                moveToCard?. classList.add('d-none');

                fldFromUser?.classList.remove('col-md-6');
                fldFromUser?.classList.add('col-md-12');
                fldFromLoc?.classList.remove('col-md-6');
                fldFromLoc?.classList.add('col-md-12');
                fldFromDept?.classList.remove('col-md-6');
                fldFromDept?.classList.add('col-md-12');
                fldFromArea?.classList.remove('col-md-6');
                fldFromArea?.classList.add('col-md-12');

                if (showUserCats.includes(cat)) {
                    fldFromUser?.classList.remove('d-none');
                    fldFromLoc?.classList.add('d-none');
                } else if (showLocCats.includes(cat)) {
                    fldFromLoc?.classList.remove('d-none');
                    fldFromUser?.classList.add('d-none');
                }
            } else {
                fldToDept?.classList.remove('d-none');
                fldToArea?.classList.remove('d-none');
                moveToCard?.classList.remove('d-none');

                if (showUserCats.includes(cat)) {
                    fldFromUser?.classList.remove('d-none');
                    fldToUser?.classList.remove('d-none');
                    fldFromLoc?.classList. add('d-none');
                    fldToLoc?.classList. add('d-none');

                    if (labelMoveTo) labelMoveTo.textContent = 'User';
                    if (valueMoveTo) valueMoveTo.textContent = toUserName || '-';
                } 
                else if (showLocCats.includes(cat)) {
                    fldFromLoc?.classList.remove('d-none');
                    fldToLoc?.classList.remove('d-none');
                    fldFromUser?.classList.add('d-none');
                    fldToUser?.classList.add('d-none');

                    if (labelMoveTo) labelMoveTo.textContent = 'Location';
                    if (valueMoveTo) valueMoveTo.textContent = toLocationName || '-';
                }
            }
            if (moveType === 'DF') {
                document.getElementById('label-from-user').textContent = 'User';
                document.getElementById('label-from-location').textContent = 'Lokasi';
                document.getElementById('label-from-dept').textContent = 'Dept';
                document.getElementById('label-from-area').textContent = 'Area';
            } else {
                document.getElementById('label-from-user').textContent = 'User Sebelumnya';
                document.getElementById('label-from-location').textContent = 'Lokasi Sebelumnya';
                document.getElementById('label-from-dept').textContent = 'Dept Sebelumnya';
                document.getElementById('label-from-area').textContent = 'Area Sebelumnya';
            }
        });
    </script>
@endsection