@extends('layouts.app')
@section('title', __('product.view_new_product'))

    @section('content')

        @include('layouts.partials.breadcrumb',['page_title'=> __( 'product.view_product') , 'bread_crumbs'=>array( array('title'=>__('product.products'),'url'=>'/products'),array('title'=> __('product.view_new_product'),'url'=>''))])


        <!-- Main content -->
        <section class="content">
            <div class="box">
                <div class="">
                    @php
                        $form_class = empty($duplicate_product) ? 'create' : '';
                        $is_image_required = !empty($common_settings['is_product_image_required']);
                @endphp

                @component('components.widget', ['title' => __('product.single_product_info'),'class' => '','icon'=>'<i class="mdi mdi-package"></i>',])

                    <div class="row">
                        <div class="col-md-4 col-sm-6">
                            <div class="box box-body b-1 text-center no-shadow">
                                <img src="{!! $product->image_url !!}" id="product-image" class="img-fluid" alt="">

                            </div>
                                                    </div>

                        <div class="col-md-8 col-sm-6">
                            <h2 class="box-title mt-0">{{ $product->name }}</h2>
                                                        <hr>

                            
                                                        <h4 class="box-title mt-10">General Info</h4>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <tbody>
                                    <tr>
                                        <th style="width: 190px;">Product Brand</th>
                                        <td> {{ $product->brand->name ?? '--'}} </td>

                                        <th style="width: 190px;">Product Barcode Type</th>
                                        <td> {{ $product->barcode_type }} </td>
                                    </tr>
                                    <tr>
                                        <th>Product Category</th>
                                        <td> {{ $product->category->name ?? '--' }} </td>

                                        <th>Product Sub Category</th>
                                        <td> {{ $product->sub_category->name ?? '--' }}  </td>
                                    </tr>
                                    <tr>
                                        <th>Product Unit</th>
                                        <td> {{ $product->unit->actual_name ?? '--' }} </td>

                                        <th>Product SKU</th>
                                        <td> {{ $product->sku }} </td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>
                            <hr>
                            <h4 class="box-title mt-10">Product Description</h4>
                            <p>{{ $product->product_description }}</p>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">

                        </div>
                    </div>
                @endcomponent


            </div>

            <div class="box-footer text-start">


            </div>
        </div>


    </section>
    <!-- /.content -->

@endsection

@section('javascript')
    @php $asset_v = env('APP_VERSION'); @endphp
    <script src="{{ asset('js/product.js?v=' . $asset_v) }}"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            __page_leave_confirmation('#product_add_form');
            onScan.attachTo(document, {
                suffixKeyCodes: [13], // enter-key expected at the end of a scan
                reactToPaste: true, // Compatibility to built-in scanners in paste-mode (as opposed to keyboard-mode)
                onScan: function (sCode, iQty) {
                    $('input#sku').val(sCode);
                },
                onScanError: function (oDebug) {
                    console.log(oDebug);
                },
                minLength: 2,
                ignoreIfFocusOn: ['input', '.form-control']
                // onKeyDetect: function(iKeyCode){ // output all potentially relevant key events - great for debugging!
                //     console.log('Pressed: ' + iKeyCode);
                // }
            });
        });
    </script>
    <script src="{{asset('theme/js/pages/validation.js')}}"></script>
    <script src="{{asset('theme/js/pages/form-validation.js')}}"></script>
@endsection