@extends('admin.layout')
@section('style')
@parent
<style type="text/css">
    .daterangepicker { z-index: 9 !important;}
   #watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;

    display: block;
    width: 300%;
    height: 300%;

    transform: rotate(-45deg);
    content: attr(data-watermark);

    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    } 
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
.daterangepicker:before,
.daterangepicker:after {
    position: absolute;
    display: inline-block;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.daterangepicker:before {
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
    top: -6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
    right: 9px;
}

.daterangepicker.opensleft:after {
    right: 10px;
}

.daterangepicker.openscenter:before {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto;
}

.daterangepicker.openscenter:after {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto;
}

.daterangepicker.opensright:before {
    left: 9px;
}

.daterangepicker.opensright:after {
    left: 10px;
}

.daterangepicker.drop-up {
    margin-top: -7px;
}

.daterangepicker.drop-up:before {
    top: initial;
    bottom: -7px;
    border-bottom: initial;
    border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
    top: initial;
    bottom: -6px;
    border-bottom: initial;
    border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges,
.daterangepicker.single .drp-calendar {
    float: none;
}

.daterangepicker.single .drp-selected {
    display: none;
}

.daterangepicker.show-calendar .drp-calendar {
    display: block;
}

.daterangepicker.show-calendar .drp-buttons {
    display: block;
}

.daterangepicker.auto-apply .drp-buttons {
    display: none;
}

.daterangepicker .drp-calendar {
    display: none;
    max-width: 270px;
}

.daterangepicker .drp-calendar.left {
    padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
    padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
    border: none;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    color: #fff;
    border: solid black;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    display: inline-block;
    padding: 3px;
}

.daterangepicker .calendar-table .next span {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    min-width: 32px;
    width: 32px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}

.daterangepicker .calendar-table {
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: #fff;
}

.daterangepicker .calendar-table table {
    width: 100%;
    margin: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #eee;
    border-color: transparent;
    color: inherit;
}

.daterangepicker td.week,
.daterangepicker th.week {
    font-size: 80%;
    color: #ccc;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: #fff;
    border-color: transparent;
    color: #999;
}

.daterangepicker td.in-range {
    background-color: #ebf4f8;
    border-color: transparent;
    color: #000;
    border-radius: 0;
}

.daterangepicker td.start-date {
    border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
    border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
    border-radius: 4px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #357ebd;
    border-color: transparent;
    color: #fff;
}

.daterangepicker th.month {
    width: auto;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
    color: #999;
    cursor: not-allowed;
    text-decoration: line-through;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-size: 12px;
    padding: 1px;
    height: auto;
    margin: 0;
    cursor: default;
}

.daterangepicker select.monthselect {
    margin-right: 2%;
    width: 56%;
}

.daterangepicker select.yearselect {
    width: 40%;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    width: 50px;
    margin: 0 auto;
    background: #eee;
    border: 1px solid #eee;
    padding: 2px;
    outline: 0;
    font-size: 12px;
}

.daterangepicker .calendar-time {
    text-align: center;
    margin: 4px auto 0 auto;
    line-height: 30px;
    position: relative;
}

.daterangepicker .calendar-time select.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.daterangepicker .drp-buttons {
    clear: both;
    text-align: right;
    padding: 8px;
    border-top: 1px solid #ddd;
    display: none;
    line-height: 12px;
    vertical-align: middle;
}

.daterangepicker .drp-selected {
    display: inline-block;
    font-size: 12px;
    padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
    margin-left: 8px;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
    border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
    border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
    border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
    float: none;
    text-align: left;
    margin: 0;
}

.daterangepicker.show-calendar .ranges {
    margin-top: 8px;
}

.daterangepicker .ranges ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.daterangepicker .ranges li {
    font-size: 12px;
    padding: 8px 12px;
    cursor: pointer;
}

/* .daterangepicker .ranges li:hover {
    background-color: #eee;
} */

.daterangepicker .ranges li.active {
    background-color: #08c;
    color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
    .daterangepicker {
        width: auto;
    }

    .daterangepicker .ranges ul {
        width: 140px;
    }

    .daterangepicker.single .ranges ul {
        width: 100%;
    }

    .daterangepicker.single .drp-calendar.left {
        clear: none;
    }

    .daterangepicker.single .ranges,
    .daterangepicker.single .drp-calendar {
        float: left;
    }

    .daterangepicker {
        direction: ltr;
        text-align: left;
    }

    .daterangepicker .drp-calendar.left {
        clear: left;
        margin-right: 0;
    }

    .daterangepicker .drp-calendar.left .calendar-table {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .daterangepicker .drp-calendar.right {
        margin-left: 0;
    }

    .daterangepicker .drp-calendar.right .calendar-table {
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .daterangepicker .drp-calendar.left .calendar-table {
        padding-right: 8px;
    }

    .daterangepicker .ranges,
    .daterangepicker .drp-calendar {
        float: left;
    }
}

@media (min-width: 730px) {
    .daterangepicker .ranges {
        width: auto;
    }

    .daterangepicker .ranges {
        float: left;
    }

    .daterangepicker.rtl .ranges {
        float: right;
    }

    .daterangepicker .drp-calendar.left {
        clear: none !important;
    }
}

.calender-input-group-custom {
    display: flex;
    flex-direction: row;
    justify-content: left;
    position: relative;
    gap:10px
}

.calender-input-group-custom .input-group-prepend {
    position: absolute;
    left: 15px;
    top: 8px;
    z-index: 9;
}

.calender-input-group-custom input.form-control.float-right {
    padding-left: 40px;
}

.refresh_reports {
    background-color: #dd4b39;
}
</style>
@stop
@section('content')
<div class="search-list">
    <div class="content-wrapper search-result-list">
        <section class="content-header">
            <h1> {{ trans('Report') }} <small> {{ trans('Hourly report') }}...</small> </h1>
            <ol class="breadcrumb">
                <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i>
                        {{ trans('labels.breadcrumb_dashboard') }}</a></li>
                <li class="active"> {{ trans('Reports') }}</li>
                <li class="active"> {{ trans('Hourly Report') }}</li>
            </ol>
        </section>
        @php $getUserRoleData = Session::get('userRoleData'); $hourly_report =
        explode(",",$getUserRoleData->hourly_report); @endphp
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-body">
                            <div class="">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="box-tools pull-right" style="display:flex">
                                            @if(in_array("Add",$hourly_report))
                                            <a href="{{ route('hourly-report-add')}}" type="button"
                                                class="btn btn-sm btn-primary">{{ trans('Add New') }}</a>
                                        </div>
                                        @endif

                                    </div>

                                </div>
                                <br>
                                @if(in_array("View",$hourly_report))
                                <div class="col-xs-12">
                                    <form action="" method="GET" id="report_search_form">
                                        <input type="hidden" name="order_by" id="order_by">
                                        <input type="hidden" name="order_type" id="order_type">


                                        <div class="col-md-12">
                                            <div class="row myFlexDiv">
                                                <div class="col-md-2"><select name="role" class="form-control">
                                                        <option value=''>Search by Role</option>
                                                        <option value="4" @if(isset($_REQUEST['role']) &&
                                                            !empty($_REQUEST['role']) && $_REQUEST['role']==4)
                                                            selected @endif>L1</option>
                                                        <option value="3" @if(isset($_REQUEST['role']) &&
                                                            !empty($_REQUEST['role']) && $_REQUEST['role']==3)
                                                            selected @endif>L2</option>
                                                        <option value="6" @if(isset($_REQUEST['role']) &&
                                                            !empty($_REQUEST['role']) && $_REQUEST['role']==6)
                                                            selected @endif>BDR</option>
                                                        <option value="12" @if(isset($_REQUEST['role']) &&
                                                            !empty($_REQUEST['role']) && $_REQUEST['role']==12)
                                                            selected @endif>L2 Admin</option>
                                                    </select></div>
                                                <div class="col-md-3">
                                                    <select id="user"name="user[]" multiple class="form-control select2" aria-hidden="true">
                                                        <option value=''>Search by User</option>
                                                        @foreach($result['users'] as $user)
                                                        <option value="{{$user->myid}}" @if(isset($_REQUEST['user']) &&
                                                            !empty($_REQUEST['user']) && $_REQUEST['user']==$user->myid)
                                                            selected @endif >{{$user->first_name}} {{$user->last_name}}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="col-md-6">

                                                    <div class="input-group calender-input-group-custom">

                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <i class="fa fa-calendar"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text"
                                                            class="form-control  form-control-sm float-right"
                                                            name="filter_date_range" id="filter_date_range"
                                                            value="">

                                                        <div class="input-group-append "
                                                            style="padding-left: 10px;width: 260px;">
                                                            <select name="time_slots" class="form-control">
                                                                <option value=''> Time Slots</option>
                                                                @foreach($result['timeslot'] as $slot)
                                                                <option value="{{$slot->id}}"
                                                                    @if(request('time_slots')==$slot->id) selected
                                                                    @endif>{{$slot->slot}}</option>
                                                                @endforeach

                                                            </select>
                                                        </div>

                                                        <div class="input-group-append ">
                                                            <button class="btn btn-sidebar btn-warning">
                                                                <i class="fa fa-search fa-fw"></i>
                                                            </button>
                                                        </div>
                                                        <div class="input-group-append ">
                                                            <a href="{{ URL::to('admin/hourly-report')}}"
                                                                class="btn btn-danger refresh_reports"><span
                                                                    class="glyphicon glyphicon-refresh"></span> </a>

                                                        </div>
                                                    </div>





                                                </div>
                                            </div>
                                        </div>
                                </div>

                                </form>
                            </div>
                        </div>
                        @endif
                        <div class="col-xs-12">
                            <div class="row">
                                @if(session()->has('message'))
                                <div class="alert alert-success alert-dismissible">
                                    <button aria-hidden="true" data-dismiss="alert" class="close"
                                        type="button">×</button>
                                    {{ trans('labels.Successlabel') }}
                                    {{ session()->get('message') }}
                                </div>
                                @endif
                                @if(session()->has('error'))
                                <div class="alert alert-warning alert-dismissible">
                                    <button aria-hidden="true" data-dismiss="alert" class="close"
                                        type="button">×</button>
                                    {{ trans('labels.WarningLabel') }}
                                    {{ session()->get('error') }}
                                </div>
                                @endif
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        @if(in_array("View",$hourly_report))
                        <div class="row" style="margin-top: 10px;">
                            <div class="col-xs-12 ">

                                <table id="example1" class="table table-bordered table-striped">
                                    <caption><span style="padding:0 10px;font-weight: 600;">Total Records: {{$result['report']->total()}}</span></caption>
                                    <thead>
                                        <tr>
                                            <th>{{ trans('#') }}</th>
                                            <th>{{ trans('User') }}</th>
                                            <th role="button"
                                                onclick="sortFilter('inbound_calls', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc'  && request('order_by') == 'inbound_calls') ? 'desc' : 'asc') }}');">
                                                {{ trans('Inbound Calls') }}
                                                @if(!Request::has('order_by') || request('order_by') != 'inbound_calls')
                                                <i class="fa fa-sort" aria-hidden="true"></i>
                                                @else
                                                <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'inbound_calls') ? 'desc' : 'asc') }}"
                                                    aria-hidden="true"></i>
                                                @endif

                                            </th>

                                            <th role="button"
                                                onclick="sortFilter('outbond_calls', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc'  && request('order_by') == 'outbond_calls') ? 'desc' : 'asc') }}');">
                                                {{ trans('Outbound Calls') }}
                                                @if(!Request::has('order_by') || request('order_by') != 'outbond_calls')
                                                <i class="fa fa-sort" aria-hidden="true"></i>
                                                @else
                                                <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'outbond_calls') ? 'desc' : 'asc') }}"
                                                    aria-hidden="true"></i>
                                                @endif

                                            </th>
                                            <th role="button"
                                                onclick="sortFilter('talk_time', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc'  && request('order_by') == 'talk_time') ? 'desc' : 'asc') }}');">
                                                {{ trans('Talk Time (M)') }}
                                                @if(!Request::has('order_by') || request('order_by') != 'talk_time')
                                                <i class="fa fa-sort" aria-hidden="true"></i>
                                                @else
                                                <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'talk_time') ? 'desc' : 'asc') }}"
                                                    aria-hidden="true"></i>
                                                @endif
                                            </th>

                                            <th role="button"
                                                onclick="sortFilter('Sale', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc'  && request('order_by') == 'total_sale') ? 'desc' : 'asc') }}');">
                                                {{ trans('Sale') }}
                                                @if(!Request::has('order_by') || request('order_by') != 'total_sale')
                                                <i class="fa fa-sort" aria-hidden="true"></i>
                                                @else
                                                <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'total_sale') ? 'desc' : 'asc') }}"
                                                    aria-hidden="true"></i>
                                                @endif
                                            </th>

                                            <th role="button"
                                                onclick="sortFilter('total_chats', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc'  && request('order_by') == 'total_chats') ? 'desc' : 'asc') }}');">
                                                {{ trans('Chats') }}
                                                @if(!Request::has('order_by') || request('order_by') != 'total_chats')
                                                <i class="fa fa-sort" aria-hidden="true"></i>
                                                @else
                                                <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'total_chats') ? 'desc' : 'asc') }}"
                                                    aria-hidden="true"></i>
                                                @endif
                                            </th>

                                            <th role="button"
                                                onclick="sortFilter('reviews', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc'  && request('order_by') == 'reviews') ? 'desc' : 'asc') }}');">
                                                {{ trans('Reviews(Mehar)') }}
                                                @if(!Request::has('order_by') || request('order_by') != 'reviews')
                                                <i class="fa fa-sort" aria-hidden="true"></i>
                                                @else
                                                <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'reviews') ? 'desc' : 'asc') }}"
                                                    aria-hidden="true"></i>
                                                @endif
                                            </th>

                                            <th role="button"
                                                onclick="sortFilter('iptv_reviews', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc'  && request('order_by') == 'iptv_reviews') ? 'desc' : 'asc') }}');">
                                                {{ trans('Reviews(IPTV)') }}
                                                @if(!Request::has('order_by') || request('order_by') != 'iptv_reviews')
                                                <i class="fa fa-sort" aria-hidden="true"></i>
                                                @else
                                                <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'iptv_reviews') ? 'desc' : 'asc') }}"
                                                    aria-hidden="true"></i>
                                                @endif
                                            </th>

                                            <th role="button"
                                                onclick="sortFilter('created_at', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc'  && request('order_by') == 'created_at') ? 'desc' : 'asc') }}');">
                                                {{ trans('Created at') }}
                                                @if(!Request::has('order_by') || request('order_by') != 'created_at')
                                                <i class="fa fa-sort" aria-hidden="true"></i>
                                                @else
                                                <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'created_at') ? 'desc' : 'asc') }}"
                                                    aria-hidden="true"></i>
                                                @endif
                                            </th>
                                            <th>{{trans('H Slot')}}</th>

                                            <th>
                                                {{ trans('Attachment') }}

                                            </th>
                                            <th></th>
                                    </thead>
                                    <tbody>
                                       
                                        
                                        @if( $result['report']->count()>0)
                                        @php   $sr = $result['report']->currentPage() > 1 ? (($result['report']->currentPage() -1) * $result['report']->perPage() ) + 1 : 1 ;@endphp
                                        @foreach ($result['report'] as $rsVal)
                                        <tr>
                                            <td>{{ $sr}}</td>
                                            <td>{{ ucfirst($rsVal->first_name) }} {{ ucfirst($rsVal->last_name) }}
                                                <br />
                                                {{ ucfirst($rsVal->email) }}
                                            </td>
                                            <td>{{ ucfirst($rsVal->inbound_calls) }}</td>
                                            <td>{{ ucfirst($rsVal->outbond_calls) }}</td>
                                            <td>{{ ucfirst($rsVal->talk_time) }}</td>
                                            <td>@if($rsVal->role_id==6) T({{ ucfirst($rsVal->total_sale) }}) H({{ ucfirst($rsVal->hourly_sale) }}) @else N/A @endif</td>
                                            <td>@if($rsVal->role_id!=6){{ ucfirst($rsVal->total_chats) }}@else N/A @endif</td>
                                            <td>{{ ucfirst($rsVal->reviews) }}</td>
                                            <td>{{ ucfirst($rsVal->iptv_reviews) }}</td>
                                            <td>{{ date('Y-m-d h:i:s A', strtotime($rsVal->created_at)) }}</td>
                                            <td>{{ ucfirst($rsVal->slot) }}</td>
                                            <td style="width: 150px;">
                                                                                            </td>
                                            <td><a onClick="return confirm('Are you sure!')"
                                                    href="{{route('hourly-report-delete', ['id' =>$rsVal->id ])}}"
                                                    class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></td>



                                        </tr>
                                                                                @endforeach
                                        @else

                                        <tr>
                                            <td colspan="8" class="text-center"> No record found.</td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                                
                                <!-- <p><span>Total Records: {{$result['report']->total()}}</span></p> -->
                                {{$result['report']->appends(request()->input())->links()}}

                            </div>
                        </div>
                        @else
                            <p> <strong>Please contact with SuperAdmin</strong></p>
                        @endif
                    </div>
                    <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
                    </div>
                </div>
            </div>
    </div>
    </section>
