@extends('layouts.main')

@section('stylesheets')
    <link rel="stylesheet" href="{{asset('css/general-inner.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/index.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/edit.css')}}"/>

    <link rel="stylesheet" href="{{asset('css/users.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/general-modal.css')}}"/>
@endsection


@section('content')
    <div class="main-wrapper">
        <div id="users">
            <div class="row justify-content-between Header mb-5">
                <div class="col-md-6  d-flex  justify-content-center justify-content-md-start Header-breadcrumbs">
                    <p class="Header-breadcrumbs--title">{{ Breadcrumbs::render('users') }}
                    </p>
                </div>
                <div class="col-md-6 d-flex justify-content-center justify-content-md-end Header-buttons">
                    <a class="Header-buttons--button me-3 w-auto" href="{{route('user.create')}}">
                        <p class="Header-buttons--button--text">Create User
                        </p>
                        <img src="{{asset('images/plus.svg')}}" class="homeHeader-buttons--button--img">
                    </a>
                    <a href="#" class="Header-buttons--button me-3 " data-bs-toggle="modal"
                       data-bs-target="#upload" title="upload excel">
                        <p  class="Header-buttons--button--text">Via Excel</p>
                        <img src="{{asset('images/plus.svg')}}" class="homeHeader-buttons--button--img">
                    </a>
                    <a href="#" class="Header-buttons--button me-3 " data-bs-toggle="modal"
                       data-bs-target="#massInvitation" title="Invite Users">
                        <p  class="Header-buttons--button--text">Invite Users</p>
                        <img src="{{asset('images/plus.svg')}}" class="homeHeader-buttons--button--img">
                    </a>
                    <a href="{{route('users.activation.request.list')}}" class="Header-buttons--button me-3 activation-requests-btn" title="Activation Request">
                        <p  class="Header-buttons--button--text">Activation Request</p>
                        <img src="{{asset('images/plus.svg')}}" class="homeHeader-buttons--button--img">
                        <!-- <div class="requests-counter"><p>3</p></div> -->
                    </a>

                </div>
                @if(isset($inactive))
                @include('superadmin.modals.mass-invite',['users' => $inactive])
                @endif
            </div>

{{--            @dd($results)--}}
            @if (!empty($results))
                <div class="alert alert-danger">
                    <div class="d-flex justify-content-between">
                        <span><strong>Whoops!</strong> There were some problems with your input.</span>
                        <button onclick="this.parentElement.parentElement.remove()">X</button>

                    </div>

                    <ul>
                        @foreach ($results as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="row form-inner-container">
                <form action="{{ route('users.list') }}" method="get" class="form-group row"  id="user-form">
                    @csrf
                    {{--                @method('POST')--}}
                    <div class="form-field col-12 pb-5">
                        <input type="text" name="keyword" class="form-control name" placeholder="Start typing" id="keyword">
                    </div>
                </form>
                <div id="listDataContainer">
                    @include('superadmin.users.partials.list-data')
                </div>
            </div>


        </div>
    </div>

@endsection
@push('scripts-stack')

    <script src="{{asset('js/setAjaxFilters.js')}}"></script>
    <script defered>
        $s = jQuery.noConflict()
        $s(document).ready(function () {
            setAjaxFilters('{{route('users.list')}}','user-form');
        });
    </script>
@endpush