@extends('layouts.admin.base-dashboard')

@section('title', 'Create Stock Opname')

@section('content')
<div class="card">
    <form action="{{ route('stock-opnames.store') }}" method="POST" class="form-horizontal needs-validation">
        @csrf
        <h5 class="card-header">Create Stock Opname</h5>
        <div class="card-body">
            <div class="form-body">

                <!-- Pilih Cabang -->
                <div class="form-group row @error('branch_id') has-error @enderror">
                    <label class="control-label text-right col-md-3">Cabang</label>
                    <div class="col-md-5">
                        <select name="branch_id" id="branch_id" class="form-control" required
                                onchange="window.location='{{ route('stock-opnames.create') }}?branch_id=' + this.value;">
                                <option value="">-- Pilih Cabang --</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ $selectedBranch == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('branch_id')
                            <div class="text-danger"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                </div>

                <div class="form-group row @error('note') has-error @enderror">
                    <label class="control-label text-right col-md-3">Note</label>
                    <div class="col-md-5">
                        <input type="text" name="note" class="form-control note" value="{{ old('note') }}">
                        @error('note')
                            <div class="text-danger"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                </div>

                <div class="form-group row @error('stock-opname') is-invalid @enderror">
                    <div class="col-md-12">
                        <button type="button" id="add_stock_opname" class="btn btn-success mb-4">Add New</button>
                        <div class="table-scrollable form-body">
                            <table class="table table-bordered table-striped table-hover stock_opname_table">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Product Name</th>
                                        <th style="width: 6em;">Old Stock</th>
                                        <th style="width: 6em;">Update Stock</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="table-no">1 <input type="hidden" class="increment_number" value="1"></td>
                                        <td>
                                            <select name="stockOpnameInput[0][product_id]" class="form-control product_id choose-product-id" required>
                                                <option value="">-- Choose Product --</option>
                                                @foreach ($products as $product)
                                                    <option value="{{ $product->id }}"
                                                        data-stock="{{ optional($product->productStocks->first())->stock ?? 0 }}">
                                                        {{ $product->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control old_stock" size="5" name="stockOpnameInput[0][old_stock]" readonly required>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control new_stock" size="5" name="stockOpnameInput[0][new_stock]" required>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger remove_stock_opname_row">Remove</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <hr>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer bg-light">
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="offset-sm-3 col-md-5">
                                <button type="submit" class="btn btn-primary btn-rounded text-white">
                                    <i class="la la-save text-white"></i> Update
                                </button>
                                <a href="{{ route('stock-opnames.index', ['branch_id' => $selectedBranch]) }}" class="btn btn-info btn-rounded text-white">
                                    <i class="la la-chevron-left text-white"></i> Back
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('script')
<script>
    // Isi old stock dari data-stock
    $(document).on("change", ".choose-product-id", function() {
        var stock = $(this).find('option:selected').data('stock');
        $(this).closest('tr').find('.old_stock').val(stock ?? 0);
    });

    $(function () {
        $(".choose-product-id").select2({ width: '100%' });
    });

    let i = 0;
    $("#add_stock_opname").click(function() {
        i++;
        const incrementNumber = $('.stock_opname_table tbody tr').length + 1;
        const newRow = `
            <tr>
                <td class="table-no">${incrementNumber}
                    <input type="hidden" class="increment_number" value="${incrementNumber}">
                </td>
                <td>
                    <select name="stockOpnameInput[${i}][product_id]" class="form-control product_id choose-product-id" required>
                        <option value="">-- Choose Product --</option>
                        @foreach ($products as $product)
                            <option value="{{ $product->id }}"
                                    data-stock="{{ optional($product->productStocks->first())->stock ?? 0 }}">{{ $product->name }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="text" class="form-control old_stock" size="5" name="stockOpnameInput[${i}][old_stock]" readonly required>
                </td>
                <td>
                    <input type="text" class="form-control new_stock" size="5" name="stockOpnameInput[${i}][new_stock]" required>
                </td>
                <td>
                    <button type="button" class="btn btn-danger remove_stock_opname_row">Remove</button>
                </td>
            </tr>
        `;
        $(".stock_opname_table tbody").append(newRow);
        $('.choose-product-id').select2({ width: '100%' });
    });

    $(document).on("click", ".remove_stock_opname_row", function () {
        $(this).closest('tr').remove();
        // Renumber
        $('.stock_opname_table tbody tr').each(function(index){
            $(this).find('.table-no').html(`${index+1}<input type="hidden" class="increment_number" value="${index+1}">`);
        });
    });

    // Auto isi old_stock waktu load pertama
    $(document).ready(function(){
        $('.choose-product-id').trigger('change');
    });
</script>
@endpush