@extends('layouts.master')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/filepond/4.30.6/filepond.css"
        integrity="sha512-+9N9eHaPFoACOB0WABsAByw8rE3wPrCdY9DSUS5vM7qjss4w9g8CcKHDULxhVL/bg3zNVad4TIRUEdSujIjxcw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
        rel="stylesheet" />
    <style>
        .error {
            color: red;
        }
    </style>
@endsection
@section('title')
   Variant Stock Opening
@endsection
@section('content')
    <main>

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

            <div class="card mt-3">
                <div class="card-header d-flex align-items-center mt-3">
                    <h5 class="card-title mb-0 flex-grow-1">
                    Stock Loaction Details
                    </h5>
                </div>
            <form action="/admin/variant-stock_opening-store" method="POST" id="opening-stock-form">
                @csrf
                <input type="hidden" name="stock_item_id" value="{{ $stock_item_id }}">
                <div class="card-body">
                    <div id="addOpeningStockRow">
                             @foreach ($variantStockItemLocations as $variantStockItemLocation)
                             <div id="addOpeningStockRow">
                                <div class="row extraRow3" id="{{ $loop->iteration }}">
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Varinat Name</label>
                                            <select class="form-select variant" id=""
                                                name="variant_id[]" onchange="variantChange(this)">
                                                <option value=""></option>
                                                @foreach ($variants as $variant)
                                                    <option value="{{ $variant->id }}" @if($variantStockItemLocation->variant_id == $variant->id) selected @endif>
                                                        {{ $variant->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Stock
                                                Location</label>
                                            <select class="form-select stock-location" id=""
                                                name="stock_location_id[]">
                                                <option value=""></option>
                                                @foreach ($stockLocations as $stockLocation)
                                                    <option value="{{ $stockLocation->id }}" @if($variantStockItemLocation->stock_location_id == $stockLocation->id) selected @endif>
                                                        {{ $stockLocation->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-1">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Unit</label>
                                            <select class="form-select opening-stock-unit" id=""
                                                name="opening_stock_unit[]">
                                                <option value=""></option>
                                                @foreach ($units as $unit)
                                                    <option value="{{ $unit->id }}" @if($variantStockItemLocation->unit_id == $unit->id) selected @endif>{{ $unit->symbol }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Opening
                                                Stock</label>
                                            <input type="number" class="form-control opening_stock" value="{{ $variantStockItemLocation->opening_stock }}"
                                                id="opening_stock_{{ $loop->iteration }}" name="opening_stock[]"
                                                placeholder="Enter opening stock" step="any">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input" >Rate</label>
                                            <input type="number" class="form-control opening_rate" value="{{ $variantStockItemLocation->rate }}"
                                                id="opening_rate_{{ $loop->iteration }}" name="opening_rate[]"
                                                placeholder="Enter opening rate" step="any">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Value</label>
                                            <input type="number" class="form-control opening_value"  value="{{ $variantStockItemLocation->value }}"
                                                id="opening_value_{{ $loop->iteration  }}" name="value[]"
                                                placeholder="Enter value" step="any">
                                        </div>
                                    </div>
                                    <div class="col-lg-1 d-flex justify-content-center align-items-center pt-2">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="removeRow({{$loop->iteration }})"><i
                                            class="las la-minus"></i></button>
                                   </div>
                         </div>
                    </div>

                 @endforeach

                 @if(count($variantStockItemLocations) < 1)
                                <div class="row extraRow3" id="1">
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Varinat Name</label>
                                            <select class="form-select variant" id=""
                                                name="variant_id[]" onchange="variantChange(this)">
                                                <option value=""></option>
                                                @foreach ($variants as $variant)
                                                    <option value="{{ $variant->id }}">
                                                        {{ $variant->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Stock
                                                Location</label>
                                            <select class="form-select stock-location" id=""
                                                name="stock_location_id[]">
                                                <option value=""></option>
                                                @foreach ($stockLocations as $stockLocation)
                                                    <option value="{{ $stockLocation->id }}">
                                                        {{ $stockLocation->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-1">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Unit</label>
                                            <select class="form-select opening-stock-unit" id=""
                                                name="opening_stock_unit[]">
                                                <option value=""></option>
                                                @foreach ($units as $unit)
                                                    <option value="{{ $unit->id }}">{{ $unit->symbol }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Opening
                                                Stock</label>
                                            <input type="number" class="form-control opening_stock"
                                                id="opening_stock_1" name="opening_stock[]" value=""
                                                placeholder="Enter opening stock" step="any">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Rate</label>
                                            <input type="number" class="form-control opening_rate"
                                                id="opening_rate_1" name="opening_rate[]" value=""
                                                placeholder="Enter opening rate" step="any">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Value</label>
                                            <input type="number" class="form-control opening_value"
                                                id="opening_value_1" name="value[]" value=""
                                                placeholder="Enter value" step="any">
                                        </div>
                                    </div>
                                    <div class="col-lg-1 d-flex justify-content-center align-items-center pt-2">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(1)"><i
                                                class="las la-minus"></i></button>
                                 </div>
                            @endif
                         </div>
                    </div>

                    <div class="card mt-3 float-end me-4">
                        <div class="col-lg-12">
                            <button type="button" class="btn btn-primary " onclick="addRow()">Add Row</button>
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                   </div>
                </div>
            </div>


        </form>
        </div>
    </main>
@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/jquery.validate.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/filepond/4.30.6/filepond.min.js"
        integrity="sha512-6ALP4noOAk3f/wpnN0qAWdkNNTpQcu0ArDsPVVFi3GIKbTGHswBnW3o/8rsxDTGF4BGYpI4E6DlrtyGFgBifjQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
    <script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js">
    </script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
    <script>
          $('.variant').select2({
                placeholder: 'Choose variant',
            })
            $('.opening-stock-unit').select2({
                placeholder: 'Choose Unit',
            });
            $('.stock-location').select2({
                placeholder: 'Choose location',
            });
function addRow(variantId) {

    var rowCount = $('.extraRow3').length;
        rowCount = rowCount + 1;
            var html = `<div class="row extraRow3" id="${rowCount}">
                            <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Variant</label>
                                            <select class="form-select variant" id=""
                                                name="variant_id[]" onchange="variantChange(this)">
                                                <option value=""></option>
                                                @foreach ($variants as $variant)
                                                    <option value="{{ $variant->id }}">{{ $variant->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="mb-3">
                                    <label class="form-label" for="product-title-input">Stock Location</label>
                                    <select class="form-select stock-location2" id=""
                                        name="stock_location_id[]">
                                        <option value=""></option>
                                        @foreach ($stockLocations as $stockLocation)
                                            <option value="{{ $stockLocation->id }}">{{ $stockLocation->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-1">
                                <div class="mb-3">
                                    <label class="form-label" for="product-title-input">Unit</label>
                                    <select class="form-select opening-stock-unit2" id=""
                                        name="opening_stock_unit[]">
                                        <option value=""></option>
                                        @foreach ($units as $unit)
                                            <option value="{{ $unit->id }}">{{ $unit->symbol }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="mb-3">
                                    <label class="form-label" for="product-title-input">Opening Stock</label>
                                    <input type="number" class="form-control opening_stock" name="opening_stock[]"
                                        id="opening_stock_${rowCount}" value="" placeholder="Enter opening stock" step="any">
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="mb-3">
                                    <label class="form-label" for="product-title-input">Rate</label>
                                    <input type="number" class="form-control opening_rate" name="opening_rate[]"
                                        id="opening_rate_${rowCount}" value="" placeholder="Enter opening rate" step="any">
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="mb-3">
                                    <label class="form-label" for="product-title-input">Value</label>
                                    <input type="number" class="form-control opening_value" name="value[]"
                                        id="opening_value_${rowCount}" value="" placeholder="Enter value" step="any">
                                </div>
                            </div>
                        <div class="col-md-1 d-flex justify-content-center align-items-center pt-4">
                            <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(${rowCount})"><i class="las la-minus"></i></button>
                        </div>
                    </div>`;
            $("#addOpeningStockRow").append(html);
            $('.variant').select2({
                placeholder: 'Choose variant',
            })
            $('.opening-stock-unit2').select2({
                placeholder: 'Choose Unit',
            });
            $('.stock-location2').select2({
                placeholder: 'Choose location',
            });
}

        $('variant').select2({
                placeholder: 'Choose variant',
            })
            $('.opening-stock-unit2').select2({
                placeholder: 'Choose Unit',
            });
            $('.stock-location2').select2({
                placeholder: 'Choose location',
            });
     function   removeRow(rowCount) {
            $(`#${rowCount}`).remove();
        }
        $('#opening-stock-form').on('submit', function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            var url = $(this).attr('action');
            $.ajax({
                type: "POST",
                url: url,
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function(response) {
                    if (response.status == 'success') {
                        $('#opening-stock-form')[0].reset();
                        $('#addOpeningStockModal').modal('hide');
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                        })
                        Toast.fire({
                            icon: 'success',
                            title: response.message,
                        })
                        location.reload();
                    } else {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                        })
                        Toast.fire({
                            icon: 'error',
                            title: response.message,
                        })
                    }
                },
                error: function(data) {

                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                    })
                    Toast.fire({
                        icon: 'error',
                        title: 'Something went wrong. Please try again later.',
                    })
                }

            })
    })
    $(document).on('keyup', '.opening_stock', function(e) {
            e.preventDefault();
            let qty = $(this).val();
            let rowId = $(this).closest('.extraRow3').attr('id');
            let value = $('#opening_value_' + rowId).val();
            let rate = value / qty;
            $('#opening_rate_' + rowId).val(rate.toFixed(3));
        });

        $(document).on('keyup', '.opening_rate', function(e) {
            e.preventDefault();
            let rate = $(this).val();
            let rowId = $(this).closest('.extraRow3').attr('id');
            let qty = $('#opening_stock_' + rowId).val();
            let value = rate * qty;
            $('#opening_value_' + rowId).val(value.toFixed(3));
        });

        $(document).on('keyup', '.opening_value', function(e) {
            e.preventDefault();
            let value = $(this).val();
            let rowId = $(this).closest('.extraRow3').attr('id');
            let qty = $('#opening_stock_' + rowId).val();
            let rate = value / qty;
            $('#opening_rate_' + rowId).val(rate.toFixed(3));
        });
        function variantChange(selectedElement){
            var selectedValue = $(selectedElement).val();
            $('.variant').each(function(val) {
                if ($(this).val() === selectedValue && $(this).val() !== '' && $(this)[0] !== selectedElement) {
                alert('This variant already exists');
             }
            })

        }
    </script>
@endsection