@extends('admin.layouts.layouts')

@section('title', 'View Asset Inventory')

@section('page-css')
    <style>
        .infoStudent {
            margin: 0;
            padding: 0;
            margin-bottom: 0.4rem !important;
        }

        .img-fluid.gallery-img {
            cursor: pointer;
        }

        .nav-pills-custom {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 12px;
        }

        .nav-pills-custom::-webkit-scrollbar {
            height: 6px;
        }

        .nav-pills-custom::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
        }

        .nav-pills-custom li {
            flex: 0 0 auto;
        }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            Asset Inventory
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('asset-inventory.index') }}">Asset Inventory</a></li>
                <li class="breadcrumb-item active" aria-current="page">View</li>
            </ol>
        </nav>
    </div>
    <div class="card shadow-sm rounded border-0">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">Asset Inventory View</h5>
            <a href="{{ route('asset-inventory.index') }}" class="btn btn-primary btn-sm">
                &larr; Back
            </a>
        </div>

        <div class="card-body bg-white">
            <div class="row">
                <div class="col-md-6">
                    <div class="row mb-2">
                        <div class="col-md-6"><b>Asset Category:</b></div>
                        <div class="col-md-6">{{ $showDetails->assetInventory?->assetCategory?->name ?? '-' }}</div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-6"><b>Serial No:</b></div>
                        <div class="col-md-6">{{ $showDetails->serial_no ?? '-' }}</div>
                    </div>

                    @php
                        $statuses = [
                            'Allocated' => ['label' => 'Allocated', 'class' => 'info'],
                            'Free' => ['label' => 'Free', 'class' => 'success'],
                        ];

                        $status = $statuses[$showDetails->status] ?? ['label' => '', 'class' => ''];
                        // $disabled = in_array($showDetails->status, ['Free', 'Rejected', 'Booking Done']) ? 'disabled' : '';
                    @endphp

                    <div class="row mb-2">
                        <div class="col-md-6"><b>Status:</b></div>
                        <div class="col-md-6">
                            {{-- <div class="btn-group">
                                <button type="button" class="btn btn-{{ $status['class'] }}" {{ $disabled }}>
                                    {{ $status['label'] }}
                                </button>
                                <button type="button"
                                    class="btn btn-{{ $status['class'] }} dropdown-toggle dropdown-toggle-split"
                                    id="dropdownMenuSplitButton5" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false" {{ $disabled }}>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton5">
                                    <h5 class="dropdown-header">Change Status</h5>
                                    <a class="dropdown-item set-status" href="#" data-status="Free">Free</a>
                                    <a class="dropdown-item set-status" href="#" data-status="Rejected">Rejected</a>
                                    <a class="dropdown-item set-status" href="#" data-status="Booking Done">Booking Done</a>
                                </div>
                            </div> --}}
                            <span
                                class="badge badge-{{ $status['class'] }} badge-pill px-3 py-2">{{ $status['label'] }}</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="row mb-2">
                        <div class="col-md-6"><b>Asset:</b></div>
                        <div class="col-md-6">{{ $showDetails->assetInventory?->asset?->name ?? '-' }}</div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-6"><b>Code:</b></div>
                        <div class="col-md-6">{{ $showDetails->code ?? '-' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Asset Inventory Histories --}}
    <div class="card shadow-sm rounded border-0 mt-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">Asset Allocation History</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table id="asset-inventory-history-table" class="table w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Employee Name</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Reason</th>
                                    <th>Allocated By</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var assetInventoryId = "{{ $showDetails->id }}";
        var assetInventoryItemHistory = "{{ route('asset-inventory-item.history-list') }}";
    </script>
    <script src="{{ asset('assets/js/admin/asset-inventory.js') }}"></script>
@endsection