@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12 col-md-offset-0">
            <div class="panel panel-default">
                <div class="panel-heading"><h3>Add New Product</h3></div>
                    
                <div class="panel-body">

                    @if (Auth::check())
                    <form id="insertForm" method="POST"  >
                        <meta name="csrf-token" content="{{ csrf_token() }}">
                        <div class="row">
                            <div class="col-md-2" align="right" style="margin-top:5px">Product Code</div>
                            <div class="col-md-3" ><input type="text" class="form-control" id="product_code" name="product_code"></div>
                        </div><br>

                        <div class="row">
                            <div class="col-md-2" align="right" style="margin-top:5px">Description</div>
                            <div class="col-md-3" ><input type="text" class="form-control" id="description" name="description"></div>
                        </div><br>

                        <div class="row">
                            <div class="col-md-2" align="right" style="margin-top:5px">Monthly Charge</div>
                            <div class="col-md-3" ><input type="text" class="form-control" id="monthly_charge" name="monthly_charge"></div>
                        </div><br>

                        <div class="row">
                            <div class="col-md-2" align="right" style="margin-top:5px">Metadata</div>
                            <div class="col-md-3" ><input type="text" class="form-control" id="metadata" name="metadata"></div>
                        </div><br>
                        
                        <div class="row">
                            <div class="col-md-2" ></div>
                            <div class="col-md-3" ><input type="submit" class="btn btn-primary" name="btn-submit" value="Add Product"></div>
                        </div> 
                    
                        <input type="hidden" id="product_type" name="product_type" value="product">
                        
                    </form>  

                    <div id="your-updated-view-container">
                        <div class="col-md-12"><h3>View All Products</h3></div>

                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-3">Product Code</div>
                                    <div class="col-md-3">Description</div>
                                    <div class="col-md-3">Monthly Charge</div>
                                    <div class="col-md-3">Metadata</div>
                                </div>
                                @foreach($product as $row)
                                    <div class="row">
                                        <div class="col-md-3">{{$row->product_code}}</div>
                                        <div class="col-md-3">{{$row->description}}</div>
                                        <div class="col-md-3">{{$row->monthly_charge}}</div>
                                        <div class="col-md-3">{{$row->metadata}}</div>
                                    </div>
                                @endforeach
                                
                            </div>
                    </div>

                    @else
                        User is not authenticated
                    @endif

                    
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#insertForm').submit(function(event) {
        event.preventDefault();
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });

        //alert($('#first_name').val())
        $.ajax({
            url: "{{ url('insert-product') }}", // Replace with your route name
            type: 'POST',
            data: {
                _token: csrfToken,
                product_code: $('#product_code').val(),
                description: $('#description').val(),
                monthly_charge: $('#monthly_charge').val(),
                metadata: $('#metadata').val(),
                product_type: $('#product_type').val()
            },
            success: function(response) {
                // Handle the response, e.g., display a success message
                //console.log(response);
                //alert(response)
                view_product();
            }
        });
    });

    function view_product(){
       
        $.ajax({
            url: "{{url('get-product') }}", // Replace with your data retrieval endpoint
            type: 'GET',
            success: function(data) { 
                // Update your view with the retrieved data
                $('#your-updated-view-container').html(data.view);
            },
            error: function(xhr) {
                // Handle errors
            }
        });
    }

    

});
</script>
@endsection