@extends('layouts.admin.app')

@section('content')

<style>
    .pdT{
        padding: 20px;
    }
</style>

<!-- Page Wrapper -->
<div class="page-wrapper">
	<!-- Page Content -->
    <div class="content container-fluid">
        <div class="crms-title row bg-white">
            <div class="col">
                <h3 class="page-title m-0">
                <span class="page-title-icon bg-primary text-white mr-2">
                    <i class="fa fa-user-o" aria-hidden="true"></i>
                </span>Products Details</h3>
            </div>
            <div class="col text-right">
                <ul class="breadcrumb bg-white float-right m-0 pl-0 pr-0">
                    <li class="breadcrumb-item"><a href="{{url('/admin/home')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Product</li>
                </ul>
            </div>
        </div>
        
        <!-- Page Header -->
        <div class="page-header pt-3 mb-0 ">
            <div class="row">
                <div class="col"> 
                </div>
                <div class="col text-right">
                    <ul class="list-inline-item pl-0">
                        <li class="list-inline-item">
                            <a href="{{ route('products.index') }}" class="add btn btn-primary font-weight-bold text-white todo-list-add-btn btn-rounded">Back</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /Page Header -->
        
        <!-- Content Starts -->
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-0">
                    @if ($message = Session::get('error'))
                        <div class="alert alert-danger alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>	
                                <strong>{{ $message }}</strong>
                        </div>
                    @endif

                    @if ($message = Session::get('success'))
                        <div class="alert alert-success alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>	
                                <strong>{{ $message }}</strong>
                        </div>
                    @endif
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 pdT">
                                <b>Product Code</b>: {{ $productData['product_id'] }}
                            </div>
                            <div class="col-md-4 pdT">
                                <b>Product Name</b>: {{ $productData['product_name'] }}
                            </div>
                            <div class="col-md-4 pdT">
                                <b>Category</b>: {{ $productData['category_name'] }}
                            </div>
                            <div class="col-md-4 pdT">
                                <b>Sub Category</b>: {{ $productData['child_category_name'] }}
                            </div>
                            <div class="col-md-4 pdT">
                                <b>Regular Price</b>: ${{ $productData['regular_price'] }}
                            </div>
                            <div class="col-md-4 pdT">
                                <b>Selling Price</b>: ${{ $productData['selling_price'] }}
                            </div>
                            <div class="col-md-4 pdT">
                                @if ($productData['status'] === 1)
                                    <span class="badge badge-success">Active</span>
                                @else
                                    <span class="badge badge-warning">In-active</span>
                                @endif
                            </div>
                            <div class="col-md-6 pdT">
                                <img src="{{ URL::asset('storage/product/thumbnail/'. $productData['product_image']) }}" height="80" width="80">
                            </div>
                        </div>
                        <hr>
                        <h4>Manage Attributes</h4>
                        <form name="attributeForm" id="attributeForm" method="post" action="{{ url('admin/add-attributes/'.$productData['id']) }}">@csrf
                            <input type="hidden" name="product_id" value="{{ $productData['id'] }}">        
                            <div class="form-group fieldGroup">
                                <div class="row">
                                    <div class="col-md-2">
                                        <input type="text" name="color[]" class="form-control" placeholder="Color"/>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="text" name="size[]" class="form-control" placeholder="Enter size"/>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="number" name="price[]" class="form-control" placeholder="Enter price" required/>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="text" name="sku[]" class="form-control" placeholder="Enter sku" required/>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="text" name="stock[]" class="form-control" placeholder="Enter stock" required/>
                                    </div>
                                    <div class="col-md-2 input-group-addon"> 
                                        <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
                                    </div>
                                </div>
                            </div>
                            
                            <input type="submit" name="submit" class="btn btn-primary" value="Save"/>
                            
                        </form>

                        <!-- copy of input fields group -->
                        <div class="form-group fieldGroupCopy" style="display: none;">
                            <div class="row">
                                <div class="col-md-2">
                                    <input type="text" name="color[]" class="form-control" placeholder="Color"/>
                                </div>
                                <div class="col-md-2">
                                    <input type="text" name="size[]" class="form-control" placeholder="Enter size"/>
                                </div>
                                <div class="col-md-2">
                                    <input type="number" name="price[]" class="form-control" placeholder="Enter price"/>
                                </div>
                                <div class="col-md-2">
                                    <input type="text" name="sku[]" class="form-control" placeholder="Enter sku"/>
                                </div>
                                <div class="col-md-2">
                                    <input type="text" name="stock[]" class="form-control" placeholder="Enter stock"/>
                                </div>
                                <div class="col-md-2 input-group-addon"> 
                                    <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- /Content End -->
        <hr>

        <div class="row mt-3">
            <div class="col-md-12">
                <div class="card mb-0">
                    <div class="card-body">
                        <h4>Added Attributes</h4>
                        <div class="table-responsive">
                        <form name="editAttributeForm" id="editAttributeForm" method="post" action="{{ url('admin/edit-attributes/'.$productData['id']) }}">@csrf
                            <table class="table table-striped table-nowrap custom-table mb-0 datatable">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Color</th>
                                        <th>Size</th>
                                        <th>SKU</th>
                                        <th>Price</th>
                                        <th>Stock</th>
                                        <!--<th>Action</th>-->
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($productData['productattributes'] as $productattributes)
                                    <input type="text" name="attrId[]" value="{{$productattributes['id']}}" style="display:none">
                                    <tr>
                                        <td>{{$productattributes['id']}}</td>
                                        <td>{{$productattributes['color']}}</td>
                                        <td>{{$productattributes['size']}}</td>
                                        <td>{{$productattributes['sku']}}</td>
                                        <td>
                                            <input type="number" name="price[]" value="{{$productattributes['price']}}" />
                                        </td>
                                        <td>
                                            <input type="number" name="stock[]" value="{{$productattributes['stock']}}" />
                                        </td>
                                        <!--<td>-->
                                        <!--    <a href="{{ url('admin/delete-attributes/'.$productData['id']) }}"><i class="fa fa-trash" aria-hidden="true"></i></a>-->
                                        <!--</td>-->
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <input type="submit" class="btn btn-primary" value="Update" /><br><br>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <!-- /Page Content -->
    
</div>
<!-- /Page Wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //group add limit
    var maxGroup = 10;
    
    //add more fields group
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+maxGroup+' groups are allowed.');
        }
    });
    
    //remove fields group
    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
});
</script> 

@endsection