@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="{{asset('assets/css/datatables/datatables.min.css')}}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{asset('css/layout/callrail.css')}}">
@stop

@section('content')
    <div class="container-fluid p-0 chat">
        <div class="row m-0">
            <div class="col-xl-12 p-0">
                <!-- Begin Widget -->
                <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">
                        <!-- Begin Friendslist -->
                        @include('call_rails.sidebar', ['page' => 'SMS Log'])
                        <!-- End Friendslist -->
                    </div>
                    <!-- End Friends Sidebar -->
                    <!-- Begin Messages -->
                    <div class="col-xl-10 col-lg-10 col-md-12 d-flex ">
                        <!-- Begin Card -->
                        <div class="card w-100 ">
                            <!-- Begin Tab -->
                            <div class="">
                                <div>
                                    <div class="card-header">
                                        <div class="d-flex flex-xl-row flex-lg-row flex-md-row flex-column align-items-center">
                                            <div class="col-xl-4 d-flex justify-content-xl-start justify-content-lg-start justify-content-md-start justify-content-center">
                                                <div class="discussion-name">SMS Log </div>
                                            </div>
                                            @if(\Illuminate\Support\Facades\Auth::user()->company->company_type == 2)
                                                <div class="col-xl-4"></div>
                                            @endif
                                            <div class="col-xl-3">
                                                <input class="form-control datepicker float-right" type="text" value="@if (\Illuminate\Support\Facades\Session::has('date_range')){{\Illuminate\Support\Facades\Session::get('date_range')}}@endif">
                                            </div>
                                            @if(\Illuminate\Support\Facades\Auth::user()->company->company_type == 1)
                                                <div class="col-xl-4">
                                                    <div class="float-right">
                                                        <select class="form-control" id="company">
                                                            <option>Please select</option>
                                                            @foreach ($companies as $company)
                                                                @if ($company->status === 'active')
                                                                    <option value="{{$company->company_id}}" @if (Session::has('company') && Session::get('company') === $company->company_id) selected @endif>{{$company->name}}</option>
                                                                @endif
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="col-xl-1">
                                                <button class="btn" onclick="javascript: filter()">Filter</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body d-flex flex-column no-padding">
                                        <div class="">
                                            {{--table--}}
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="widget has-shadow">
                                                        <div class="widget-header bordered no-actions d-flex align-items-center site-bg" style="">
                                                            <h3 class="text-white">SMS Log</h3>
                                                        </div>
                                                        <div class="padding-top-10">
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered table-hover mb-0" id="smsTable">
                                                                    <thead>
                                                                        <tr>
                                                                            <th width="20%">From</th>
                                                                            <th>To</th>
                                                                            <th>Count</th>
                                                                            <th>Recent Message</th>
                                                                            <th>SMS History</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    @foreach ($data as $text)
                                                                        <tr>
                                                                            <td>{{$text->formatted_customer_phone_number}}
                                                                                <span class="text-blue">
                                                                                {{$text->customer_name}}
                                                                                </span>
                                                                            </td>
                                                                            <td>
                                                                              {{$text->initial_tracking_number}}
                                                                            </td>
                                                                            <td>{{count($text->recent_messages)}}</td>
                                                                            <td>
                                                                                @if (count($text->recent_messages))
                                                                                    {!! $text->recent_messages[0]->content !!}
                                                                                @endif
                                                                            </td>
                                                                            <td>
                                                                                <a data-toggle="modal" data-target="#sms-log-history" data-backdrop="static" data-keyboard="false" onclick="javascript: showSmsHistory('{{$text->id}}')" style="cursor: pointer">
                                                                                    Show
                                                                                </a>
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Card -->
                    </div>
                </div>
                <!-- End Widget -->
            </div>
            <!-- End Col -->
        </div>
        <!-- End Row -->
    </div>
@stop

@section('page_modals')
    <div id="sms-log-history" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">SMS History</h4>
                    <button type="button" class="close" data-dismiss="modal" onclick="javascript: hideSmsHistory()">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <div class="modal-body">
                    @foreach ($data as $text)
                        <div id="{{$text->id}}" style="display:none" class="sms-log">
                            @if (count($text->recent_messages))
                                <table class="table table-bordered table-hover mb-0">
                                    <thead>
                                    <tr>
                                        <th width="10%">Direction</th>
                                        <th width="70%">Content</th>
                                        <th>Sent</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($text->recent_messages as $message)
                                        <tr>
                                            <td>{{$message->direction}}</td>
                                            <td>{!! $message->content !!}</td>
                                            <td>{{date('Y-m-d', strtotime($message->created_at))}}
                                                <br/><span class="text-blue"><i class="la la-clock-o"></i> {{date('h:ia', strtotime($message->created_at))}}</span></td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@stop
@section('page_scripts')
    @include('call_rails.calljs')
    <script>
        $(function(){var groupColumn = 2;
            var table = $('#smsTable').DataTable({
                "order": [[ groupColumn, 'desc' ]],
            });
        });

        function showSmsHistory (id) {
            $('#'+id).show();
        }

        function hideSmsHistory () {
            $('.sms-log').hide();
        }
    </script>
    <!--CUSTOM SCRIPTS-->
    <script src="{{asset('assets/vendors/js/datatables/datatables.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/jszip.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/buttons.html5.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/pdfmake.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/vfs_fonts.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/buttons.print.min.js')}}"></script>
    <script src="{{asset('assets/js/components/tables/tables.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datepicker/daterangepicker.js')}}"></script>
@stop