@extends('layouts.index')

@section('content')
<style>
    .box { border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
    .box-header { border-top-left-radius: 8px; border-top-right-radius: 8px; }
    .info-box { border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
    .info-box-icon { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
</style>
<div class="content-wrapper">
    <section class="content-header m-3" style="display: flex; justify-content: space-between; align-items: center;">
        <h1 style="margin: 0;"><i class="fa fa-cubes"></i> Water Packaging</h1>
        <div>
            <a href="{{ url('/Backoffice') }}" class="btn btn-default">
                <i class="fa fa-home"></i> Home
            </a>
            <button id="fullscreenBtn" class="btn btn-default ml-2">
                <i class="fa fa-expand"></i> Full Screen
            </button>
        </div>
    </section>

    <section class="content">
        @include('partials.flash')

        @if(session('success'))
            <div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <i class="fa fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <i class="fa fa-exclamation-triangle"></i> {!! session('error') !!}
            </div>
        @endif

        <div class="row">

            {{-- ============ FORM ============ --}}
            <div class="col-md-5">
                <div class="box box-primary">
                    <div class="box-header with-border bg-primary text-white" style="border-radius: 8px 8px 0 0;">
                        <h3 class="box-title" style="color: white;"><i class="fa fa-dropbox"></i> New Packaging Batch</h3>
                    </div>
                    <div class="box-body">
                        <form action="{{ route('sales.packaging.store') }}" method="POST" id="packagingForm">
                            @csrf

                            <div class="form-group">
                                <label>Batch Number</label>
                                <input type="text" class="form-control" name="batch_number"
                                       value="{{ $batch }}" readonly
                                       style="background:#f5f5f5; font-weight:bold; color:#0c3d55;">
                            </div>

                            <div class="form-group">
                                <label>Packaging Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" name="packaging_date"
                                       value="{{ date('Y-m-d') }}" required>
                            </div>

                            <div class="form-group">
                                <label>Product (Packaged Water) <span class="text-danger">*</span></label>
                                <select class="form-control select2" name="product_id" id="product_id" required>
                                    <option value="">-- Select Product --</option>
                                    @foreach($products as $product)
                                        @php
                                            $totalStock = $product->variants->count() > 0 
                                                ? $product->variants->sum('variant_quantity') 
                                                : $product->product_quantity;
                                        @endphp
                                        <option value="{{ $product->id }}"
                                            data-variants="{{ json_encode($product->variants) }}"
                                            {{ old('product_id') == $product->id ? 'selected' : '' }}>
                                            {{ $product->product_name }}
                                            &nbsp;(Stock: {{ number_format($totalStock) }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group" id="variant_group" style="display:none;">
                                <label>Product Variant <small class="text-muted">(Size/Type)</small> <span class="text-danger">*</span></label>
                                <select class="form-control select2" name="variant_id" id="variant_id">
                                    {{-- JS dynamic options --}}
                                </select>
                            </div>

                            <div class="form-group">
                                <label id="unitsProducedLabel">Units Produced (Bottles) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="units_produced"
                                       id="units_produced"
                                       min="1" value="{{ old('units_produced', 1) }}" required>
                                <small class="text-muted" id="unitsProducedHint"></small>
                            </div>

                            <hr>
                            {{-- ---- Dynamic Raw Materials Table ---- --}}
                            <h4 class="text-primary" style="margin-bottom:8px; font-weight: bold;">
                                <i class="fa fa-cubes"></i> Raw Materials Used
                                <small class="text-muted" style="font-size:12px;">
                                    — quantities deducted from stock
                                </small>
                            </h4>

                            <table class="table table-bordered table-condensed table-hover" id="materialsTable">
                                <thead class="bg-primary text-white">
                                    <tr>
                                        <th width="50%" style="color: white; border-bottom: none;">Stock Item</th>
                                        <th width="30%" style="color: white; border-bottom: none;">Qty Used</th>
                                        <th width="20%" class="text-center" style="color: white; border-bottom: none;">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="materialRows">
                                    {{-- JS will populate rows --}}
                                </tbody>
                            </table>

                            <div id="noMaterialsMsg" class="text-center text-muted" style="padding:12px;">
                                <i class="fa fa-info-circle"></i> No materials added yet.
                            </div>

                            <button type="button" class="btn btn-default btn-sm"
                                    data-toggle="modal" data-target="#addMaterialModal">
                                <i class="fa fa-plus"></i> Add Stock Item
                            </button>

                            <hr>
                            <div class="form-group">
                                <label>Notes <small class="text-muted">(optional)</small></label>
                                <textarea class="form-control" name="notes" rows="2"
                                          placeholder="Any remarks...">{{ old('notes') }}</textarea>
                            </div>

                            <button type="submit" id="submitPackagingBtn"
                                    class="btn btn-primary btn-lg btn-block" style="border-radius: 8px;">
                                <i class="fa fa-save"></i> Record Packaging Batch
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            {{-- ============ HISTORY ============ --}}
            <div class="col-md-7">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title text-primary"><i class="fa fa-history"></i> Packaging History</h3>
                    </div>
                    <div class="box-body table-responsive" style="padding:0;">
                        <table class="table table-bordered table-hover table-striped" style="margin:0;">
                            <thead class="bg-gray-light">
                                <tr>
                                    <th>Batch #</th>
                                    <th>Date</th>
                                    <th>Product/Variant</th>
                                    <th class="text-center">Units</th>
                                    <th>Materials Used</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($logs as $log)
                                    <tr>
                                        <td>
                                            <span class="label label-primary">{{ $log->batch_number }}</span>
                                        </td>
                                        <td>{{ $log->packaging_date->format('d M Y') }}</td>
                                        <td>
                                            <strong>{{ optional($log->product)->product_name ?? '—' }}</strong>
                                            @if($log->variant_id)
                                                <br><small class="text-muted"><i class="fa fa-tag"></i> {{ optional(\App\Models\ProductVariant::find($log->variant_id))->variant_name }}</small>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-primary">
                                                {{ number_format($log->units_produced) }}
                                            </span>
                                        </td>
                                        <td>
                                            @foreach($log->items as $item)
                                                <div style="font-size:12px;">
                                                    <i class="fa fa-minus-square text-danger"></i>
                                                    {{ optional($item->stock)->name }}:
                                                    <strong>{{ number_format($item->quantity_used) }}</strong>
                                                </div>
                                            @endforeach
                                        </td>
                                        <td><small>{{ $log->notes ?: '—' }}</small></td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted" style="padding:30px;">
                                            <i class="fa fa-inbox fa-2x"></i><br>
                                            No packaging batches yet.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($logs->hasPages())
                        <div class="box-footer">{{ $logs->links() }}</div>
                    @endif
                </div>

                {{-- Stock Quick-View Cards --}}
                <div class="row">
                    @foreach($stocks->take(6) as $stock)
                        <div class="col-sm-4">
                            <div class="info-box {{ $stock->isLowStock() ? 'bg-red' : 'bg-aqua' }}"
                                 style="min-height:60px;">
                                <span class="info-box-icon" style="line-height:60px; font-size:20px;">
                                    <i class="fa fa-cubes"></i>
                                </span>
                                <div class="info-box-content" style="padding:8px 10px;">
                                    <span class="info-box-text" style="font-size:11px;">
                                        {{ Str::limit($stock->name, 20) }}
                                    </span>
                                    <span class="info-box-number" style="font-size:18px;">
                                        {{ number_format($stock->quantity) }}
                                    </span>
                                    @if($stock->isLowStock())
                                        <small>⚠ Low Stock</small>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
</div>

{{-- ============ ADD MATERIAL MODAL ============ --}}
<div class="modal fade" id="addMaterialModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="border-radius: 8px;">
            <div class="modal-header bg-primary text-white" style="border-radius: 8px 8px 0 0;">
                <button type="button" class="close" data-dismiss="modal"
                        style="color:white; opacity: 1;">&times;</button>
                <h4 class="modal-title" style="color: white;"><i class="fa fa-cubes"></i> Add Raw Material</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Stock Item <span class="text-danger">*</span></label>
                    <select class="form-control select2" id="modal_stock_id">
                        <option value="">-- Select Stock Item --</option>
                        @foreach($stocks as $stock)
                            <option value="{{ $stock->id }}"
                                    data-name="{{ $stock->name }}"
                                    data-qty="{{ $stock->quantity }}">
                                {{ $stock->name }} &nbsp;—&nbsp; Available: {{ number_format($stock->quantity) }}
                            </option>
                        @endforeach
                    </select>
                    <small class="text-info" id="modal_avail_info"></small>
                </div>
                <div class="form-group">
                    <label>Quantity Used <span class="text-danger">*</span></label>
                    <input type="number" class="form-control" id="modal_qty"
                           min="1" placeholder="Enter quantity">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="addMaterialBtn">
                    <i class="fa fa-plus"></i> Add to List
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
$(document).ready(function () {

    // Select2 is initialized globally via AdminLTE

    // Handle dynamic variants based on product selection
    $('#product_id').on('change', function() {
        var selected = $(this).find(':selected');
        var variants = selected.data('variants');
        var variantSelect = $('#variant_id');
        var variantGroup = $('#variant_group');

        variantSelect.html('<option value="">-- Select Variant --</option>');
        
        if (variants && variants.length > 0) {
            variants.forEach(function(v) {
                var stockText = '';
                if (v.variant_quantity !== null) {
                    if (v.selling_unit === 'pack' && v.pack_size > 1) {
                        var packs = Math.floor(v.variant_quantity / v.pack_size);
                        stockText = ' (Stock: ' + packs + ' packs)';
                    } else {
                        stockText = ' (Stock: ' + v.variant_quantity + ' bottles)';
                    }
                }
                variantSelect.append('<option value="' + v.id + '">' + v.variant_name + stockText + '</option>');
            });
            variantGroup.show();
            variantSelect.prop('required', true);
            
            // Auto-select if there is exactly 1 variant
            if (variants.length === 1) {
                variantSelect.val(variants[0].id).trigger('change');
            }
        } else {
            variantGroup.hide();
            variantSelect.prop('required', false);
        }
        
        // Refresh select2 UI cleanly (destroy before re-init to prevent duplication)
        try {
            if (variantSelect.hasClass('select2-hidden-accessible')) {
                variantSelect.select2('destroy');
            }
            variantSelect.select2({ width: '100%' });
        } catch(e) {}

        // Reset the units label when product changes
        $('#unitsProducedLabel').html('Units Produced (Bottles) <span class="text-danger">*</span>');
        $('#unitsProducedHint').text('');
    });

    // Update label when variant is selected
    $('#variant_id').on('change', function () {
        var selected = $(this).find(':selected');
        // Get variant data from the product's data-variants
        var productVariants = $('#product_id').find(':selected').data('variants') || [];
        var vid = $(this).val();
        var variant = productVariants.find(v => String(v.id) === String(vid));

        if (variant && variant.selling_unit === 'pack' && variant.pack_size) {
            $('#unitsProducedLabel').html('Packs Received <span class="text-danger">*</span>');
            $('#unitsProducedHint').html(
                '<i class="fa fa-info-circle"></i> Each pack = <strong>' + variant.pack_size + '</strong> bottles. ' +
                'Stock will be updated in bottles.'
            );
        } else {
            $('#unitsProducedLabel').html('Units Produced (Bottles/Units) <span class="text-danger">*</span>');
            $('#unitsProducedHint').text('');
        }
    });

    // When stock dropdown in modal changes, show available qty
    $('#modal_stock_id').on('change', function () {
        var selected = $(this).find(':selected');
        var qty = selected.data('qty');
        if (qty !== undefined) {
            $('#modal_avail_info').text('Available in stock: ' + qty);
        } else {
            $('#modal_avail_info').text('');
        }
        $('#modal_qty').val('');
    });

    // Add row on button click
    $('#addMaterialBtn').on('click', function () {
        var stockId   = $('#modal_stock_id').val();
        var stockName = $('#modal_stock_id').find(':selected').data('name');
        var available = $('#modal_stock_id').find(':selected').data('qty');
        var qty       = parseInt($('#modal_qty').val());

        if (!stockId) {
            alert('Please select a stock item.');
            return;
        }
        if (!qty || qty < 1) {
            alert('Please enter a valid quantity.');
            return;
        }

        // Check if stock item already added
        if ($('#materialRows').find('tr[data-stock-id="' + stockId + '"]').length) {
            alert('"' + stockName + '" is already in the list. Edit its row instead.');
            return;
        }

        var rowIndex = $('#materialRows tr').length;
        var row = `
            <tr data-stock-id="${stockId}">
                <td>
                    ${stockName}
                    <small class="text-muted">(avail: ${available})</small>
                    <input type="hidden" name="materials[${rowIndex}][stock_id]" value="${stockId}">
                </td>
                <td>
                    <div class="input-group" style="max-width:120px;">
                        <button type="button" class="btn btn-default btn-sm qty-decrement">-</button>
                        <input type="number" class="form-control form-control-sm text-center row-qty"
                               name="materials[${rowIndex}][quantity_used]"
                               value="${qty}" min="1" style="width:60px;">
                        <button type="button" class="btn btn-default btn-sm qty-increment">+</button>
                    </div>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-xs btn-danger remove-material">
                        <i class="fa fa-trash"></i>
                    </button>
                </td>
            </tr>`;

        $('#materialRows').append(row);
        updateMaterialsVisibility();
        reindexMaterials();

        // Reset modal
        $('#modal_stock_id').val('').trigger('change.select2');
        $('#modal_qty').val('');
        $('#modal_avail_info').text('');
        $('#addMaterialModal').modal('hide');
    });

    // Remove row
    $('#materialRows').on('click', '.remove-material', function () {
        $(this).closest('tr').remove();
        updateMaterialsVisibility();
        reindexMaterials();
    });

    // Increment
    $('#materialRows').on('click', '.qty-increment', function () {
        var input = $(this).closest('.input-group').find('.row-qty');
        input.val(parseInt(input.val() || 0) + 1);
    });

    // Decrement
    $('#materialRows').on('click', '.qty-decrement', function () {
        var input = $(this).closest('.input-group').find('.row-qty');
        var val = parseInt(input.val() || 0);
        if (val > 1) input.val(val - 1);
    });

    // Validate at least one material before submit
    $('#packagingForm').on('submit', function (e) {
        if ($('#materialRows tr').length === 0) {
            e.preventDefault();
            alert('Please add at least one raw material before saving.');
        }
    });

    function updateMaterialsVisibility() {
        if ($('#materialRows tr').length > 0) {
            $('#noMaterialsMsg').hide();
            $('#materialsTable').show();
        } else {
            $('#noMaterialsMsg').show();
            $('#materialsTable').hide();
        }
    }

    function reindexMaterials() {
        $('#materialRows tr').each(function (i) {
            $(this).find('input[name*="stock_id"]').attr('name', 'materials[' + i + '][stock_id]');
            $(this).find('input[name*="quantity_used"]').attr('name', 'materials[' + i + '][quantity_used]');
        });
    }

    // Initial state
    $('#materialsTable').hide();
});
</script>
@endsection