@extends('user.layouts.master')
@section('search-active', 'active')
@section('content')
    <style>
        .search::placeholder {
            color: grey !important;
            font-size: 16px;

        }

        .mb-10 {
            margin-bottom: 10px;
        }

        section {
            padding: 10px;
        }

        .wrap-search-filter button.btn.btn-primary {
            border-radius: 100%;
        }

        .search-filter {
            background: transparent !important;
        }

        .mt-5 {
            margin-top: 12%;
        }

        .color {
            color: #ecca69;

        }

        @media only screen and (min-width: 440px) and (max-width:540px) {
            .search::placeholder {
                color: grey !important;
                font-size: 12px;

            }
        }

        @media only screen and (min-width: 400px) and (max-width:439px) {
            .search::placeholder {
                color: grey !important;
                font-size: 10px;

            }
        }

        @media only screen and (min-width: 350px) and (max-width:399px) {
            .search::placeholder {
                color: grey !important;
                font-size: 8px;

            }
        }

        @media only screen and (min-width: 228px) and (max-width:349px) {
            .search::placeholder {
                color: grey !important;
                font-size: 6px;

            }
        }

        @media only screen and (min-width: 321px) and (max-width:540px) {
            .inner-header-title {
                /* padding-top: 12em; */
                text-align: center;
                color: #fff;
                overflow: visible;
                position: relative;
                /* border-bottom: 4px solid #11b719; */
                background-size: cover;
                height: 135px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        @media only screen and (min-width: 1024px) {
            section {
                padding: 15px;
            }
        }

        @media only screen and (min-width: 425px) {
            section {
                padding: 5px;
            }
        }

        @media (min-width: 768px) {
            .modal-dialog {
                width: 60%;

            }
        }

        .modal-header {
            background: #fff !important;
        }

        @media (width:320px) {
            .search::placeholder {
                color: grey !important;
                font-size: 7px;

            }
        }


        @media (width:425px) {
            .search::placeholder {
                color: grey !important;
                font-size: 10px;

            }
        }

        @media (min-width: 418px) {
            .nav-tabs.modern-tabs {
                padding: 0px !important;
            }
        }


        .rep {
            color: red;
        }

        .bbtnn {
            padding: 12px 20px !important;
        }

        .height {
            height: 40px !important;
        }

        .theme-cl {
            position: absolute;
            top: 13px;
            left: 10px;
        }

        .theme-cl1 {
            position: absolute;
            top: 20px;
            left: 10px;
        }

        .search_main {
            margin: 0px auto;
        }

        @media only screen and (max-width: 768px) {
            .cus_height {
                height: 36px !important;
            }

            #cus_height {
                height: 37px !important;
                margin-bottom: 9px !important;
            }
        }

        @media only screen and (max-width: 320px) {
            .column1 {
                display: none;
            }
        }
    </style>
    <section class="inner-header-title" style="background-image:url({{ asset('user/assets/img/bg.png') }}">
        <div class="container mx-auto">
            <h1 class="heal text-black">Search</h1>
        </div>

    </section>
    <div class="clearfix"></div>
    <section class="manage-employee gray" style="height: 80vh">
        <div class="container">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            <!-- search filter -->
            <div class="row flex search_main">
                {{-- <div class="col-md-1 column1"></div> --}}
                <div class="col-md-12">
                    <div class="search-filter">
                        <form action="{{ route('report.search') }}">
                            <div class="filter-form">
                                <div class="input-group">
                                    <input type="text" class="form-control search cus_height" name="search"
                                        placeholder="Search by Name, Email, Phone Number, Username, etc." onfocus="this.placeholder=''" onblur="this.placeholder='Search by Name, Email, Phone Number, Username, etc.'" required/>
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-default" id="cus_height"><i
                                                class="fa fa-search"></i></button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
               
            </div>

    </section>

@endsection