@extends('layouts.master')
@section('title', 'User')
@push('css')

@endpush

@section('content')

    <div class="row">
        <div class="col-xl-12" style="margin-bottom: 10px;">
            <form class="form-inline">
                <div class="form-group">
                    <select data-placeholder="Choose a Country..."  name="category_name" class="chosen-select" id="product_id" tabindex="2">
                        @foreach($products as $product)
                            <option value="{{$product->id}}">{{$product->product_name}}</option>
                        @endforeach
                    </select>
                </div>

                <a class="btn btn-primary" type="submit" onclick="productByDamage()">Search</a>
            </form>
        </div>

    </div>
        <div class="">
            <h3 class="panel-title">product Information</h3>
        </div>
        <div class="col-xl-12" id="productByDamageShow">
            <div id='loader' style='display: none;text-align: center'>
                <img src='site_image/64x64.gif' width='32px' height='32px'>
            </div>

        </div>
    </div>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        var table = $('#example').DataTable( {
            lengthChange: false,
            buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
        } );

        table.buttons().container()
            .appendTo( '#example_wrapper .col-md-6:eq(0)' );
    } );
</script>
<script>
    function productByDamage() {
        let product_id = $('#product_id').val();

        $.ajax({
            url: '/administration/productByDamage/' + product_id ,
            type: 'GET',
            beforeSend  : function() {
                $('#productByDamageShow').html('');
                $("#loader").show();
            },
            success:(function(response) {
                console.log(response);
                $('#productByDamageShow').html(response);
            }),
            complete:function(response){
                $("#loader").hide();
            }
        })

    }
</script>
@endpush