@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' => 'Tracking Code & Sources'])
                        <!-- 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">Tracking Code & Sources</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">Tracking Code & Sources</h3>
                                                        </div>
                                                        <div class="padding-top-10">
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered table-hover mb-0" id="trackingCodeSourcesTable">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Tracker Name</th>
                                                                            <th>Status</th>
                                                                            <th>Numbers</th>
                                                                            <th>Created Date</th>
                                                                            <th>SMS Enabled</th>
                                                                            <th>Call Flow</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    @if (isset($data->trackers))
                                                                        @foreach ($data->trackers as $tracker)
                                                                            <tr>
                                                                                <td><span class="text-blue">
                                                                                    {{$tracker->name}}
                                                                                    </span>
                                                                                </td>
                                                                                <td>
                                                                                    <span class="@if ($tracker->status == 'active') text-blue @else text-warning @endif">
                                                                                        {{$tracker->status}}
                                                                                    </span>
                                                                                </td>
                                                                                <td>
                                                                                    <a data-toggle="modal" data-target="#tracking-numbers" data-backdrop="static" data-keyboard="false" onclick="javascript: showTrackingNumbers('{{$tracker->id}}')" style="cursor:pointer" title="View assigned numbers">
                                                                                        {{count($tracker->tracking_numbers)}} assigned
                                                                                    </a>
                                                                                </td>
                                                                                <td>{{date('Y-m-d', strtotime($tracker->created_at))}}</td>
                                                                                <td>@if ($tracker->sms_enabled) yes @else no @endif</td>
                                                                                <td>{{$tracker->call_flow->type}}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    @endif
                                                                    </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="tracking-numbers" class="modal fade">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Tracking Numbers List</h4>
                    <button type="button" class="close" data-dismiss="modal" onclick="javascript: hideTrackingNumbers()">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <div class="modal-body">
                    @if (isset($data->trackers))
                        @foreach ($data->trackers as $tracker)
                            <div id="{{$tracker->id}}" style="display:none" class="tracking-numbers">
                                <ul class="list-group w-100 ">
                                    @foreach ($tracker->tracking_numbers as $number)
                                        <li>{{$number}}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
@stop
@section('page_scripts')
    @include('call_rails.calljs')
    <script>
        $(function(){
            var groupColumn = 2;
            var table = $('#trackingCodeSourcesTable').DataTable({
                "order": [[ groupColumn, 'desc' ]],
            });
        });

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

        function hideTrackingNumbers () {
            $('.tracking-numbers').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