@extends('layouts.app')

@section('content')

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18"> @lang('general.create') Stock Transfer</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboards</a></li> 
                    <li class="breadcrumb-item"><a href="{{ route('stocktransfer.index') }}"> Stock Transfers</a></li>
                    <li class="breadcrumb-item active">@lang('general.create')</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<!-- end page title -->
@include('validate')
<div class="row">

    <div class="col-md-12">

        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Stock Transfer @lang('general.details')</h4>

                <form method="POST" action="{{ route('stocktransfer.store') }}" id="transfer-data-form">
                 
                <div class="row mb-4">

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="transfer_date" class="form-label req">Transfer Date</label>
                            <div class="input-group" id="transfer_date">
                                <input type="text" id="trans_date" name="transfer_date" class="form-control" data-date-format="{{ js_app_date_format() }}" data-date-container='#transfer_date' data-provide="datepicker" value="{{ $transDate ?? date(app_date_format()) }}" required>
                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div><!-- input-group --> 
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="branch_id" class="form-label req">Branch</label>
                            <select class="form-control select2" name="branch_id" id="branch_id" required>
                               <option value="">Select</option>
                               @foreach ($branchData as $branch)
                            <option value="{{ $branch->id }}" @if($selectedBranch == $branch->id) @selected(true) @endif>{{ $branch->branch_name }}</option> 
                            @endforeach
                            </select> 
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="to_branch_id" class="form-label req">To Branch</label>
                            <select class="form-control select2" name="to_branch_id" id="to_branch_id" required>
                               <option value="">Select</option> 
                               @foreach ($tobranchData as $toBranch)
                               <option value="{{ $toBranch->id }}">{{ $toBranch->branch_name }}</option>    
                               @endforeach
                            </select> 
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="transfer_notes" class="form-label">Notes</label>
                            <textarea class="form-control" name="transfer_notes" id="transfer_notes"></textarea>
                        </div>
                    </div> 
                     
                </div>


                <div class="row mt-4">
                    <div class="col-md-12">

                        <table class="table table-bordered">
                           <thead>
                              <tr>
                                <th>Product Name</th>
                                <th>Quantity</th>
                                <th></th> 
                              </tr>
                           </thead>
                           <tbody id="transferItems">
                            <tr id="no_rows">
                                <td colspan="3">No Products Added</td>
                            </tr>
                           </tbody> 
                        </table> 
                    </div>
                </div> 


                <div class="row mt-4"> 
                    <div class="col-md-6">
                        <select class="form-control" name="product_selection" id="product_selection">
                           <option value="">Select Product</option>
                           @foreach ($productData as $product)
                           <option value="{{ $product->id }}">{{ $product->product_name.' | '.$product->product_code.' | '.round($product->getCurrentStock($selectedBranch),2) }}</option>    
                           @endforeach
                        </select>
                    </div> 
                </div> 

                <div class="row mt-4"> 
                    <div class="col-md-12 "> 
                        @csrf
                        <button type="submit" class="btn btn-primary w-md float-end">SAVE</button>
                    </div>
                </div>

            </form>
                
            </div>
            <!-- end card body -->
        </div>

    </div>

</div>


@endsection

 
@push('scripts')

<script>

$('.select2').select2();  

$('#product_selection').select2();  

$(document).ready(function () { 

    $('#branch_id').on('change', function() {
            var selectedBranchId = $(this).val();
            var selectedDate = $('#trans_date').val();
            if (selectedBranchId > 0) {
                window.location.href = "{{ route('stocktransfer.create') }}?branch="+selectedBranchId+"&date="+selectedDate;
            }
    });

    $('#product_selection').on('change', function () {
        var productId = $(this).val();
        var branchId= $('#branch_id').val();

          if(productId > 0 && branchId > 0){

            // Make an Ajax request to get product details
            $.ajax({
                        type: 'GET',
                        url: '{{ route('stocktransfer.itemsrow') }}',
                        data: { id: productId, bid: branchId },
                        success: function (data) {

                            var noRowsCount=$('#no_rows').length;

                            if(noRowsCount > 0){ $('#no_rows').remove(); }

                            $('#transferItems').append(data.view); 

                            $('#product_selection').val(null).trigger('change');


                        },
                        error: function (xhr, status, error) {
                            console.error(error);
                        }
                    });
                    
          }
          


    });

});

$('#transfer-data-form').on('click', '.remove-item', function() {
    var itemRow = $(this).closest('.item-row').remove();

    // Check the count of remaining items
    var remainingItems = $('.item-row').length;

    // If no items are remaining, display the message
    if (remainingItems === 0) {
        var noProductsMessage = '<tr id="no_rows"><td colspan="4">No Products Added</td></tr>';
        $('#transferItems').append(noProductsMessage);
    }
});

</script> 

@endpush