@extends('layouts.'.$namespaceName.'.master')
@section('title')
{{$title}}
@endsection
@section('content')
<div class="page-wrapper">
    <div class="page-content m-2">
        @include('message')
        @include('breadcrumb')
        <div class="card main_card">
            <div class="card-header">
                <div class="row">
                    <div class="col">
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button class="btn primary" onclick="showFilterForm()" id="advanced_search" type="button">{{ trans('labels.advanced_search') }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <form id="filters" style="{{$searchFlag?'display: block':'display: none'}}" action="{{ route('users-report.filter') }}" method="GET">
                    <div id="search_options"  class="row">

                        <div class="col-4 mb-2">
                            <label>{{trans($namespaceName.'/'.$modelName.'.'.'name')}}</label>
                            <input type="text" id="event" class="form-control" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" name="name" value="{{ old('name') }}" />
                        </div>
                        <div class="col-4 mb-2">
                            <label>{{trans($namespaceName.'/'.$modelName.'.'.'email')}}</label>
                            <input type="text" id="email" class="form-control" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" name="email" value="{{ old('email') }}" />
                        </div>
                        <div class="col-4 mb-2">
                            <label>{{trans($namespaceName.'/'.$modelName.'.'.'type')}}</label>
                            <input type="text" id="type" class="form-control" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" name="type" value="{{ old('type') }}" />
                        </div>
                        <div class="col-4 mb-2">
                            <label>{{trans($namespaceName.'/'.$modelName.'.'.'mobile')}}</label>
                            <input type="number" id="mobile" class="form-control" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" name="mobile" value="{{ old('mobile') }}" />
                        </div>

                    </div>
                    <button type="submit" class="btn btn-secondary my-2"><i class="bx bx-filter"></i>{{ trans("labels.search") }}</button>
                </form>
                <div class="table-responsive">
                    <table id="example2" class="table table-striped table-bordered text-center">
                        <thead>
                            <tr>
                                <th>
                                    <div class="animated-checkbox">
                                        <label class="m-0">
                                            <input class="form-check-input" type="checkbox" id="record__select-all">
                                            <span class="label-text"></span>
                                        </label>
                                    </div>
                                </th>
                                <th>#</th>
                                <th>{{trans($namespaceName.'/'.$modelName.'.'.'photo')}}</th>
                                <th>{{trans($namespaceName.'/'.$modelName.'.'.'name')}}</th>
                                <th>{{trans($namespaceName.'/'.$modelName.'.'.'mobile')}}</th>
                                <th>{{trans($namespaceName.'/'.$modelName.'.'.'type')}}</th>
                                <th>{{trans($namespaceName.'/'.$modelName.'.'.'status')}}</th>
                                <th>{{trans($namespaceName.'/'.$modelName.'.'.'roles')}}</th>
                                {{-- <th>{{trans($namespaceName.'/'.$modelName.'.'.'action')}}</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            @if ($users != null)
                                @foreach ($users as $user)
                                <tr id="row_{{$user->id}}">
                                    <td>
                                        <div class="animated-checkbox">
                                            <label class="m-0">
                                                <input type="checkbox" class="form-check-input record__select" value="{{ $user->id }}">
                                                <span class="label-text"></span>
                                            </label>
                                        </div>
                                    </td>


                                    <td>{{$loop->iteration}}</td>
                                    <td>
                                        @if ($user->photo)
                                            <img width="75px" height="75px" src="{{asset($user->photo)}}" alt="{{$user->name}}" class="rounded-circle">
                                        @endif
                                    </td>
                                    <td>{{$user->name}}</td>
                                    <td>{{$user->mobile}}</td>
                                    <td>{{$user->type}}</td>

                                    <td>{!! $user->status?'<i class="bx bx-check-circle text-success"
                                            aria-hidden="true"></i>':'<i class="bx bx-x text-danger"
                                            aria-hidden="true"></i>'!!}
                                    </td>
                                    <td>
                                        @foreach ($user->roles as $role)
                                        <h6><span class="badge bg-primary">{{ $role->display_name }}</span></h6>
                                        @endforeach
                                    </td>
                                    <td>
                                        {{-- <a href="{{route($modelName.'.reset-password',$user->id)}}" class="btn btn-primary btn-sm"><i
                                            class='bx bx-reset'></i></a>
                                        <a href="{{route($modelName.'.edit',$user->id)}}" class="btn btn-success btn-sm"><i
                                                class='bx bx-edit'></i></a>
                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-sm"
                                                onclick="delete_alert({{$user->id}},'operators')"><i
                                                class="bx bx-trash"></i></button> --}}
                                    </td>
                                </tr>
                                    @endforeach
                          @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script>

function showFilterForm()
        {
            let x = document.getElementById("filters");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
            }

    // Listen for checkbox change events
    $('.record__select').on('change', function() {
        // Check if any checkboxes are checked
        if ($('.record__select:checked').length > 0) {
            // Enable the bulk delete button
            $('#bulk-delete').prop('disabled', false);
        } else {
            // Disable the bulk delete button
            $('#bulk-delete').prop('disabled', true);
        }
    });

    // Listen for checkbox change events
    $('.record__select').on('change', function() {
        // Get all the checked checkboxes
        var checkedCheckboxes = $('.record__select:checked').not('#record__select-all');;

        // Create an array to store the IDs
        var recordIds = [];

        // Iterate through the checked checkboxes
        checkedCheckboxes.each(function() {
            // Get the value (record ID) of each checkbox
            var recordId = $(this).val();

            // Add the record ID to the array
            recordIds.push(recordId);
        });

        // Set the value of the record IDs input field
        $('#record-ids').val(recordIds);

        // Check if any checkboxes are checked
        if (checkedCheckboxes.length > 0) {
            // Enable the bulk delete button
            $('#bulk-delete').prop('disabled', false);
        } else {
            // Disable the bulk delete button
            $('#bulk-delete').prop('disabled', true);
        }
    });
    $('#record__select-all').on('change', function() {
        // Get the value of the "Select All" checkbox
        var selectAllChecked = $(this).prop('checked');

        // Set all record checkboxes to the same checked state as "Select All"
        $('.record__select').prop('checked', selectAllChecked).trigger('change');
    });
</script>

@endpush