@extends('layouts.app')
@section('style_files')
    <link rel="stylesheet" href="{{ asset('css/jquery.typeahead.min.css') }}">
@endsection
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Companies Settings</div>

                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group col-md-1">
                            
                        </div>
                        <div class="form-group col-md-10">
                            <div id="typeahead_container" class="twitter-wrapper">
                                <form id="form-stations" name="form-stations">
                                    @csrf
                                    
                                        <input class="typeahead" id="search_value" name="search_value" type="text" placeholder="Search Dealer">
                                        
                                    
                                </form>
                            </div>
                        </div>
                        <div class="form-group col-md-1">
                            
                        </div>
                    </div>
                    <br>
                    <div class="alert alert-success" role="alert" id="success-alert-message" style="display: none;">
                    </div>
                    <div id="twilio_phones_container">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th class="table_cell_content text-center">Twilio Phone</th>
                                    <th class="table_cell_content text-center">Automated reminders</th>
                                    <th class="table_cell_content text-center">Edit</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($dealers as $dealer)
                                    <tr id="dealer_row_{{ $dealer->coid }}">
                                        <td id="dealer_name_{{ $dealer->coid }}">{{ $dealer->co_name }}</td>
                                        <td class="table_cell_content">
                                            @if(isset($twilio_phones_array[$dealer->coid]))
                                                <input type="text" class="form-control" id="twilio_phone_{{ $dealer->coid }}" name="twilio_phone_{{ $dealer->coid }}" value="{{ $twilio_phones_array[$dealer->coid] }}" onchange="updateTwilioNumber('{{ $dealer->coid }}')">
                                            @else
                                                <input type="text" class="form-control" id="twilio_phone_{{ $dealer->coid }}" name="twilio_phone_{{ $dealer->coid }}" value="" onchange="updateTwilioNumber('{{ $dealer->coid }}')">
                                            @endif
                                        </td>
                                        <td align="center">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="automated_reminder_{{ $dealer->coid }}" name="automated_reminder_{{ $dealer->coid }}" 
                                                @include('inputs.checkbox_radio', ['input_value' => 1, 'value' => $dealer->automated_reminder]) onclick="setAutomatedReminderActive(event, '{{ $dealer->coid }}')">
                                                <label class="custom-control-label" for="automated_reminder_{{ $dealer->coid }}"></label>
                                            </div>
                                        </td>
                                        <td align="center"><a href="#"><i class="fas fa-edit" onclick="editCompanyDialog(event, {{ $dealer->coid }})"></i></a></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts_extra')
    <script src="{{ asset('js/bloodhound.min.js') }}" type="application/javascript"></script>
    <script src="{{ asset('js/typeahead.bundle.min.js') }}" type="application/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $(document).on('click', '.pagination a',function(event)
            {
                event.preventDefault();
                $('li').removeClass('active');

                $(this).parent('li').addClass('active');
                var myurl = $(this).attr('href');
                var page=$(this).attr('href').split('page=')[1];
                stationsPaginationData(page, null, 0);
            });
            
            var userList = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: $('meta[name="main-url"]').attr('content')+'/twilio/search#%QUERY',
                    wildcard: '%QUERY',
                    transport: function (opts, onSuccess, onError) {
                        var url = opts.url;
                        var form_values = $("#form-stations").serialize();
                        $.ajax({
                            url: url,
                            headers: {
                                'X-CSRF-TOKEN':'{{ csrf_token() }}'
                            },
                            data: form_values,
                            type: "POST",
                            success: onSuccess,
                            error: onError,
                        })
                    }
                }
            });
            $('#search_value').typeahead(null, {
                  name: 'best-pictures',
                  display: 'value',
                  source: userList,
                  highlight: true,
                  templates: {
                    empty: [
                          '<div class="empty-message">',
                            'No dealer found.',
                          '</div>'
                        ].join('\n')
                }
            }).bind('typeahead:select', function(ev, suggestion) {
                if(suggestion != null) {
                    twilioPhonesPaginationData(1, suggestion.id, 0);
                } else {
                    twilioPhonesPaginationData(1, null, 0);
                }
            });
        });

        function twilioPhonesPaginationData(page,id, showall)
        {
            var html = getLoadingContent();
            $("#users_container").empty().html(html);
            
            $.ajax(
            {
                url: $('meta[name="main-url"]').attr('content')+'/twilio/pagination',

                type: "post",

                datatype: "html",

                data: {
                    page:page,
                    id:id, 
                    showall: showall,
                    "_token": "{{ csrf_token() }}"
                }
            }).done(function(data){

                $("#twilio_phones_container").empty().html(data);

                location.hash = page;
            }).fail(function(jqXHR, ajaxOptions, thrownError){

                  alert('No response from server');
            });
        }
    </script>
@endsection