@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Asset requisitions'))
@include('admin.asset.partials.page_styles')
@push('css')
<style>
    .req-admin-page .req-stat {
        border: 1px solid #edf0f6; border-radius: 10px; background: #fff;
        padding: 12px 16px; text-align: center; height: 100%;
        transition: box-shadow .15s ease;
    }
    .req-admin-page .req-stat:hover { box-shadow: 0 2px 8px rgba(15,23,42,.06); }
    .req-admin-page .req-stat .num { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
    .req-admin-page .req-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
    .req-admin-page .req-stat.is-active { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
    .req-admin-page .req-table { font-size: 13px; margin-bottom: 0; }
    .req-admin-page .req-table thead th {
        font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
        color: #64748b; border-top: 0; white-space: nowrap;
    }
    .req-admin-page .req-table tbody td { vertical-align: middle; }
    .req-admin-page .req-emp-name { font-weight: 600; color: #0f172a; }
    .req-admin-page .req-emp-meta { font-size: 12px; color: #64748b; }
    .req-badge {
        display: inline-flex; align-items: center; padding: 4px 10px;
        border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
    }
    .req-badge-ready { background: rgba(34,197,94,.12); color: #166534; }
    .req-badge-submitted { background: rgba(14,165,233,.12); color: #0369a1; }
    .req-badge-fulfilled { background: rgba(100,116,139,.14); color: #334155; }
    .req-badge-rejected { background: rgba(239,68,68,.12); color: #991b1b; }
    .req-admin-page .req-actions .btn { padding: .25rem .5rem; }
    .req-admin-page .req-line {
        background: #f8fafc; border: 1px solid #edf0f6; border-radius: 10px; padding: .85rem; margin-bottom: .65rem;
    }
    .req-admin-page .req-empty { padding: 3rem 1rem; text-align: center; color: #64748b; }
    .req-admin-page .nav-status-tabs .nav-link {
        font-size: 13px; font-weight: 600; color: #64748b; border: 0; border-bottom: 2px solid transparent;
        border-radius: 0; padding: .6rem 1rem;
    }
    .req-admin-page .nav-status-tabs .nav-link.active {
        color: #2563eb; border-bottom-color: #2563eb; background: transparent;
    }
    .req-admin-page .nav-status-tabs .badge { font-size: 10px; vertical-align: middle; }
</style>
@endpush
@section('content')
<div class="row asset-admin-page req-admin-page mt-3 mb-5">
    <div class="col-xl-11 mx-auto">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
            <div>
                <h5 class="mb-1">{{ __('Asset requisitions') }}</h5>
                <p class="text-muted small mb-0">{{ __('Review employee requests, fulfill stock, or reject with reason.') }}</p>
            </div>
            @can('Asset-create')
                <button type="button" class="btn btn-primary btn-sm" onclick="reqOpenCreateModal()">
                    <i class="las la-plus"></i> {{ __('New requisition') }}
                </button>
            @endcan
        </div>

        <div class="row mb-3">
            @foreach([
                'ready' => [__('Ready to fulfill'), $stats['ready'], 'req-badge-ready', 'fas fa-check-circle'],
                'submitted' => [__('Awaiting approval'), $stats['submitted'], 'req-badge-submitted', 'fas fa-clock'],
                'fulfilled' => [__('Fulfilled'), $stats['fulfilled'], 'req-badge-fulfilled', 'fas fa-box-open'],
                'rejected' => [__('Rejected'), $stats['rejected'], 'req-badge-rejected', 'fas fa-times-circle'],
            ] as $key => [$label, $count, $badge, $icon])
                <div class="col-6 col-md-3 mb-2 mb-md-0">
                    <a href="{{ route('asset.requisition.list', array_merge(request()->except('page'), ['status' => $key])) }}"
                       class="text-decoration-none d-block req-stat {{ ($statusTab ?? 'ready') === $key ? 'is-active' : '' }}">
                        <div class="num text-dark">{{ $count }}</div>
                        <div class="lbl"><i class="{{ $icon }} mr-1"></i>{{ $label }}</div>
                    </a>
                </div>
            @endforeach
        </div>

        <div class="card asset-card">
            <div class="card-header border-0 pb-0">
                <ul class="nav nav-status-tabs border-bottom w-100">
                    @foreach(['ready' => __('Ready'), 'submitted' => __('Submitted'), 'fulfilled' => __('Fulfilled'), 'rejected' => __('Rejected'), 'all' => __('All')] as $key => $tabLabel)
                        <li class="nav-item">
                            <a class="nav-link {{ ($statusTab ?? 'ready') === $key ? 'active' : '' }}"
                               href="{{ route('asset.requisition.list', array_merge(request()->except('page'), ['status' => $key])) }}">
                                {{ $tabLabel }}
                                @if($key !== 'all' && isset($stats[$key]))
                                    <span class="badge badge-light border ml-1">{{ $stats[$key] }}</span>
                                @endif
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
            <div class="card-body">
                <form method="get" class="asset-filters mb-3">
                    <input type="hidden" name="status" value="{{ $statusTab ?? 'ready' }}">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-3">
                            <label>{{ __('Search') }}</label>
                            <input type="text" class="form-control" name="q" value="{{ request('q') }}"
                                   placeholder="{{ __('Employee name or note…') }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>{{ __('Employee') }}</label>
                            <select class="form-control select2" name="staff_id">
                                <option value="">{{ __('All employees') }}</option>
                                @foreach($staffList as $staff)
                                    <option value="{{ $staff->id }}" @selected((string)request('staff_id') === (string)$staff->id)>
                                        {{ $staff->user?->name }} ({{ $staff->user?->id }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label>{{ __('Sub-category') }}</label>
                            <select class="form-control select2" name="category_id">
                                <option value="">{{ __('All categories') }}</option>
                                @foreach($subCategories as $cat)
                                    <option value="{{ $cat->id }}" @selected((string)request('category_id') === (string)$cat->id)>
                                        {{ $cat->parentCategory?->name ? $cat->parentCategory->name.' → ' : '' }}{{ $cat->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-auto">
                            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> {{ __('Filter') }}</button>
                            <a href="{{ route('asset.requisition.list', ['status' => $statusTab ?? 'ready']) }}" class="btn btn-outline-secondary">{{ __('Reset') }}</a>
                        </div>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-hover req-table">
                        <thead class="thead-light">
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Employee') }}</th>
                            <th>{{ __('Category') }}</th>
                            <th>{{ __('Item type') }}</th>
                            <th class="text-center">{{ __('Qty') }}</th>
                            <th>{{ __('Note') }}</th>
                            <th class="text-center">{{ __('Status') }}</th>
                            <th class="text-right">{{ __('Actions') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($asset_items as $item)
                            @php
                                $parentCat = $item->category?->parentCategory;
                                $categoryName = $parentCat?->name ?? $item->category?->name ?? '—';
                                $subName = $parentCat ? ($item->category?->name ?? '—') : '—';
                            @endphp
                            <tr>
                                <td class="text-nowrap small text-muted">{{ $item->created_at?->format('Y-m-d') }}<br>{{ $item->created_at?->format('H:i') }}</td>
                                <td>
                                    <div class="req-emp-name">{{ $item->staff?->user?->name ?? '—' }}</div>
                                    <div class="req-emp-meta">
                                        {{ $item->staff?->designation?->name ?? '—' }}
                                        · {{ $item->staff?->warehouse?->name ?? '—' }}
                                    </div>
                                </td>
                                <td><strong>{{ $categoryName }}</strong></td>
                                <td>{{ $subName }}</td>
                                <td class="text-center font-weight-bold">{{ (int) $item->qty }}</td>
                                <td class="small text-muted" style="max-width:180px">{{ Str::limit($item->description ?: '—', 60) }}</td>
                                <td class="text-center">
                                    <span class="req-badge {{ $item->statusBadgeClass() }}">{{ $item->statusLabel() }}</span>
                                </td>
                                <td class="text-right text-nowrap req-actions">
                                    @if($item->isPendingFulfillment())
                                        <button type="button" class="btn btn-success btn-sm" title="{{ __('Fulfill') }}"
                                                onclick="asset_requisition_approval({{ $item->id }})">
                                            <i class="fas fa-hand-holding"></i> {{ __('Fulfill') }}
                                        </button>
                                    @endif
                                    @if((int)$item->status === \App\Models\AssetRequisition::STATUS_SUBMITTED)
                                        <button type="button" class="btn btn-outline-primary btn-sm" title="{{ __('Edit') }}"
                                                onclick="attendance_setup_update({{ $item->id }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    @endif
                                    @if((int)$item->status !== \App\Models\AssetRequisition::STATUS_FULFILLED)
                                        <a href="javascript:void(0)" data-href="{{ route('asset.requisition.destroy', $item->id) }}"
                                           class="btn btn-outline-danger btn-sm delete_modal" title="{{ __('Delete') }}">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="req-empty">
                                    <i class="fas fa-inbox fa-2x mb-2 d-block text-muted"></i>
                                    {{ __('No requisitions in this list.') }}
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                @if($asset_items->hasPages())
                    <div class="mt-3">{{ $asset_items->links() }}</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('modal')
    <div class="modal fade asset-admin-modal" id="req_create_modal" tabindex="-1">
        <form action="{{ route('employee.asset.requisition.store') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-dialog-scrollable asset-form-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('New asset requisition') }}</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label-asset">{{ __('Employee') }}<span class="text-danger">*</span></label>
                            <select class="form-control select2" name="staff_id" id="admin_requisition_staff_id" required>
                                <option value="">{{ __('Select employee') }}</option>
                                @foreach($staffList as $staff)
                                    <option value="{{ $staff->id }}">{{ $staff->user?->name }} ({{ $staff->user?->id }})</option>
                                @endforeach
                            </select>
                        </div>

                        <p class="section-label mb-2">{{ __('Requested items') }}</p>
                        <p class="text-muted small">{{ __('Add one or more asset lines. Each line can be a different category.') }}</p>

                        <div id="admin-requisition-lines">
                            <div class="requisition-row req-line">
                                <div class="form-row align-items-end">
                                    <div class="form-group col-md-5 mb-2">
                                        <label class="form-label-asset">{{ __('Category') }}<span class="text-danger">*</span></label>
                                        <select class="form-control select2 requisition-parent" name="parent_id[]" required>
                                            <option value="">{{ __('Select category') }}</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4 mb-2">
                                        <label class="form-label-asset">{{ __('Sub-category / item') }}</label>
                                        <select class="form-control select2 asset-sub" name="sub_id[]">
                                            <option value="">{{ __('Select sub-category') }}</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2 mb-2">
                                        <label class="form-label-asset">{{ __('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-2 text-right">
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-remove-admin-requisition-line" disabled title="{{ __('Remove') }}">&times;</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary mb-3" id="btn-add-admin-requisition-line">
                            <i class="fas fa-plus"></i> {{ __('Add another line') }}
                        </button>
                        <div class="form-group mb-0">
                            <label class="form-label-asset">{{ __('Description / justification') }}</label>
                            <textarea class="form-control" name="description" rows="3" placeholder="{{ __('Why are these assets needed?') }}"></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">{{ __('Submit requisition') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade asset-admin-modal" id="req_edit_modal" tabindex="-1">
        <form action="{{ route('asset.requisition.update') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-dialog-scrollable asset-form-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Edit requisition') }}</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body" id="asset_requisition_edit"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Save changes') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade asset-admin-modal" id="req_fulfill_modal" tabindex="-1">
        <form action="{{ route('asset.requisition.list.approval.store') }}" method="POST" id="asset-approval-form" onsubmit="return validateAssetApprovalForm();">
            @csrf
            <div class="modal-dialog modal-dialog-scrollable asset-form-modal">
                <div class="modal-content">
                    <div class="modal-header bg-light">
                        <h5 class="modal-title"><i class="fas fa-hand-holding text-success"></i> {{ __('Fulfill requisition') }}</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body" id="asset_assign_history_show"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                        <button type="submit" class="btn btn-success">{{ __('Confirm fulfillment') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    @include('admin.asset.partials.scripts')
    <script>
        function adminRequisitionRefreshRemoveState() {
            var n = $('#admin-requisition-lines .requisition-row').length;
            $('.btn-remove-admin-requisition-line').prop('disabled', n <= 1);
        }

        function reqOpenCreateModal() {
            $('#req_create_modal').modal('show');
            if (typeof assetInitSelect2 === 'function') {
                assetInitSelect2('#req_create_modal');
            }
            adminRequisitionRefreshRemoveState();
        }

        $(document).on('change', '#req_create_modal .requisition-parent', function () {
            var row = $(this).closest('.requisition-row');
            var sub = row.find('.asset-sub');
            var category_id = $(this).val();
            if (category_id !== '') {
                $.get('{{ route('get.asset.sub.categories') }}', { category_id: category_id }, function (res) {
                    sub.html(res).trigger('change');
                    if (typeof assetInitSelect2 === 'function') assetInitSelect2(row);
                });
            } else {
                sub.html('<option value="">{{ __('Select sub-category') }}</option>').trigger('change');
            }
        });

        $('#btn-add-admin-requisition-line').on('click', function () {
            var $row = $('#admin-requisition-lines .requisition-row:first').clone();
            $row.find('select').val('');
            $row.find('.asset-sub').html('<option value="">{{ __('Select sub-category') }}</option>');
            $row.find('input[type=number]').val(1);
            if ($row.find('.select2-hidden-accessible').length) {
                $row.find('select').each(function () {
                    try { $(this).select2('destroy'); } catch (e) {}
                });
            }
            $('#admin-requisition-lines').append($row);
            if (typeof assetInitSelect2 === 'function') assetInitSelect2($row);
            adminRequisitionRefreshRemoveState();
        });

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

        function validateAssetApprovalForm() {
            var decision = document.querySelector('#req_fulfill_modal input[name="customRadio"]:checked');
            if (decision && decision.value === '3') return true;
            var picks = document.querySelectorAll('#req_fulfill_modal .asset-pick-cb');
            if (!picks.length) return true;
            var needEl = document.getElementById('approval-qty-needed');
            var need = needEl ? parseInt(needEl.value, 10) : 1;
            if (isNaN(need) || need < 1) need = 1;
            var selected = document.querySelectorAll('#req_fulfill_modal .asset-pick-cb:checked').length;
            if (selected !== need) {
                alert(@json(__('Please select exactly :n asset(s).')).replace(':n', need));
                return false;
            }
            return true;
        }

        function attendance_setup_update(id) {
            $.get('{{ route('asset.requisition.edit') }}', { id: id }, function (res) {
                $('#asset_requisition_edit').html(res);
                $('#req_edit_modal').modal('show');
                if (typeof assetInitSelect2 === 'function') assetInitSelect2('#req_edit_modal');
            });
        }

        function asset_requisition_approval(id) {
            $.get('{{ route('asset.requisition.list.approval') }}', { id: id }, function (res) {
                $('#asset_assign_history_show').html(res);
                $('#req_fulfill_modal').modal('show');
                if (typeof assetInitSelect2 === 'function') assetInitSelect2('#req_fulfill_modal');
            });
        }

        $(function () {
            if (typeof assetInitSelect2 === 'function') assetInitSelect2('.req-admin-page');
        });
    </script>
@endsection