@extends('layouts.app')
@section('styles')

@endsection
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Last Calls</div>
                <div class="card-body">
                    <div class="alert alert-success" role="alert" id="success-alert-message" style="display: none;">
                    </div>
                    <div class="alert alert-danger" id="account_settings_error" style="display:none">
                      Something went wrong...
                      <ul></ul>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12 text-center">
                            <div id="success"></div>
                        </div>
                    </div>
                    <form method="POST" id="add_form" action="" class="needs-validation" novalidate>
                        <fieldset id="disable_form_fieldset">
                        @csrf
                        <div class="form-row">
                            <div class="form-group col-md-2">
                                <label for="coid">{{ __('Dealer') }}</label>
                                <select class="form-control need-validation-inputs" id="coid" name="coid" required>
                                    @include('inputs.select_options', ['options' => $dealers_options, 'value_selected' => ''])
                                </select>
                            </div>
                            <div class="form-group col-md-2">
                                <label for="start_date_search">{{ __('Start Date') }}</label>
                                <input type="text" class="form-control search_datepicker_inputs" name="start_date_search" id="start_date_search" value="{{ date('m/d/Y') }}">
                                <div class="invalid-feedback">
                                    Provide start date.
                                </div>
                            </div>
                            <div class="form-group col-md-2">
                                <label for="end_date_search">{{ __('End Date') }}</label>
                                <input type="text" class="form-control search_datepicker_inputs" name="end_date_search" id="end_date_search" value="{{ date('m/d/Y') }}">
                                <div class="invalid-feedback">
                                    Provide end date.
                                </div>
                            </div>
                            <div class="form-group col-md-1">
                                <label for="calltype_search">{{ __('Call Type') }}</label>
                                <select class="form-control" id="calltype_search" name="calltype_search" required>
                                    <option value="all">All</option>
                                    @include('inputs.select_options', ['options' => $calltypes, 'value_selected' => ''])
                                </select>
                                <div class="invalid-feedback">
                                    Provide a call type.
                                </div>
                            </div>
                            <div class="form-group col-md-2">
                                <label for="resolution_search">{{ __('Resolution') }}</label>
                                <select class="form-control" id="resolution_search" name="resolution_search" required>
                                    <option value="all">All</option>
                                    @include('inputs.select_options', ['options' => $resolutions, 'value_selected' => ''])
                                </select>
                                <div class="invalid-feedback">
                                    Provide a call type.
                                </div>
                            </div>
                            <div class="form-group col-md-1">
                                <label for="status_search">{{ __('Status') }}</label>
                                <select class="form-control" id="status_search" name="status_search" required>
                                    <option value="all">All</option>
                                    <option value="Completed">Completed</option>
                                    <option value="Urgent">Urgent</option>
                                </select>
                                <div class="invalid-feedback">
                                    Provide a call type.
                                </div>
                            </div>
                            <div class="form-group col-md-2">
                                <label for="value_search">{{ __('Search') }}</label>
                                <div class="input-group">
                                    <input type="text" id="value_search" name="value_search" class="form-control need-validation-inputs" name="search" >
                                    <div class="input-group-append">
                                        <button type="submit" id="submit_search" onclick="searchInboundLastCalls(event)" class="btn btn-secondary">
                                            <i class="fas fa-search" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div> 
                        </fieldset>
                    </form>
                    <br />
                    <div id="last_calls_container"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts_extra')
    
    <script type="text/javascript">
        $('#start_date_search').datepicker({
            language: "en",
            autoclose: true,
            orientation: "bottom",
        });

        $('#end_date_search').datepicker({
            language: "en",
            autoclose: true,
            orientation: "bottom",
        });

    </script>
@endsection