@include('includes/header')

<!-- /////////////////////////////////// MAIN CONTENT /////////////////////////////////////////-->

@include('includes/sidebar')

<div class="app-content content">

    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <h1 class="content-header-title mb-0">Visits</h1>
            </div>
        </div>

        <div class="content-body">
            <div class="section">
                <div class="row">
                    
                    @if (\Session::has('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <strong>{!! \Session::get('success') !!}</strong>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if (\Session::has('error'))
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <strong>{!! \Session::get('error') !!}</strong>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <div class="card w-100">
                        <div class="card-header">
                            <form method="get">
                                <div class="row justify-content-center">
                                    <div class="col-md-3">
                                        <div class="input-group date">
                                            <input type="date" class="form-control datetimepicker-input" id="date" name="date" @if(isset($_GET['date'])) value="{{$_GET['date']}}" @endif required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <select class="form-control select2 select2-hidden-accessible" id="emp" name="emp" style="width:100%;" data-select2-id="emp" tabindex="-1" aria-hidden="true" required>
                                            <option value="">Select User</option>
                                            @foreach($employees as $v)
                                                <option value="{{$v['id']}}" @if( isset($_GET['emp']) && $_GET['emp'] == $v['id'] ) selected @endif >{{$v['FirstName']}} {{$v['LastName']}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Filter</button>
                                </div>
                            </form>
                        </div>

                        <div class="loader-overlay" id="loaderOverlay">
                            <span class="loader"></span>
                        </div>

                        <div class="employee-table p-2">
                            <div class="btn-toolbar justify-content-between mb-1" role="toolbar"
                                aria-label="Toolbar with button groups">
                                <div class="btn-group" role="group" aria-label="First group">
                                    <button type="button" class="btn btn-secondary" onclick="exportVisits('csv')">CSV</button>
                                    <button type="button" class="btn btn-secondary" onclick="exportVisits('excel')">Excel</button>
                                    <button type="button" class="btn btn-secondary" onclick="exportVisitsImages()">Export Images</button>
                                    <input type="hidden" name="search" id="searchquery" class="form-control" @if(isset($_GET['search'])) value="{{$_GET['search']}}" @endif >
                                    <input type="hidden" name="emp" id="emp" class="form-control" @if(isset($_GET['emp'])) value="{{$_GET['emp']}}" @endif >
                                    <input type="hidden" name="date" id="date" class="form-control" @if(isset($_GET['date'])) value="{{$_GET['date']}}" @endif >
                                </div>
                                <form method="get">
                                    <div class="input-group">                                        
                                        <div class="input-group-prepend">
                                            <div class="input-group-text" id="btnGroupAddon2">Search: </div>
                                        </div>
                                        <input type="text" name="search" class="form-control" @if(isset($_GET['search'])) value="{{$_GET['search']}}" @endif >
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div id="printableArea">
                                <table id="custom_table">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Employee</th>
                                            <th>Client</th>
                                            <th >Address</th>
                                            <th>Time</th>
                                            <th>Created On</th>
                                            <th>Distance</th>
                                            <th>Location</th>
                                            <!-- <th>Address</th> -->
                                            <th>Remarks</th>
                                            <th>Image</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if($data->count() == 0)
                                            <tr>
                                                <td colspan="8" class="text-center">No Data Found</td>
                                            </tr>
                                        @endif
                                        @php $i = 0; @endphp
                                        @foreach($data as $val)
                                       
                                            @php $i++; @endphp
                                            <tr>
                                                <td>{{$i}}</td>
                                                <td>{{$val['e_fname']}} {{$val['e_lname']}}</td>
                                                <td>{{$val['client_name']}}</td>
                                                <td><strong>Start : </strong>{{ $val['start_address'] }} <br> <strong>End :</strong>  {{ $val['end_address'] }}</td>
                                                <td>
                                                @isset($val['start_date'])
                                                    <strong>Start - </strong> {{$val['start_date']}} <br>
                                                @endisset
                                                @isset($val['end_date'])
                                                    <strong>End - </strong> {{$val['end_date']}}
                                                @endisset

                                                </td>
                                                <td> {{$val['CreatedAt'] ? date('d-M-Y h:i A', strtotime($val['CreatedAt'])) : ''}} </td>

                                                <td>
                                                @isset($val['distance'])
                                                {{$val['distance']}} km
                                                @endisset
                                                </td>
                                                
                                                <td>
                                                    <!-- <a href="https://www.google.com/maps/search/?api=1&amp;query=," target="_blank"><i class="fa fa-share"></i> Open in maps</a> -->
                                                    <a href="#" onclick="showRoute({{ $val['Latitude'] }}, {{ $val['Longitude'] }}, {{ $val['end_latitude'] }}, {{ $val['end_longitude'] }})">
                                                        <i class="fa fa-share"></i> Open in maps
                                                    </a>

                                                
                                                </td>
                                                <!-- <td>{{$val['Address']}}</td> -->
                                                <td>{{$val['Remarks']}}</td>
                                                <td>
                                                    <div class="card-profile-image">
                                                        <img src="{{asset($val['ImgUrl'])}}" class="rounded-circle box-shadow-1"  alt="Card image" width="50" height="50">
                                                    </div>  
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <div class="mx-1">
                                                            <a class="btn btn-danger delete-btn" data-id="{{$val['Id']}}" href="{{route('visits.delete', ['id' => $val['Id'] ])}}">
                                                                <i class="fa fa-trash"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            
                            <div id="map-container" style="display: none;">
                                <button onclick="hideMap()" style="position: absolute; top: 10px; right: 10px; z-index: 1000;">Close Map</button>
                                <div id="map" style="height: 500px; width: 100%;"></div>
                            </div>
                            {{$data->render('custom_pagination')}}

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

            </div>

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

<!-- /////////////////////////////////// MAIN CONTENT /////////////////////////////////////////-->

<!-- Hidden Map Modal -->

<!-- Google Maps API -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key={{ env('MAP_API_KEY') }}&callback=initMap&v=weekly" defer></script> -->

<script src="https://maps.googleapis.com/maps/api/js?key={{env('MAP_API_KEY')}}&libraries=marker&v=beta&callback=initMap" defer></script>

<script>
    var map;
    var markers = [];
    var polyline;
    var infoWindows = [];
    var geocoder;

    function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 12,
            center: { lat: 28.7041, lng: 77.1025 }, // Default center (Delhi, change if needed)
        });
        geocoder = new google.maps.Geocoder();
    }

    function showRoute(startLat, startLng, endLat, endLng) {
        if (!map) {
            console.error("Map is not initialized.");
            return;
        }

        document.getElementById("map-container").style.display = "block";

        var startPoint = { lat: parseFloat(startLat), lng: parseFloat(startLng) };
        var endPoint = { lat: parseFloat(endLat), lng: parseFloat(endLng) };

        clearMap();

        var bounds = new google.maps.LatLngBounds();
        bounds.extend(startPoint);
        bounds.extend(endPoint);
        map.fitBounds(bounds);

        var startMarker = new google.maps.Marker({
            position: startPoint,
            map: map,
            title: "Start Location"
        });

        var endMarker = new google.maps.Marker({
            position: endPoint,
            map: map,
            title: "End Location"
        });

        markers.push(startMarker, endMarker);

        polyline = new google.maps.Polyline({
            path: [startPoint, endPoint],
            geodesic: true,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 3,
        });

        polyline.setMap(map);

        // ✅ Fetch and Show Addresses
        getAddress(startPoint, (address) => {
            var startInfo = new google.maps.InfoWindow({
                content: `<strong>Start Address:</strong> ${address}`
            });
            infoWindows.push(startInfo);
            startMarker.addListener("click", function () {
                closeAllInfoWindows();
                startInfo.open(map, startMarker);
            });
        });

        getAddress(endPoint, (address) => {
            var endInfo = new google.maps.InfoWindow({
                content: `<strong>End Address:</strong> ${address}`
            });
            infoWindows.push(endInfo);
            endMarker.addListener("click", function () {
                closeAllInfoWindows();
                endInfo.open(map, endMarker);
            });
        });
    }

    function getAddress(latLng, callback) {
        geocoder.geocode({ location: latLng }, function (results, status) {
            if (status === "OK" && results[0]) {
                callback(results[0].formatted_address);
            } else {
                callback("Address not found");
            }
        });
    }

    function clearMap() {
        markers.forEach(marker => marker.setMap(null));
        markers = [];
        if (polyline) polyline.setMap(null);
        closeAllInfoWindows();
    }

    function closeAllInfoWindows() {
        infoWindows.forEach(info => info.close());
    }

    function hideMap() {
        document.getElementById("map-container").style.display = "none";
        clearMap();
    }

    window.onload = initMap;
