@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' => 'Receiving Numbers'])
                        <!-- 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">Receiving Numbers</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">Receiving Numbers</h3>
                                                        </div>
                                                        <div class="padding-top-10">
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered table-hover mb-0" id="receivingTable">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Receiving Number</th>
                                                                            <th>Tracking Numbers</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    @foreach ($data as $receiving_phone_number => $call)
                                                                        <tr>
                                                                            <td><span class="text-blue">
                                                                                {{$receiving_phone_number}}
                                                                                </span>
                                                                            </td>
                                                                            <td>
                                                                                @foreach ($call['tracking_numbers'] as $source)
                                                                                {{$source}} <br/>
                                                                                @endforeach
                                                                            </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')

@stop
@section('page_scripts')
    @include('call_rails.calljs')
    <script>
        $(function(){
            var groupColumn = 1;
            var table = $('#receivingTable').DataTable({
                "order": [[ groupColumn, 'desc' ]],
            });
        });
    </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