@extends('admin.layout.app')

@section('title', 'Calendar')

@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>
                <li><a href="#" class="breadcrumb_link" onclick="return false">Calendar</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" style="border-bottom: 1px solid #eee !important; margin-bottom: 6px !important;">
                        <div class="caption">
                            <h2>Social Media Calendar</h2>
                        </div>
                        <div class="actions success_actions">
                            <button class="theme_btn_round btn" >
                                <a data-href="{{ route('admin.calendar.create') }}" data-toggle="modal" data-target="#new_post">Add Post</a>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="tabbable-line">
                    <ul class="nav nav-tabs">
                        <li class="purchases active">
                            <a href="#leads" class="leads" data-toggle="tab" aria-expanded="true">CALENDAR</a>
                        </li>
                        <li class="purchases">
                        <a href="#opportunities" data-href="{{ route('admin.list.datatable')}}" class="opportunities" data-toggle="tab" aria-expanded="true">LISTS</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="leads">
                            @include('admin.modules.general.calendar')
                        </div>

                        <div class="tab-pane" id="opportunities">
                            @include('admin.modules.calendar.list')
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>

<div class="modal scrollable fade bs-modal right modal-fullscreen r_u_sure in" id="new_post" role="dialog"
    aria-hidden="false" style="">
    <div class="sweet-overlay" tabindex="-1"></div>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">


        </div>
    </div>
</div>

@include('admin.modules.general.file_upload')
@stop

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('global/calendar/calendar.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('global/bootstrap-toastr/toastr.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/sweetalert.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/croppie.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('global/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('global/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' />
<style rel="stylesheet" type="text/css">



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

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

    #calendar {
        margin: 0;
        width: 100%;
        background-color: #FFFFFF;
        border-radius: 6px;
    }



    #calendar .fc-week .fc-day>div {
        min-height: 100px !important;
    }

    #calendar .fc-content .fc-event {
        text-align: center;
    }

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


    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-day {
        position: relative;
    }

    .fc-soc-fb {
        width: 24px;
        height: 24px;
        display: block;
        background: url('../images/fb.png') no-repeat scroll 0 0;
        
    }
    

    .fc-soc-inst {
        width: 24px;
        height: 24px;
        display: block;
        background-image: url('../images/Insta.png');
        background-repeat: no-repeat;
        background-position: 0 0;
    }

    .fc-soc-wrap {
        width: 96%;
        position: absolute;
        float: left;
        left: 2%;
        bottom: 5%;
        right: 2%;
        background-color: bisque;
        display: flex;
    }

    .fc-add-wrap .fc-addBtn {
        font-size: 24px !important;
        padding: 0px 10px;
        z-index: 9999;
    }

    .fc-add-wrap .fc-addBtn a:hover {
        color: gray;
    }

    .fc-day .portal_add_btn:hover {
        display: block;

    }


    .fc-day:hover .fc-add-wrap {
        display: block !important;
    }

    .modal-fullscreen.modal .modal-body {
        overflow-x: hidden;
    }
    .theme_btn_round.btn a{
        color: #fff !important;
    } 

    
    #add_edit_form .body_wrap {height: 100%;}
    #add_edit_form .body_wrap .row {height: 100%;}

    .dropdown_row_option:last-child {
        color: #337ab7;
    }

    .dropdown_row_option:last-child:hover{
        color: #3e4b58;
        opacity: 1.5 !important;
    }

    .modal .right_side_task{
        height: 100%;
    }
    #add_edit_form .body_wrap {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    display: inline-table;
    width: 100%;
    }
    .table_option_checkboxes {
        z-index: 9;
    }
    .fc-day-grid-event {
        float: left;
        border: none;
    }
  
</style>
@stop

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