@extends('layouts.admin')
@section('title', 'Brand | Mintavia Admin')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Create Store Products</h3>
                    <div class="ml-auto">
                        <a href="{{route('admin.storeproducts.index')}}">
                            <button class="btn btn-sm btn-flat shadow rounded-0 btn-danger"><i
                                    class="fa fa-arrow-circle-left"></i> Back
                            </button>
                        </a>
                    </div>
                </div>
                <form action="{{route('admin.storeproducts.store')}}" method="post" enctype="multipart/form-data">
                @csrf
                <!-- /.card-header -->
                    <div class="card-body">
                        <div class="form-group">
                            <x-admin-input label="Select Product" type="select" id="products" name="product_id" class="js-select2" >
                                @foreach($products as $product)
                                    <option data-sale-price="{{$product->sale_price}}" value="{{$product->id}}">{{$product->barcode.' - '.$product->product_name}}</option>
                                @endforeach
                            </x-admin-input>
                        </div>
                        <div class="form-group">
                            <x-admin-input label="Select Sale Type" type="select" id="products" name="sale_type_id" class="js-select2" >
                                @foreach($saleTypes as $type)
                                    <option value="{{$type->id}}">{{$type->name}}</option>
                                @endforeach
                            </x-admin-input>
                        </div>
                        <div class="form-group">
                            <x-admin-input type="number" label="Sale Price" id="sale-price" name="saleprice" step=".01" />
                        </div>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <button class="btn btn-success" type="submit">Create</button>

                    </div>
                </form>

            </div>
            <!-- /.card -->
        </div>
    </div>
@endsection

@section('js')
    <script src="{{asset('js/myfunc.js')}}"></script>
    <script>

        $(document).ready(function () {
            $('#products').on('change', function () {
                $sel = $("#products option:selected").attr('data-sale-price')
                $('#sale-price').val($sel)
            })
            $sel = $("#products option:selected").attr('data-sale-price')
            $('#sale-price').val($sel)
            $('.js-select2').select2({
                width: '100%'
            });
        });
    </script>
@endsection