@extends('layouts.app')

@section('content')
<style>
    
    .spinner-border_small{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spinner-border;
    animation: .75s linear infinite spinner-border;
}
</style>

<div class="page-content">
    <!-- start page title -->
    <div class="page-title-box">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-sm-6">
                    <div class="page-title">
                        <h4>User Details</h4>
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>                            
                            <li class="breadcrumb-item active">User Details</li>                            
                        </ol>
                        <input type="hidden" name="page_number" id="page_number" value="0">
                    </div>
                </div>                 
            </div>
        </div>
    </div>
    <!-- end page title -->    
    <div class="container-fluid">
        <div class="page-content-wrapper">
            <div class="row">

                <div class="col-xl-12">

                    <div class="card">
                        <div class="card-body">
                            <div class="row" id="datatable_wrapper">
                                <div class="col-md-12">

                                    <div class="row">
                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12">
                                            <div class="mb-3">                                               
                                                <input type="text" class="form-control" id="search_value" name="search_value" placeholder="Device ID, Phone Number, Email" required="">

                                                <div id="validation" style="margin-top:5px;"></div>

                                            </div>
                                        </div>


                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
                                            <input type="hidden" name="start_date" id="start_date">
                                            <input type="hidden" name="end_date" id="end_date">
                                            <div class="mb-3">
                                                <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 7px 10px; border: 1px solid #ccc;">
                                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                                                    <span></span> <b class="caret"></b>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-1 col-lg-1 col-md-1 col-sm-6">
                                            <div class="mb-3">
                                                <button id="search_button" name="search_button"
                                                        class="btn btn-primary btn-sm" style="padding: 7px 10px;">Search</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div><!--end card-->
                </div> 
            </div>
            <div id="load_results">

            </div>
            <div class="row">
                <div class="col-xl-12">
                    <center>
                        <div id="load_more_div">

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

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

<div class="modal fade DetailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-bs-backdrop="static" >
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="DetailModalLabel">Outgoing Call</h5>                
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>                 
                <input type="hidden" name="pop_up_page_number" id="pop_up_page_number" value="0">

            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xl-12"  id="load_request_div"> 

                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
@endsection






@section('scripts')