@extends('dashboard.layouts.master')
@section('content')
    <div class="geex-content">
        <div class="geex-content__header">
            <div class="geex-content__header__content">
                <h2 class="geex-content__header__title">Agents</h2>
                <p class="geex-content__header__subtitle">Welcome to Agents area</p>
            </div>

            @include('dashboard.layouts.include.actions')

        </div>

        <div class="geex-content__wrapper">
            <div class="geex-content__section-wrapper">
                <div class="geex-content__section geex-content__section--transparent">
                    <div class="row">
                        <div class="col-12">
                            <div class="geex-content__todo__header custom-al">
                                <div class="geex-content__todo__header__title">
                                    <button class="geex-btn geex-btn--primary geex-btn__add-modal"><i class="uil-plus"></i>
                                        New
                                        Agent</button>
                                </div>
                                <ul class="nav nav-tabs geex-todo-tab geex-content__todo__header__filter" id="geex-todo-tab"
                                    role="tablist">
                                    <li>
                                        <button class="geex-btn geex-btn--primary-transparent">Favourites (20)
                                            <i class="uil uil-heart"></i>
                                        </button>
                                    </li>
                                    <li class="geex-content__todo__header__filter__sortby">
                                        <select>
                                            <option value="newest">Newest Agents</option>
                                            <option value="oldest">Oldest</option>
                                            <option value="name">Name</option>
                                        </select>
                                        <i class="uil-angle-down"></i>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row g-40">
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/01.png') }}" alt="">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">Ahmed Leffler</h4>
                                    <span class="designation">Central Usability Officer</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/02.png') }}" alt="avatar">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">Brian Pfeffer</h4>
                                    <span class="designation">Chief Tactics Supervisor</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/03.png') }}" alt="">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">Crhistine Zboncak</h4>
                                    <span class="designation">UI Designer</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/04.png') }}" alt="">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">David Koelpin</h4>
                                    <span class="designation">District Mobility Designer</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/05.png') }}" alt="">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">Erika Smitham</h4>
                                    <span class="designation">Central Usability Officer</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/06.png') }}" alt="avatar">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">Franklin Stiedemann</h4>
                                    <span class="designation">Chief Tactics Supervisor</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/07.png') }}" alt="">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">Geovanny Bruen</h4>
                                    <span class="designation">UI Designer</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/08.png') }}" alt="">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">John Okuneva</h4>
                                    <span class="designation">District Mobility Designer</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>


                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/09.png') }}" alt="">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">Tamara Scevenko</h4>
                                    <span class="designation">Central Usability Officer</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/10.png') }}" alt="avatar">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">Thomas Wunsch</h4>
                                    <span class="designation">Chief Tactics Supervisor</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/11.png') }}" alt="">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">Veronica Hodkiewicz</h4>
                                    <span class="designation">UI Designer</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                            <!-- single contact grid area start -->
                            <div class="single-contact-grid-area">
                                <div class="top-area">
                                    <div class="avatar">
                                        <img src="{{ asset('dashboard/assets/img/contact/12.png') }}" alt="">
                                    </div>
                                    <div class="action-area">
                                        <div class="single">
                                            <i class="uil uil-heart"></i>
                                        </div>
                                        <div class="single geex-content__chat__header__filter__btn">
                                            <i class="uil uil-ellipsis-v"></i>
                                        </div>

                                        <div class="geex-content__chat__header__filter__content">
                                            <a class="dropdown-item" href="#">view</a>
                                            <a class="dropdown-item" href="#">Edit</a>
                                            <a class="dropdown-item" href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-area">
                                    <h4 class="name">David Koelpin</h4>
                                    <span class="designation">District Mobility Designer</span>
                                    <div class="contact-wrapper">
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-bag"></i>
                                            <p>Highspeed Studios</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-phone"></i>
                                            <p>+012 345 689</p>
                                        </a>
                                        <a href="#" class="single-contact">
                                            <i class="uil uil-envelope"></i>
                                            <p>tamara@mail.com</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- single contact grid area end -->
                        </div>
                    </div>
                    <div class="geex-content__todo__footer">
                        <div class="geex-content__todo__footer__text">Showing 4 of 256 data</div>
                        <div class="geex-content__todo__footer__pagination">
                            <ul class="geex-pagination">
                                <li class="geex-pagination__item">
                                    <a href="#" class="geex-pagination__link active">1</a>
                                </li>
                                <li class="geex-pagination__item">
                                    <a href="#" class="geex-pagination__link">2</a>
                                </li>
                                <li class="geex-pagination__item">
                                    <a href="#" class="geex-pagination__link">3</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="geex-content__modal__form">
                    <div class="geex-content__modal__form__header">
                        <h3 class="geex-content__modal__form__title">Add New Agent</h3>
                        <button class="geex-content__modal__form__close">
                            <i class="uil-times"></i>
                        </button>
                    </div>
                    <form class="geex-content__modal__form__wrapper">
                        <div class="geex-content__modal__form__item">
                            <input type="text" name="geex-content__modal__form__name"
                                class="geex-content__modal__form__input" placeholder="Name" />
                        </div>
                        <div class="geex-content__modal__form__item">
                            <input type="text" name="geex-content__modal__form__name"
                                class="geex-content__modal__form__input" placeholder="Designation" />
                        </div>
                        <div class="geex-content__modal__form__item">
                            <input type="text" name="geex-content__modal__form__name"
                                class="geex-content__modal__form__input" placeholder="Studio Name" />
                        </div>
                        <div class="geex-content__modal__form__item">
                            <input type="text" name="geex-content__modal__form__name"
                                class="geex-content__modal__form__input" placeholder="Phone Number" />
                        </div>
                        <div class="geex-content__modal__form__item">
                            <input type="text" name="geex-content__modal__form__name"
                                class="geex-content__modal__form__input" placeholder="Email Address" />
                        </div>
                        <div class="geex-content__modal__form__item">
                            <button type="submit" class="geex-content__modal__form__submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection