@extends('admin.layouts.master')
@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <style >
        .error{
            color:red;
        }

        #sortable li:hover {
            transform: scale(1.1);
            /*transition: all ease-in-out 0.1s;*/
        }
        .content-wrapper > .content{
            padding: 0;
        }
    </style>
    <div class="row wrapper border-bottom white-bg page-heading uper-box"   style="padding-top: 25px;">
        <div class="col-10">
            <h2>Calender</h2>
            <ul class="breadcrumb"   style="background: white">
                <li>
                    <a href="{{asset('admin.dashboard')}}">Home >></a>
                </li>
                <li>
                   <strong>Calender</strong>
                </li>
            </ul>
        </div>
        <div class="col-2">

        </div>
    </div>

    <div class="card mt-3">
        <div class="card-body">
            <div class="tab-content">

                        <section class="content">
                            <div class="row mb-2">
                                <div class="col-8">
                                    <div id='full_calendar_events'></div>
                                    <div class="center">
                                        <p class="daily-stats">
                                            <b>Daily Stats</b>
                                        </p>
                                        <table>

                                            <tr>
                                                <td>Visits:</td>
                                                <td>100</td>
                                            </tr>
                                            <tr>
                                                <td>Clicks:</td>
                                                <td>100</td>
                                            </tr>
                                            <tr>
                                                <td>Trials:</td>
                                                <td>100</td>
                                            </tr>
                                            <tr>
                                                <td>Conversions:</td>
                                                <td>100</td>
                                            </tr>
                                        </table>
                                        <p class="gross">
                                            <b>Gross</b><br>
                                            <b>$ 8,888.88</b>
                                        </p>
                                    </div>
                                </div>
                                <div class="col-4 rightcal ">
                                    <h3>ACTIVE CAMPAIGNS</h3>
                                    @if(count($campaigns)> 0)
                                            @foreach($campaigns as $campaign)
                                            <div class="accordion" id="accordionExample">
                                                <div class="accordion-item">
                                                        <h2 class="accordion-header" id="headingOne">
                                                            <button id="button" class="accordion-button camplist" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"   style="background: {{$campaign->color}};">
                                                                    {{$campaign->name}}
                                                                    {{$campaign->start_date}}
                                                                    {{$campaign->end_date}}
                                                            </button>
                                                        </h2>
                                                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                                        <div class="accordion-body">
                                                            <div class="container">
                                                                <div class="row">
                                                                    <div class="col-sm">
                                                                        Code:
                                                                    </div>
                                                                    <div class="col-sm">
                                                                        Deace
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-sm">
                                                                        Discount Amount:
                                                                    </div>
                                                                    <div class="col-sm">
                                                                        $10.00
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-sm">
                                                                        Discount Percent:
                                                                    </div>
                                                                    <div class="col-sm">
                                                                        10%
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        @endif
                                </div>
                            </div>
                         </section>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script nonce="{{config('app.nonce')}}" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script nonce="{{config('app.nonce')}}" src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
    <script nonce="{{config('app.nonce')}}" src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
    <script nonce="{{config('app.nonce')}}" src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
    <script nonce="{{config('app.nonce')}}" src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
    <script nonce="{{config('app.nonce')}}" src="https://cdnjs.cloudflare.com/ajax/libs/tooltip.js/1.3.1/tooltip.min.js" integrity="sha512-ZAFwin0nQNXMJRo329TcU4ZyC+ZgKbnaopq/LH/6j7n9zT7ZVLK5BiSmnqgx7jNiewVLgc04geoE62cNN1D8VQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script nonce="{{config('app.nonce')}}">


        var date = new Date();
        var myEvents = [
                @php $count = 1; $date = \Carbon\Carbon::now()->format("m/d/Y");  @endphp

                @foreach($campaigns as $campaign)
            {
                id: '{{$campaign->id}}',
                title: '{{$campaign->name}}',
                start: '{{$campaign->start_date}}',
                end: '{{$campaign->end_date}}',
                color: '{{$campaign->color}}',
            },
            @endforeach
        ];
        var timezoneMain = Intl.DateTimeFormat().resolvedOptions().timeZone;
        var timeZone = timezoneMain;
        // console.log(myEvents);

        $('#full_calendar_events').fullCalendar({
            timezone:'UTC',
            // timeZone:false,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ''
                // right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: date,
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectHelper: true,
            dayClick: function (date,start, end, event, element) {
                var d = new Date(date).toUTCString();
                console.log(d,'converted');
            },
            eventRender: function(event,cell) {

                var today = new Date();
                var end = new Date();
                end.setDate(today.getDate()-1);

                if( date < end) {
                    cell.css("background-color", "yellow");
                } // this is for previous date

                if(date > today) {
                    cell.css("background-color", "blue");
                }
                $('.fc-day[data-date="' + event.start.format("YYYY-MM-DD") + '"]').append("<div class='already-booked'><span>$10000 <br></span></div>");


            },

            eventClick: function (event, element, id) {
                get_dates(event.start._i);
            },
            eventDidMount: function(info) {
                var tooltip = new Tooltip(info.el, {
                    title: info.event.extendedProps.description,
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                });
            },

            editable: true,
            eventLimit: true,// allow "more" link when too many events
            events: myEvents,


        });

        $("button").click(function(){
            $("#flush-collapseOne").addClass("show");
        });
    </script>
@endsection