@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> --}}

{{-- {{ dd($is_used_in_lead) }} --}}

<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>

        </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
            // });
            var activitiesDatatable = $('#activities-datatable').DataTable({
                responsive: true,
                lengthChange: false,
                "pageLength": 25,
                // "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('activities.index') }}",
                    "data": function(d) {
                        d.assigned_to = $('select[name=assigned_to]').val();
                        d.created_at = $('input[name=created_at]').val();
                        d.scheduled_on = $('input[name=scheduled_on]').val();
                        d.type = $('select[name=type]').val();
                        d.state = $('select[name=state]').val();
                        d.tags = $('input[name=tags]').val();
                        d.lead_id = $('select[name=lead_id]').val();
                        d.full_name_search = $('#activity-search').val();
                    },
                    beforeSend: function() {
                        $.LoadingOverlay("show", {
                            image: "",
                            text: "Loading...",
                            background: "rgba(0, 0, 0, 0.5)",
                            textColor: "#fff",
                            fontSize: "10px !important"
                        }); // Show loading overlay
                    },
                    complete: function() {
                        $.LoadingOverlay("hide");
                    }
                },
                "columns": [{
                        "data": "id"
                    },
                    @if (!$is_used_in_lead)
                        {
                            "data": "full_name"
                        }, {
                            "data": "primary_phone_number"
                        },
                    @endif {
                        "data": "state"
                    },
                    {
                        "data": "type"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": "created_at"
                    },
                    {
                        "data": "scheduled_on"
                    },
                    {
                        "data": "action"
                    },
                    {
                        "data": "agent"
                    },
                    {
                        "data": "completed_on"
                    }
                ]
            });

            $('#activities-datatable_filter').hide();

            function CreatedDateRangeFilter(settings, data, dataIndex) {
                var dateToBeFiltered = data[7];

                var tableDate = moment(dateToBeFiltered, 'DD MMM YYYY hh:mmA').format('YYYY-MM-DD');

                var startDate = $('#created_at').data('daterangepicker').startDate.format('YYYY-MM-DD');
                var endDate = $('#created_at').data('daterangepicker').endDate.format('YYYY-MM-DD');

                if (moment(tableDate).isBetween(startDate, endDate, undefined, '[]')) {
                    return true; // Show the row
                }
                return false; // Hide the row
            }

            function ScheduledDateRangeFilter(settings, data, dataIndex) {
                var dateToBeFiltered = data[8];

                var tableDate = moment(dateToBeFiltered, 'DD MMM YYYY hh:mmA').format('YYYY-MM-DD');

                var startDate = $('#scheduled_on').data('daterangepicker').startDate.format('YYYY-MM-DD');
                var endDate = $('#scheduled_on').data('daterangepicker').endDate.format('YYYY-MM-DD');

                if (moment(tableDate).isBetween(startDate, endDate, undefined, '[]')) {
                    return true; // Show the row
                }
                return false; // Hide the row
            }

            $('#activity-search').on('keyup', function() {
                var fullName = this.value;

                $.fn.dataTable.ext.search.push(fullName);
                activitiesDatatable.draw();
            });

            $('select[name=assigned_to]').on('change', function() {
                var assignedTo = this.value;

                $.fn.dataTable.ext.search.push(assignedTo);
                activitiesDatatable.draw();
            });

            $('input[name=created_at]').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format(
                    'YYYY-MM-DD'));

                $.fn.dataTable.ext.search.push(CreatedDateRangeFilter);

                activitiesDatatable.draw();
            });

            $('input[name=scheduled_on]').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format(
                    'YYYY-MM-DD'));

                $.fn.dataTable.ext.search.push(ScheduledDateRangeFilter);

                activitiesDatatable.draw();
            });

            $('select[name=type]').on('change', function() {
                var type = this.value;

                $.fn.dataTable.ext.search.push(type);
                activitiesDatatable.draw();
            });

            $('select[name=state]').on('change', function() {
                var state = this.value;

                $.fn.dataTable.ext.search.push(state);
                activitiesDatatable.draw();
            });

            $('input[name=tags]').on('change', function() {
                var tags = this.value;

                $.fn.dataTable.ext.search.push(tags);
                activitiesDatatable.draw();
            });

            $('select[name=lead_id]').on('change', function() {
                var leadId = this.value;

                $.fn.dataTable.ext.search.push(leadId);
                activitiesDatatable.draw();
            });

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

            $('input.dp').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                $.fn.dataTable.ext.search.pop();
                activitiesDatatable.draw();
            });

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


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