@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Asset assignments'))
@include('admin.asset.partials.page_styles')
@php use App\Support\Asset\AssetType; @endphp
@push('css')
<style>
    .asset-assign-page .asset-stat {
        border: 1px solid #edf0f6;
        border-radius: 10px;
        background: #fff;
        padding: 12px 16px;
        text-align: center;
        height: 100%;
        transition: box-shadow .15s ease;
        color: inherit;
        text-decoration: none;
        display: block;
    }
    .asset-assign-page .asset-stat:hover {
        box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
        text-decoration: none;
        color: inherit;
    }
    .asset-assign-page .asset-stat .num { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
    .asset-assign-page .asset-stat .lbl {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #64748b;
    }
    .asset-assign-page .asset-stat.is-active {
        border-color: #605daf;
        box-shadow: 0 0 0 2px rgba(96, 93, 175, .15);
    }
    .asset-assign-page .assign-table thead th {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
    }
    .asset-assign-page .assign-serial {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 12px;
        color: #334155;
    }
    .asset-assign-page .assign-type-badge {
        display: inline-flex;
        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;
    }
    .asset-assign-page .ack-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }
    .asset-assign-page .ack-badge.done { background: rgba(34, 197, 94, .12); color: #166534; }
    .asset-assign-page .ack-badge.pending { background: rgba(245, 158, 11, .14); color: #b45309; }
    .asset-assign-page .usage-mini {
        font-size: 12px;
        line-height: 1.4;
    }
    .asset-assign-page .usage-bar {
        height: 6px;
        border-radius: 999px;
        background: #e2e8f0;
        overflow: hidden;
        margin-top: 4px;
    }
    .asset-assign-page .usage-bar > span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #605daf, #818cf8);
        border-radius: 999px;
    }
    .asset-assign-page .asset-filter-btn-label { visibility: hidden; display: block; }
    .asset-assign-page .asset-filter-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        min-height: 38px;
    }
    .asset-assign-page .asset-filter-actions .btn {
        display: inline-flex;
        align-items: center;
        height: 38px;
        white-space: nowrap;
    }
    .asset-assign-page .assign-action-btn { min-width: 34px; }
    .asset-assign-page .status-used-up {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        background: rgba(100, 116, 139, .14);
        color: #334155;
        white-space: nowrap;
    }
    .asset-assign-page .return-modal-summary {
        background: #f8fafc;
        border: 1px solid #edf0f6;
        border-radius: 10px;
        padding: 0.85rem 1rem;
        margin-bottom: 1rem;
    }
    .asset-assign-page .return-modal-summary .title {
        font-weight: 700;
        font-size: 15px;
        margin-bottom: 0.25rem;
    }
    .asset-assign-page .return-mode-toggle {
        display: flex;
        gap: 8px;
        margin-bottom: 1rem;
    }
    .asset-assign-page .return-mode-toggle label {
        flex: 1;
        margin: 0;
        cursor: pointer;
    }
    .asset-assign-page .return-mode-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .asset-assign-page .return-mode-card {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0.75rem;
        border: 1px solid #dbe3ef;
        border-radius: 10px;
        background: #fff;
        font-weight: 700;
        font-size: 13px;
        color: #475569;
        transition: all .15s ease;
    }
    .asset-assign-page .return-mode-toggle input:checked + .return-mode-card {
        border-color: #605daf;
        background: rgba(96, 93, 175, .08);
        color: #4338ca;
        box-shadow: 0 0 0 2px rgba(96, 93, 175, .12);
    }
    .asset-assign-page .return-mode-card.is-damage input:checked + &,
    .asset-assign-page .return-mode-toggle input[value="2"]:checked + .return-mode-card {
        border-color: #f59e0b;
        background: rgba(245, 158, 11, .1);
        color: #b45309;
        box-shadow: 0 0 0 2px rgba(245, 158, 11, .12);
    }
    .asset-assign-page .return-hint {
        font-size: 12px;
        color: #64748b;
        background: #fffbeb;
        border: 1px solid #fde68a;
        border-radius: 8px;
        padding: 0.65rem 0.85rem;
        margin-bottom: 1rem;
    }
    .asset-assign-page .modal-content { border: none; border-radius: 12px; box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, .15); }
    .asset-assign-page .modal-header,
    .asset-assign-page .modal-footer { border-color: #edf0f6; }
</style>
@endpush
@section('content')
<div class="row asset-admin-page asset-assign-page">
    <div class="col-xl-11 mx-auto mt-3 mb-4">
        <div class="d-flex flex-wrap justify-content-between align-items-start mb-3">
            <div class="mb-2 mb-md-0">
                <h4 class="mb-1">{{ __('Active asset assignments') }}</h4>
                <p class="text-muted small mb-0">{{ __('Track who holds each asset, employee acknowledgment, and consumable usage.') }}</p>
            </div>
            <div class="d-flex flex-wrap" style="gap: 8px;">
                <a href="{{ route('asset') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="mdi mdi-package-variant mr-1"></i> {{ __('Asset registry') }}
                </a>
                <a href="{{ route('asset.requisition.list') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="mdi mdi-clipboard-list-outline mr-1"></i> {{ __('Requisitions') }}
                </a>
            </div>
        </div>

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

        <div class="row mb-3">
            @php
                $ackFilter = request('ack');
                $statCards = [
                    'all' => [__('All active'), $stats['total'] ?? 0, null],
                    'acknowledged' => [__('Acknowledged'), $stats['acknowledged'] ?? 0, 'acknowledged'],
                    'pending' => [__('Pending ack.'), $stats['pending_ack'] ?? 0, 'pending'],
                ];
            @endphp
            @foreach($statCards as $key => [$label, $count, $ackValue])
                @php
                    $isActive = ($key === 'all' && ! request()->filled('ack'))
                        || ($ackValue !== null && $ackFilter === $ackValue);
                    $statUrl = $key === 'all'
                        ? route('asset.assign.list', request()->except(['ack', 'page']))
                        : route('asset.assign.list', array_merge(request()->except('page'), ['ack' => $ackValue]));
                @endphp
                <div class="col-4 mb-2 mb-md-0">
                    <a href="{{ $statUrl }}" class="asset-stat {{ $isActive ? 'is-active' : '' }}">
                        <div class="num text-dark">{{ $count }}</div>
                        <div class="lbl">{{ $label }}</div>
                    </a>
                </div>
            @endforeach
        </div>

        <div class="card asset-card">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                <h5 class="mb-0">{{ __('Assignment list') }}</h5>
                @if($assign_assets->total() > 0)
                    <span class="text-muted small">
                        {{ __('Showing') }} {{ $assign_assets->firstItem() }}–{{ $assign_assets->lastItem() }} {{ __('of') }} {{ $assign_assets->total() }}
                    </span>
                @endif
            </div>
            <div class="card-body">
                <form action="{{ route('asset.assign.list') }}" method="GET" class="mb-3">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-5 mb-2 mb-md-0">
                            <label class="small font-weight-bold text-uppercase text-muted">{{ __('Employee') }}</label>
                            <select name="staff_id" class="form-control select2">
                                <option value="all">{{ __('All employees') }}</option>
                                @foreach($staffs as $staff)
                                    @if(($staff->user?->is_active ?? 0) == 1)
                                        <option value="{{ $staff->id }}" @selected(request('staff_id') == $staff->id)>
                                            {{ $staff->user?->name ?? __('Unknown') }}
                                            ({{ $staff->user?->id ?? 'N/A' }})
                                            — {{ $staff->warehouse?->name ?? '-' }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-4 mb-2 mb-md-0">
                            <label class="small font-weight-bold text-uppercase text-muted">{{ __('Acknowledgment') }}</label>
                            <select name="ack" class="form-control">
                                <option value="">{{ __('All') }}</option>
                                <option value="pending" @selected(request('ack') === 'pending')>{{ __('Pending') }}</option>
                                <option value="acknowledged" @selected(request('ack') === 'acknowledged')>{{ __('Acknowledged') }}</option>
                            </select>
                        </div>
                        <div class="form-group col-md-3 mb-0">
                            <label class="asset-filter-btn-label small font-weight-bold text-uppercase text-muted">&nbsp;</label>
                            <div class="asset-filter-actions">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fas fa-filter mr-1"></i> {{ __('Filter') }}
                                </button>
                                <a href="{{ route('asset.assign.list') }}" class="btn btn-light btn-sm">{{ __('Reset') }}</a>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-hover assign-table mb-0">
                        <thead class="thead-light">
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Employee') }}</th>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Category') }}</th>
                            <th>{{ __('Asset') }}</th>
                            <th>{{ __('Serial / code') }}</th>
                            <th class="text-center">{{ __('Qty') }}</th>
                            <th class="text-center">{{ __('Acknowledgment') }}</th>
                            <th>{{ __('Usage') }}</th>
                            <th class="text-center">{{ __('Action') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($assign_assets as $item)
                            @php
                                $parentCategory = $item->asset_category?->parentCategory;
                                $categoryName = $parentCategory?->name ?? $item->asset_category?->name ?? '—';
                                $assetName = $item->asset_item?->name ?? ($parentCategory ? ($item->asset_category?->name ?? '—') : '—');
                                $identity = $item->asset_item?->identity ?? $item->asset_item?->code ?? $item->issue_barcode ?? '—';
                                $assetType = $item->resolvedAssetType();
                                $qty = (float) $item->qty;
                                $unit = $item->asset_item?->qtyUnitLabel() ?? '';
                                $qtyFmt = fmod($qty, 1.0) === 0.0 ? (string) (int) $qty : number_format($qty, 2);
                                $qtyDisplay = $unit !== '' ? trim($qtyFmt.' '.$unit) : $qtyFmt;
                                $consumed = $item->qtyConsumed();
                                $remaining = $item->qtyRemaining();
                                $usagePct = $qty > 0 ? min(100, round(($consumed / $qty) * 100)) : 0;
                                $isAck = (bool) $item->staff_acknowledgement;
                                $canReturn = $item->canReturn();
                                $fullyConsumed = $item->isFullyConsumed();
                            @endphp
                            <tr>
                                <td style="font-variant-numeric: tabular-nums;">
                                    {{ optional($item->assign_date)->format('Y-m-d') ?? optional($item->created_at)->format('Y-m-d') }}
                                </td>
                                <td>
                                    <strong>{{ $item->staff?->user?->name ?? '—' }}</strong>
                                    @if($item->staff?->warehouse?->name)
                                        <div class="small text-muted">{{ $item->staff->warehouse->name }}</div>
                                    @endif
                                </td>
                                <td><span class="assign-type-badge">{{ AssetType::label($assetType) }}</span></td>
                                <td>{{ $categoryName }}</td>
                                <td>{{ $assetName }}</td>
                                <td class="assign-serial">{{ $identity }}</td>
                                <td class="text-center font-weight-bold">{{ $qtyDisplay }}</td>
                                <td class="text-center">
                                    @if($isAck)
                                        <span class="ack-badge done" title="{{ optional($item->acknowledged_at)->format('Y-m-d H:i') }}">
                                            <i class="fas fa-check-circle mr-1"></i>{{ __('Acknowledged') }}
                                        </span>
                                        @if($item->acknowledged_at)
                                            <div class="small text-muted mt-1">{{ $item->acknowledged_at->format('Y-m-d') }}</div>
                                        @endif
                                    @else
                                        <span class="ack-badge pending">
                                            <i class="fas fa-clock mr-1"></i>{{ __('Pending') }}
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if($item->isConsumable())
                                        <div class="usage-mini">
                                            <div><strong>{{ __('Used') }}:</strong> {{ number_format($consumed, 2) }} {{ $unit }}</div>
                                            <div><strong>{{ __('Remaining') }}:</strong> {{ number_format($remaining, 2) }} {{ $unit }}</div>
                                            <div class="usage-bar"><span style="width: {{ $usagePct }}%"></span></div>
                                        </div>
                                        @if($item->usageLogs->isNotEmpty())
                                            <button type="button" class="btn btn-link btn-sm p-0 mt-1"
                                                    onclick="showUsageHistory({{ $item->id }})">
                                                {{ __('View log') }} ({{ $item->usageLogs->count() }})
                                            </button>
                                        @endif
                                    @else
                                        <span class="text-muted small">—</span>
                                    @endif
                                </td>
                                <td class="text-center text-nowrap">
                                    @if($fullyConsumed)
                                        <span class="status-used-up d-inline-flex mb-1">
                                            <i class="fas fa-check-circle mr-1"></i>{{ __('Fully used') }}
                                        </span>
                                        <button type="button"
                                                class="btn btn-outline-secondary btn-sm assign-action-btn btn-close-assignment d-block mx-auto"
                                                data-id="{{ $item->id }}"
                                                data-employee="{{ $item->staff?->user?->name ?? '—' }}"
                                                data-asset="{{ $assetName }}"
                                                data-qty="{{ $qtyDisplay }}"
                                                title="{{ __('Close assignment') }}">
                                            <i class="fas fa-check-double mr-1"></i>{{ __('Close') }}
                                        </button>
                                    @elseif($canReturn)
                                        <button type="button"
                                                class="btn btn-primary btn-sm assign-action-btn btn-open-return"
                                                data-id="{{ $item->id }}"
                                                data-employee="{{ $item->staff?->user?->name ?? '—' }}"
                                                data-asset="{{ $assetName }}"
                                                data-type="{{ AssetType::label($assetType) }}"
                                                data-consumable="{{ $item->isConsumable() ? '1' : '0' }}"
                                                data-remaining="{{ number_format($remaining, 2) }}"
                                                data-unit="{{ $unit }}"
                                                data-identity="{{ $identity }}"
                                                title="{{ __('Return or damage') }}">
                                            <i class="fas fa-undo"></i>
                                        </button>
                                    @else
                                        <span class="text-muted small">—</span>
                                    @endif
                                </td>
                            </tr>
                            @if($item->isConsumable() && $item->usageLogs->isNotEmpty())
                                <template id="usage-log-{{ $item->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($item->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) }} {{ $unit }}</td>
                                                    <td>{{ $log->note ?: '—' }}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </template>
                            @endif
                        @empty
                            <tr>
                                <td colspan="10" class="text-center text-muted py-4">{{ __('No active assignments found.') }}</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                @if($assign_assets->hasPages())
                    <div class="mt-3">{{ $assign_assets->links() }}</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection
@section('modal')
    <div class="modal fade asset-assign-page" id="asset_assign_history" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('asset.assign.return.store') }}" method="POST" id="return_assignment_form">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">{{ __('Asset return or damage') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="return_assignment_id">

                        <div class="return-modal-summary" id="return_modal_summary"></div>

                        <div id="return_consumable_hint" class="return-hint d-none">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ __('Consumable item — only unused quantity can be returned to stock. Barcode scan is not required.') }}
                        </div>

                        <div class="return-mode-toggle">
                            <label>
                                <input type="radio" name="customRadio" value="1" checked>
                                <span class="return-mode-card">
                                    <i class="fas fa-undo"></i> {{ __('Return') }}
                                </span>
                            </label>
                            <label>
                                <input type="radio" name="customRadio" value="2">
                                <span class="return-mode-card">
                                    <i class="fas fa-exclamation-triangle"></i> {{ __('Damage') }}
                                </span>
                            </label>
                        </div>

                        <div id="return_barcode_wrap" class="mb-3">
                            @include('admin.asset.partials.barcode_scanner', [
                                'inputName' => 'return_barcode',
                                'label' => __('Scan asset barcode to verify return'),
                                'targetCheckboxClass' => 'return-barcode-none',
                            ])
                        </div>

                        <div class="form-group mb-0">
                            <label class="small font-weight-bold text-uppercase text-muted">{{ __('Note') }} <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="note" rows="3" placeholder="{{ __('Reason, condition, or comments') }}" required></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> {{ __('Confirm') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade asset-assign-page" id="close_assignment_modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('asset.assign.close.store') }}" method="POST" id="close_assignment_form">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">{{ __('Close consumable assignment') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="close_assignment_id">

                        <div class="return-modal-summary" id="close_modal_summary"></div>

                        <div class="return-hint" style="background:#f0fdf4;border-color:#bbf7d0;">
                            <i class="fas fa-check-circle mr-1 text-success"></i>
                            {{ __('All assigned quantity has been used. No stock remains to return — this will mark the assignment as closed.') }}
                        </div>

                        <div class="form-group mb-0">
                            <label class="small font-weight-bold text-uppercase text-muted">{{ __('Note') }}</label>
                            <textarea class="form-control" name="note" rows="2"
                                      placeholder="{{ __('Optional closing note') }}"></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-double mr-1"></i> {{ __('Close assignment') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade asset-assign-page" id="usage_history_modal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h6">{{ __('Consumable usage history') }}</h5>
                    <button type="button" class="close" data-dismiss="modal"></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')
    @include('admin.asset.partials.scripts')
    <script>
        function showAssignModal($modal) {
            if (!$modal.length) return;
            if ($modal.parent()[0] !== document.body) {
                $modal.appendTo('body');
            }
            $modal.modal('show');
        }

        function buildSummary(employee, asset, extraHtml) {
            return '<div class="title">' + asset + '</div>' +
                '<div class="small text-muted">' + employee + '</div>' +
                (extraHtml || '');
        }

        $(document).on('click', '.btn-open-return', function () {
            var $btn = $(this);
            var isConsumable = String($btn.data('consumable')) === '1';
            var remaining = $btn.data('remaining');
            var unit = $btn.data('unit') || '';
            var extra = '';

            if (isConsumable) {
                extra = '<div class="small mt-1"><strong>{{ __('Remaining') }}:</strong> ' + remaining + ' ' + unit + '</div>';
            } else {
                extra = '<div class="small mt-1"><span class="assign-type-badge">' + ($btn.data('type') || '') + '</span> · ' + ($btn.data('identity') || '—') + '</div>';
            }

            $('#return_modal_summary').html(buildSummary($btn.data('employee'), $btn.data('asset'), extra));
            $('#return_assignment_id').val($btn.data('id'));
            $('#return_assignment_form').find('[name=note]').val('');
            $('#return_assignment_form').find('[name=customRadio][value="1"]').prop('checked', true);
            $('#return_barcode_wrap').toggle(!isConsumable);
            $('#return_consumable_hint').toggleClass('d-none', !isConsumable);
            showAssignModal($('#asset_assign_history'));
        });

        $(document).on('click', '.btn-close-assignment', function () {
            var $btn = $(this);
            $('#close_modal_summary').html(
                buildSummary($btn.data('employee'), $btn.data('asset'),
                    '<div class="small mt-1"><strong>{{ __('Assigned') }}:</strong> ' + ($btn.data('qty') || '—') + ' · <strong>{{ __('Remaining') }}:</strong> 0</div>')
            );
            $('#close_assignment_id').val($btn.data('id'));
            $('#close_assignment_form').find('[name=note]').val('');
            showAssignModal($('#close_assignment_modal'));
        });

        function showUsageHistory(id) {
            var tpl = document.getElementById('usage-log-' + id);
            if (!tpl) return;
            $('#usage_history_body').html(tpl.innerHTML);
            showAssignModal($('#usage_history_modal'));
        }
    </script>
@endsection