@extends('admin.layouts.app')

@section('title', 'Business Dashboard')


@section('content')
<!-- TOPBAR -->
<div class="top_bar page-content" style="min-height:534px">
    <!-- 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="{{ route('admin.dashboard') }}">Home</a></li>
            <li><a href="{{ route('admin.settings.index') }}" class="">Settings</a></li>
            <li><a href="#" class="breadcrumb_link" onclick="return false">Default Content</a></li>
        </ul>
        <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
    </div>
    <!-- END BREADCRUMBS -->
</div>
<!-- END TOPBAR -->
<!-- PAGE CONTENT -->
<div class="page-content">
    <div class="row">
        <div class="col-md-12">
            <!-- Begin: life time stats -->
            <div class="portlet setting_landing">
                <!-- MAIN CAPTION START -->
                <div class="portlet-title">
                    <div class="caption">
                        <h2>Default Content
                            <span class="subtitle"></span>
                        </h2>
                    </div>
                </div>
                <!-- MAIN CAPTION END -->
                <hr>
                <div class="portlet-body">
                    <div class="settings">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-4">
                                    <span class="main_title">Default Content</span>
                                </div>
                            </div>
                        </div>
                        <div class="row each_row lead_stage_wrap">
                            <div class="col-md-12">
                                <div class="col-md-2">
                                    <span class="sub_heading">Define Default Content</span>
                                </div>
                                <div class="col-md-2"></div>
                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="portlet-body">
                                            <div class="">

                                                <form id="sync_form"
                                                    action="{{ route('admin.settings.default-content.store') }}">

                                                    <div class="rows_wrap">
                                                        <div class="row m_0">
                                                            <div class="col-md-12">
                                                                <div class="form-group">
                                                                    <label for="screen_name ">Image *</label>
                                                                    @if(!empty($data) && !empty($data->default_image))
                                                                    <div class="multi_image_upload_box" style = "background:none" id="drop-area">
                                                                        <div class="preview-images-zone">
                                                                            <div class="drop-img preview-image">
                                                                                {{-- <div class="image-cancel">
                                                                                    <i class="fa fa-trash"></i>
                                                                                </div> --}}
                                                                                <div class="image-zone">
                                                                                    <img name="screen_images" src="{{asset('uploads/default_contents/'.$data->default_image)}}"></div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="multi_image_upload_footer">
                                                                            <p>Drag images here or <span>browse<input type="file" id="browse_image" /></span>to upload </p> 
                                                                        </div>
                                                                    </div>
                                                                    @else
                                                                    <div class="multi_image_upload_box" id="drop-area">
                                                                        <div class="preview-images-zone"></div>
                                                                        <div class="multi_image_upload_footer">
                                                                            <p>Drag images here or <span>browse<input type="file" id="browse_image" /></span>to upload </p> 
                                                                        </div>
                                                                    </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop
@section('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('css/sweetalert.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/settings.css') }}" />
<style>
    .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: -54px;
        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: 500px;
        overflow: auto;
        padding: 20px;
    }
    .preview-images-zone > .preview-image:first-child {
        /* height: 210px;
        width: 190px; */
        /* height: 200px;
        width: 200px; */
        position: relative;
        /* margin-right: 5px; */
    }
    .preview-images-zone > .preview-image {
        /* height: 100px;
        width: 100px; */
        /* height: 200px;
        width: 200px; */
        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%; */
        /* height: 200px;
        width: 200px; */
    }
    .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;
        }
    }

</style>
<!-- end style for Drag images -->
@stop
@section('admin_js')
<script src="{{asset('js/genaral.js')}}" type="text/javascript"></script>
<script src="{{asset('js/croppie.js')}}" type="text/javascript"></script>

@include('admin.settings.default-content.js.index')
@stop