@extends('layouts.app')
@section('content')
    <div class="content-heading">Product #000123</div>
    <form class="card">
        <div class="ie-fix-flex" role="tabpanel">
            <ul class="nav nav-tabs nav-justified">
                <li class="nav-item" role="presentation"><a class="nav-link active" href="#edit" aria-controls="edit" role="tab" data-toggle="tab">Product Edit</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#seo" aria-controls="seo" role="tab" data-toggle="tab">SEO Metadata</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#picture" aria-controls="picture" role="tab" data-toggle="tab">Pictures</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="edit" role="tabpanel">
                    <fieldset>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label">Name:</label>
                            <div class="col-lg-10"><input class="form-control" type="text" placeholder="Product name.." /></div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label">Description:</label>
                            <div class="col-lg-10"><textarea class="form-control" cols="5" placeholder="Short description.."></textarea></div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label">Price:</label>
                            <div class="col-lg-10"><input class="form-control" type="text" placeholder="$ 123.20" /></div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label">Quantity:</label>
                            <div class="col-lg-10"><input class="form-control" type="number" placeholder="0" min="0" /></div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label">Tax :</label>
                            <div class="col-lg-10"><input class="form-control" type="text" placeholder="20%" /></div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label">Status:</label>
                            <div class="col-lg-10">
                                <select class="form-control">
                                    <option value="">Select..</option>
                                    <option value="0">Public</option>
                                    <option value="1">Pending</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="tab-pane" id="seo" role="tabpanel">
                    <fieldset>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label">Title</label>
                            <div class="col-lg-10"><input class="form-control" type="text" placeholder="Brief description.." /></div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label">Description</label>
                            <div class="col-lg-10"><textarea class="form-control" rows="5" placeholder="Max 255 characters..."></textarea></div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label">Keywords</label>
                            <div class="col-lg-10"><textarea class="form-control" rows="5" placeholder="Max 1000 characters..."></textarea></div>
                        </div>
                    </fieldset>
                </div>
                <div class="tab-pane" id="picture" role="tabpanel">
                    <div class="row mb-3">
                        <div class="col-3"><strong>Preview</strong></div>
                        <div class="col-9"><strong>Details</strong></div>
                    </div>
                    <div class="row mb-3 pb-3 bb">
                        <div class="col-6 col-md-3">
                            <a href="#" title="Product 1"><img class="img-fluid" src="/img/bg7.jpg" alt="Product 1" /></a>
                        </div>
                        <div class="col-6 col-md-9">
                            <fieldset>
                                <div class="form-group row"><input class="form-control" type="text" placeholder="Brief description.." /></div>
                            </fieldset>
                            <p><strong>Picture type</strong></p>
                            <div class="c-radio c-radio-nofont">
                                <label>
                                    <input type="radio" name="prod1-pic" value="option1" checked="" />
                                    <span></span>
                                    Primary
                                </label>
                            </div>
                            <div class="c-radio c-radio-nofont">
                                <label>
                                    <input type="radio" name="prod1-pic" value="option2" />
                                    <span></span>
                                    Thumbnail
                                </label>
                            </div>
                            <div class="c-radio c-radio-nofont">
                                <label>
                                    <input type="radio" name="prod1-pic" value="option3" />
                                    <span></span>
                                    Gallery
                                </label>
                            </div>
                            <div class="text-right">
                                <button class="btn btn-sm btn-danger" type="button">
                                    <em class="fa fa-times-circle fa-fw"></em>
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 pb-3 bb">
                        <div class="col-6 col-md-3">
                            <a href="#" title="Product 2"><img class="img-fluid" src="/img/bg8.jpg" alt="Product 1" /></a>
                        </div>
                        <div class="col-6 col-md-9">
                            <fieldset>
                                <div class="form-group row"><input class="form-control" type="text" placeholder="Brief description.." /></div>
                            </fieldset>
                            <p><strong>Picture type</strong></p>
                            <div class="c-radio c-radio-nofont">
                                <label>
                                    <input type="radio" name="prod2-pic" value="option1" checked="" />
                                    <span></span>
                                    Primary
                                </label>
                            </div>
                            <div class="c-radio c-radio-nofont">
                                <label>
                                    <input type="radio" name="prod2-pic" value="option2" />
                                    <span></span>
                                    Thumbnail
                                </label>
                            </div>
                            <div class="c-radio c-radio-nofont">
                                <label>
                                    <input type="radio" name="prod2-pic" value="option3" />
                                    <span></span>
                                    Gallery
                                </label>
                            </div>
                            <div class="text-right">
                                <button class="btn btn-sm btn-danger" type="button">
                                    <em class="fa fa-times-circle fa-fw"></em>
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 pb-3">
                        <div class="col-6 col-md-3">
                            <a href="#" title="Product 3"><img class="img-fluid" src="/img/bg10.jpg" alt="Product 1" /></a>
                        </div>
                        <div class="col-6 col-md-9">
                            <fieldset>
                                <div class="form-group row"><input class="form-control" type="text" placeholder="Brief description.." /></div>
                            </fieldset>
                            <p><strong>Picture type</strong></p>
                            <div class="c-radio c-radio-nofont">
                                <label>
                                    <input type="radio" name="prod3-pic" value="option1" checked="" />
                                    <span></span>
                                    Primary
                                </label>
                            </div>
                            <div class="c-radio c-radio-nofont">
                                <label>
                                    <input type="radio" name="prod3-pic" value="option2" />
                                    <span></span>
                                    Thumbnail
                                </label>
                            </div>
                            <div class="c-radio c-radio-nofont">
                                <label>
                                    <input type="radio" name="prod3-pic" value="option3" />
                                    <span></span>
                                    Gallery
                                </label>
                            </div>
                            <div class="text-right">
                                <button class="btn btn-sm btn-danger" type="button">
                                    <em class="fa fa-times-circle fa-fw"></em>
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="text-right mt-3">
        <button class="btn btn-warning mr-2" type="button">Discard</button>
        <button class="btn btn-success" type="button">Save</button>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')@endsection