@section('page-specific-style')
@parent


@endsection

<form action="{{ url()->current() }}" method="GET">

    <div class="row">
        <div class="col-md-3 mb-3">
            <div class="form-group">
                <select class="form-control" name="assigned_to">
                    <option selected disabled>Assigned To</option>
                    <option value="">Any</option>
                    @forelse($agents as $agent)
                        <option value="{{ $agent->id }}" @selected($agent->id == request()->assigned_to)>{{ $agent->name }}</option>
                    @empty
                        <option value="">No Agents Found</option>
                    @endforelse
                </select>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="form-group">

                <input type="text" name="created_at" class="form-control dp"
                       placeholder="Creation Date"
                       value="{{ request()->created_at }}">
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="form-group">

                <input type="text" name="scheduled_on" class="form-control dp"
                       placeholder="Scheduled On"
                       value="{{ request()->scheduled_on }}">
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="form-group">
                <select class="form-control" name="type">
                    <option selected disabled>Activity Type</option>
                    <option value="">Any</option>
                    @forelse($activityTypes as $activityType)
                        <option value="{{ $activityType->value }}" @selected($activityType->value == request()->type)>{{ $activityType->value }}</option>
                    @empty
                        <option value="">No Activity Types Found</option>
                    @endforelse
                </select>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="form-group">
                <select class="form-control" name="state">
                    <option selected disabled>Status</option>
                    <option value="" >Any</option>
                    @foreach($activityStates as $state)
                        <option value="{{ $state->value }}" @selected($state->value == request()->state)>{{ $state->value }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        @if (!$is_used_in_lead)
        <div class="col-md-3 mb-3">
            <div class="form-group">
                <input type="text" class="form-control" name="tags" placeholder="Tags">
            </div>
        </div>
        <div class="col-md-6 mb-3 frmw100">
            <div class="form-group">
                <select class="form-control" name="lead_id" id="lead_id_autocomplete_filter">
                    <option selected disabled>Lead</option>
                    <option value="">Any</option>
                </select>
            </div>
            <button class="btn btn-primary" type="submit">Search</button>
        </div>
        @endif
    </div>
</form>

<div class="table-container">
    <table id="activities-datatable" class="table table-bordered dt-responsive nowrap w-100">
        <thead class="table-light">
        <tr>
            <th>Activity ID</th>
            @if(!$is_used_in_lead)
            <th>Name</th>
            <th>Phone</th>
            @endif
            <th>Status</th>
            <th>Type</th>
            <th>Description</th>
            <th>Created On</th>
            <th>Scheduled On</th>
            <th>Action</th>
            <th>Assigned To</th>
            <th>Completed On</th>
        </tr>
        </thead>
        <tbody>
        @forelse ($activities as $activity)
            <tr>
                <td>{{ $activity->id }}</td>
                @if(!$is_used_in_lead)
                <td>{{ $activity->lead->fullName }}</td>
                <td>{{ $activity->lead->primary_phone_number }}</td>
                @endif
                <td>
                    @if($activity->state =='Scheduled') <i class="far fa-clock text-warning"></i>
                    @elseif($activity->state =='Completed') <i class="fas fa-check text-success"></i>
                    @elseif($activity->state =='Deleted') <i class="fas fa-trash-alt text-danger"></i>
                    @endif
                    {{ $activity->state }}
                </td>
                <td>{{ $activity->type }}</td>
                <td>
                    <span class="trimmed-content" title="{{ $activity->description }}">{{ $activity->description }}</span>
                </td>
                <td>{{ $activity->created_at?->format('d M y, H:i a') }}</td>
                <td>
                    @if($activity->scheduled_on)
                        {{ \Carbon\Carbon::parse($activity->scheduled_on)?->format('d M y, H:i a') }}
                    @endif
                </td>
                <td>
                    @if($activity->state =='Scheduled')
                    @can('Update activities')
                    <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#updateActivityModal"
                       data-activity_id="{{ $activity->id }}">
                        <i class="fas fa-edit"></i></button>
                    @endcan
                    @endif
                </td>
                <td>{{ $activity->agent?->name }}</td>
                <td>
                    @if($activity->completed_on)
                        {{ \Carbon\Carbon::parse($activity->completed_on)?->format('d M y, H:i a') }}
                    @endif
                </td>
            </tr>
        @empty
        @endforelse
        </tbody>
    </table>
</div>

@section('page-specific-script')
@parent

    <!-- Date Range Picker -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <script>


        $(document).ready(function () {



            $('.trimmed-content').each(function () {
                const ele = $(this);
                let maxLength = 100;
                let content = ele.html();
                if(content.length > maxLength) {
                    const newContent = content.substring(0,maxLength)+'... ';
                    ele.html(newContent);
                }
            })

            $('#activities-datatable').DataTable({
                responsive: true,
                lengthChange: false,
                "pageLength": 25
            });

            $('input.dp').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            $('input.dp').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });
            $('input.dp').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

            $('#lead_id_autocomplete_filter').select2({
                placeholder: 'Select Lead',
                minimumInputLength : 3,
                ajax : {
                    url : "/activities/leads",
                    dataType: 'json',
                    processResults: function (data) {
                        return {
                            results: data.data
                        };
                    }
                }
            });
        })
    </script>

@endsection