@extends('layouts.master')
@section('content')
<style>
    .dt-buttons .dt-button {
        background: #003db6;
        border: none;
        color: #fff;
        outline: none;
        padding: 8px 14px;
        line-height: 1;
        font-size: 13px;
    }

    .text-center {
        text-align: center;
    }

    .text-left {
        text-align: left;
    }
    .CL-Product .form-s2 .select2-container .select2-selection--single {
        border: 1px solid #e0e0e0;
        background-color: #fff;
    }
    .viewLocation {
        color: #fff !important;
        cursor: pointer;
        float: left;
        margin-left: 15px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    .fa.fa-map-marker {
        color: #fff;
    }
    .btn-primary {
        letter-spacing: 1px;
        font-size: 14px;
    }
</style>
<script src="{{env('GOOGLE_MAP_URL')}}" async></script>
<div class="modal fade" id="attendence_modal" tabindex="-1" role="dialog" aria-labelledby="DetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="DetailModalLabel">Employee <span> Location</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="floating-label" class="modal-body pt-0 pb-0">
                <div class="row">
                    <div class="col-md-12 mapStyles" style="height:470px" id="attendence_map">
                        <br><br><br><br><br><br><br>Please Wait...<br><br><br><br><br><br><br><br>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01 main_visits_heading">Distributos<span> Visits</span></h2>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Distributos Visits</span></a></li>
            <li><span>List</span></li>
        </ol>
    </div>
</div>
<div class="Product-Filter">
    <div class="row">
        <div class="col-12">
            <div class="CL-Product"><i class="fa fa-calendar-alt"></i>
                <input type="text" autocomplete="off" id="start_date" class="form-control " min="" placeholder="Start Date">
            </div>
            <div class="CL-Product"><i class="fa fa-calendar-alt"></i>
                <input type="text" autocomplete="off" id="end_date" class="form-control " min="" placeholder="End Date">
            </div>

            <div class="CL-Product">
                <div class="form-s2">
                <select class="form-control formselect" name="employee_id" id="employee_id">
                    <option value="0">All</option>
                    @foreach($employees as $row)
                        <option value="{{$row->employee_id}}">{{$row->employee_first_name}} {{$row->employee_last_name}}</option>
                    @endforeach
                </select>
                </div>
            </div>


            <button class="btn btn-primary" onclick="fetchVisits()" id="employeeButton"><i class="fa fa-bullseye"></i> Fetch Visits</button>
            <br>
            <br>
        </div>
    </div>

    <div class="clearfix"></div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="header">
                <h2 class="listing_visits_heading">Distributos <span> Visits</span>
                </h2>
            </div>

            <div class="loader-sell360 tblLoader" style="z-index: 1;">
                <p>Please Select A Date Range</p>
            </div>


            <div class="body body_visits">
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

    <script>
        $('#start_date').datepicker({
            autoclose: true,
            minViewMode: 0,
            format: 'yyyy-mm-dd'
        })
        $('#end_date').datepicker({
            autoclose: true,
            minViewMode: 0,
            format: 'yyyy-mm-dd'
        })
    </script>
    <script src="{{env('GOOGLE_MAP_URL')}}" async ></script>
@endpush