@extends('layouts/base_view')

@section('title')
<li class="breadcrumb-item">Transaksi</li>
<li class="breadcrumb-item"><a href="{{ route('stock_opnames.index') }}">Stock Opname</a></li>
<li class="breadcrumb-item"><a href="{{ route('stock_opnames.show', $stockOpname->id) }}">{{ $stockOpname->so_number }}</a></li>
<li class="breadcrumb-item active">Edit SPB</li>
@endsection

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-edit"></i> Edit SPB Regular - SO #{{ $stockOpname->so_number }}
                        </h3>
                        <div class="card-tools">
                            <a href="{{ route('stock_opnames.show', $stockOpname->id) }}" class="btn btn-sm btn-warning">
                                 <i class="fas fa-list"></i> List
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Info Alert -->
                        <div class="alert alert-info">
                            <h5><i class="icon fas fa-info-circle"></i> Informasi</h5>
                            <ul class="mb-0">
                                <li>Anda dapat mengedit <strong>Qty</strong> dan <strong>Notes</strong> pada SPB detail</li>
                                <li>Perubahan akan tersimpan otomatis (autosave)</li>
                                <li>Batas waktu edit: <strong>{{ $deadlineDateTime }}</strong></li>
                                <li>Setelah melewati batas waktu, SPB tidak dapat diedit lagi</li>
                            </ul>
                        </div>

                        <!-- SO Info -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td width="150"><strong>SO Number</strong></td>
                                        <td>: {{ $stockOpname->so_number }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>SO Date</strong></td>
                                        <td>: {{ $stockOpname->so_date->format('d M Y') }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Store</strong></td>
                                        <td>: {{ $stockOpname->store->name }}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td width="150"><strong>Total SPB</strong></td>
                                        <td>: {{ $spbs->count() }} SPB</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Status</strong></td>
                                        <td>: <span class="badge badge-success">{{ $stockOpname->status }}</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Edit Deadline</strong></td>
                                        <td>: <span class="badge badge-warning">{{ $deadlineDateTime }}</span></td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <!-- SPB List -->
                        @foreach($spbs as $index => $spb)
                        <div class="card card-outline card-warning mb-3">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-file-alt"></i> SPB #{{ $index + 1 }}: {{ $spb->spb_number }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <small class="text-muted">Request Date: {{ \Carbon\Carbon::parse($spb->request_date)->format('d M Y') }}</small>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        <small class="text-muted">Delivery Date: {{ \Carbon\Carbon::parse($spb->delivery_date)->format('d M Y') }}</small>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-sm table-hover">
                                        <thead class="bg-warning">
                                            <tr>
                                                <th width="5%">No</th>
                                                <th width="15%">Kode RM</th>
                                                <th width="30%">Nama RM</th>
                                                <th width="10%">UOM</th>
                                                <th width="10%" class="text-right">Qty</th>
                                                <th width="25%">Notes</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($spb->details as $detailIndex => $detail)
                                            <tr>
                                                <td>{{ $detailIndex + 1 }}</td>
                                                <td>{{ $detail->rawMaterial->code ?? '-' }}</td>
                                                <td>{{ $detail->rawMaterial->name ?? '-' }}</td>
                                                <td>{{ $detail->rawMaterial->uom_pakai ?? $detail->rawMaterial->uom ?? '-' }}</td>
                                                <td>
                                                    <input type="number" 
                                                           class="form-control form-control-sm spb-qty-input text-right" 
                                                           data-spb-detail-id="{{ $detail->id }}"
                                                           data-original-value="{{ number_format($detail->qty, 2, '.', '') }}"
                                                           value="{{ number_format($detail->qty, 2, '.', '') }}" 
                                                           step="0.01"
                                                           min="0"
                                                           max="999999.99"
                                                           onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 46"
                                                           oninput="if(this.value.split('.')[1] && this.value.split('.')[1].length > 2) this.value = parseFloat(this.value).toFixed(2)">
                                                </td>
                                                <td>
                                                    <input type="text" 
                                                           class="form-control form-control-sm spb-notes-input" 
                                                           data-spb-detail-id="{{ $detail->id }}"
                                                           data-original-value="{{ $detail->notes }}"
                                                           value="{{ $detail->notes }}" 
                                                           placeholder="Catatan...">
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="6" class="text-center text-muted">Tidak ada detail</td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Autosave indicator -->
<div id="autosave-indicator" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: none;">
    <div class="alert alert-success mb-0">
        <i class="fas fa-check-circle"></i> Tersimpan
    </div>
</div>

@endsection

@section('scripts')
<script>
$(document).ready(function() {
    let saveTimeout;
    let isSubmitting = false;

    // Autosave for qty input (with debounce)
    $('.spb-qty-input').on('input', function() {
        const input = $(this);
        const spbDetailId = input.data('spb-detail-id');
        const value = input.val();
        
        // Clear previous timeout
        clearTimeout(saveTimeout);
        
        // Set new timeout (debounce)
        saveTimeout = setTimeout(function() {
            autoSaveField(spbDetailId, 'qty', value, input);
        }, 1000); // Save after 1 second of no typing
    });

    // Format qty input to 2 decimal places on blur
    $('.spb-qty-input').on('blur', function() {
        const input = $(this);
        let value = parseFloat(input.val());
        
        // Format to 2 decimal places if valid number
        if (!isNaN(value) && value >= 0) {
            input.val(value.toFixed(2));
        } else {
            input.val('0.00');
        }
    });

    // Autosave for notes input
    $('.spb-notes-input').on('blur', function() {
        const input = $(this);
        const spbDetailId = input.data('spb-detail-id');
        const value = input.val();
        const originalValue = input.data('original-value');
        
        // Only save if value changed
        if (value !== originalValue) {
            autoSaveField(spbDetailId, 'notes', value, input);
        }
    });

    function autoSaveField(spbDetailId, fieldName, value, inputElement) {
        if (isSubmitting) return;
        
        $.ajax({
            url: '{{ route("stock_opnames.update_spb_detail") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                spb_detail_id: spbDetailId,
                field_name: fieldName,
                value: value
            },
            success: function(response) {
                if (response.success) {
                    // Update original value
                    inputElement.data('original-value', value);
                    
                    // Show success indicator
                    showSaveSuccess();
                    
                    console.log('SPB detail updated:', response);
                } else {
                    showSaveError(response.message);
                }
            },
            error: function(xhr) {
                const message = xhr.responseJSON?.message || 'Error menyimpan data';
                showSaveError(message);
                console.error('Autosave error:', xhr);
            }
        });
    }

    function showSaveSuccess() {
        $('#autosave-indicator').removeClass('alert-danger').addClass('alert-success');
        $('#autosave-indicator').html('<i class="fas fa-check-circle"></i> Tersimpan');
        $('#autosave-indicator').fadeIn(200).delay(2000).fadeOut(200);
    }

    function showSaveError(message) {
        $('#autosave-indicator').removeClass('alert-success').addClass('alert-danger');
        $('#autosave-indicator').html('<i class="fas fa-exclamation-circle"></i> ' + message);
        $('#autosave-indicator').fadeIn(200).delay(3000).fadeOut(200);
    }

    // Warn before leaving page if there are unsaved changes
    let hasUnsavedChanges = false;
    
    $('.spb-qty-input, .spb-notes-input').on('input', function() {
        hasUnsavedChanges = true;
    });

    $(window).on('beforeunload', function() {
        if (hasUnsavedChanges && !isSubmitting) {
            return 'Anda memiliki perubahan yang belum tersimpan. Yakin ingin meninggalkan halaman?';
        }
    });
});
</script>
@endsection