</div>
</div>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Attachment preview</h4>
            </div>
            <div class="modal-body">
                <img src="" id="imagepreview" style="width: 400px; height: 264px;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


@endsection

@section('scripts')
@parent


<script src="https://adminlte.io/themes/v3/plugins/daterangepicker/daterangepicker.js"></script>
<script>
function sortFilter(order_by, order_type) {
    $("#order_by").val(order_by);
    $("#order_type").val(order_type);
    $("#report_search_form").submit();
}
$(document).ready(function() {

    $(function() {
        $(".pop .imageresource").on("click", function() {
            $('#imagepreview').attr('src', $(this).attr(
            'src')); // here asign the image to the modal when the user click the enlarge link
            $('#imagemodal').modal(
            'show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
        });
        var nowDate = new Date();
        var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

        if ($('input[name="filter_date_range"]').val().length === 0) {

            var start = moment().utcOffset("+05:30").subtract('0', 'days');
            var end = moment().utcOffset("+05:30");

        } else {
            var date_range = $('input[name="filter_date_range"]').val();
            var dates = date_range.split(" - ");
            var start = dates[0];
            var end = dates[1];

        }
        //Date range as a button
        $('#filter_date_range').daterangepicker({
                "opens": 'left',
                "maxDate": today,
                "autoApply": true,
                "startDate": start,
                "endDate": end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment()
                        .subtract(1, 'month').endOf('month')
                    ]
                },

            },
            function(start, end) {
                $(this).val(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));

            }
        )
    });

});
</script>

<script type="text/javascript">
   
    $(function () { 
        $("#user").select2({
            closeOnSelect: false,
            placeholder: 'Search by User',
        }).on("select2:select", function (e) {
            submitSearchForm();
        }).on('select2:unselect', function (e) {
            submitSearchForm();
        });
         
         
        });  
</script>
<script>
    document.querySelectorAll('#watermarked').forEach(function(el) {
              el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
          });
  </script>
@stop