@extends('user-layouts.user_template')
@section('content')
    <style>
        .hide-bullets {
            list-style:none;
            margin-left: -40px;
            margin-top:20px;
        }
    </style>
    <div class="content-wrapper" style="min-height: 916px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Store Item
                <small>{{ $product_array[0]->ProductName }}</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url('user') }}"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="{{ url('user/store-items') }}"><i class="fa fa-th"></i> Store Items</a></li>
                <li class="active">{{ $product_array[0]->ProductName }}</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-7">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <button type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal">Re-arrange / Delete thumbnail</button>
                            <button type="button" class="btn btn-danger pull-right" id="btn_delete_store_id" style="margin-right: 5px;" data-id="{{ $product_array[0]->Id }}">Delete this Item</button>
                        </div>
                        <div class="box-body custom-box-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-12 text-center">
                                            @foreach($thumbnails_array as $thumbnail)
                                                @if($thumbnail->ImageClass == 'active')  
                                                    <img style="height:400px" src="{{ config('site_config.prod_private_server_ip')  }}/images/{{ $thumbnail->Image . '?t=' . time() }}" id="main-thumbnail">
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <ul class="hide-bullets">
                                                <li class="col-sm-3 col-xs-4">
                                                    <a class="thumbnail btn-add-thumbnail" style="border-bottom-left-radius: 0px; border-botomt-right-radius: 0px; margin-bottom: -28px; cursor: pointer;">
                                                        <!-- <span class="close">&times;</span> -->
                                                        <img class="img img-responsive product-center " style="height: 65.45px;" src="{{ asset('/public/images/add-new-img.svg') }}"/>
                                                        <!-- <p class="center">Add Image</p> -->
                                                        <p class="text-center">
                                                            Add Image
                                                        </p>
                                                    </a>
                                                </li>
                                                @foreach($thumbnails_array as $thumbnail)
                                                    <li class="col-sm-3 col-xs-4">
                                                        <a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; margin-bottom: -28px;">
                                                            <!-- <span class="close">&times;</span> -->
                                                            <img class="img img-responsive product-center image-thumbnails" style="height: 59.45px;" src="{{ config('site_config.prod_private_server_ip')  }}/images/{{ $thumbnail->Image . '?t=' . time() }}"/>
                                                        </a>
                                                        <div class="funkyradio">
                                                            <div class="funkyradio-primary">
                                                                <input type="radio" id="{{ 'radio-' .$thumbnail->Id }}" data-product-id="{{ $product_array[0]->Id }}" data-id="{{ $thumbnail->Id }}" name="setActive" @if($thumbnail->ImageClass != null) checked @endif   />
                                                                <label for="{{ 'radio-' .$thumbnail->Id }}" style="border-top-left-radius: 0px; border-top-right-radius: 0px;">active</label>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>       
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="col-md-5">
                                    asdasdadadsaad
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">
                                Item Details
                            </h3>
                        </div>
                        <form id="frm-item-details">
                            <!-- <input type="hidden" name="design_code" class="form-control" value=""> -->
                            <div class="box-body custom-box-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="hidden" class="form-control" name="item_url" value="{{ $product_array[0]->ProductURL }}"  placeholder="Item Name">
                                        <div class="form-group">
                                            <label>Item Name</label>
                                            <input type="text" class="form-control" name="itemName" value="{{ $product_array[0]->ProductName }}"  placeholder="Item Name">
                                        </div>
                                        <div class="form-group">
                                            <label>Item Desription</label>
                                            <textarea  class="form-control" name="itemDescription">{{ $product_array[0]->ProductDescription }}</textarea>
                                        </div>
                                        <!-- <div class="form-group">
                                        
                                            <div class="checkbox checkbox-inline">
                                                <input type="checkbox" class="styled" id="sale_chk" name="sale_chk" checked >
                                                <label for="sale_chk"> Sell Item</label>
                                            </div>
                                        
                                            <div class="checkbox checkbox-inline">
                                                <input type="checkbox" class="styled" id="publish_chk" name="publish_chk" >
                                                <label for="publish_chk"> Publish Design</label>
                                            </div>
                                            
                                        </div> -->
                                        <div class="form-group">
                                            <label>Item Price</label>
                                            <input id="item_price" name="item_price" class="form-control price_format" type="text" value="{{ $product_array[0]->ProductPrice }}" data-error="#err-price" />  
                                        </div>
                                        <div class="form-group">
                                            <label>Item Form</label>
                                            <select class="form-control" name="itemForm">
                                                <option value="jersey-and-shorts-form" @if($product_array[0]->ProductForm == "jersey-and-shorts-form") selected  @endif>Jersey and Shorts Form</option>
                                                <option value="tshirt-form" @if($product_array[0]->ProductForm == "tshirt-form") selected  @endif>T-Shirt Form</option>
                                                <option value="quantity-form" @if($product_array[0]->ProductForm == "quantity-form") selected  @endif>Quantity Form</option>
                                                <option value="name-number-form" @if($product_array[0]->ProductForm == "name-number-form") selected  @endif>Name and Number Form</option>
                                                <option value="name-number-size-form" @if($product_array[0]->ProductForm == "name-number-size-form") selected  @endif>Name, Number and Size Form</option>
                                                <option value="number-form" @if($product_array[0]->ProductForm == "number-form") selected  @endif>Number Only Form</option>
                                                <option value="name-size-form" @if($product_array[0]->ProductForm == "name-size-form") selected  @endif>Name and Size Form</option>
                                                <option value="jersey-and-shorts-quantity-form" @if($product_array[0]->ProductForm == "jersey-and-shorts-quantity-form") selected  @endif>Jersey, Shorts and Quantity Form</option>
                                                <option value="number-jersey-shorts-form" @if($product_array[0]->ProductForm == "number-jersey-shorts-form") selected  @endif>Number, Jersey and Shorts Form</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>Available Size</label>
                                            <select class="form-control select2"  data-error="#err_available_size" data-placeholder="Select Size" name="available_size[]" multiple="multiple" required>    
                                                <option value="toddler" @if(in_array("toddler", $available_size)) selected  @endif>Toddler</option>
                                                <option value="youth" @if(in_array("youth", $available_size)) selected  @endif>Youth</option>
                                                <option value="adult" @if(in_array("adult", $available_size)) selected  @endif>Adult</option>
												<option value="mask" @if(in_array("mask", $available_size)) selected  @endif>Mask</option>
												<option value="gaiter" @if(in_array("gaiter", $available_size)) selected  @endif>Gaiter</option>
												<option value="buckethat" @if(in_array("buckethat", $available_size)) selected  @endif>Buckethat</option>
                                                <option value="none" @if(in_array("none", $available_size)) selected  @endif>None</option>
                                            </select>
                                            <span id="err_available_size"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Item Privacy</label>
                                            <select class="form-control" name="item_privacy">
                                                <option value="public"  @if($product_array[0]->PrivacyStatus == "public") selected  @endif>Public</option>
                                                <option value="private" @if($product_array[0]->PrivacyStatus == "private") selected  @endif>Private</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label>Select Shipping Category</label>
                                            <select class="form-control" name="shipping_cost" required>    
                                               <option value="0">None</option>
                                               @foreach ($shipping_cost as $sc)
                                                    <option value="{{ $sc->Id }}" @if($sc->Id == $product_array[0]->ShippingCostId) selected  @endif>{{ $sc->DisplayName }}</option>
                                               @endforeach
                                            </select>
                                            <span id="err_available_size"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-footer">
                                <!-- <button type="submit" class="btn btn-default">Cancel</button> -->
                                <button type="submit" class="btn btn-primary pull-right">Save changes</button>
                            </div>
                        </form>
                    </div>
                </div>

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

