@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <style>
        .sidebar2 {
            background: #f2f3f8 !important;
        }

        .messages-list {
            overflow-y: scroll;
        }
    </style>
    <link rel="stylesheet" href="{{asset('css/layout/callrail.css')}}">
@stop

@section('content')

    <div class="container-fluid p-0 chat">
        <div class="row m-0 widget no-bg">
            <!-- Begin Friends Sidebar -->
            <div class="col-xl-2 col-lg-3 col-md-12 p-0" id="sidebar">
                @include('contact_form.sidebar')
            </div>

            {{--content--}}
            <div class="col-xl-10 col-lg-10 col-md-12 d-flex ">
                <div class="card w-100 ">
                    <div class="row">
                        <div class="page-header" style="padding: 2%;">
                            <div class="d-flex align-items-center">
                                <h2 class="page-header-title text-gradient-02">Real Time Chat</h2>
                                <div>
                                    <ul class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}"><i class="ti ti-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                                        <li class="breadcrumb-item active">Real Time Chat</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        @if(auth()->user()->role_id == 1)
                            <div class="col-xl-7 col-md-7">&nbsp;</div>
                            <div class="col-xl-2 col-md-2" style="margin-top: 0.5%"><b>Select Company:</b></div>
                            <div class="col-xl-3 col-md-3">
                                <select class="form-control" onchange="load()" id="company_id">
                                    @foreach($companies as $company)
                                        <option value="{{ $company->id }}" @if($company_id == $company->id) selected="selected" @endif >{{ $company->name }}</option>
                                    @endforeach
                                </select>
                                <br/>
                            </div>
                        @endif
                    </div>

                    @if(!empty($contact_data) && count($contact_data) > 0)
                        <div class="row contact-chart-row">
                            <div class="col-xl-12">
                                <div class="widget has-shadow">
                                    <div class="widget-header bordered no-actions d-flex align-items-center">
                                        <h4>Contact Submission Per Month</h4>
                                    </div>
                                    <div class="widget-body">
                                        <div class="chart">
                                            <canvas height="200" id="monthly-contact"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row no-margin">

                            <div class="col-xl-12">
                                <!-- Begin Widget -->
                                <div class="row widget mb-0">
                                    <!-- Begin Messages List -->
                                    <div class="col-xl-5 col-md-5 no-padding sidebar2" id="sidebar">
                                        <div class="sidebar-content w-100 h-100">
                                            <!-- Begin List Group -->
                                            <div id="list-group">
                                                <ul class="messages-list list-group w-100 list-scroll auto-scroll">

                                                    @if(!empty($contact_data))
                                                        @if(count($contact_data) > 0)
                                                            @php
                                                                $ctr = 0;
                                                            @endphp
                                                            @foreach($contact_data as $key=> $contact)
                                                                @php
                                                                    $ctr += 1;
                                                                    $info = (array) $contact->data;
                                                                @endphp
                                                                <li class="list-group-item">
                                                                    <a data-toggle="tab" href="#mail-{{ $ctr }}" style="width: 100%;">
                                                                        <div class="media">
                                                                            <div class="media-left align-self-center">
                                                                                <img src="../img/defaultuser.png" class="user-img rounded-circle" alt="..." style="width: 35px;">
                                                                            </div>
                                                                            <div class="media-body align-self-center" style="padding: 0 5% 0 5%;">
                                                                                <div class="username">
                                                                                    <h4>{{ isset($info['Name']) ? $info['Name'] : @$info['Full Name'] }}</h4>
                                                                                </div>
                                                                                <div class="msg">
                                                                                    <p>{{ !empty($info['Email']) ? 'Email: '. $info['Email'] : 'Phone: '.@$info['Phone Number'] }}</p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="float-right media-right align-self-center">
                                                            <span class="date-send">
                                                                {{ date('M d, Y', strtotime($contact->created_on)) }}
                                                                <br />
                                                                {{ date('H:iA', strtotime($contact->created_on)) }}
                                                            </span>
                                                                                <span class="badge-rounded info mx-auto"></span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                            @endforeach
                                                        @else
                                                            <li class="list-group-item">No data found.</li>
                                                        @endif
                                                    @else
                                                        <li class="list-group-item">No data found.</li>
                                                    @endif
                                                </ul>
                                            </div>
                                            <!-- End List Group -->
                                        </div>
                                    </div>
                                    <!-- End Messages List -->
                                    <!-- Begin Messages -->
                                    <div class="col-xl-7 col-md-7 bg-mail d-flex">
                                        <!-- Begin Card -->
                                        <div class="card w-100 has-shadow">
                                            <!-- Begin Tab -->
                                            <div class="tab-content">
                                            @if(!empty($contact_data))
                                                @if(count($contact_data) > 0)
                                                    @php
                                                        $ctr = 0;
                                                    @endphp
                                                    @foreach($contact_data as $k => $contact)
                                                        @php
                                                            $ctr += 1;
                                                            $info = (array) $contact->data;
                                                        @endphp
                                                        <!-- Begin Tab 1 (Show) -->
                                                            <div class="tab-pane fade show @if($ctr == 1) active @endif mail-scroll auto-scroll" id="mail-{{ $ctr }}">
                                                                <!-- Begin Card Body -->
                                                                <div class="card-body d-flex flex-column">
                                                                    <table class="table">
                                                                        <tr>
                                                                            <th colspan="2" class="bg-dark ">
                                                                                <h2 class="text-white">Form Contents</h2>
                                                                            </th>
                                                                        </tr>
                                                                        @foreach($info as $key => $data)
                                                                            @if(!empty($data))
                                                                                <tr>
                                                                                    <td style="width: 25%" class="extra-bold bg-primary">{{ str_replace('_', ' ', ucfirst($key)) }}</td>
                                                                                    <td class=""> {{ $data }} </td>
                                                                                </tr>
                                                                            @endif
                                                                        @endforeach

                                                                    </table>
                                                                </div>
                                                                <!-- End Card Body -->
                                                                <!-- Begin Publisher -->

                                                                <!-- End Publisher -->
                                                            </div>
                                                            <!-- End Tab 1 -->
                                                        @endforeach
                                                    @else
                                                        <div class="tab-pane fade show active mail-scroll auto-scroll" style="padding: 2%; text-align: center;" id="mail-0">
                                                            No data found.
                                                        </div>
                                                    @endif
                                                @else
                                                    <div class="tab-pane fade show active mail-scroll auto-scroll" style="padding: 2%; text-align: center;" id="mail-0">
                                                        No data found.
                                                    </div>
                                                @endif
                                            </div>
                                            <!-- End Tab -->
                                        </div>
                                        <!-- End Card -->
                                    </div>
                                    <!-- End Messages -->
                                </div>
                                <!-- End Widget -->
                            </div>
                            <!-- End Col -->
                        </div>
                @else
                    @include('no_data', [
                                              'nd_title' => 'No Available Data',
                                              'nd_subtitle' => 'Please contact our team for further assistance.'
                                   ])
                @endif
                <!-- End Row -->
                </div>
            </div>

        </div>

    </div>


