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

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

    <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('trsso.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">

        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between">
                            <h6 class="mb-0">
                                Ringkasan Stock Opname - {{ $session->so_session_id }}
                            </h6>
                            <div>
                                @if($session->status !== 'CLOSED')
                                    <a href="{{ route('trsso.adjustment', $session->so_session_id) }}" class="btn btn-sm btn-warning">
                                        Adjustment
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="card-body py-2">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <span class="badge
                                    @if($session->status == 'OPEN') bg-info
                                    @elseif($session->status == 'IN_PROGRESS') bg-warning
                                    @else bg-success
                                    @endif me-2">
                                    {{ $session->status }}
                                </span>
                                <span class="text-sm">
                                    Periode: {{ \Carbon\Carbon::parse($session->periode_start)->format('d/m/Y') }} -
                                    {{ \Carbon\Carbon::parse($session->periode_end)->format('d/m/Y') }}
                                </span>
                            </div>
                            <div class="col-md-6 text-end">
                                <span class="text-sm text-muted">
                                    PIC: {{ trim($session->pic_name) ?: $session->pic_username }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-12">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Stok Sistem</p>
                                    <h5 class="font-weight-bolder">{{ number_format($stats['total_snapshot']) }}</h5>
                                    <p class="mb-0 text-xs text-secondary">Bag di snapshot</p>
                                </div>
                            </div>
                            {{-- <div class="col-4 text-end">
                                <div class="icon icon-shape bg-primary shadow-primary text-center rounded-circle">
                                    <i class="fas fa-database text-lg opacity-10"></i>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-12">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Stok Aktual</p>
                                    <h5 class="font-weight-bolder">{{ number_format($stats['total_scanned'] + $stats['total_found']) }}</h5>
                                    <p class="mb-0 text-xs">
                                        <span class="text-success">{{ $stats['total_scanned'] }} match</span> +
                                        <span class="text-warning">{{ $stats['total_found'] }} found</span>
                                    </p>
                                </div>
                            </div>
                            {{-- <div class="col-4 text-end">
                                <div class="icon icon-shape bg-success shadow-success text-center rounded-circle">
                                    <i class="fas fa-check-double text-lg opacity-10"></i>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-12">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Hilang</p>
                                    <h5 class="font-weight-bolder text-danger">{{ number_format($stats['total_not_scanned']) }}</h5>
                                    <p class="mb-0 text-xs text-secondary">Bag tidak ditemukan</p>
                                </div>
                            </div>
                            {{-- <div class="col-4 text-end">
                                <div class="icon icon-shape bg-danger shadow-danger text-center rounded-circle">
                                    <i class="fas fa-exclamation-triangle text-lg opacity-10"></i>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-12">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Temuan</p>
                                    <h5 class="font-weight-bolder text-warning">{{ number_format($stats['total_found']) }}</h5>
                                    <p class="mb-0 text-xs text-secondary">Bag tidak di sistem</p>
                                </div>
                            </div>
                            {{-- <div class="col-4 text-end">
                                <div class="icon icon-shape bg-warning shadow-warning text-center rounded-circle">
                                    <i class="fas fa-search-plus text-lg opacity-10"></i>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">
                            Ringkasan per Layout
                        </h6>
                    </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>Layout</th>
                                        <th class="text-center">Sistem</th>
                                        <th class="text-center">Aktual</th>
                                        <th class="text-center">Selisih</th>
                                        <th class="text-center">Missing</th>
                                        <th class="text-center">Found</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($summary['per_layout'] as $layout)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-3 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">{{ $layout->nama_layout }}</h6>
                                                        <p class="text-xs text-secondary mb-0">{{ $layout->layout_id }}</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge badge-sm bg-primary">{{ $layout->system_count }}</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge badge-sm bg-success">{{ $layout->actual_count }}</span>
                                            </td>
                                            <td class="text-center">
                                                @if($layout->selisih > 0)
                                                    <span class="badge badge-sm bg-warning">+{{ $layout->selisih }}</span>
                                                @elseif($layout->selisih < 0)
                                                    <span class="badge badge-sm bg-danger">{{ $layout->selisih }}</span>
                                                @else
                                                    <span class="badge badge-sm bg-secondary">0</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                @php $missing = $layout->system_count - ($layout->actual_count - $layout->found_count); @endphp
                                                @if($missing > 0)
                                                    <span class="text-danger font-weight-bold">{{ $missing }}</span>
                                                @else
                                                    <span class="text-muted">0</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                @if($layout->found_count > 0)
                                                    <span class="text-warning font-weight-bold">{{ $layout->found_count }}</span>
                                                @else
                                                    <span class="text-muted">0</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4">
                                                <div class="text-muted">Tidak ada data</div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">
                            Ringkasan per SKU
                        </h6>
                    </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>SKU</th>
                                        <th>Material</th>
                                        <th class="text-center">Sistem</th>
                                        <th class="text-center">Aktual</th>
                                        <th class="text-center">Selisih</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($summary['per_sku'] as $sku)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-3 py-1">
                                                    <h6 class="mb-0 text-sm">{{ $sku->sku_code }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <p class="text-sm mb-0">{{ $sku->nama_material }}</p>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge badge-sm bg-primary">{{ $sku->system_count }}</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge badge-sm bg-success">{{ $sku->actual_count }}</span>
                                            </td>
                                            <td class="text-center">
                                                @if($sku->selisih > 0)
                                                    <span class="badge badge-sm bg-warning">+{{ $sku->selisih }}</span>
                                                @elseif($sku->selisih < 0)
                                                    <span class="badge badge-sm bg-danger">{{ $sku->selisih }}</span>
                                                @else
                                                    <span class="badge badge-sm bg-secondary">0</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-4">
                                                <div class="text-muted">Tidak ada data</div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card shadow-sm border-danger h-100">
                    <div class="card-header pb-0">
                        <h6 class="mb-0 text-danger">
                            Bag Hilang
                            <span class="badge bg-danger ms-2">{{ count($summary['missing_bags']) }}</span>
                        </h6>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table align-items-center mb-0">
                                <thead class="sticky-top thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>Bag ID</th>
                                        <th>Material</th>
                                        <th>Layout</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($summary['missing_bags'] as $bag)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-3 py-1">
                                                    <h6 class="mb-0 text-sm">{{ $bag->bag_id }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <p class="text-sm mb-0">{{ $bag->nama_material }}</p>
                                            </td>
                                            <td>
                                                <p class="text-sm mb-0">{{ $bag->nama_layout }}</p>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center py-4">
                                                <div class="text-success">
                                                    <i class="fas fa-check-circle fa-2x mb-2"></i>
                                                    <p class="mb-0">Tidak ada bag hilang</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 mb-4">
                <div class="card shadow-sm border-warning h-100">
                    <div class="card-header pb-0">
                        <h6 class="mb-0 text-warning">
                            Bag Temuan
                            <span class="badge bg-warning ms-2">{{ count($summary['found_bags']) }}</span>
                        </h6>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table align-items-center mb-0">
                                <thead class="sticky-top thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>Bag ID</th>
                                        <th>Material</th>
                                        <th>Layout</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($summary['found_bags'] as $bag)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-3 py-1">
                                                    <h6 class="mb-0 text-sm">{{ $bag->bag_id }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <p class="text-sm mb-0">{{ $bag->nama_material ?? '-' }}</p>
                                            </td>
                                            <td>
                                                <p class="text-sm mb-0">{{ $bag->nama_layout }}</p>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center py-4">
                                                <div class="text-muted">
                                                    <i class="fas fa-inbox fa-2x mb-2"></i>
                                                    <p class="mb-0">Tidak ada bag temuan</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@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
    });
</script>
@endpush
@endsection