@extends('backend.layouts.app')

@section('content')

    <div class="card">


        <form action="{{route('storepurchase')}}" method="POST">
            @csrf
            <div class="row">
                <h5 class="mb-md-0 h6 ml-4 mt-2">{{ __('Add Purchase') }}</h5>
            </div>
            <div class="card-header row gutters-5" id="originalDiv">
                <!--<div class="col">-->
                <!--    <h5 class="mb-md-0 h6">{{ __('All Orders') }}</h5>-->
                <!--</div>-->
                {{--                <div class="col-lg-1">--}}
                {{--                    <label>Invoice</label>--}}
                {{--                    <div class="form-group mb-1">--}}

                {{--                        <input type="text" class="form-control " id="invoice" name="invoice" placeholder="Invoice No"--}}
                {{--                               required>--}}

                {{--                    </div>--}}
                {{--                </div>--}}

                <div class="col-lg-2 mb-1">
                    <label>Product Name</label>
                    <select class="select2 form-control aiz-selectpicker" id="product_id" name="product_id"
                            data-toggle="select2" data-placeholder="Choose ..." data-live-search="true"
                            onchange="get_product_id()">
                        {{--                    <select class=" form-control" id="product_id" name="product_id" data-placeholder="Choose ..."--}}
                        {{--                            onchange="get_product_id()">--}}
                        <option value="0">{{ __('No Product') }}</option>
                        @foreach($products as $product)
                            <option value="{{$product->id}}">{{$product->name}}</option>
                        @endforeach
                    </select>

                </div>


                <div class="col-lg-2 mb-1">

                    <label>Variant Name</label>
                    <!--<select class="select2 form-control aiz-selectpicker" id="variant_id"  name="variant_id" data-toggle="select2" data-placeholder="Choose ..." data-live-search="true" >-->
                    <select class="form-control" id="variant_id" name="variant_id" data-placeholder="Choose ...">

                    </select>

                </div>
                <div class="col-lg-2 mb-1">
                    <label>Supplier Name</label>
                    <!--<select class="select2 form-control aiz-selectpicker"  id="product_id" name="product_id" data-toggle="select2" data-placeholder="Choose ..." data-live-search="true" onchange="get_product_id()">-->
                    <select class=" form-control" id="supplier_id" name="supplier_id" required>
                        <option value="">{{ __('Select Supplier') }}</option>
                        @foreach(\App\Models\Supplier::all() as $supplier)
                            <option value="{{$supplier->id}}">{{$supplier->user->name}}</option>
                        @endforeach
                    </select>

                </div>

                <div class="col-lg-1">
                    <label>Old Stock</label>
                    <div class="form-group mb-1 ">
                        <input type="text" class="form-control stock" id="stock" name="old_stock" readonly>


                    </div>
                </div>

                <div class="col-lg-1">
                    <label>Quantity</label>
                    <div class="form-group mb-1">

                        <input type="text" class="form-control " id="qty" name="stock" required>

                    </div>
                </div>
                <div class="col-lg-1">
                    <label>Price</label>
                    <div class="form-group mb-1">


                        <input type="text" class="form-control price" id="price" name="price" readonly>
                    </div>
                </div>
                <div class="col-lg-1">
                    <label>Total Price</label>
                    <div class="form-group mb-1">
                        <input type="text" class="form-control" id="result" name="total_price" readonly>
                        <!--<span class="form-control" id="result" ></span>-->

                    </div>

                </div>


                <div class="col-lg-1">
                    <label></label>
                    <div class="form-group mb-1 pt-1 ">
                        <button type="submit" class="btn btn-primary ">{{ __('Submit') }}</button>
                    </div>
                </div>
            </div>


            {{--            <button type="button" onclick="cloneDiv()">+</button>--}}
        </form>
    </div>

@endsection


@section('script')
    <script type="text/javascript">
        //PRODUCT
        function get_product_id() {


            var product_id = $('#product_id').val();


            $.ajax({
                type: "GET",
                url: "{{route('productinfo')}}",
                data: {
                    product_id: product_id,
                },
                dataType: 'html',
                cache: false,
                success: function (response) {
                    console.log(response);
                    var data = JSON.parse(response);


                    $('.stock').val(data.qty);

                }
            });

            $.ajax({
                type: "GET",
                url: "{{route('product_price')}}",

                data: {
                    product_id: product_id,
                },
                dataType: 'html',
                cache: false,
                success: function (response) {
                    // alert(response);
                    var data = JSON.parse(response);
                    $('.price').val(data.purchase_price);

                }
            });

            $('#variant_id').html('');

            $.ajax({
                type: "GET",
                url: "{{route('product_variant')}}",
                data: {
                    product_id: product_id,
                },
                // dataType: 'json',
                dataType: 'html',
                cache: false,
                success: function (response) {

                    var data = JSON.parse(response);


                    $('#variant_id').html('<option value="">Select Variant</option>');
                    // $.each(response.variants, function (key, value) {
                    //     $("#variant_id").append('<option value="' + value.id + '">' + value.variant+ '</option>');
                    // });


                    $.each(data, function (key, value) {
                        $("#variant_id").append('<option value="' + value.variant + '">' + value.variant + '</option>');
                    });

                }


            });


        }


        $(document).ready(function () {


            $("#qty").keyup(function () {
                stock = document.getElementById("stock").value;

                qty = document.getElementById("qty").value;
                price = document.getElementById("price").value;
                document.getElementById("result").value = qty * price;


            });

        });
        var originalDiv = document.getElementById("originalDiv");

        function cloneDiv() {
            var clone = originalDiv.cloneNode(true); // true indicates a deep clone, including child elements
            var timestamp = Date.now(); // Get a unique timestamp
            var cloneId = "cloneDiv_" + timestamp; // Create a unique ID for the clone
            clone.setAttribute("id", cloneId); // Set the ID attribute of the clone
            originalDiv.appendChild(clone); // Append the clone to the document body or another parent element
        }

    </script>
@endsection