@extends('admin.layout.app')

@section('title', 'Dashboard')

@section('content')
<div class="page-content-wrapper">
    <!-- TOPBAR -->
    <div class="top_bar page-content">
        <!-- LOADER -->
        <div class="loader">
            <div class="top_status_bar load">
                <div class="progress_bar bar">
                </div>
            </div>
        </div>
        <!-- END LOADER -->
        <!-- BREADCRUMBS -->
        <div class="breadcrumbs">
            <ul>
                <li><a href="{{ route('admin.dashboard') }}">Home</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" style="margin: 15px;">
                @include('admin.includes.msg')
                <div class="portlet-title" style="border-bottom: 1px solid #eee !important; margin-bottom: 6px !important;">
                    <div class="caption">
                        <h2>Social Media Calendar</h2>
                    </div>
                    <div class="actions hide">
                        <div class="actions_dropdown">
                            <span>Actions</span>
                            <ul class="actions_list">
                                <li data-toggle="modal" class="">
                                    <a href="" class="" style="margin-right: 8px;">
                                        Lorem Ipsim
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="tabbable-line">
                    <ul class="nav nav-tabs">
                        <li class="purchases active">
                            <a href="#summery" class="leads" data-toggle="tab" aria-expanded="true">SUMMARY</a>
                        </li>
                        <li class="purchases">
                            <a href="#facebook" class="opportunities" data-toggle="tab" aria-expanded="true">FACEBOOK</a>
                        </li>
                        <li class="purchases">
                            <a href="#linkedin" class="opportunities" data-toggle="tab" aria-expanded="true">LINKEDIN</a>
                        </li>
                        <li class="purchases">
                            <a href="#others" class="opportunities" data-toggle="tab" aria-expanded="true">OTHERS</a>
                        </li>
                        <div class="row">
                            <div class="col-md-8 duration_by_wrap">
                                <div class="col-md-3" style="float: right">
                                    <select class="form-control select2 duration_by select2-hidden-accessible"
                                        tabindex="-1" aria-hidden="true">
                                        <option value=""></option>
                                        <option value="this_month" selected="">This month</option>
                                        <option value="last_month">Last month</option>
                                        <option value="this_quarter">This quarter</option>
                                        <option value="last_quarter">Last quarter</option>
                                        <option value="this_year">This year</option>
                                        <option value="last_year">Last year</option>
                                        <option value="custom">Custom</option>
                                    </select>
                                </div>
                                <label class="col-md-2 text-right" style="float: right">Filter By</label>
                            </div>
                        </div>
                    </ul>
                    <div class="tab-content">
                        
                        <div class="tab-pane active" id="summery">
                            @include('admin.modules.general.sammary')
                        </div>

                        <div class="tab-pane" id="facebook">
                            @include('admin.modules.general.facebook')
                        </div>

                        <div class="tab-pane" id="linkedin">
                            @include('admin.modules.general.linked_in')
                        </div>

                        <div class="tab-pane" id="others">
                            @include('admin.modules.general.others')
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop



@section('css')
<style rel="stylesheet" type="text/css">
    .chart_selectBox {
        float: right;
        width: 130px;
        right: 0;
        margin-top: -4px;
    }

    #external-events {
        float: left;
        width: 150px;
        padding: 0 10px;
        text-align: left;
    }

    #external-events h4 {
        font-size: 16px;
        margin-top: 0;
        padding-top: 1em;
    }

    .external-event {
        /* try to mimick the look of a real event */
        margin: 10px 0;
        padding: 2px 4px;
        background: #3366CC;
        color: #fff;
        font-size: .85em;
        cursor: pointer;
    }

    #external-events p {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
    }

    #external-events p input {
        margin: 0;
        vertical-align: middle;
    }

    #calendar {
        /* 		float: right; */
        margin: 0;
        width: 900px;
        background-color: #FFFFFF;
        border-radius: 6px;
        /* box-shadow: 0 1px 2px #C3C3C3;
        -webkit-box-shadow: 0px 0px 21px 2px rgba(0,0,0,0.18);
        -moz-box-shadow: 0px 0px 21px 2px rgba(0,0,0,0.18);
        box-shadow: 0px 0px 21px 2px rgba(0,0,0,0.18); */
    }

    .fc-header-center {
        display: none;
    }

    .fc-event-container a.fc-event {
        display: none;
    }

    /* .fc-header-center .fc-button.fc-button-agendaDay,
    .fc-header-center .fc-button.fc-button-agendaWeek {display:none;} */
    #calendar .fc-week .fc-day>div {
        min-height: 100px !important;
    }

    #calendar .fc-content .fc-event {
        /* width: 130px !important; */
        text-align: center;
    }

    .each_widget.box {
        border: 1px solid #eee;
        box-shadow: inherit;
    }

    span.fc-button.fc-button-today.fc-state-disabled {
        display: none;
    }

    span.fc-button.fc-button-today {
        border-color: #36c6d3;
        background-color: #36c6d3;
        position: absolute;
        right: 115px;
        display: inline-grid;
    }

    .fc-header .fc-header-right {
        position: relative;
    }

    .fc-header-right span.fc-header-space {
        display: none;
    }

    /* .fc-event-container .fc-event {
        top: calc(150px + 10px) !important;
    } */

    .audi {
        width: 100% !important;
        margin-top: 55px;
    }

    .audi_right {
        float: right;
        margin-right: 27px;
    }

    .audi_head {
        border: solid 1px black;
        margin-top: 20px;
    }

    .tb {
        width: 100%;
        height: 540px
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }

    th,
    td {
        padding: 12px;
        margin-left: 19px;
    }

    .sessions {
        width: 45%;
        float: left;
    }

    .sessions_location {
        margin-top: 35px;
        float: left;
        width: 100%;
    }

    .locations {
        float: right;
        width: 50%;

    }

    .loc {
        width: 100% !important;
    }

    .audi_left {
        width: 140px;
        float: left;
    }

    .widget_head {
        padding: 10px 16px;
        font-size: 16px;
        border-bottom: 1px solid #eee;
        color: #37c6d3;
        font-weight: 600;
        background: #fff9f9;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }

    .session_table table td:first-child,
    .session_table table th:first-child {
        padding-left: 85px !important;
    }

    .session_table table td .table_data {
        padding-left: 30px;
    }

    .session_table table td .sessionData {
        width: 75px;
        float: left;
    }

    circle {
        fill: #37c6d3;
    }
</style>

@stop


@section('js')
@include('admin.modules.dashboard.js.index')
@stop