@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>
                Add Store Item
            </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">Add new Item</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <form id="frm-add-item">
                <div class="row">
                    <div class="col-md-7">
                        <div class="box box-primary">
                            <div class="box-body custom-box-body">
                                <div class="row">
                                    <div class="col-md-12" id="main_thumbnail_uploader">
                                        <div style="min-height:500px;">
                                            <input type="file" id="imgupload" name="imgupload[]" style="display:none;" multiple accept="image/*"/> 
                                            <a href="#" id="OpenImgUpload"  style="position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);" >
                                                <i style="font-size: 125px;" class="fa fa-picture-o"></i>
                                                <div class="text-center"> Add item image(s)</div>
                                                <!-- <div class="gallery"></div> -->
                                            </a>
                                        </div>
                                    </div>
                                    <!-- image preview  -->
                                    <div class="col-md-12" id="upload_thumbnail_preview" style="display:none;">
                                        <div class="row">
                                            <div class="col-md-12 text-center">
                                                <img style="height:400px" src="#" id="main-thumbnail">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <ul class="hide-bullets small-preview-thumb">
                                                    <!-- <li class="col-sm-3 col-xs-3">
                                                        <a href="#" class="text-center thumbnail a_thumbnail" id="OpenImgUpload2">
                                                            <i style="font-size: 70px;" class="fa fa-picture-o"></i>
                                                            <div class="text-center"> Add more image(s)</div>
                                                        </a>
                                                    </li> -->
                                                </ul>       
                                            </div>
                                        </div>
                                    </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>
                            <div class="box-body custom-box-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="hidden" class="form-control" name="templateCode" value="manual_upload">
                                        <input type="hidden" class="form-control" name="designCode" value="manual_upload">
                                        <div class="form-group">
                                            <div id="add_item_response_msg"></div>
                                        </div>
                                    
                                        <div class="form-group">
                                            <label>Item Name</label>
                                            <input type="text" class="form-control" id="itemName" name="itemName"  placeholder="Item Name">
                                        </div>
                                        <div class="form-group">
                                            <label>Item Desription</label>
                                            <textarea  class="form-control" name="itemDescription"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>Item Price</label>
                                            <input id="item_price" name="itemPrice" class="form-control price_format" type="text" 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">Jersey and Shorts Form</option>
                                                <option value="tshirt-form">T-Shirt Form</option>
                                                <option value="quantity-form">Quantity Form</option>
                                                <option value="name-number-form">Name and Number Form</option>
                                                <option value="name-number-size-form">Name, Number and Size Form</option>
                                                <option value="number-form">Number Only Form</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>Item URL</label>
                                            <div class="input-group">
                                                <span class="input-group-addon" id="basic-addon3">{{ url() . "/teamstore/" . $store_array[0]->StoreUrl . '/'}}</span>
                                                <input type="text" class="form-control" id="product_url" name="itemUrl" aria-describedby="basic-addon3" data-error="#err-itemUrl" >
                                            </div>
                                            <span id="err-itemUrl"></span> 
                                        </div>
                                        <div class="form-group">
                                            <label>Item Privacy</label>
                                            <select class="form-control" name="itemPrivacy">
                                                <option value="private">Private</option>
                                                <option value="public">Public</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-footer">
                                <!-- <button type="submit" class="btn btn-default">Cancel</button> -->
                                <button type="submit" id="btn_submit_new_item" class="btn btn-primary pull-right">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </section>
    <!-- /.content -->
    </div>
@endsection