@extends('layouts.app')

@section('content')
<!-- IPTV CONTENT BODY -->

<!-- TOPBAR -->
<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="#" class="">Business</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">
                <div class="portlet-title">
                    <div class="caption">
                        <h2>Business
                            <!--<span class="subtitle"> All the team members registered under employee section listed here, you can filter results based on values for better management.</span>-->
                        </h2>
                    </div>
                    <div class="actions success_actions" style="">
                        <a href="" data-toggle="modal" data-target="#new_business_modal"
                            class="add_new portal_add_btn new_business">
                            <i class="fa fa-plus"></i>
                        </a>
                        <ul class="nav navbar-nav netsec_menucontent">
                            <li class="actions_dropdown dropdown">
                                <a href="#">Actions</a>
                                <ul class="actions_list dropdown-menu">
                                    <li>
                                        <a href="" data-toggle="modal" data-target="#new_business_modal"
                                            class="add_new new_business">New Business</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>





                <div class="portlet-body flip-scroll">
                    <table id="business_data_table"
                        class="table filterable table-striped table-bordered table-hover custom_table">
                        <thead class="flip-content thead">
                            <tr>
                                <th class="th_1">Business Logo</th>
                                <th class="th_2 ">Business Name</th>
                                <th class="th_3 ">Business Description</th>
                                <th class="th_4 ">No of Rooms</th>
                                <th class="th_5 ">Business Address</th>
                                <th class="th_6 ">Status</th>
                                <th>
                                    Action
                                    <!--<img class="dots_menu_grey" style="position: relative; width: 25px;" src="{{asset('images/dots_menu_grey.png')}}">-->
                                </th>
                            </tr>
                        </thead>
                        <tbody class="tbody">

                        </tbody>
                    </table>
                </div>
            </div>
            <!-- End: life time stats -->


            <!-- //SWEET_ALERT START// -->
            <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>
            <!-- //SWEET_ALERT END// -->
        </div>
    </div>
</div>







<div class="modal scrollable fade bs-modal right modal-fullscreen r_u_sure in" id="new_business_modal" role="dialog"
    aria-hidden="false" style="">
</div>

<div class="modal scrollable fade bs-modal right modal-fullscreen r_u_sure in" id="update_business_modal" role="dialog"
    aria-hidden="false" style="">
</div>
<div class="modal fade uplaod_wrap" id="modal_image_uplaod">
    <div class="modal-dialog modal-content uplodImg" style="width: 390px;">
        <form id="upload_pr_pc" class="modal-content" action="{{route('admin.business.image.store.session') }}"
            enctype="multipart/form-data" method="POST">
            <input type="hidden" name="_token" value="">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Upload Photo</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div id="upload-demo" style="width: 360px; position: relative;">
                            <button style="font-size:24px; position: absolute; top: 30px; right: 30px; z-index: 9999;"
                                id="upload1"><i class="fa fa-upload"></i></button>
                        </div>
                        <input type="file" id="upload" value="" name="image" style="display: none;">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-success upload-business-image">Upload Image</button>
            </div>
        </form>
    </div>
</div>
{{--  @include('admin.Business.Modal.edit')  --}}
@endsection
@section('admin_css')
<link href="{{asset('global/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<style>
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    /* .iti__hide {
        display: none;
    } */

    pre {
        margin: 0 !important;
        display: inline-block;
    }

    .token.operator,
    .token.entity,
    .token.url,
    .language-css .token.string,
    .style .token.string,
    .token.variable {
        background: none;
    }

    .iti input,
    .iti button {
        height: 35px;
        margin: 0;
        padding: 6px 12px;
        border-radius: 2px;
        font-family: inherit;
        font-size: 100%;
        color: inherit;
    }

    input[disabled],
    button[disabled] {
        background-color: #eee;
    }

    ::-webkit-input-placeholder {
        color: #BBB;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        color: #BBB;
        opacity: 1;
    }

    :-ms-input-placeholder {
        color: #BBB;
    }

    #result {
        margin-bottom: 100px;
    }

    .page-header-fixed .page-container {
        margin-top: 0;
    }

    .page-header-fixed .page-content-wrapper {
        margin-top: 60px;
    }


    /* body .page-container {height: 100%;} */
    body .page-container {
        background-color: #ffffff;
        min-height: 100%;
        height: auto !important;
        margin: 60px auto -33px;
    }

    body .page-container {
        min-height: 100%;
    }

    body .page-footer {
        background-color: #364150;
        height: 33px;
        position: relative;
    }

    .page-sidebar-wrapper .page-sidebar {
        margin-top: 60px;
    }

    .table.table-bordered thead>tr>th {
        text-align: center;
    }

    #business_data_table td:nth-child(1),
    #business_data_table td:nth-child(2),
    #business_data_table td:nth-child(3),
    #business_data_table td:nth-child(4),
    #business_data_table td:nth-child(5),
    #business_data_table td:nth-child(6),
    #business_data_table td:nth-child(7) {
        text-align: center;
    }

    #business_data_table td:nth-child(3) {
        text-align: left;
    }

    .supscrip_box {
        border: 1px solid #c4c6ca;
        width: 100%;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        border-color: #e5e5e5 !important;
        padding: 0;
    }

    .supscrip_box .filter_result {
        color: #37c6d3;
        font-size: 30px;
        font-weight: 600;
        text-align: center;
        line-height: 55px;
    }

    .display_pic input:active::before {
        background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
    }

    .display_pic .overlay {
        padding: 64px 0;
    }

    .display_pic .fa.fa-camera {
        position: absolute;
        margin: 0 auto;
        display: block;
        text-align: center;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        color: #000;
        font-size: 30px;
        background-color: #ccc;
        opacity: 0.78;
    }

    .fa-camera:before {
        top: 50%;
        position: absolute;
    }

    .display_pic:hover .fa.fa-camera {
        display: block !important;
    }

    .display_pic input[type='file'] {
        opacity: 0;
    }



    .display_pic:hover .overlay {
        display: block;
        z-index: 9999;
    }

    .bg-img {
        margin: 1rem !important;
    }

    .bg-img img {
        border-radius: .5rem;

    }

    #uploadModal {
        z-index: 99999 !important;
    }

    #uploadModal #gallery {
        padding: 0 15px;
    }

    #uploadModal #gallery img {
        max-width: 100%;
        width: 100% !important;
        height: 120px !important;
    }

    #uploadModal #gallery div {
        padding-bottom: 15px;
    }

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

    .pac-container {
        z-index: 99999;
    }

    .modal .modal-dialog .body_wrap {
        height: auto;
    }

    .weather_active .form-group {
        display: inline-block;
        margin: 20px 0 8px;
    }

    .weather_active .form-group label {
        float: left;
        line-height: 36px;
        padding-right: 30px;
    }

    .weather_active .form-group input.longitude {
        float: left;
        width: 20px;
    }

</style>
@stop

@section('admin_js')
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('MAP_API_KEY') }}&libraries=places"  type="text/javascript"></script>
<script src="{{asset('js/genaral.js')}}" type="text/javascript"></script>
<script src="{{asset('global/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('global/datatables/plugins/bootstrap/datatables.bootstrap.js')}}" type="text/javascript"></script>

@include('admin.js.business')

@stop