@extends('layouts.admin-simple')

@section('title', 'New Asset Return')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item">Fixed Assets</li>
    <li class="breadcrumb-item"><a href="{{ route('warehouse.fixed-assets.returns.index') }}">Returns</a></li>
    <li class="breadcrumb-item active">New Return</li>
@endsection

@section('page-title')
    <div class="d-flex justify-content-between align-items-center w-100">
        <div class="page-title-left">
            <h3 class="mb-1">New Asset Return</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Return assets from a project to warehouse</p>
        </div>
        <div class="page-actions-right">
            <a href="{{ route('warehouse.fixed-assets.returns.index') }}" class="btn btn-sm btn-outline-secondary"><i class="material-icons mr-1" style="font-size: 16px;">arrow_back</i> Back</a>
        </div>
    </div>
@endsection

@section('content')
    <form method="POST" action="{{ route('warehouse.fixed-assets.returns.store') }}">
        @csrf
        <div class="card mb-3">
            <div class="card-header"><h6 class="mb-0"><i class="material-icons mr-2 align-middle">assignment_return</i>Return Details</h6></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Project <span class="text-danger">*</span></label>
                            <select name="project_id" id="project_id" class="form-control select2-dropdown" required>
                                <option value="">Select Project</option>
                                @foreach($projects as $p)
                                    <option value="{{ $p->id }}">{{ $p->project_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Return Date</label>
                            <input type="date" name="return_date" class="form-control" value="{{ date('Y-m-d') }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Reason</label>
                            <input type="text" name="reason" class="form-control" placeholder="Reason for return">
                        </div>
                    </div>
                </div>
                <div class="form-group mb-0">
                    <label>Notes</label>
                    <textarea name="notes" rows="2" class="form-control"></textarea>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header"><h6 class="mb-0"><i class="material-icons mr-2 align-middle">devices</i>Assets to Return</h6></div>
            <div class="card-body">
                <div id="assets-loading" class="text-center text-muted py-3" style="display:none;">
                    <div class="spinner-border spinner-border-sm mr-2"></div> Loading project assets...
                </div>
                <div id="assets-container" style="display:none;">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="thead-light">
                                <tr><th><input type="checkbox" id="select-all"></th><th>Asset Code</th><th>Asset Name</th><th>Category</th><th>Condition on Return</th><th>Notes</th></tr>
                            </thead>
                            <tbody id="assets-body"></tbody>
                        </table>
                    </div>
                </div>
                <div id="no-assets" class="text-center text-muted py-3">Select a project to load its assets.</div>
            </div>
        </div>

        <div class="card">
            <div class="card-body text-center py-3">
                <button type="submit" class="btn btn-success mr-3"><i class="material-icons mr-1" style="font-size: 16px;">save</i> Create Return</button>
                <a href="{{ route('warehouse.fixed-assets.returns.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>.select2-container{width:100%!important;}.select2-container--default .select2-selection--single{height:38px;border:1px solid #ced4da;}.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:36px;}.select2-container--default .select2-selection--single .select2-selection__arrow{height:36px;}</style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select2-dropdown').select2({ allowClear: true });

            $('#project_id').on('change', function() {
                var projectId = $(this).val();
                if (!projectId) {
                    $('#assets-container').hide();
                    $('#no-assets').show().text('Select a project to load its assets.');
                    return;
                }

                $('#assets-loading').show();
                $('#assets-container').hide();
                $('#no-assets').hide();

                $.get('{{ url("warehouse/fixed-assets/returns/api/project-assets") }}/' + projectId, function(response) {
                    $('#assets-loading').hide();
                    if (response.success && response.data.length > 0) {
                        var html = '';
                        response.data.forEach(function(asset, idx) {
                            html += `<tr>
                                <td><input type="checkbox" class="asset-checkbox" name="items[${idx}][fixed_asset_id]" value="${asset.id}"></td>
                                <td><code>${asset.asset_code}</code></td>
                                <td>${asset.asset_name}</td>
                                <td>${asset.category_name}</td>
                                <td><select name="items[${idx}][condition_on_return]" class="form-control form-control-sm">
                                    <option value="good">Good</option><option value="fair">Fair</option><option value="poor">Poor</option><option value="damaged">Damaged</option>
                                </select></td>
                                <td><input type="text" name="items[${idx}][condition_notes]" class="form-control form-control-sm" placeholder="Notes"></td>
                            </tr>`;
                        });
                        $('#assets-body').html(html);
                        $('#assets-container').show();
                    } else {
                        $('#no-assets').show().text('No assets found for this project.');
                    }
                });
            });

            $('#select-all').on('change', function() {
                $('.asset-checkbox').prop('checked', $(this).is(':checked'));
            });
        });
    </script>
@endpush