@extends('employee.layouts.app')
@section('title', get_setting('site_name').' | '.__('Asset Requisition'))
@section('content')
    @php use App\Support\Asset\AssetType; @endphp
    <style>
        .emp-asset-wrap .card {
            border-radius: 14px;
            border: 1px solid #edf0f6;
            box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
        }
        .emp-asset-wrap .card-header {
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            font-weight: 700;
            padding: 0.9rem 1.15rem;
        }
        .emp-asset-wrap .card-body.p-2 { padding: 0.5rem !important; }
        .emp-asset-wrap .card-footer {
            background: #fff;
            border-top: 1px solid #edf0f6;
            padding: 0.75rem 1.15rem;
        }
        .emp-asset-stat {
            background: #fff;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 10px 14px;
            text-align: center;
            height: 100%;
        }
        .emp-asset-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .emp-asset-stat .lbl {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #64748b;
        }
        .emp-asset-table { margin-bottom: 0; font-size: 13px; }
        .emp-asset-table thead th {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .65);
            border-top: 0;
            white-space: nowrap;
            padding: 0.75rem 0.85rem;
        }
        .emp-asset-table tbody td {
            vertical-align: middle;
            padding: 0.85rem;
        }
        .emp-asset-table .emp-asset-empty {
            padding: 2rem 1rem !important;
            text-align: center;
            color: #64748b;
        }
        .emp-asset-desc {
            max-width: 200px;
            white-space: normal;
            word-break: break-word;
            font-size: 13px;
            color: #475569;
        }
        .emp-asset-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }
        .emp-asset-badge.pending { background: rgba(14, 165, 233, .12); color: #0369a1; }
        .emp-asset-badge.assigned { background: rgba(34, 197, 94, .12); color: #166534; }
        .emp-asset-badge.rejected { background: rgba(239, 68, 68, .12); color: #991b1b; }
        .emp-asset-badge.damaged { background: rgba(245, 158, 11, .14); color: #b45309; }
        .emp-asset-badge.returned { background: rgba(100, 116, 139, .14); color: #334155; }
        .emp-asset-modal .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15);
        }
        .emp-asset-modal .modal-header,
        .emp-asset-modal .modal-footer { border-color: #edf0f6; }
        .emp-asset-label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .55);
            margin-bottom: 6px;
        }
        .emp-asset-line {
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 0.85rem;
            margin-bottom: 0.65rem;
        }
        .emp-asset-assign-tabs .nav-link {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #64748b;
            border-radius: 999px;
            padding: 0.35rem 0.85rem;
        }
        .emp-asset-assign-tabs .nav-link.active {
            background: rgba(14, 165, 233, .12);
            color: #0369a1;
        }
        .emp-asset-type-badge {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
        }
        .emp-asset-identity {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 12px;
            color: #334155;
        }
        .emp-asset-row-inactive { opacity: .72; }
        @media (max-width: 767.98px) {
            .emp-asset-table thead { display: none; }
            .emp-asset-table tbody tr {
                display: block;
                border-bottom: 1px solid #edf0f6;
                padding: 0.65rem 0;
            }
            .emp-asset-table tbody td {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                border: 0;
                padding: 0.35rem 0.85rem;
            }
            .emp-asset-table tbody td::before {
                content: attr(data-label);
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .04em;
                color: #94a3b8;
                padding-right: 1rem;
                flex-shrink: 0;
            }
        }
        .emp-asset-line-hint {
            font-size: 0.8125rem;
            color: #64748b;
            margin-bottom: 1rem;
        }
        .emp-asset-ack-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }
        .emp-asset-ack-badge.done { background: rgba(34, 197, 94, .12); color: #166534; }
        .emp-asset-ack-badge.pending { background: rgba(245, 158, 11, .14); color: #b45309; }
        .emp-asset-usage-mini { font-size: 12px; line-height: 1.45; }
        .emp-asset-usage-bar {
            height: 6px;
            border-radius: 999px;
            background: #e2e8f0;
            overflow: hidden;
            margin-top: 4px;
            max-width: 120px;
        }
        .emp-asset-usage-bar > span {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, #0ea5e9, #38bdf8);
            border-radius: 999px;
        }
    </style>

    <div class="container-fluid emp-asset-wrap">
        <div class="row mt-3">
            <div class="col-12 col-xl-11 mx-auto">

                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="page-title mb-0">{{ __('Asset requisition') }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Request assets and track assignment status.') }}</p>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="openAssetRequestModal()">
                        <i class="fas fa-plus mr-1"></i> {{ __('New request') }}
                    </button>
                </div>

                @if (session()->has('message'))
                    <div class="alert alert-success">{{ session('message') }}</div>
                @endif
                @if (session()->has('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                <div class="form-row mb-3">
                    <div class="col-6 col-md-3 mb-2">
                        <div class="emp-asset-stat">
                            <div class="num text-primary">{{ (int) ($assetStats['total'] ?? 0) }}</div>
                            <div class="lbl">{{ __('Total') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="emp-asset-stat">
                            <div class="num text-info">{{ (int) ($assetStats['pending'] ?? 0) }}</div>
                            <div class="lbl">{{ __('Pending') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="emp-asset-stat">
                            <div class="num text-success">{{ (int) ($assetStats['assigned'] ?? 0) }}</div>
                            <div class="lbl">{{ __('Assigned') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="emp-asset-stat">
                            <div class="num text-danger">{{ (int) ($assetStats['rejected'] ?? 0) }}</div>
                            <div class="lbl">{{ __('Rejected') }}</div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span><i class="fas fa-boxes mr-1 text-muted"></i> {{ __('My asset requests') }}</span>
                        @if($requisitions->total() > 0)
                            <span class="badge badge-light text-muted font-weight-normal">
                                {{ __('Showing') }} {{ $requisitions->firstItem() }}–{{ $requisitions->lastItem() }} {{ __('of') }} {{ $requisitions->total() }}
                            </span>
                        @endif
                    </div>

                    <div class="card-body p-2">
                        <div class="table-responsive">
                            <table class="table table-hover emp-asset-table">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('Apply date') }}</th>
                                    <th>{{ __('Asset category') }}</th>
                                    <th>{{ __('Asset name') }}</th>
                                    <th>{{ __('Identity') }}</th>
                                    <th class="text-center">{{ __('Qty') }}</th>
                                    <th>{{ __('Description') }}</th>
                                    <th class="text-center">{{ __('Status') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($requisitions as $visit)
                                    @php
                                        $parentCategory = $visit->category?->parentCategory;
                                        $categoryName = $parentCategory?->name ?? $visit->category?->name ?? '—';
                                        $assetName = $parentCategory ? ($visit->category?->name ?? '—') : '—';
                                        $statusLabel = $visit->statusLabel();
                                        $statusClass = match((int)$visit->status) {
                                            \App\Models\AssetRequisition::STATUS_REJECTED => 'rejected',
                                            \App\Models\AssetRequisition::STATUS_FULFILLED => 'assigned',
                                            \App\Models\AssetRequisition::STATUS_APPROVAL_APPROVED => 'pending',
                                            default => 'pending',
                                        };
                                    @endphp
                                    <tr>
                                        <td class="text-muted font-weight-bold">{{ $requisitions->firstItem() + $loop->index }}</td>
                                        <td style="font-variant-numeric: tabular-nums;">{{ optional($visit->created_at)->format('Y-m-d') }}</td>
                                        <td><strong>{{ $categoryName }}</strong></td>
                                        <td>{{ $assetName }}</td>
                                        <td class="small">—</td>
                                        <td class="text-center font-weight-bold">{{ $visit->qty }}</td>
                                        <td class="emp-asset-desc">{{ $visit->description ?: '—' }}</td>
                                        <td class="text-center">
                                            <span class="emp-asset-badge {{ $statusClass }}">{{ $statusLabel }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="emp-asset-empty">{{ __('No asset requests yet.') }}</td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @if($requisitions->hasPages())
                        <div class="card-footer">{{ $requisitions->links() }}</div>
                    @endif
                </div>

                <div class="card mt-4">
                    <div class="card-header">
                        <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
                            <span><i class="fas fa-hand-holding mr-1 text-muted"></i> {{ __('My assigned assets') }}</span>
                            @if($assignments->total() > 0)
                                <span class="badge badge-light text-muted font-weight-normal">
                                    {{ __('Showing') }} {{ $assignments->firstItem() }}–{{ $assignments->lastItem() }} {{ __('of') }} {{ $assignments->total() }}
                                </span>
                            @endif
                        </div>
                        <ul class="nav emp-asset-assign-tabs">
                            <li class="nav-item">
                                <a class="nav-link {{ ($assignTab ?? 'active') === 'active' ? 'active' : '' }}"
                                   href="{{ request()->fullUrlWithQuery(['assign_tab' => 'active', 'assign_page' => 1]) }}">
                                    {{ __('Active') }}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ ($assignTab ?? '') === 'returned' ? 'active' : '' }}"
                                   href="{{ request()->fullUrlWithQuery(['assign_tab' => 'returned', 'assign_page' => 1]) }}">
                                    {{ __('Returned') }}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ ($assignTab ?? '') === 'all' ? 'active' : '' }}"
                                   href="{{ request()->fullUrlWithQuery(['assign_tab' => 'all', 'assign_page' => 1]) }}">
                                    {{ __('All') }}
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body p-2">
                        <div class="table-responsive">
                            <table class="table table-hover emp-asset-table">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('Assigned date') }}</th>
                                    <th>{{ __('Type') }}</th>
                                    <th>{{ __('Asset category') }}</th>
                                    <th>{{ __('Asset name') }}</th>
                                    <th>{{ __('Identity') }}</th>
                                    <th class="text-center">{{ __('Qty') }}</th>
                                    <th class="text-center">{{ __('Acknowledgment') }}</th>
                                    <th>{{ __('Usage') }}</th>
                                    <th class="text-center">{{ __('Status') }}</th>
                                    <th class="text-center">{{ __('Actions') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($assignments as $assignment)
                                    @php
                                        $parentCategory = $assignment->asset_category?->parentCategory;
                                        $categoryName = $parentCategory?->name ?? $assignment->asset_category?->name ?? '—';
                                        $assetName = $assignment->asset_item?->name ?? ($parentCategory ? ($assignment->asset_category?->name ?? '—') : '—');
                                        $identity = $assignment->asset_item?->identity ?? $assignment->asset_item?->code ?? $assignment->issue_barcode ?? '—';
                                        $assetType = $assignment->asset_item?->asset_type ?? $assignment->asset_category?->asset_type ?? AssetType::FIXED;
                                        $qtyLabel = (float) $assignment->qty;
                                        $qtyFormatted = fmod($qtyLabel, 1.0) === 0.0 ? (string) (int) $qtyLabel : number_format($qtyLabel, 2);
                                        $unitLabel = $assignment->asset_item?->qtyUnitLabel() ?? '';
                                        $qtyDisplay = $unitLabel !== '' ? trim($qtyFormatted.' '.$unitLabel) : $qtyFormatted;
                                        $isActive = (int) $assignment->status === 1 && (int) $assignment->return === 0;
                                        $isReturned = (int) $assignment->return === 1;
                                        $isDamaged = (int) $assignment->status === 4;
                                        $isAck = (bool) $assignment->staff_acknowledgement;
                                        $consumed = $assignment->qtyConsumed();
                                        $remaining = $assignment->qtyRemaining();
                                        $usagePct = $qtyLabel > 0 ? min(100, round(($consumed / $qtyLabel) * 100)) : 0;
                                    @endphp
                                    <tr class="{{ $isActive ? '' : 'emp-asset-row-inactive' }}">
                                        <td class="text-muted font-weight-bold" data-label="#">{{ $assignments->firstItem() + $loop->index }}</td>
                                        <td style="font-variant-numeric: tabular-nums;" data-label="{{ __('Assigned date') }}">
                                            {{ optional($assignment->assign_date)->format('Y-m-d') ?? optional($assignment->created_at)->format('Y-m-d') }}
                                        </td>
                                        <td data-label="{{ __('Type') }}">
                                            <span class="emp-asset-type-badge">{{ AssetType::label($assetType) }}</span>
                                        </td>
                                        <td data-label="{{ __('Asset category') }}"><strong>{{ $categoryName }}</strong></td>
                                        <td data-label="{{ __('Asset name') }}">{{ $assetName }}</td>
                                        <td class="emp-asset-identity" data-label="{{ __('Identity') }}">{{ $identity }}</td>
                                        <td class="text-center font-weight-bold" data-label="{{ __('Qty') }}">{{ $qtyDisplay }}</td>
                                        <td class="text-center" data-label="{{ __('Acknowledgment') }}">
                                            @if($isAck)
                                                <span class="emp-asset-ack-badge done">
                                                    <i class="fas fa-check-circle mr-1"></i>{{ __('Received') }}
                                                </span>
                                                @if($assignment->acknowledged_at)
                                                    <div class="small text-muted mt-1">{{ $assignment->acknowledged_at->format('Y-m-d') }}</div>
                                                @endif
                                            @elseif($isActive)
                                                <span class="emp-asset-ack-badge pending">{{ __('Pending') }}</span>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td data-label="{{ __('Usage') }}">
                                            @if($assignment->isConsumable() && $isActive)
                                                <div class="emp-asset-usage-mini">
                                                    <div>{{ __('Used') }}: <strong>{{ number_format($consumed, 2) }}</strong> {{ $unitLabel }}</div>
                                                    <div>{{ __('Left') }}: <strong>{{ number_format($remaining, 2) }}</strong> {{ $unitLabel }}</div>
                                                    <div class="emp-asset-usage-bar"><span style="width: {{ $usagePct }}%"></span></div>
                                                </div>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td class="text-center" data-label="{{ __('Status') }}">
                                            @if($isActive)
                                                <span class="emp-asset-badge assigned">{{ __('Assigned') }}</span>
                                            @elseif($isDamaged)
                                                <span class="emp-asset-badge damaged">{{ __('Damaged') }}</span>
                                            @elseif($isReturned)
                                                <span class="emp-asset-badge returned">{{ __('Returned') }}</span>
                                            @else
                                                <span class="emp-asset-badge pending">{{ __('Inactive') }}</span>
                                            @endif
                                        </td>
                                        <td class="text-center text-nowrap" data-label="{{ __('Actions') }}">
                                            @if($isActive)
                                                @if(! $isAck)
                                                    <button type="button"
                                                            class="btn btn-sm btn-success mb-1 btn-ack-assignment"
                                                            data-id="{{ $assignment->id }}"
                                                            data-name="{{ $assetName }}">
                                                        <i class="fas fa-handshake mr-1"></i>{{ __('Acknowledge') }}
                                                    </button>
                                                @endif
                                                @if($assignment->isConsumable() && $remaining > 0)
                                                    <button type="button"
                                                            class="btn btn-sm btn-outline-primary btn-log-usage"
                                                            data-id="{{ $assignment->id }}"
                                                            data-name="{{ $assetName }}"
                                                            data-remaining="{{ $remaining }}"
                                                            data-unit="{{ $unitLabel }}">
                                                        <i class="fas fa-minus-circle mr-1"></i>{{ __('Log usage') }}
                                                    </button>
                                                @endif
                                                @if($assignment->isConsumable() && $assignment->usageLogs->isNotEmpty())
                                                    <button type="button"
                                                            class="btn btn-link btn-sm p-0 d-block mx-auto mt-1 btn-usage-history"
                                                            data-id="{{ $assignment->id }}">
                                                        {{ __('History') }} ({{ $assignment->usageLogs->count() }})
                                                    </button>
                                                @endif
                                            @else
                                                <span class="text-muted small">—</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @if($assignment->isConsumable() && $assignment->usageLogs->isNotEmpty())
                                        <template id="emp-usage-log-{{ $assignment->id }}">
                                            <div class="table-responsive">
                                                <table class="table table-sm table-bordered mb-0">
                                                    <thead>
                                                    <tr>
                                                        <th>{{ __('Date') }}</th>
                                                        <th>{{ __('Qty used') }}</th>
                                                        <th>{{ __('Note') }}</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($assignment->usageLogs->sortByDesc('created_at') as $log)
                                                        <tr>
                                                            <td>{{ $log->created_at?->format('Y-m-d H:i') }}</td>
                                                            <td>{{ number_format($log->qty_used, 2) }} {{ $unitLabel }}</td>
                                                            <td>{{ $log->note ?: '—' }}</td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </template>
                                    @endif
                                @empty
                                    <tr>
                                        <td colspan="11" class="emp-asset-empty">
                                            @if(($assignTab ?? 'active') === 'returned')
                                                {{ __('No returned assets yet.') }}
                                            @elseif(($assignTab ?? 'active') === 'all')
                                                {{ __('No assigned assets yet.') }}
                                            @else
                                                {{ __('No active assigned assets.') }}
                                            @endif
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @if($assignments->hasPages())
                        <div class="card-footer">{{ $assignments->links() }}</div>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade emp-asset-modal" id="asset_request_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <form action="{{ route('employee.asset.requisition.store') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">{{ __('New asset request') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="emp-asset-line-hint">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ __('Add one or more lines (different asset types). Set quantity per line.') }}
                        </p>

                        <div id="requisition-lines">
                            <div class="requisition-row emp-asset-line">
                                <div class="form-row align-items-end">
                                    <div class="form-group col-md-5 mb-md-0">
                                        <label class="emp-asset-label">{{ __('Asset category') }} <span class="text-danger">*</span></label>
                                        <select class="form-control requisition-parent" name="parent_id[]" required>
                                            <option value="">{{ __('Select asset category') }}</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4 mb-md-0">
                                        <label class="emp-asset-label">{{ __('Asset type') }}</label>
                                        <select class="form-control asset-sub" name="sub_id[]">
                                            <option value="">{{ __('Select asset') }}</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2 mb-md-0">
                                        <label class="emp-asset-label">{{ __('Qty') }}</label>
                                        <input class="form-control" type="number" name="qty[]" min="1" max="100" value="1" required>
                                    </div>
                                    <div class="form-group col-md-1 mb-0 text-md-right">
                                        <label class="emp-asset-label d-none d-md-block">&nbsp;</label>
                                        <button type="button"
                                                class="btn btn-sm btn-outline-danger btn-remove-requisition-line"
                                                disabled
                                                title="{{ __('Remove line') }}">&times;</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button type="button" class="btn btn-sm btn-outline-primary mb-3" id="btn-add-requisition-line">
                            <i class="fas fa-plus mr-1"></i> {{ __('Add another asset type') }}
                        </button>

                        <div class="form-group mb-0">
                            <label class="emp-asset-label" for="asset_description">{{ __('Description') }}</label>
                            <textarea class="form-control"
                                      name="description"
                                      id="asset_description"
                                      rows="3"
                                      placeholder="{{ __('Reason or notes for this request') }}"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane mr-1"></i> {{ __('Submit request') }}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade emp-asset-modal" id="ack_assignment_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form id="ack_assignment_form" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">{{ __('Acknowledge asset receipt') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="emp-asset-line-hint mb-3">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ __('Confirm that you have received the asset below. This helps HR track custody.') }}
                        </p>
                        <p class="mb-3"><strong id="ack_asset_name">—</strong></p>
                        <div class="form-group mb-0">
                            <label class="emp-asset-label" for="ack_note">{{ __('Optional note') }}</label>
                            <textarea class="form-control" name="note" id="ack_note" rows="3"
                                      placeholder="{{ __('Condition, location, or comments') }}"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-check mr-1"></i> {{ __('I received this asset') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade emp-asset-modal" id="usage_assignment_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form id="usage_assignment_form" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">{{ __('Log consumable usage') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="emp-asset-line-hint mb-2">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ __('Record how much you used (e.g. half a ream of paper). Remaining balance updates automatically.') }}
                        </p>
                        <p class="mb-3"><strong id="usage_asset_name">—</strong></p>
                        <div class="form-group">
                            <label class="emp-asset-label" for="qty_used">{{ __('Quantity used') }} <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" class="form-control" name="qty_used" id="qty_used"
                                       min="0.01" step="0.01" required>
                                <div class="input-group-append">
                                    <span class="input-group-text" id="usage_unit_label">—</span>
                                </div>
                            </div>
                            <small class="text-muted" id="usage_remaining_hint"></small>
                        </div>
                        <div class="form-group mb-0">
                            <label class="emp-asset-label" for="usage_note">{{ __('Note') }}</label>
                            <textarea class="form-control" name="note" id="usage_note" rows="2"
                                      placeholder="{{ __('What was it used for?') }}"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save mr-1"></i> {{ __('Save usage') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade emp-asset-modal" id="usage_history_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold">{{ __('Usage history') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="usage_history_body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function openAssetRequestModal() {
            requisitionLineRefreshRemoveState();
            $('#asset_request_modal').modal('show');
        }

        function requisitionLineRefreshRemoveState() {
            var n = $('#requisition-lines .requisition-row').length;
            $('.btn-remove-requisition-line').prop('disabled', n <= 1);
        }

        $(document).on('change', '.requisition-parent', function () {
            var row = $(this).closest('.requisition-row');
            var sub = row.find('.asset-sub');
            var category_id = $(this).val();
            if (category_id !== '') {
                $.ajax({
                    method: 'GET',
                    url: @json(route('get.asset.sub.categories')),
                    data: { category_id: category_id },
                    success: function (res) {
                        if (res) {
                            sub.html(res);
                        }
                    }
                });
            } else {
                sub.html('<option value="">{{ __('Select asset') }}</option>');
            }
        });

        $('#btn-add-requisition-line').on('click', function () {
            var $row = $('#requisition-lines .requisition-row:first').clone();
            $row.find('select').val('');
            $row.find('.asset-sub').html('<option value="">{{ __('Select asset') }}</option>');
            $row.find('input[type=number]').val(1);
            $('#requisition-lines').append($row);
            requisitionLineRefreshRemoveState();
        });

        $(document).on('click', '.btn-remove-requisition-line', function () {
            if ($('#requisition-lines .requisition-row').length <= 1) return;
            $(this).closest('.requisition-row').remove();
            requisitionLineRefreshRemoveState();
        });

        var ackUrlBase = @json(url('employee/asset/assignment'));
        var usageUrlBase = @json(url('employee/asset/assignment'));
        var remainingLabel = @json(__('Remaining'));

        function showEmpAssetModal($modal) {
            if (!$modal.length) return;
            if ($modal.parent()[0] !== document.body) {
                $modal.appendTo('body');
            }
            $modal.modal('show');
        }

        function openAckModal(id, assetName) {
            $('#ack_asset_name').text(assetName || '—');
            $('#ack_note').val('');
            $('#ack_assignment_form').attr('action', ackUrlBase + '/' + id + '/acknowledge');
            showEmpAssetModal($('#ack_assignment_modal'));
        }

        function openUsageModal(id, assetName, remaining, unit) {
            $('#usage_asset_name').text(assetName || '—');
            $('#usage_unit_label').text(unit || '');
            $('#qty_used').attr('max', remaining).val('');
            $('#usage_note').val('');
            $('#usage_remaining_hint').text(remainingLabel + ': ' + remaining + ' ' + (unit || ''));
            $('#usage_assignment_form').attr('action', usageUrlBase + '/' + id + '/usage');
            showEmpAssetModal($('#usage_assignment_modal'));
        }

        function openUsageHistoryModal(id) {
            var tpl = document.getElementById('emp-usage-log-' + id);
            if (!tpl) return;
            $('#usage_history_body').html(tpl.innerHTML);
            showEmpAssetModal($('#usage_history_modal'));
        }

        $(document).on('click', '.btn-ack-assignment', function () {
            openAckModal($(this).data('id'), $(this).data('name'));
        });

        $(document).on('click', '.btn-log-usage', function () {
            var $btn = $(this);
            openUsageModal($btn.data('id'), $btn.data('name'), $btn.data('remaining'), $btn.data('unit'));
        });

        $(document).on('click', '.btn-usage-history', function () {
            openUsageHistoryModal($(this).data('id'));
        });
    </script>
@endsection