@extends('user-layouts.user_template')
@section('content')
    <style>
        @media screen and (min-width: 768px){
            .container .jumbotron, .container-fluid .jumbotron {
                padding-right: 15px;
                padding-left: 15px;
            }
        }
        .container .jumbotron, .container-fluid .jumbotron{
            border-radius: 0px;
        }

    
        .jumbotron {
            padding-top: 20px;
            padding-bottom: 20px;
            background-image: url("{{asset('public/images/teamstore') . '/' . $store_array[0]->StoreUrl . '/' . $store_array[0]->StoreBanner }}");
            background-color: #f3f3f3;
            background-position: center;
            background-size: cover;
            width: 100%;
            height: 128px;
        }
        
        .store-name{
            
            background-color: #ffffff;
            position: absolute;
            padding: 10px;

        }

        @media (min-width: 200px) {
            .jumbotron { height: 50px; }
        }
        
        @media (min-width: 400px) {
            .jumbotron { height: 57px; }
        }

        @media (min-width: 768px) {
            .jumbotron { height: 100px; }
        }

        @media (min-width: 992px) {
            .jumbotron { 
                height: 128px;
                /* width: 1140px;  */
            }
        }

        .product-name-holder{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <div class="content-wrapper" style="min-height: 916px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Store Setting
                <!-- <small>Control panel</small> -->
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url ('user') }}"><i class="fa fa-home"></i> Home</a></li>
                <li class="active">Store Setting</li>
               
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <!-- <div class="box box-primary"> -->
                        <!-- <div class="box-header with-border">
                            <h3 class="box-title">
                                Add New Address
                            </h3>
                        </div> -->
                        <div class="nav-tabs-custom">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab_preview" data-toggle="tab" aria-expanded="true">Preview</a></li>
                                <li class=""><a href="#tab_update_details" data-toggle="tab" aria-expanded="false">Update Details</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab_preview">
                                    <form role="form" id="frm-create-address-book">
                                        <div class="box-body">
                                            
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label>Store Banner</label>
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                
                                                                <div class="jumbotron">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Store Avatar</label>
                                                        <a class="thumbnail" href="#">
                                                            <img class="store-logo" src="{{asset('public/images/teamstore') . '/' . $store_array[0]->StoreUrl . '/' . $store_array[0]->StoreLogo  }}">
                                                        </a>
                                                    </div>
                                                    <!-- /.box-body -->
                                                </div>
                                                <div class="col-md-8">
                                                    <div class="form-group">
                                                        <label>Store Name</label>
                                                        <h1>{{  $store_array[0]->StoreName }}</h1>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Password Protected</label>
                                                        @if($store_array[0]->Password != null)
                                                            <div class="badge">Yes</div>
                                                        @else
                                                            <div class="badge">No</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="box-footer">
                                            <button type="submit" class="btn btn-primary btn-custom-save">Save</button>
                                        </div> -->
                                    </form>
                                </div>
                                <!-- /.tab-pane -->
                                <div class="tab-pane" id="tab_update_details">
                                b
                                </div>
                                <!-- /.tab-pane -->
                            </div>
                            <!-- /.tab-content -->
                        </div>
                    <!-- <div> -->
                </div>
            </div>
        </section>
    <!-- /.content -->
    </div>
@endsection