@extends('admin.layouts.app')

@section('title', 'Product View')

@section('content')

<div class="top_bar page-content">
    <!-- LOADER -->
    <div class="loader">
        <div class="top_status_bar load">
            <div class="progress_bar bar" style="left: 0px;">
            </div>
        </div>
    </div>
    <!-- END LOADER -->
    <!-- BREADCRUMBS -->
    <div class="breadcrumbs">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Product</a></li>
        <li><a href="#" class="breadcrumb_link lead_name" onclick="return false">{{ !empty($show->name) ? $show->name : '' }}</a>
        </li>
    </ul>
        <button class="btn btn-large pull-right help help_btn theme_btn">?</button>
    </div>
    <!-- END BREADCRUMBS -->
</div>

<div class="page-content">
    <div class="row">
        <div class="col-md-12">
            <!-- Begin: life time stats -->
            <div class="portlet">
                <div class="portlet-title">
                <div class="caption">
                    <h2>Product View</h2>
                    <span class="subtitle">View and manage a product in detail, you will get a 360 degree view on the product, communication and any notes recorded.</span>
                </div>
                </div>
                <div class="portlet full_wrap">
                    <div class="row form-group full_wrap_row">
                        <!--LEFT SECTION ALL-->
                        <div class="col-md-12 pl_pr_0">
                            <div class="col-md-9">
                                <!--OVERVIEW SECTION -->
                                <div class="overview_section">
                                    <div class="row">
                                        <div class="col-md-12 pl_pr_0">
                                            <div class="portlet-body updating">
                                                <!--LEFT SECTION DP-->
                                                <div class="col-md-2 left_profile eql-jscol">
                                                    <div class="wrap_left_profile">
                                                        <!--IMAGE-->
                                                        <div class="img_wrap">
                                                            <div class="dp_name no_img">
                                                                @if(!empty($show->name))
                                                                    @php 
                                                                    $name = $show->name;
                                                                    $name_upper = strtoupper($name);
                                                                    $name=explode(" ",$name_upper);
                                                                    @endphp

                                                                    @if(!empty($name[0]))
                                                                        @if(!empty($name[1]))
                                                                        {{ $name[0][0].$name[1][0] }}
                                                                        @else
                                                                        {{ $name[0] }}
                                                                        @endif
                                                                    @else
                                                                        {{ 'N/A' }}
                                                                    @endif
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="contact_type">
                                                            <span class="yellow_btn">{{ !empty($show->product_code) ? $show->product_code : '' }}</span>
                                                        </div>
                                                        <!--IMAGE-->
                                                    </div>
                                                    
                                                </div>
                                                <!--LEFT SECTION DP-->
                                                <div class="col-md-10 middle_overview eql-jscol pl_pr_0">
                                                    <div class="wrap_middle_overview">
                                                        <!--TOP INTRO SECTION-->
                                                        <div class="top_intro">
                                                            <div class="row">
                                                                <div class="col-md-8 contact_info">
                                                                    <h2 class="business_name">
                                                                        <span class="opportunity_name object_name">{{ !empty($show->name) ? $show->name : '' }}</span>
                                                                    </h2>
                                                                    <!-- <span class="company width_100_percent">King Co-operate Solutions</span> -->
                                                                </div>
                                                                <div class="col-md-4 contact_action_grey" style="display: block;">
                                                                    <div class="actions_dropdown_grey hide_important" style="height: 32px; display: block;">
                                                                        <span>Opportunity Option</span>
                                                                        <ul class="actions_list_grey">
                                                                            <li class="follow" data-staff_uuid="" data-uuid="">
                                                                                Follow
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>	
                                                        <!--TOP INTRO SECTION-->

                                                        <!--MIDDLE DETAIL INFO SECTION-->
                                                        <div class="content_detail_info">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                <div class="col-md-2">Product Id</div>
                                                                    <div class="col-md-4 email_clr">
                                                                        <span class="email">{{ !empty($show->product_code) ? $show->product_code : '' }}</span>
                                                                    </div>
                                                                    <div class="col-md-2">Product Name</div>
                                                                    <div class="col-md-4 email_clr">
                                                                        <span class="email">{{ !empty($show->name) ? $show->name : '' }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                <div class="col-md-2">Vendor</div>
                                                                    <div class="col-md-4">
                                                                        <span class="department">{{ !empty($show->vendor) ? $show->vendor : '' }}</span>
                                                                    </div>
                                                                    <div class="col-md-2">Description</div>
                                                                    <div class="col-md-4">
                                                                        <span class="staff_country">{{ !empty($show->description) ? $show->description : '' }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                <div class="col-md-2">Supplier</div>
                                                                    <div class="col-md-4">
                                                                        <span class="mobile">{{ !empty($suppliers) ? $suppliers->title." ".$suppliers->fname." ".$suppliers->lname : " " }}</span>
                                                                    </div>
                                                                    <div class="col-md-2">Category</div>
                                                                    <div class="col-md-4">
                                                                        <span class="staff_state">{{ !empty($categories) ? $categories->title : " " }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                <div class="col-md-2">Cost</div>
                                                                    <div class="col-md-4">
                                                                        <span class="contact_address">{{ !empty($show->purchase_price) ? $show->purchase_price : '' }}</span>
                                                                    </div>
                                                                    <div class="col-md-2">Tags</div>
                                                                    <div class="col-md-4">
                                                                        
                                                                        <span class="staff_city">{{ $tag_title }}</span>
                                                                        
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                <div class="col-md-2">Purchase VAT</div>
                                                                    <div class="col-md-4">
                                                                        <span class="contact_zip_code">{{ !empty($purchase_vats) ? $purchase_vats->name."(".$purchase_vats->vat.")": " " }}</span>
                                                                    </div>
                                                                    <div class="col-md-2">SKU</div>
                                                                    <div class="col-md-4">{{ !empty($show->sku) ? $show->sku : '' }}</div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                
                                                                    <a href="" data-href="{{ route('admin.product.edit', encrypt($show->id))}}" data-toggle="modal" data-target="#new_product">
                                                                        <span class="edit_link pull-right update_load_form"
                                                                        data-uuid="{{ $show->id }}">View &amp; Edit all fields</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--MIDDLE DETAIL INFO SECTION-->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--END OVERVIEW SECTION -->

                                <!--START TAB SECTION -->
                                <div class="row">
                                    <!--LOG TABS-->
                                    <div class="right_tabs">
                                        <div class="tabs_plus_wrap">
                                            <div class="tabs_plus_view action_convo tabs pull-right">
                                                <span class="tabs_option dots_menu_grey"><i class="fa fa-plus-circle"></i></span>
                                                <ul class="dropdown_row tabs_drop_view">
                                                    <li>
                                                        <a href="javascript:void(0);" onClick="uploadModal('new_note_file')" data-toggle="modal" data-target="#new_note_file" data-uuid="{{$show->product_uuid}}" data-related_to="Product"
                                                            data-name="{{$show->name}}"class="dropdown_row_option new_note" >New Note</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="tabbable-line">
                                            <ul class="nav nav-tabs">
                                                <li class="images active">
                                                    <a href="#tab_images" data-toggle="tab" aria-expanded="true">IMAGES</a>
                                                </li>
                                                <li class="files">
                                                    <a href="#tab_files" data-toggle="tab" aria-expanded="true">FILES </a>
                                                </li>
                                                <li class="notes">
                                                    <a href="#tab_notes" data-toggle="tab" aria-expanded="true">NOTES</a>
                                                </li>
                                                
                                                
                                            </ul>
                                            <div class="tab-content">
                                          
                                        
                                                                
                                        
                                                <div class="tab-pane" id="tab_files">
                                                    @include('admin.bottom.files')
                                                </div>

                                                <div class="tab-pane active" id="tab_images">
                                                    @include('admin.bottom.product_images')
                                                </div>

                                                <div class="tab-pane note_tab" id="tab_notes">
                                                    @include('admin.bottom.notes')
                                                </div>
                                          
                                                
                                            
                                        <!--FILES-->            
                                        <!--FILES-->
                                        <!--Quotes TAB-->
                                        
                                    
                                        <div class="tab-pane" id="quotes_comp_section">
                                            <div class="component_wrap">
                                                <div class="no_record">
                                                    <div class="col-md-12">
                                                        <div class="convo_content_wrap">
                                                            <p>No record found!!!</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="each_task_row component_for_clone" style="border-bottom: 0">
                                            <div class="content_wrap">
                                                <div class="col-md-6">
                                                    <span class="component_name"></span>
                                                </div>
                                                <div class="col-md-6">
                                                    <span class="vendor_name"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Quotes TAB-->
                                        <!--NOTES TAB-->
                                        <div class="tab-pane" id="description">
                                            <div class="tabs_loader" style="display: none;">
                                                <i class="fa fa-spinner fa-spin" style="text-align: center; vertical-align: middle"></i>
                                            </div>
                                            <div class="lead_desc_wrap">
                                                <div class="each_note_row">
                                                    <div class="content_wrap">
                                                        <div class="col-md-11">
                                                            <p>Qterminals need customized online based SharePoint solution.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--NOTES TAB-->            
                                        <!--LOG TABS-->
                                        <!--LOG TABS-->
                                        <div class="tab-pane tab_logs" id="activities_section">
                                            <div class="tabs_loader" style="display: none;">
                                            <i class="fa fa-spinner fa-spin" style="text-align: center; vertical-align: middle"></i>
                                        </div>
                                            <!--ACTIVITIES SECTION -->
                                            <div class="activities_section">
                                                <div class="portlet-body tab_body_wrap">
                                                    <!--TOP HEADER-->
                                                    <div class="header_top_activities">
                                                        <div class="col-md-6">
                                                            <img src="images/star.png" class="msg_img">
                                                            <span class="semi_bold span_spaces">RECENT ACTIVITIES</span>
                                                        </div>
                                                        <div class="col-md-6 pl_pr_0">
                                                            <span class="total_convo pull-right limited_logs"> Recent <span class="loaded_total_logs">1</span> of 1 showing </span>
                                                            <span class="total_convo pull-right hide all_logs"> Showing 1 Records </span>
                                                            <input type="hidden" class="showing_total_logs" value="5">
                                                            <input type="hidden" class="counting_total_logs" value="1">
                                                        </div>
                                                    </div>
                                                    <!--TOP HEADER-->

                                                    <!--ACTIVITY ROWS-->
                                                    <div class="activity_row_wrap activity_row_wrap_list">
                                                        <div class="each_activity">
                                                            <div class="col-md-12">
                                                                <div class="convo_content_wrap">
                                                                    <div class="activity_content">
                                                                        <span class="activity_title">
                                                                            Email 
                                                                        </span>
                                                                        <span class="activity_details">
                                                                            Error: Problem connecting to ssl://smtp.gmail.com:587. Check server, port or ssl settings for your email server. - (Opportunity "Qterminals - Sharepoint Solutions" assigned to you.) at18 Nov 2019, 06:51 AM
                                                                        </span>
                                                                    </div>
                                                                    <span class="user_name"> Mr Greejo Job</span>
                                                                    <span class="last_updated">1 week ago</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                        <!--ACTIVITY ROWS-->
                                            </div>
                                        </div>
                                        <!--ACTIVITIES SECTION -->
                                        </div>
                                        <!--LOG TABS-->
                                        <div class="each_activity hide each_activity_clone">
                                            <div class="col-md-12">
                                                <div class="convo_content_wrap">
                                                    <div class="activity_content">
                                                        <span class="activity_title"></span>
                                                        <span class="activity_details"></span>
                                                    </div>
                                                    <span class="user_name"></span>
                                                    <span class="last_updated"></span>
                                                </div>
                                            </div>
                                        </div>            
                                        <!--LOG TABS-->
                                        <!--LOG TABS-->
                                        <!--LOG TABS-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--LEFT SECTION ALL-->
                        <!--RIGHT TAB SECTION ALL-->
                        <div class="col-md-3 pl_pr_0"></div>
                    </div>
                    <!-- RIGHT SECTION START -->
                    <div class="col-md-3 pl_pr_0 right_sidebar">
                        <div class="wrap_right_sidebar">
                            @foreach($quotes as $quote)
                            <div class="owner_info_sidebar quoteHeading">
                                <div class="owner_img_wrap dollarSign">
                                <i class="fa fa-usd" aria-hidden="true"></i>
                            </div>
                            <div class="owner_info">
                                
                                <h5 class="qNo">{{ $quote->quote_code }}</h5>
                            
                                <div class="quoteDetails">
                                    <div class="qoteName">
                                    <h6 class="qtName">{{ $quote->quote_title }}</h6>
                                    <h6 class="quotePrice">{{ number_format($quote->price,$amt_dec) }}</h6>
                                    </div>
                                    <div>Date :
                                    
                                        <span>{{ date('d-m-Y', strtotime($quote->quote_expiration)) }}</span>
                                    
                                    </div>
                                    <div>Quantity :
                                        
                                        <span>{{ $quote->quantity }}
                                    
                                    </div>
                                    </div>
                                    </div>
                                    </div>
                                    @endforeach
                        
                            </div>
                            <!-- RIGHT SECTION END -->
                        </div>
                    </div>
                    <!--MIDDLE SECTION -->
                </div>
            </div>
        </div>
        <!-- End: life time stats -->
    </div>
</div>
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END CRM CONTENT BODY -->
</div>
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true"
        data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true"
        data-animation="pop" data-timer="null">
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Are You Sure?</h2>
        <p>Your recently changed data in this model will be lost.</p>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>

<div id="new_product" class="new_modalRight modal scrollable right modal-fullscreen fade" role="dialog"
    aria-labelledby="myModalLabel2" style="display: none;" aria-hidden="true">
    <div class="sweet-overlay" tabindex="-1"></div>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">


        </div>
    </div>
</div>
@include('admin.common-modals.upload-file');

@include('admin.common-modals.note');

@include('admin.bottom.file_viewer');
@stop

@section('styles')
<link rel="stylesheet" href="{{ asset('intlTel/css/intlTelInput.css') }}">
<link rel="stylesheet" href="{{ asset('css/theme_custom.css') }}">
<style rel="stylesheet" type="text/css">
    .portlet-title {
        border-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .portlet {margin-bottom: 0 !important;}
    .spin_icon {top: 27px;}
    .middle_overview, .left_profile {height: auto;}
    .left_profile {
        border-right: 0;
        border-bottom: 0;
    }
    .middle_overview {border-left: 2px solid #f5f5f5;}
    .content_detail_info {padding: 26px 16px 0px;}
    /*Graph css*/
    .chart-text {
        /*font: 16px/1.4em "Montserrat", Arial, sans-serif;*/
        fill: #000;
        -moz-transform: translateY(0.25em);
        -ms-transform: translateY(0.25em);
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    .chart-number {
        font-size: 0.6em;
        line-height: 1;
        text-anchor: middle;
        -moz-transform: translateY(-0.25em);
        -ms-transform: translateY(-0.25em);
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    .chart-label {
        font-size: 0.2em;
        text-transform: uppercase;
        text-anchor: middle;
        -moz-transform: translateY(0.7em);
        -ms-transform: translateY(0.7em);
        -webkit-transform: translateY(0.7em);
        transform: translateY(0.7em);
    }
    figure {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        margin-left: -15px;
        margin-right: -15px;
    }
    @media (min-width: 768px) {
        figure {flex-direction: row;}
    }
    .figure-content, .figure-key {
        flex: 1;
        padding-left: 15px;
        padding-right: 15px;
        align-self: center;
    }
    .figure-content svg {height: auto;}
    .figure-key {min-width: calc(8 / 12);}
    .figure-key [class*="shape-"] {margin-right: 6px;}
    .figure-key-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .figure-key-list li {
        margin: 0 0 8px;
        padding: 0;
    }
    .shape-circle {
        display: inline-block;
        vertical-align: middle;
        width: 25px;
        height: 25px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .shape-new {background-color: #ffe54f;}
    .shape-completed {background-color: #b1c94e;}
    .shape-inprogress {background-color: #377bbc;}
    .shape-due {background-color: red;}
    .shape-onhold {background-color: #dd82ee;}
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
    .owner {padding: 0px 20px;}
    .ledger_wrap {position:relative;right: inherit;}
    .ledger_wrap .ledger {padding: 0 0 10px;width: 25%;}
    .ledger {float: left;text-transform: uppercase;}
    /* .new_box .clr_box, .new_list, .bar_list {background-color: #a394c1;}
    .contacted_box .clr_box, .contacted_list, .bar_contacted {background-color: #5988b4;}
    .assigned_box .clr_box, .assigned_list, .bar_assigned {background-color: #ebc4e0;}
    .readytoquote_box .clr_box, .readytoquote_list, .bar_readytoquote {background-color: #63d4e3;}
    .quoted_box .clr_box, .quoted_list, .bar_quoted {background-color: #f0ca44;}
    .lost_box .clr_box, .lost_list, .bar_lost {background-color: #ed9393;}
    .won_box .clr_box, .won_list, .bar_won {background-color: #9bd29b;} */

    .view_list:nth-child(1), .ledger:nth-child(1) .clr_box {background-color: #a394c1;}
    .view_list:nth-child(2), .ledger:nth-child(2) .clr_box {background-color: #5988b4;}
    .view_list:nth-child(3), .ledger:nth-child(3) .clr_box {background-color: #ebc4e0;}
    .view_list:nth-child(4), .ledger:nth-child(4) .clr_box {background-color: #63d4e3;}
    .view_list:nth-child(5), .ledger:nth-child(5) .clr_box {background-color: #f0ca44;}
    .view_list:nth-child(6), .ledger:nth-child(6) .clr_box {background-color: #ed9393;}
    .view_list:nth-child(7), .ledger:nth-child(7) .clr_box {background-color: #9bd29b;}
    .view_list:nth-child(8), .ledger:nth-child(8) .clr_box {background-color: #44b6ae;}
    .view_list:nth-child(9), .ledger:nth-child(9) .clr_box {background-color: #5e738b;}
    .view_list:nth-child(10), .ledger:nth-child(10) .clr_box {background-color: #578ebe;}
    .view_list:nth-child(11), .ledger:nth-child(11) .clr_box {background-color: #e35b5a;}
    .view_list:nth-child(12), .ledger:nth-child(12) .clr_box {background-color: #c5bf66;}
    .view_list:nth-child(13), .ledger:nth-child(13) .clr_box {background-color: #38a7d3;}
    .view_list:nth-child(14), .ledger:nth-child(14) .clr_box {background-color: #2d4e6b;}
    .view_list:nth-child(15), .ledger:nth-child(15) .clr_box {background-color: #d3a508;}

    .timeLine_view {min-height: 75px;}
    ul.timelineview_wrap {}
    ul.timelineview_wrap, .timelineview_wrap li, 
    ul.timelinebar_wrap, .timelinebar_wrap li {list-style: none;margin: 0;padding: 0;}
    ul.timelineview_wrap {margin-top: 20px;height: 30px;width: 100%;}
    .timelineview_wrap li {
        float: left;
        position: relative;
        display: inline-block;
        width: 2.857%;
        height: 30px;
        margin: 0 auto;
        text-align: center;
        line-height: 29px;
        color: #fff;
        font-weight: 600;
    }
    ul.timelinebar_wrap {margin-top: 10px;height: 5px;width: 100%;background-color: #dcdcdc;}
    .timelinebar_wrap li {
        float: left;
        position: relative;
        display: inline-block;
        width: auto;
        height: 5px;
        background-color: #dcdcdc;
        margin-right: 0.3%;
        margin-left: -0.1%;
    }
    .timelinebar_wrap li.bar_not_comp {background-color: #dcdcdc;}
    .timelinebar_wrap li.bar_complete {background-color: #4cad53;}
    .timelinebar_wrap li.bar_progress {background-color: #f0a963;}

    
    .content_detail_info .lead_status_wrap .inner_wrapper .each_stage {width: 260px;}
    #scroll-pane {left: 0;right: 0 !important;}

    .quoteHeading {
    display: flex;
}
.dollarSign {
    background: #E2E2E2;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.dollarSign i {
    width: 42px;
    text-align: center;
}
.quoteHeading .owner_info {
    font-weight: 400;
    width: 85%;
}
.quoteDetails {
    width: 100%;
}
.quoteDetails span {
    font-weight: 600;
}
.qNo {
    font-weight: 800;
    font-size: 14px;
    margin: 0;
}
.prodImg {
    width: 60px;
    /* height: 60px; */
    overflow: hidden;
    display: inline-block;
    border: solid 1px #E2E2E2;
    border-radius: .5rem;
}
.prodImgNme {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}
.prdimgNme {
    font-weight: 600;
}
.updatedDate {
    display: block;
    width: 100%;
}
.qoteName {
    display: flex;
    width: 100%;
}
.qoteName .qtName {
    font-weight: 600;
    font-size: 14px;
    margin: 5px 0;
    color: #61C3D0;
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.qoteName .quotePrice {
    font-weight: 800;
    width: 20%;
    margin: 5px 0;
}
.multi_image_upload_box {
        width: 100%;
        background: url("../img/uploader_bg.png") no-repeat center center;
        background-size: contain;
        background-position-y: 25px;
        background-position-x: -5px;
        border: none;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        text-align: center;
        position: relative;
        -webkit-box-shadow: 3px 4px 9px 2px #ccc;
        -moz-box-shadow: 3px 4px 9px 2px #ccc;
        box-shadow: 3px 4px 9px 2px #ccc;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin: 0 auto;
    }
    .lg-margin-bottom{
        margin: 90px 0 0;
    }
    .multi_image_upload_footer {
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 60px;
        text-align: left;
        background: #e5ebed;
        border-radius: 7px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 20px;
        box-shadow: 3px 4px 9px 2px #ccc;
    }
    .multi_image_upload_footer p{
        margin: 0;
    }
    .multi_image_upload_footer p > span {
        position: relative;
        overflow: hidden;
        color: #87c7ed;
    }
    .multi_image_upload_footer p > span input[type='file'] {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 43px;
        height: 20px !important;
        cursor: pointer;
    }
    input[type='number'] {
        -moz-appearance: textfield;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    div.modal-body .product_tag{
        min-width: 31%;
    }
    div.variants_container, div.composite_products_container {
        border: 1px solid #c4c6ca !important;
        border-radius: 3px !important;
        padding: 3px 3px 0;
        width: 100%;
        min-height: 60px;
        margin: 0;
        height: auto;
    }
    .btn_input {
        padding: 4px 10px;
        border-top-right-radius: 3px !important;
        border-bottom-right-radius: 3px !important;
        background: #ebeced;
    }
    .btn_input > i.fa {
        color: #79797a;
    }
    .pop_heading > span {
        font-size: 12px;
        font-weight: 300 !important;
    }
    .modal-body p {
        margin: 0 0 25px;
    }
    .modal-body {
        padding: 5px 15px 15px;
    }
    .close.close_popup {
        color: #b5b5b6 !important;
    }
    .modal-content {
        -webkit-border-radius: 4px !important;
        -moz-border-radius: 4px !important;
        border-radius: 4px !important;
    }
    .modal-footer {
        border-top: 1px solid #adadad;
    }
    .modal .modal-header {
        border-bottom: 1px solid #adadad;
    }
    .preview-images-zone {
        width: 100%;
        height: 300px;
        overflow: auto;
        padding: 20px;
    }
    .preview-images-zone > .preview-image:first-child {
        height: 210px;
        width: 190px;
        position: relative;
        margin-right: 5px;
    }
    .preview-images-zone > .preview-image {
        height: 100px;
        width: 100px;
        position: relative;
        margin-right: 5px;
        float: left;
        margin-bottom: 5px;
        border: 1px solid #e5ebed;
        padding: 2px;
    }
    .preview-images-zone > .preview-image > .image-zone {
        width: 100%;
        height: 100%;
    }
    .preview-images-zone > .preview-image > .image-zone > img {
        width: 100%;
        height: 100%;
    }
    .preview-images-zone > .preview-image > .tools-edit-image {
        position: absolute;
        z-index: 100;
        color: #fff;
        bottom: 0;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        display: none;
    }
    .preview-images-zone > .preview-image > .image-cancel {
        font-size: 22px;
        position: absolute;
        top: -5px;
        right: -10px;
        font-weight: bold;
        margin-right: 10px;
        cursor: pointer;
        display: none;
        z-index: 9;
        color: #f00;
    }
    .preview-image:hover > .image-zone {
        cursor: move;
        opacity: .5;
    }
    .preview-image:hover > .tools-edit-image,
    .preview-image:hover > .image-cancel {
        display: block;
    }
    .variants_table.table-responsive, .composite_table.table-responsive {
        border-radius: 6px;
        border: 1px solid #dddddd;
    }
    .variants_table table thead, .composite_table table thead{
        background: #636871;
        color: #fff;
    }
    .table {
         margin-bottom: 0;
    }
    @media screen and (max-width: 1280px) {
        .md-hide{
            display: none;
        }
        .preview-images-zone {
            height: 250px;
        }
    }
    @media screen and (max-width: 992px) {
        .sm-no-padding{
            padding: 0;
        }
        .sm-margin-btm-10 {
            margin:0 0 10px;
        }
        .sm-margin_btn{
            margin: -10px 0 15px;
        }
        .sm-no-margin{
            margin: 0 !important;
        }
        .product_type_box .product_type_info {
            margin: 0 0 25px;
        }
        .preview-images-zone {
            height: 200px;
        }
    }
    table th.th_13[aria-label="Sync Status"] {width: 82px !important;}
    
    .circle_priority {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
    }
    .circle_priority.red {
        background: #f7090b;
    }
    .circle_priority.black {
        background: #333;
    }
    .extra_buttons {
        min-width: 100px;
    }

    #map-canvas {
        width: 350px;
        height: 350px;
    }

    .input_file_product{
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .upload_file_product{
        font-weight: bold;
        display: block;
        text-align: center;
        border: 1px solid silver;
        padding: 4px;
        cursor: pointer;
        background: #F7F8FD;
    }

    .fs-upload.fs-light .fs-upload-target {
        border: none !important;
        background: none !important;
    }

    #add_product .fs-upload{
        height: 28px !important;
        border: 1px solid silver;
        background-image: url("../../images/attachment.png");
        background-repeat: no-repeat;
        background-size: 22px;
        background-position: right;
    }

    .each_attachment {
        background: none;
    }

    .attach_img .attachment_img{
        width: 45px;
    }
    .column_filters.add_columnFilter {padding-left: 0;padding-right: 0;}
</style>
@stop
@section('admin_js')
<script type="text/javascript" src="{{ asset('plugins/global/file_upload/formstone_core.js') }}"></script>
<script type="text/javascript" src="{{ asset('plugins/global/file_upload/formstone_file_uploader.js') }}"></script>
@include('admin.product.js.view')
@include('admin.common-js.common')
@stop