@extends('company.layout.content')

@section('customTitle')
{{ __('general.activities') }}
@endsection

@section('customStyle')
<link href='{{ asset("company/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$locale/plugins/flatpickr/custom-flatpickr.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-12 layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <div class="table-responsive">
                        <div class="filter-container">
                            <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i></button>
                            <div class="filters-inputs">
                                <form>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="startDateFilter">{{ __('validation.attributes.start_date') }}</label>
                                            <input type="date" id="startDateFilter" class="form-control basicFlatpickr flatpickr flatpickr-input">
                                        </div>

                                        <div class="form-group col-md-6">
                                            <label for="endDateFilter">{{ __('validation.attributes.end_date') }}</label>
                                            <input type="date" id="endDateFilter" class="form-control basicFlatpickr flatpickr flatpickr-input">
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-4 mb-0">
                                            <label for="eventFilter">{{ __('validation.attributes.event') }}</label>
                                            <select id="eventFilter" class="form-control basic">
                                                <option value="" selected>{{ __('general.all') }}</option>
                                                <option value="created">{{ __("validation.attributes.create") }}</option>
                                                <option value="updated">{{ __("validation.attributes.update") }}</option>
                                                <option value="deleted">{{ __("validation.attributes.delete") }}</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md-4 mb-0">
                                            <label for="adminFilter">{{ __('validation.attributes.admin') }}</label>
                                            <select id="adminFilter" class="form-control basic">
                                                <option value="" selected>{{ __('general.all') }}</option>
                                                @foreach ($admins_in_same_company as $admin)
                                                <option value="{{$admin->id}}" {{ request('admin')==$admin->id ? 'selected' : '' }}>{{ $admin->name }} - {{$admin->email}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group col-md-4 mb-0">
                                            <label for="subjectFilter">{{ __('validation.attributes.type') }}</label>
                                            <select id="subjectFilter" class="form-control basic">
                                                <option value="" selected>{{ __('general.all') }}</option>
                                                @foreach ($subjects as $subject)
                                                <option value="{{$subject}}">{{ __("validation.attributes.morphs.$subject") }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                        <table id="activitiesTable" class="table table-hover text-center">
                            <thead>
                                <tr>
                                    <th>{{ __('validation.attributes.name') }}</th>
                                    <th>{{ __('validation.attributes.email') }}</th>
                                    <th>{{ __('validation.attributes.event') }}</th>
                                    <th>{{ __('validation.attributes.type') }}</th>
                                    <th>{{ __('validation.attributes.created_at') }}</th>
                                    <th>{{ __('general.actions') }}</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>{{ __('validation.attributes.name') }}</th>
                                    <th>{{ __('validation.attributes.email') }}</th>
                                    <th>{{ __('validation.attributes.event') }}</th>
                                    <th>{{ __('validation.attributes.type') }}</th>
                                    <th>{{ __('validation.attributes.created_at') }}</th>
                                    <th>{{ __('general.actions') }}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<x-bootstrap.modal id="showModal" content-type="empty" width="xl" :with-header="false" />
@endsection

@section('customScript')
<script src='{{ asset("company/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
<script src='{{ asset("company/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>
<script>
    $("#higher-management-menu-box").attr("data-active", "true");

    let activitiesTable = initializeDataTable("#activitiesTable",{
        columns : [
            {data: "name", searchable: false, orderable: false},
            {data: "email", searchable: false, orderable: false},
            {data: "event",searchable: false, orderable: false},
            {data: "subject_type",searchable: false, orderable: false},
            {data: "created_at",searchable: false},
            {data: "actions", searchable: false, orderable: false},
    ],
        searching:false
    });
    

    $("#startDateFilter,#endDateFilter,#eventFilter,#subjectFilter,#adminFilter").on("change",function(){
        reloadDataTable(activitiesTable,{
            start_date : $("#startDateFilter").val(),
            end_date : $("#endDateFilter").val(),
            event : $("#eventFilter").val(),
            subject : $("#subjectFilter").val(),
            admin : $("#adminFilter").val(),
        });
    });

    $(document).on("click",".show-activity",function(e){
        e.preventDefault();
        activity = $(this).data("activity");
        $.ajax({
            url : "/company/activities/" + activity,
            success(res){
                $("#showModal .modal-header").html(res.header);
                $("#showModal .modal-body").html(res.body);
                $("#showModal").modal();
            }
        });
    });

</script>
@endsection