@extends('layouts.admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
@endpush

@section('content')
<section class="content">
    <div class="container-fluid pt-2">
        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-edit mr-2"></i>Edit Invoice — {{ $entry_no }}
                </h3>
            </div>

            <form method="POST" action="{{ route('manual.stock.update', $entry_no) }}">
                @csrf

                {{-- ✅ Hidden field to track deleted row IDs --}}
                <input type="hidden" name="deleted_ids" id="deleted_ids" value="">

                <div class="card-body">

                    {{-- Invoice Header --}}
                    <div class="row mb-3">

                        {{-- Date --}}
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label>Date <span class="text-danger">*</span></label>
                                <div class="input-group date" id="reqDate" data-target-input="nearest">
                                    <input type="text"
                                        class="form-control form-control-sm datetimepicker-input"
                                        data-target="#reqDate"
                                        name="reqDate"
                                        value="{{ $entryDate }}"
                                        required />
                                    <div class="input-group-append"
                                        data-target="#reqDate"
                                        data-toggle="datetimepicker">
                                        <div class="input-group-text">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Outlet --}}
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label>Outlet <span class="text-danger">*</span></label>
                                <select name="outlet" class="form-control form-control-sm select2" required>
                                    <option value="">Select Outlet</option>
                                    @foreach ($outlets as $v)
                                    <option value="{{ $v->id }}"
                                        {{ $outlet_id == $v->id ? 'selected' : '' }}>
                                        {{ $v->outlet_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Invoice No --}}
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label>Invoice No</label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    value="{{ $entry_no }}"
                                    readonly />
                            </div>
                        </div>

                    </div>

                    {{-- Products Table --}}
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-sm" id="product_table">
                            <thead class="thead-dark">
                                <tr>
                                    <th width="5%">SL</th>
                                    <th>Product Code</th>
                                    <th>Product Name</th>
                                    <th>Category</th>
                                    <th>Unit</th>
                                    <th width="15%">Qty <span class="text-danger">*</span></th>
                                    <th width="8%">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($items as $k => $item)
                                <tr id="row_{{ $item->id }}">
                                    {{-- Hidden fields inside the row --}}
                                    <input type="hidden" name="row_id[]" value="{{ $item->id }}">
                                    <input type="hidden" name="product_id[]" value="{{ $item->product_id }}">

                                    <td>{{ $k + 1 }}</td>
                                    <td>{{ $item->product_code ?? '' }}</td>
                                    <td>{{ $item->product_name }}</td>
                                    <td>{{ $item->cat_name ?? '' }}</td>
                                    <td>{{ $item->unit_name ?? '' }}</td>
                                    <td>
                                        <input type="number"
                                            name="qty[]"
                                            class="form-control form-control-sm qty-input"
                                            value="{{ $item->manual_stock }}"
                                            min="0"
                                            step="any"
                                            required>
                                    </td>
                                    <td>
                                        @can('Delete Daily Closing Stock')
                                        {{-- ✅ Delete row button --}}
                                        <button type="button"
                                            class="btn btn-xs btn-danger delete-row-btn"
                                            data-id="{{ $item->id }}"
                                            data-product="{{ $item->product_name }}"
                                            title="Remove this product">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        @endcan
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="5" class="text-right">Total Qty:</th>
                                    <th id="total_qty">{{ $items->sum('manual_stock') }}</th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-sm btn-primary">
                        <i class="fas fa-save"></i> Update
                    </button>
                    <a href="{{ route('manual.stockreport') }}" class="btn btn-sm btn-secondary">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                    <a href="{{ route('manual.stock.view', $entry_no) }}" class="btn btn-sm btn-info">
                        <i class="fas fa-eye"></i> View Invoice
                    </a>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@push('scripts')
{{-- ✅ Add SweetAlert2 CDN --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
<script>
    $(function() {
        $('.select2').select2();

        $('#reqDate').datetimepicker({
            format: 'DD-MM-YYYY'
        });

        // ── Live total qty calculation ─────────────────────────────────
        $(document).on('input', '.qty-input', function() {
            updateTotal();
        });

        function updateTotal() {
            let total = 0;
            $('.qty-input').each(function() {
                total += parseFloat($(this).val()) || 0;
            });
            $('#total_qty').text(total.toFixed(2));
        }

        // ── Delete row ────────────────────────────────────────────────
        $(document).on('click', '.delete-row-btn', function() {
            let rowId = $(this).data('id');
            let product = $(this).data('product');

            Swal.fire({
                title: 'Remove Product?',
                text: '"' + product + '" will be removed and stock restored to Head Office!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, Remove!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {

                    // Add deleted row ID to hidden field
                    let currentDeleted = $('#deleted_ids').val();
                    $('#deleted_ids').val(currentDeleted ? currentDeleted + ',' + rowId : rowId);

                    // Remove the row from UI
                    $('#row_' + rowId).remove();

                    // Recalculate SL numbers
                    $('#product_table tbody tr').each(function(index) {
                        $(this).find('td:first').text(index + 1);
                    });

                    // Recalculate total
                    updateTotal();
                }
            });
        });

    });
</script>
@endpush