@extends('layouts.app')
@section('style_files')
    <link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
@endsection
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Call Types</div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table" id="ob_call_types_table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>KEY</th>
                                    <th>Name</th>
                                    <th width="100">Script</th>
                                    <th>Questions</th>
                                    <th>Record cost</th>
                                    <th>Call cost</th>
                                    <th>Flat cost</th>
                                    <th>Call times</th>
                                    <th>Call on Q days</th>
                                    <th class="input-sortable">Assign Priority</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach ( $call_types as $call_type )
                                <tr>
                                    <td>
                                        {{ $call_type->cid }}
                                    </td>
                                    <td>
                                        <input type="text" name="call_type_key[]" class="form-control" placeholder="Key" style="width: 100px" value="{{ $call_type->calltype_key }}">
                                    </td>
                                    <td>
                                        <input type="text" name="call_type_name[]" class="form-control" placeholder="Call Type Name" style="width: 200px" value="{{ $call_type->calltype_text }}">
                                    </td>
                                    <td>
                                        <button class="btn btn-success btn-sm call_type_scripts" id="call_script_popover_{{ $call_type->cid }}" data-toggle="popover" title="{{ $call_type->calltype_text }}" data-content="" onclick="showCallTypeScript(event)" onmouseover="preventDefaultBehavior(event);"><i class="fas fa-scroll"></i></button>
                                        <button class="btn btn-primary btn-sm" onclick="changeCallScript(event, '', '{{ $call_type->cid }}')"><i class="fas fa-edit" aria-hidden="true"></i></button>
                                    </td>
                                    <td>
                                        <button class="btn btn-primary" onclick="openSurveyQuestionsDialog(event, '', '{{ $call_type->cid }}')">Questions</button>
                                    </td>
                                    <td><input type="text" name="record_cost[]" class="form-control" placeholder="Record Cost" style="width: 75px" value="{{ $dealer_costs_values[ $call_type->cid ]['record_cost'] }}"></td>
                                    <td><input type="text" name="call_cost[]" class="form-control" placeholder="Call Cost" style="width: 75px" value="{{ $dealer_costs_values[ $call_type->cid ]['call_cost'] }}"></td>
                                    <td><input type="text" name="flat_cost[]" class="form-control" placeholder="Flat Cost" style="width: 75px" value="{{ $dealer_costs_values[ $call_type->cid ]['flat_cost'] }}"></td>
                                    <td><input type="text" name="call_times[]" class="form-control" placeholder="Call times" style="width: 75px" value="{{ $call_times_values[ $call_type->cid ] }}"></td>
                                    <td><input type="text" name="call_in_q_days[]" id="call_in_q_days_{{ $call_type->cid }}" class="form-control" placeholder="Call in Q days" style="width: 75px" value="{{ $call_type->call_in_q_days }}" onchange="changeCallTypeValue(event, '{{ $call_type->cid }}', 'call_in_q_days', 0)"></td>
                                    <td><input type="text" name="import_priority[]" id="import_priority_{{ $call_type->cid }}" class="form-control" placeholder="Assign Priority" style="width: 75px" value="{{ $call_type->import_priority }}" onchange="changeCallTypeValue(event, '{{ $call_type->cid }}', 'import_priority', 0)"></td>
                                </tr>                                        
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <div class="alert alert-success" role="alert" id="success-alert-message" style="display: none;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts_extra')
    
    <script type="text/javascript"  src="{{ asset('js/datatables.min.js') }}"></script>

    

    <script>
        $(function () {
            $('.call_type_scripts').popover({
                html: true
            });
        });
        $('body').on('click', function (e) {
            $(".call_type_scripts").each(function () {
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

        $(document).ready( function () {

            
            $.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
            {
                return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
                    if( $('input', td).val() != '') {
                        console.log($('input', td).val());
                        return $('input', td).val();
                    } else {
                        return 9999;
                    }
                } );
            };

            $('#ob_call_types_table').DataTable( {
                paging: false,
                "columnDefs": [
                    {
                        "targets": 'input-sortable',
                        "orderDataType": "dom-text"
                    }
                ]
            } );
        } );
        
    </script>
@endsection