<!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Item Images</h4>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-condensed">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Image</th>
                            <th class="col-sm-2 text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody id="sortable">
                        @foreach($thumbnails_array as $thumbnail)
                           
                            <tr id="{{ 'item-' . $thumbnail->Id }}">
                                <td class="text-center" style="width: 50px"><i class="fa fa-bars"></i></td>
                                <td><img class="img img-responsive product-center" style="height: 59.45px;" src="{{ config('site_config.prod_private_server_ip')  }}/images/{{ $thumbnail->Image . '?t=' . time() }}"/></td>
                                <td class="text-center">
                                    <!-- <button class="btn btn-default btn-xs btn-edit-clipart" data-id="#"><i class="fa fa-edit"></i></button> -->
                                    <button class="btn btn-default btn-sm btn-delete-item-image" data-id="{{ $thumbnail->Id }}" data-filename="{{ $thumbnail->Image }}" title="Delete Image"><i class="fa fa-trash"></i></button>
                                </td>
                            </tr>
                        @endforeach
                           
                             
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="btn_save_thumbnail_sorting">Save Changes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        </div>
    </div>


    <div class="modal fade" id="modal_add_thumbnail" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="frm_add_new_images">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Add Image</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row grid-divider">
                            <div class="col-sm-4">
                                <div class="col-padding">
                                    <h3>Select Image(s)</h3>
                                    <div class="form-group">
                                        <input type="hidden" name="_id" value="{{ $product_array[0]->Id }}" />
                                        <input type="file" class="form-control" id="upload_images" name="upload_images[]" multiple accept="image/*"  />
                                    </div>
                                    <div class="form-group">
                                        <button type="button" id="clear_frm_add_new_images" class="btn btn-default btn-block">Clear</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-8">
                                <div class="col-padding">
                                    <h3>Preview</h3>
                                    <div class="col-md-12">
                                        <ul class="hide-bullets small-preview-thumb">
                                        </ul>       
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="btn_submit_new_item_image" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


@endsection