</script>

<script>
    var base_url = "{{env('BASE_URL')}}";
    var query = $('#searchquery').val();
    var date = $('#date').val();
    var emp = $('#emp').val();
    function exportVisits(extention)
    {
        
        console.log(extention);
        $.ajax({
            url: base_url+'export_Visits?search='+query+'&date='+date+'&emp='+emp,
            type: 'GET',
            data: {ext: extention},
            success: function(result){
                if(result){
                    // window.location.href = result.data.url
                    var csvUrl = result.data.url;
                    var filename = csvUrl.split("/").pop();

                    // Create a link element
                    var link = document.createElement('a');
                    link.setAttribute('href', csvUrl);
                    link.setAttribute('download', filename);

                    // Simulate a click event to download the file
                    link.style.display = 'none';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }else{
                    console.log('Error');
                }
            }
        });

    }

    function printDiv(divId) {
        var printContents = document.getElementById(divId).innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;
    }





    document.addEventListener('DOMContentLoaded', function () {
        var deleteButtons = document.querySelectorAll('.delete-btn');

        deleteButtons.forEach(function (button) {
            button.addEventListener('click', function (event) {
                event.preventDefault();
                var id = this.getAttribute('data-id');
                swal({
                    title: "Are you sure?",
                    text: "You want to delete this Role Request!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        window.location.href = base_url+"visit/"+id+"/delete";
                    }
                    //  else {
                    //     swal("Your item is safe!");
                    // }
                });
            });
        });
    });

    function exportVisitsImages() {
        var query = $('#searchquery').val();
        var date = $('#date').val();
        var emp = $('#emp').val();
        toggleLoader(true);

        $.ajax({
            url: base_url + 'visits/images/export?search='+query+'&date='+date+'&emp='+emp,
            type: 'GET',
            xhrFields: {
                responseType: 'blob' 
            },
            success: function(result, status, xhr) {
                // Get the filename from the Content-Disposition header
                var disposition = xhr.getResponseHeader('Content-Disposition');
                var filename = "visits.zip";

                if (disposition && disposition.indexOf('filename=') !== -1) {
                    var matches = /filename="([^"]*)"/.exec(disposition);
                    if (matches && matches[1]) {
                        filename = matches[1];
                    }
                }
                toggleLoader(false);

                var url = window.URL.createObjectURL(result);
                var a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                setTimeout(function () {
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                }, 100);
            },
            error: function() {
                toggleLoader(false);
                console.log('Error exporting images.');
            }
        });
    }

    function toggleLoader(show) {
        const loaderOverlay = document.getElementById('loaderOverlay');
        if (show) {
            loaderOverlay.style.display = 'flex';
            document.body.classList.add('loading');
        } else {
            loaderOverlay.style.display = 'none';
            document.body.classList.remove('loading');
        }
    }
</script>

@include('includes/footer')