@stop

@section('page_modals')

    @include('template.footer_scripts')

@stop

@section('page_scripts')

    {{-- <script src="{{ asset('assets/js/app/mail/mail.min.js') }}"></script> --}}
    <script type="text/javascript">
        var ctx = document.getElementById("monthly-contact").getContext('2d');

        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [@foreach($contact_stats as $date => $calls)
                    "{{ $date }}",
                    @endforeach],
                datasets: [{
                    label: "Contacts",
                    borderColor: "#fff",
                    backgroundColor: "rgba(93, 83, 134, 0.85)",
                    hoverBackgroundColor: "#5d5386",
                    data: [@foreach($contact_stats as $date => $stats)
                        "{{ $stats }}",
                        @endforeach]
                }]
            },
            options: {
                legend: {
                    display: false,
                    position: 'top',
                    labels: {
                        fontColor: "#2e3451",
                        usePointStyle: true,
                        fontSize: 13
                    }
                },
                tooltips: {
                    backgroundColor: 'rgba(47, 49, 66, 0.8)',
                    titleFontSize: 13,
                    titleFontColor: '#fff',
                    caretSize: 0,
                    cornerRadius: 4,
                    xPadding: 10,
                    displayColors: false,
                    yPadding: 10
                },
                scales: {
                    xAxes: [{
                        stacked: false,
                        gridLines: {
                            drawBorder: true,
                            display: false
                        },
                        ticks: {
                            display: true
                        },
                        barPercentage: 0.4
                    }],
                    yAxes: [{
                        stacked: false,
                        gridLines: {
                            drawBorder: true,
                            display: false
                        },
                        ticks: {
                            display: true,
                            beginAtZero: true
                        }
                    }]
                },
                responsive: true,
                maintainAspectRatio: false,
            }

        });


        function load()
        {
            d = document.getElementById("company_id").value;
            location.href= "{{ route('contact_form.contact-form') }}/"+d;
        }


    </script>

@stop