@extends('admin.layout.layout')
@section('content')


    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0">Customer Inquiries Details</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">zDomainName</a></li>
                                    <li class="breadcrumb-item active">Customer Inquiries Details</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="card">

                    <div class="card-body">
                        <div class="media mb-4">
                            <img class="d-flex mr-3 rounded-circle avatar-sm" src="{{asset('admin/assets/images/users/avatar-2.jpg')}}" alt="Generic placeholder image">
                            <div class="media-body">
                                <h5 class="font-size-14 my-1">Humberto D. Champion</h5>
                                <small class="text-muted">support@domain.com</small>
                            </div>
                        </div>

                        <h4 class="mt-0 font-size-16">This Week's Top Stories</h4>

                        <p>Dear Lorem Ipsum,</p>
                        <p>Praesent dui ex, dapibus eget mauris ut, finibus vestibulum enim. Quisque arcu leo, facilisis in fringilla id, luctus in tortor. Nunc vestibulum est quis orci varius viverra. Curabitur dictum volutpat massa vulputate molestie. In at felis ac velit maximus convallis.
                        </p>
                        <p>Sed elementum turpis eu lorem interdum, sed porttitor eros commodo. Nam eu venenatis tortor, id lacinia diam. Sed aliquam in dui et porta. Sed bibendum orci non tincidunt ultrices. Vivamus fringilla, mi lacinia dapibus condimentum, ipsum urna lacinia lacus, vel tincidunt mi nibh sit amet lorem.</p>
                        <p>Sincerly,</p>
                        <hr>

                        <div class="row mt-4">
                            <div class="col-md-4">
                                <h5>Location</h5>
                                <div class="row">
                                    <div class="col-md-6">
                                        <span class="text-grey font-size-13">Country</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="font-size-13"><img src="http://127.0.0.1:8000/admin/assets/flags/us.png" width="20" class="flag-icon flag flag-pk" alt="PK"> US</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <span class="text-grey font-size-13">Region</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="font-size-13">Texas</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <span class="text-grey font-size-13">City</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="font-size-13">Dallas</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <span class="text-grey font-size-13">Latitude</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="font-size-13">32.78306</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <span class="text-grey font-size-13">Longitude</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="font-size-13">-96.80667</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <span class="text-grey font-size-13">Time zone offset by UTC</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="font-size-13">-06:00</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <span class="text-grey font-size-13">Geoname ID</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="font-size-13"></span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <span class="text-grey font-size-13">IP</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="font-size-13">2607:5500:3000:20a3::2</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h5>Autonomous System</h5>
                                <div class="row mt-4">
                                    <div class="col-md-3">
                                        <span class="text-grey font-size-13">ASN</span>
                                    </div>
                                    <div class="col-md-5">
                                        <span class="text-grey font-size-13"></span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <span class="text-grey font-size-13">Name</span>
                                    </div>
                                    <div class="col-md-5">
                                        <span class="font-size-13"></span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <span class="text-grey font-size-13">Route</span>
                                    </div>
                                    <div class="col-md-5">
                                        <span class="font-size-13"></span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <span class="text-grey font-size-13">Domain</span>
                                    </div>
                                    <div class="col-md-5">
                                        <span class="font-size-13"></span>
                                    </div>
                                </div>
                                <h5 class="mt-4">Internet Service Provider</h5>
                                <div class="row mt-4">
                                    <div class="col-md-12">
                                        <span class="text-grey font-size-13 font-weight-bold"></span>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <span class="text-grey font-size-13 font-weight-bold">Connection Type</span>
                                    </div>
                                    <div class="col-md-12">
                                        <span class="font-size-13"></span>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-12">
                                            <span class="text-grey font-size-13 font-weight-bold"></span>
                                        </div>
                                    </div></div>
                            </div>
                            <div class="col-md-4">
                                <div style="width: 100%"><iframe width="100%" height="230" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&amp;height=400&amp;hl=en&amp;q=32.78306,-96.80667+(My%20Business%20Name)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe><a href="https://www.maps.ie/route-planner.htm"></a></div>
                            </div>

                        </div>

                        <a href="#" class="btn btn-secondary waves-effect mt-4" data-toggle="modal" data-target="#composemodal"><i class="mdi mdi-reply" ></i> Reply</a>
                    </div>

                </div>
            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

        {{--Compose Model--}}
        <div class="modal fade" id="composemodal" tabindex="-1" role="dialog" aria-labelledby="composemodalTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="composemodalTitle">New Message</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="To">
                            </div>

                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Subject">
                            </div>
                            <div class="form-group">
                                <div class="summernote">
                                    <h6>Hello Summer note</h6>
                                    <ul>
                                        <li>
                                            Select a text to reveal the toolbar.
                                        </li>
                                        <li>
                                            Edit rich document on-the-fly, so elastic!
                                        </li>
                                    </ul>
                                    <p>
                                        End of air-mode area
                                    </p>

                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Send <i class="fab fa-telegram-plane ml-1"></i></button>
                    </div>
                </div>
            </div>
        </div>


        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        <script>document.write(new Date().getFullYear())</script> © zDomainName.com
                    </div>

                </div>
            </div>
        </footer>
    </div>
    <!-- end main content-->

    <!-- Right Sidebar -->
    <!-- END layout-wrapper -->

    <!-- Right Sidebar -->
    <div class="right-bar">
        <div data-simplebar class="h-100">
            <div class="rightbar-title px-3 py-4">
                <a href="javascript:void(0);" class="right-bar-toggle float-right">
                    <i class="mdi mdi-close noti-icon"></i>
                </a>
                <h5 class="m-0">Settings</h5>
            </div>

            <!-- Settings -->
            <hr class="mt-0" />
            <h6 class="text-center mb-0">Choose Layouts</h6>

            <div class="p-4">
                <div class="mb-2">
                    <img src="{{asset('admin/assets')}}/images/layouts/layout-1.jpg" class="img-fluid img-thumbnail" alt="">
                </div>
                <div class="custom-control custom-switch mb-3">
                    <input type="checkbox" class="custom-control-input theme-choice" id="light-mode-switch" checked />
                    <label class="custom-control-label" for="light-mode-switch">Light Mode</label>
                </div>

                <div class="mb-2">
                    <img src="{{asset('admin/assets')}}/images/layouts/layout-2.jpg" class="img-fluid img-thumbnail" alt="">
                </div>
                <div class="custom-control custom-switch mb-3">
                    <input type="checkbox" class="custom-control-input theme-choice" id="dark-mode-switch" data-bsStyle="assets/css/bootstrap-dark.min.css" data-appStyle="assets/css/app-dark.min.css" />
                    <label class="custom-control-label" for="dark-mode-switch">Dark Mode</label>
                </div>

                <div class="mb-2">
                    <img src="{{asset('admin/assets')}}/images/layouts/layout-3.jpg" class="img-fluid img-thumbnail" alt="">
                </div>
                <div class="custom-control custom-switch mb-5">
                    <input type="checkbox" class="custom-control-input theme-choice" id="rtl-mode-switch" data-appStyle="assets/css/app-rtl.min.css" />
                    <label class="custom-control-label" for="rtl-mode-switch">RTL Mode</label>
                </div>


            </div>

        </div> <!-- end slimscroll-menu-->
    </div>
    <!-- /Right-bar -->

    <!-- Right bar overlay-->
    <div class="rightbar-overlay"></div>

    @yield('script')

@endsection