@extends('companyuser::layouts.master')
@section('title', __('companyuser::activities.title'))
@section('extra-styles')
<link href="{{url('assets/css/filter.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/custom/modal/style.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">

<link href="{{ url('assets/css/plugins/range/range.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('/assets/css/table/table-custome-styles.css')}}">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<link href="{{url('assets/css/filter.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
<script src="{{ asset('/js/app.js') }}" defer></script>
<style>
    .filter-section-collapse form .input-group .input-group-addon.h-45 {
        height: 45px !important;
    }
    .lh-3 {
        line-height: 3;
    }
    /* Styles for the integration selector input */
    .select2-container--default .select2-search--inline .select2-search__field{
        margin-top: -10px !important;
    }
    .select2-container{
        height: 30px;
    }
    .select2-selection{
        height: 30px;
    }
</style>
@if(app()->getlocale() == 'en')
    <style>
        div.dataTables_filter{
            display: inline-block;
            width: 50%;
            vertical-align: middle;
            text-align: right;
        }
        #entries_table_filter{
            width: 100%;
        }
    </style>
@endif
@endsection
@push('extra_scripts')
<script src="{{ asset('assets/js/scripts/modal/components-modal.js') }}" defer></script>
@endpush

@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">@lang('companyuser::permissions.users and permissions')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::activities.title')</a></li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section>
    <div class="container-fluid">
        <div class="col-xs-6 headTitle">
            <h3 class="py-half">@lang('companyuser::activities.title')</h3>
        </div>
        @include('companyuser::errors.all')
        @include('companyuser::errors.lists')
        <div class="mt-1">
            <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                <div class="d-flex justify-content-between">
                    <span>@lang('Filter') </span><i class="fa fa-angle-down"></i>
                </div>
            </button>
        </div>
        <div class="col mb-2">
            <div class="collapse filter-section-collapse" id="collapseExample">
                <form action="{{ route('company.users-activities.index', ['subdomain' => $subdomain]) }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
                    <div class="card card-body mb-0">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12 w-100-ipad-portrait">
                                            <label for="category">@lang('companyuser::activities.activityType')</label>
                                        </div>
                                        <div class="col-md-12  w-100-ipad-portrait mb-1">
                                            <select name="activity_type" class="w-100 py-1 form-control select2-tag h-45" style="width:100%">
                                                <option value="">{{ __('All') }}</option>
                                                @foreach($models as $key => $value)
                                                    <option value="{{ $key }}" {{ request('activity_type') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12 w-100-ipad-portrait">
                                            <label for="category">@lang('companyuser::activities.actionType')</label>
                                        </div>
                                        <div class="col-md-12  w-100-ipad-portrait mb-1">
                                            <select name="action_type" class="w-100 py-1 form-control select2-tag h-45" style="width:100%">
                                                <option value="">{{ __('All') }}</option>
                                                @foreach($actions as $key => $value)
                                                    <option value="{{ $key }}" {{ request('action_type') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12 w-100-ipad-portrait">
                                            <label for="category">@lang('companyuser::activities.userName')</label>
                                        </div>
                                        <div class="col-md-12  w-100-ipad-portrait mb-1">
                                            <select name="user_id" class="w-100 py-1 form-control select2-tag h-45" style="width:100%">
                                                <option value="">{{ __('All') }}</option>
                                                @foreach($users as $key => $value)
                                                    <option value="{{ $key }}" {{ request('user_id') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12  w-100-ipad-portrait">
                                        <label for="category">@lang('companyuser::activities.date')</label>
                                    </div>
                                    <div class="col-md-6  w-50-ipad-portrait mb-half">
                                        <x-date-picker 
                                            mode="single"
                                            name="date_from"
                                            :value="request('date_from')"
                                            input-class="h-45"
                                            :is-invalid="$errors->has('date_from')"
                                        />

                                        @error('date_from')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6  w-50-ipad-portrait mb-half">
                                        <x-date-picker 
                                            mode="single"
                                            name="date_to"
                                            :value="request('date_to')"
                                            input-class="h-45"
                                            :is-invalid="$errors->has('date_to')"
                                        />

                                        @error('date_to')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-left mt-2">
                        <button type="submit" class="btn btn-info mr-1 mb-1 p-5">
                            <img src="{{asset('assets/images/Done.png') }}" alt="done" width="35px">
                        </button>
                        <button type="reset" id="reset" class="btn btn-warning mb-1 p-5"> <span class="icon-Delete f-32"></span></button>
                    </div>
                </div>
                </form>
            </div>
        </div>

        <div>
            <section id="configuration">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="card-block card-dashboard">
                                <table id="logs-datatable" class="table mb-0 table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>@lang('companyuser::activities.userName')</th>
                                            <th>@lang('companyuser::activities.activityType')</th>
                                            <th>@lang('companyuser::activities.actionType')</th>
                                            <th>@lang('companyuser::activities.date')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>
@endsection

@section('extra_scripts')
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/daterange/daterangepicker.js')}}" defer></script>
    <script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
    <script>

    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            //to reset filter dropdown menus
            $('#reset').click(function(e) {
                e.preventDefault()
                // here we made it val to work in both inputs and dropdown menu
                $('.form-control').val("");
                $('.select2-tag').select2({
                    allowClear: true
                });
                $('.select2-selection__clear').text("");
                // or prop('selectedIndex',0);
            })

            $("body").on("click",".filterbtn",function(){
                let url = new URL(window.location.href);
                let date_from = url.searchParams.get("date_from");
                if($("#collapseExample").hasClass("in") == false && $("#collapseExample").hasClass("dateCheck") == false && (date_from == '' ||  date_from == null)){

                    $(".singledate").val("");
                    $("#collapseExample").addClass("dateCheck");
                }
            })



            $('#logs-datatable').DataTable({
                processing: true,
                serverSide: true,
                search: true,
                ajax: {
                    url: "{{route('company.users-activities.datatable',$subdomain)}}",
                    data: