@extends('modules.head') @section('contenido')
<h1>
    <b>{{$client->first_name}}</b><i>[{{$client->document}}]</i>
</h1>
<span>Price List: <b>{{ $client->bo_price_list_id ? $client->boPriceList->list_name : "N/A" }}</b></span><br>
<span>Group: <b>{{ $client->bo_group_id ? $client->boGroup->group_name : "N/A" }}</b></span><br><br>
{!!$tabs!!}
<form action="{{ url('/update') }}" method="post">
    @csrf
    <div class="pendingBtnsDiv">

        <ul style="list-style-type: none;">
            <li><span>Owner: <span class="owner_name">{{ $client->getOwnerFullName() }}</span></span></li>
            <li><span>Assignee: <span class="owner_name">{{ $client->getAssigneeFullName() }}</span></span></li>
            @if($date_last_login != null )
            <li><span>Site last login: <span class="owner_name"> {{ $date_last_login }}</span></span></li>
            @endif
        </ul>
        <div>
            <a href="/clients" class="btn btnAdd">Back</a>
        </div>
        <div>
            <a href="javascript:void(0);" class="spnAdd btn submitDataButton">Add Log &raquo;</a>
        </div>
    </div>
    <section class="sAccounts">
        {{-- @include('flash::message') --}}
        <aside>
            <form role="form" id="editClient" data-toggle="validator" method="post">

                <h3 class="h3 on"><b>General:</b>
                    @if($permissions->can_edit)
                    <span><input type="submit" name="save" value="Save &raquo;" /><small>Edit</small> <i class="fa fa-pencil"></i></span>
                    @endif
                </h3>
                <div class="dv on">
                    <div>
                        <label for="email">{{ Lang::get('messages.screen_edit_clients_tag6')}} <b class="asterisk_color"> *</b> </label>
                        <input type="text" class="form-control blocker" id="email" name="email" value="{{$client->email}}" required />
                        <input type="text" name="document" id="document" value={{$client->document}} style="display:none">
                    </div>
                    <div>
                        <label for="phone">Cell Phone <b class="asterisk_color"> *</b></label>
                        <input type="text" class="form-control blocker" maxlength="14" id="cellPhone" name="cellPhone" value="{{$client->phone}}" required data-inputmask="'mask': '999-999-9999'" />
                    </div>
                    <div>
                        <label for="phone">Business Phone <b class="asterisk_color"> *</b></label>
                        <input type="text" class="form-control blocker" maxlength="14" id="businessPhone" name="businessPhone" value="{{ $client->bo_phone_1 }}" data-inputmask="'mask': '999-999-9999'" />
                    </div>
                    <div>
                        <label for="phone">Fax Number</label>
                        <input type="text" class="form-control blocker" maxlength="45" id="faxNumber" name="faxNumber" value="{{ $client->fax_number }}" />
                    </div>
                    <div>
                        <label for="webSite">Web Site</label>
                        <input type="text" class="form-control blocker" maxlength="45" id="webSite" name="webSite" value="{{ $client->website }}" />
                    </div>
                    <div>
                        <label for="phone">FIN Number</label>
                        <input type="text" class="form-control blocker" maxlength="45" id="finNumber" name="finNumber" value="{{ $client->fin_number }}" />
                    </div>
                <div>
                    <label for="phone">Business Type</label>
                    <select class="form-control blocker" name="businessType" id="businessType">
                        @if($client->business_type_id != null)
                        <option value="{{ $client->business_type_id }}" default>{{ $client->businessType->name }} </option>
                        @else
                        <option disabled selected>Choose...</option>
                        @endif
                        @foreach ($business_types as $business_type)
                        @if ($client->business_type_id != null && $business_type->id != $client->business_type_id)
                        <option value="{{ $business_type->id }}" default>{{ $business_type->name }} </option>
                        @else
                        <option value="{{ $business_type->id }}" default>{{ $business_type->name }} </option>
                        @endif
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="phone">License Number</label>
                    <input type="text" class="form-control blocker" maxlength="45" id="licenseNumber" name="licenseNumber" value="{{ $client->license_number}}" />
                </div>
                <div>
                    <label for="phone">Company size</label>
                    <select class="form-control blocker" name="companySize" id="companySize">
                        <option value="{{ $client->company_size }}" default>{{ $client->company_size }} </option>
                        @foreach ($companysizes as $companysize)
                        @if ( $companysize != $client->company_size )
                        <option value="{{ $companysize }}" default>{{ $companysize }} </option>
                        @endif
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Send Invoice</label><br>
                    <select class="form-control blocker" name="sendInvoice">
                        @if ( $client->send_invoice == 1)
                        <option type="radio" id="sendInvoice1" name="sendInvoice" value=1 selected>Yes</option>
                        <option type="radio" id="sendInvoice2" name="sendInvoice" value=0>No</option>
                        @else
                        <option disabled selected>Choose...</option>
                        <option type="radio" id="sendInvoice1" name="sendInvoice" value=1>Yes</option>
                        <option type="radio" id="sendInvoice2" name="sendInvoice" value=0 selected>No</option>
                        @endif
                    </select>
                </div>
                <div>
                    <label>PO Required</label><br>
                    <select class="form-control blocker" name="poRequired" id="poRequired">
                        @if ( $client->required_po == 1)
                        <option type="radio" id="poRequired1" name="poRequired" value=1 selected>Yes</option>
                        <option type="radio" id="poRequired2" name="poRequired" value=0>No</option>
                        @else
                        <option type="radio" id="poRequired1" name="poRequired" value=1>Yes</option>
                        <option type="radio" id="poRequired2" name="poRequired" value=0 selected>No</option>
                        @endif
                    </select>
                </div>
                <div>
                    <label>{{ Lang::get('messages.screen_products_tag63')}}</label>
                    @if($client->popup_active)
                    <div class="switch">
                        <label>
                            <div class="checkbox checbox-switch switch-success">
                                <label> No <input type="checkbox" class="form-control blocker" id="chk_popup_active" name="chk_popup_active" checked=""><span></span> Yes</label>
                            </div>
                        </label>
                    </div>
                    @else
                    <div class="switch">
                        <label>
                            <div class="checkbox checbox-switch switch-success">
                                <label> No <input type="checkbox" class="form-control blocker" id="chk_popup_active" name="chk_popup_active"><span></span> Yes</label>
                            </div>
                        </label>
                    </div>
                    @endif
                </div>
                <div>
                    <label for="popup_text">{{ Lang::get('messages.screen_products_tag64')}} </label>
                    <input type="text" class="form-control blocker" value="{{$client->popup_text}}" name="popup_text" id="popup_text" />
                </div>
                <div>
                    <label for="createdDate">Variation discount</label>
                    @if($client->variation_discount)
                        <div class="switch">
                            <label>
                                <div class="checkbox checbox-switch switch-success">
                                    <label> No <input type="checkbox" class="form-control blocker" id="chk_variation_discount" name="chk_variation_discount" checked=""><span></span> Yes</label>
                                </div>
                            </label>
                        </div>
                    @else
                        <div class="switch">
                            <label>
                                <div class="checkbox checbox-switch switch-success">
                                    <label> No <input type="checkbox" class="form-control blocker" id="chk_variation_discount" name="chk_variation_discount"><span></span> Yes</label>
                                </div>
                            </label>
                        </div>
                    @endif
                </div>
                <div>
                    <label for="createdDate">Creation date</label>
                    <input type="text" class="form-control" maxlength="45" id="createdDate" name="createdDate" value="{{$client->created_at}}" required disabled />
                </div>
                <div>
                    <label for="source">Source</label>
                    @if($client->source)
                    <input type="text" class="form-control" maxlength="45" id="source" name="source" value="{{ $client->source->name }}" required disabled />
                    @else
                    <input type="text" class="form-control" maxlength="45" id="source" name="source" value="" required disabled />
                    @endif
                </div>
                {{ csrf_field() }}
                </div>
                <h3 class="h3"><b>Contacts:</b></h3>
                <div class="dv">
                    <table class="table table-striped" id="contact_table">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($client->boContactEmployeesUsers)
                            @foreach($client->boContactEmployeesUsers as $contact)
                            <tr>
                                <td>{{ $contact->name }}</td>
                                <td>{{ $contact->last_name }}</td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-primary pull-left" onclick="showModalAddContact()">New Contact</button>
                </div>

                <h3 class="h3"><b>Notifications:</b>
                    @if($permissions->can_edit)
                    <span><input type="submit" name="save" value="Save &raquo;" /><small>Edit</small> <i class="fa fa-pencil"></i></span>
                    @endif
                </h3>
                <div class="dv">
                    <div>
                        <label for="billingEmail">Billing email</label>
                        <input type="text" class="form-control blocker" maxlength="45" id="billingEmail" name="billingEmail" value="{{$client->billing_email}}"/>
                    </div>
                    <div>
                        <label for="purchasingEmail">Purchasing email</label>
                        <input type="text" class="form-control blocker" maxlength="45" id="purchasingEmail" name="purchasingEmail" value="{{$client->purchasing_email}}"/>
                    </div>
                </div>

                <h3 class="h3 "><b>Addresses:</b>
                </h3>
                <div class="dv dvAddresses">
                    <div>
                        <div>
                            <h4>Bill to:</h4>
                            <ul class="ulAddresses">
                                @foreach ($directions as $direction)
                                @if ($direction->tag == 'bo_BillTo')
                                <li>
                                    <a onclick='return addressDetails({{$direction}})'>{{ $direction->name }}</a>
                                    <div onclick="deleteAddress({{$direction->id}})">
                                        <i class="fa fa-trash beha"></i>
                                    </div>
                                </li>
                                @endif
                                @endforeach
                            </ul>
                            <h4>Ship to:</h4>
                            <ul class="ulAddresses">
                                @foreach ($directions as $direction)
                                @if ($direction->tag == 'bo_ShipTo')
                                <li>
                                    <a onclick='return addressDetails({{$direction}})'>{{ $direction->name }}</a>
                                    <div onclick="deleteAddress({{$direction->id}})">
                                        <i class="fa fa-trash beha"></i>
                                    </div>
                                </li>
                                @endif
                                @endforeach
                            </ul>
                            <button type="button" class="btn btn-primary pull-left" onclick="showModalAddAddress()">Define New</button>
                        </div>
                        <div>
                            <div>
                                <div>
                                    <label for="addressDefault">Default</label>
                                    <input type="text" class="form-control" maxlength="45" id="addressDefault" name="addressDefault" value="" required disabled />
                                </div>
                                <div>
                                    </br><label for="addressName">Address Name</label>
                                    <input type="text" class="form-control" maxlength="45" id="addressName" name="addressName" value="" required disabled />
                                </div>
                                <div>
                                    </br><label for="addressFullName">Full Name</label>
                                    <input type="text" class="form-control" maxlength="45" id="addressFullName" name="addressFullName" value="" required disabled />
                                </div>
                                <div>
                                    <br><label for="streetAddress1">Address</label>
                                    <input type="text" class="form-control" maxlength="45" id="streetAddress1" name="streetAddress1" value="" required disabled />
                                </div>
                                <div>
                                    <br><label for="streetAddress2">Apt, Suite, Unit</label>
                                    <input type="text" class="form-control" maxlength="45" id="streetAddress2" name="streetAddress2" value="" required disabled />
                                </div>
                                <div>
                                    <br><label for="addressCity">City</label>
                                    <input type="text" class="form-control" maxlength="45" id="addressCity" name="addressCity" value="" required disabled />
                                </div>
                            </div>
                            <div>
                                <div>
                                    </br><label for="addressZipCode">State, Zip Code</label>
                                    <input type="text" class="form-control" maxlength="45" id="addressZipCode" name="addressZipCode" value="" required disabled />
                                </div>
                                </br>
                                <div id="divTaxCode" style="display: none">
                                    <label for="addressTaxCode">Tax Code</label>
                                    <input type="text" class="form-control" maxlength="45" id="addressTaxCode" name="addressTaxCode" value="" required disabled />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <h3 class="h3"><b>Accounting:</b>
                    @if($permissions->can_edit)
                    <span><input type="submit" name="save" value="Save &raquo;" /><small>Edit</small> <i class="fa fa-pencil"></i></span>
                    @endif
                </h3>
                <div class="dv">
                    <div>
                        <label for="paymentTermType"> Payment Term Type:</label>
                        <input type="text" class="form-control" maxlength="45" id="paymentTermType" name="paymentTermType" value="{{ $client->boPaymentTermType->name }}" readonly="true" />
                    </div>
                    <div>
                        <label for="bo_price_list_id">{{Lang::get('messages.price_lists.price_lists')}}</label>
                        <select class="form-control blocker" name="bo_price_list_id" required>
                            @foreach($price_lists as $pl)
                            @if($pl->id == $client->bo_price_list_id)
                            <option value="{{$pl->id}}" selected>{{$pl->list_name}} </option>
                            @else
                            <option value="{{$pl->id}}">{{$pl->list_name}}</option>
                            @endif
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="taxStatus">Tax status</label>
                        <select class="form-control blocker" name="taxStatus" required>
                            @if($client->bo_tax_exempt == 1)
                            <option value="1" selected> Exempt </option>
                            @else
                            <option value="1"> Exempt </option>
                            @endif
                            @if($client->bo_tax_exempt == 0)
                            <option value="0" selected> Liable </option>
                            @else
                            <option value="0"> Liable </option>
                            @endif
                        </select>
                    </div>
                    <div>
                        <label for="group">Group</label>
                        <select class="form-control blocker" name="group" required>
                            @if ($client->bo_group_id == null)
                            <option value="" selected disabled> Choose... </option>
                            @endif
                            @foreach($groups as $group)
                            @if($group->id == $client->bo_group_id)
                            <option value="{{ $group->id }}" selected>{{ $group->group_name }}</option>
                            @else
                            <option value="{{ $group->id }}"> {{ $group->group_name }} </option>
                            @endif
                            @endforeach
                        </select>
                    </div>
                    <div id="exemptNumberDiv" style="display:none">
                        <label for="exemptNumber">Exempt Number</label>
                        <input type="text" class="form-control blocker" maxlength="45" name="exemptNumber" value="{{ $client->exempt_number }}" hidden="false" />
                    </div>
                    @if(Auth::user()->isAccountReceivable() || Auth::user()->isSuperAdmin())
                        @if ($client->isWebSiteLocked())
                            <div id="dvChkRFStatus">
                                <label for="chkRFActiveEditClient">Web Site Locked</label>
                                <label class="switch">
                                    <input class="switch-input" type="checkbox" id="chkRFActiveEditClient" name="chkRFActiveEditClient" checked/>
                                    <span class="switch-label" data-on="Yes" data-off="No"></span>
                                    <span class="switch-handle"></span>
                                </label>
                            </div>
                        @endif
                    @endif
                </div>

                <h3 class="h3"><b>Tier Pricing</b>
                    @if(Auth::user()->isSuperAdmin() || Auth::user()->isSalesDirector())
                        @if($permissions->can_edit)
                            <span><input type="submit" name="save" value="Save &raquo;" /><small>Edit</small> <i class="fa fa-pencil"></i></span>
                        @endif
                    @endif
                </h3>
                <div class="dv">
                    @include('users.tabs.tier_pricings')
                </div>
            </form>
        </aside>
        <aside class="dvCRM">
            <h3>Interaction History:</h3>
            <div>
                <div class="dvModal" style="display: none;">
                    <div>
                        <span class="spnClose">&times;</span>
                        <select class="form-control" name="crm_logType" onchange="enableCreateLogBtn(this)">
                            <option disabled selected value="0">Log Type:</option>
                            @foreach ($log_types as $log_type)
                                @if (!$log_type->automatic)
                                    <option value="{{ $log_type->id }}">{{ $log_type->log_type_name }}</option>
                                @endif
                            @endforeach
                        </select>
                        <select class="form-control" name="crm-log-activity" onchange="enableCreateLogBtn(this)">
                            <option disabled selected value="0">Log Activity:</option>
                            @foreach ($log_activities as $log_activity)
                                <option value="{{ $log_activity->id }}">{{ $log_activity->name }}</option>
                            @endforeach
                        </select>
                        <textarea class="form-control rounded-0" cols="50" rows="5" id="crm_content" name="crm_content"
                                  oninput="enableCreateLogBtn(this)" placeholder="Enter note"></textarea>
                        <input type="button" id="crm_btn" value="Create Log &raquo;" class="submitDataButton btn btn-danger" disabled/>
                    </div>
                </div>
                <ul class="dvLogs" id="user_crms_list">
                    @foreach ($user_crms as $user_crm)
                    @if ($user_crm->log_type)
                    <li>
                                                @if ($user_crm->user)
                        <b>{{ $user_crm->user->first_name }} {{ $user_crm->user->last_name }}
                            <i>
                                <i id="icon_log_type" class="{{ $iconClass }}"></i>
                                {{ $user_crm->log_type->log_type_name }}
                            </i>
                        </b>
                        @else
                        <b>No user
                            <i>
                                <i id="icon_log_type" class="{{ $iconClass }}"></i>
                                {{ $user_crm->log_type->log_type_name }}
                            </i>
                        </b>
                        @endif
                        <span>{{ $user_crm->created_at ? date_format($user_crm->created_at, "m/d/Y g:iA") : null}}</span>
                        <p>{!! $user_crm->content !!}</p>
                    </li>
                    @endif
                    @endforeach
                </ul>
                <ul class="dvLogs" id="pending_account_crms_list">
                    @foreach ($pending_account_crms as $pending_account_crm)
                    @if ($pending_account_crm->log_type)
                    <li>
                                                @if ($pending_account_crm->user)
                        <b>{{ $pending_account_crm->user->first_name }} {{ $pending_account_crm->user->last_name }}
                            <i>
                                <i id="icon_log_type" class="{{ $iconClass }}"></i>
                                {{ $pending_account_crm->log_type->log_type_name }}
                            </i>
                        </b>
                        @else
                        <b>No user
                            <i>
                                <i id="icon_log_type" class="{{ $iconClass }}"></i>
                                {{ $pending_account_crm->log_type->log_type_name }}
                            </i>
                        </b>
                        @endif
                        <span>{{ date_format($pending_account_crm->created_at, "m/d/Y g:iA") }}</span>
                        <p>{!! $pending_account_crm->content !!}</p>
                    </li>
                    @endif
                    @endforeach
                </ul>
            </div>
            @if($client->orders_client->isNotEmpty())
            <h3>Orders:</h3>
            <div id="orders_container" data-orders="{{ $client->orders_client->count() }}">
                <table class="table">
                    <thead>
                        <th>Code</th>
                        <th>Date</th>
                        <th>Admin</th>
                    </thead>
                    <tbody id="tbody_orders">
                        @foreach($client->orders_client as $order)
                        <tr style="display:none">
                            <td><a class="order_code_a_tag" data-order-id="{{$order->id}}">{{$order->code}}</a> </td>
                            <td>{{$order->creation_date}}</td>
                            <td>{{$order->fullName}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div id="seeAllOrdersBtn" style="cursor: pointer;">Show all</div>
            </div>
            @endif
        </aside>
    </section>
</form>
<div id="stats_wrapper" class="stats_wrapper" style="display:none">
    <div class="orders" id="orders_chart_container" data-orders="{{ $sales_by_month_and_year }}">
        <h5>Orders</h5>
        <div class="line_chart_container">
            <canvas id="orders_chart"></canvas>
        </div>
    </div>
    <div class="sales_channel" id="sales_channels_container" data-sales-channels="{{ $sales_channels_distribution }}">
        <h5>Sales Channels</h5>
        <div class="pie_chart_container">
            <canvas id="sales_channels_chart"></canvas>
        </div>
    </div>
    @if (count($top_10_collection))
    <div class="top_10">
        <h5>Top 10 Products</h5>
        <div>
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th scope="col">Product</th>
                        <th scope="col">Product Code</th>
                        <th scope="col">Description</th>
                        <th scope="col">Purchased</th>
                        <th scope="col">Total</th>
                    </tr>
                </thead>
                <tbody>
                                        @foreach($top_10_collection as $product)
                                        <tr>
                        <td scope="row">{{ $rank }}</td>
                        <td><img src="{{ $product['image'] }}" alt='photo not found' /></td>
                        <td>{{ $product['product_code'] }}</td>
                        <td>{{ $product['description'] }}</td>
                        <td>{{ $product['purchased'] }} unit
                        @if($product['purchased'] > 1)
                        s
                        @endif
                        </td>
                        <td>${{ number_format($product['total'], 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

</div>
@include('orders.infoOrder')
@include('modal_direction')
@include('modal_create_new_address')
@include('modal_create_new_contact')
<style type="text/css">
.beha:hover {cursor: pointer !important;}
.ulAddresses {list-style-type: none;margin: 0 0 20px;padding: 0 20px 0 0;}
.ulAddresses li {display: flex;justify-content: space-between;width: 100%;margin: 0 0 10px 0;}
.ulAddresses li a {color: #111;font-weight: bold;cursor: pointer;}
.ulAddresses li a:hover,.ulAddresses li a:active {color: rgba(102, 102, 201, 0.817) !important;text-decoration: underline;}
.ulAddresses li i {}
.pac-container {z-index: 9999;}
.order_code_a_tag {cursor: pointer}
/* Tabs */
.ulNav {padding: 0;list-style-type: none;display: flex;border-bottom: solid 1px #111;}
.ulNav li {padding: 10px 15px;margin: 0;cursor: pointer;}
.ulNav li.on {font-weight: bold;background-color: #fff;border-top-left-radius: 10px;border-top-right-radius: 10px;}

/* Stats */
.stats_wrapper {position: relative; display: flex; flex-wrap: wrap; justify-content: space-between;}
.stats_wrapper>div {background-color: #fff; margin: 0 0 30px;border-radius: 8px;padding: 10px;box-shadow: -5px 5px 5px #D9D9D9,5px -5px 5px #D9D9D9; box-sizing: border-box;}
.stats_wrapper canvas { width: 100% !important; height: 100% !important;}
.orders { flex: 0 0 67%; }
.line_chart_container,.pie_chart_container {display: flex;align-items: center;justify-content: center;}
.sales_channel { flex: 0 0 30%;}
.top_10 { flex: 0 0 100%; margin: 30px 0 0;}
.stats_wrapper h5 {font-size: 16px;font-weight: bold;margin-bottom: 10px;}
.top_10 table {font-size: 13px;/* text-align: center; */}
.top_10 img { width: 75px; height: auto;}

@media(max-width: 768px) {
.orders, .sales_channel { flex: 0 0 100%; }
}
@media(max-width: 480px) {
    .top_10 {}
    .top_10 table { }
    .top_10 table tr { }
    .top_10 table tr th { }
    .top_10 table tr th:nth-child(4), .top_10 table tr td:nth-child(4) { display: none;  }
    .top_10 table tr td { vertical-align: middle; }
    .top_10 table tr td:first-child { text-align: center;}
}
@media(max-width: 400px) {
    .top_10 table tr th:nth-child(5), .top_10 table tr td:nth-child(5) { display: none;  }
}

.switch {position: relative;display: block;vertical-align: top;width: 100px;height: 30px;padding: 3px;margin: 0 10px 10px 0;background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);border-radius: 18px;box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);cursor: pointer;}
.switch-input {position: absolute;top: 0;left: 0;opacity: 0;}
.switch-label {position: relative;display: block;height: inherit;font-size: 10px;text-transform: uppercase;background: #eceeef;border-radius: inherit;box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);}
.switch-label:before, .switch-label:after {position: absolute;top: 50%;margin-top: -.5em;line-height: 1;-webkit-transition: inherit;-moz-transition: inherit;-o-transition: inherit;transition: inherit;}
.switch-label:before {content: attr(data-off);right: 11px;color: #aaaaaa;text-shadow: 0 1px rgba(255, 255, 255, 0.5);}
.switch-label:after {content: attr(data-on);left: 11px;color: #FFFFFF;text-shadow: 0 1px rgba(0, 0, 0, 0.2);opacity: 0;}
.switch-input:checked ~ .switch-label {background: rgb(226, 22, 22);border-color: rgb(174, 167, 40);box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);}
.switch-input:checked ~ .switch-label:before {opacity: 0;}
.switch-input:checked ~ .switch-label:after {opacity: 1;}
.switch-handle {position: absolute;top: 4px;left: 4px;width: 28px;height: 28px;background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);border-radius: 100%;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);}
.switch-handle:before {content: "";position: absolute;top: 50%;left: 50%;margin: -6px 0 0 -6px;width: 12px;height: 12px;background: linear-gradient(to bottom, #eeeeee, #FFFFFF);background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);border-radius: 6px;box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);}
.switch-input:checked ~ .switch-handle {left: 74px;box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=