@extends('layouts.master')

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


@push('cssCode')
    <style>
        body {
            background-color: white !important;
        }

        .clientTable {
            margin: 20px auto;
            font-size: 15px;
            font-weight: bold;
        }

        .clientTable tr td {
            padding: 4px;
            /* text-align: center; */
        }

        .nav-tabs li.active a {
            background-color: #41B3AB !important;
            color: #ffffff !important;
        }

        table td .btn {
            margin-right: 0px !important;
        }

        .text-right-width {
            text-align: right;
            width: 50%;
        }

        .profile-img {
            width: 150px;
            margin: 20px auto;
            border: 3px solid #000000;
            height: 150px;
        }

        .dataTables_wrapper .dataTables_length {
            float: right;
            display: none;
        }

        .dataTables_wrapper .dataTables_filter {
            float: left;
            text-align: left;
        }

        /*.modal-backdrop.in {
            filter: alpha(opacity=50);
            opacity: 0;
        }*/
    </style>
@endpush

@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3></h3>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="">
                        <div class="">

                            <div class="clearfix"></div>
                            {{-- START ALERT BLOCK --}}
                            @if (Session::has('successMessage'))
                                <div class="alert alert-success" role="alert">
                                    <button type="button" class="close" data-dismiss="alert"><span
                                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                    {!! html_entity_decode(session('successMessage')) !!}
                                </div>
                            @endif
                            @if (Session::has('dangerMessage') || count($errors))
                                <div class="alert alert-danger" role="alert">
                                    <button type="button" class="close" data-dismiss="alert"><span
                                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                    {!! html_entity_decode(session('dangerMessage')) !!}
                                    {{ $errors->first() }}
                                </div>
                            @endif
                            {{-- END ALERT BLOCK --}}
                        </div>
                    </div>
                    <div class="table-responsive col-md-12">
                        <p style="font-size: 24px;">User Id: {{ $user_detail->id }} <br /> User Name:
                            {{ $user_detail->name }}</h3>

                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Trip</th>
                                    <th>Start Date/Time</th>
                                    <th>End Date/Time</th>
                                    <th>Type of vehicle</th>
                                    <th>Number of travelers</th>
                                    <th>Start Latitude</th>
                                    <th>Start Longitude</th>
                                    <th>End Latitude</th>
                                    <th>End Longitude</th>
                                    <th>Direction</th>
                                    <th>POI Visited</th>
                                    <th>Waypoints</th>
                                    <th>Guestbook Count</th>
                                    <th>Collector Stamp Count</th>
                                    <th>Passport Stamp Count</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $num = 0;
                                @endphp
                                @forelse($user_gps_coordinates as $user)
                                    <tr>
                                        <td>{{ ++$num }}</td>
                                        @if (!empty($user->start_date_time))
                                            <td>{{ date('d M Y H:i:s', strtotime($user->start_date_time)) }}</td>
                                        @else
                                            <td>

                                                @if (isset($user->start_date))
                                                    {{ date('d M Y H:i:s', strtotime($user->start_date)) }}
                                                @endif


                                            </td>
                                        @endif

                                        @if (!empty($user->end_date_time))
                                            <td> {{ date('d M Y H:i:s', strtotime($user->end_date_time)) }}</td>
                                        @else
                                            <td>-</td>
                                        @endif

                                        @if (!empty($user->type))
                                            <td>{{ $user->type }}</td>
                                        @else
                                            <td>-</td>
                                        @endif
                                        @if (!empty($user->number))
                                            <td>{{ $user->number }}</td>
                                        @else
                                            <td>-</td>
                                        @endif
                                        @if (!empty($user->start_latitude))
                                            <td>{{ $user->start_latitude }}</td>
                                        @else
                                            <td>{{ $user->gps_lat ?? '' }}</td>
                                        @endif
                                        @if (!empty($user->start_longitude))
                                            <td>{{ $user->start_longitude }}</td>
                                        @else
                                            <td>{{ $user->gps_long ?? '' }}</td>
                                        @endif
                                        @if (!empty($user->latitude))
                                            <td>{{ $user->latitude }}</td>
                                        @else
                                            <td>-</td>
                                        @endif
                                        @if (!empty($user->longitude))
                                            <td>{{ $user->longitude }}</td>
                                        @else
                                            <td>-</td>
                                        @endif

                                        @if (!empty($user->direction))
                                            <td>{{ $user->direction }}</td>
                                        @else
                                            <td>{{ $user->travel_direction ?? '' }}</td>
                                        @endif

                                        <td>{{ $user->visited_count ?? '0' }}</td>
                                        <td><a
                                                href="/admin/public/waypoints_triggered/{{ $user->id }}">{{ $user->waypointsCounts ?? '0' }}</a>
                                        </td>
                                        <td>{{ $user->guestbook_count ?? '0' }}</td>
                                        <td>{{ $user->passport_stamp_count ?? '0' }}</td>
                                        <td>{{ $user->collector_stamp_count ?? '0' }}</td>
                                    </tr>
                            </tbody>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center">No Records Found.</td>
                            </tr>
                            @endforelse
                        </table>
                    </div>

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





@endsection

@push('jsCode')
    <script type="text/javascript">
        function close_modal() {
            location.reload();
        }


        $(document).ready(function() {

            $('#btn').click(function() {
                alert('done');
                var category_name = $('$categoryName').value();
                $.ajax({
                    type: "POST",
                    data: 'category_name=' + 'category_name',
                    url: '{{ url('/') }}/add-category',
                    success: function(data) {
                        console.log(data);
                    }
                });
            });
        });
    </script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        $(document).on('click', '.pagination li a', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            $('#searchForm').attr('action', url);
            console.log($('#searchForm').attr('action'));
            $('#searchForm').submit();
        });

        function checkInActive() {
            return confirm("Are you sure you want to Deactivate?");
        }

        function checkActive() {
            return confirm("Are you sure you want to Activate?");
        }

        function checkDelete() {
            return confirm("Are you sure you want to delete?");
        }

        $(document).ready(function() {
            disabledSearchBtn();

            $(document).on('change', '#searchForm select', function() {
                disabledSearchBtn();
            });

            $(document).on('keyup', '#searchForm input', function() {
                disabledSearchBtn();
            });

            function disabledSearchBtn() {
                var searchBtn = false;
                $('.filters').each(function() {
                    if ($(this).val() != '') {
                        searchBtn = true;
                        return true;
                    }
                });

                if (searchBtn) {
                    $('#searchBtn').removeAttr('disabled');
                } else {
                    $('#searchBtn').attr('disabled', true);
                }
            }
        });
    </script>


    <script type="text/javascript">
        function uploadProfileImage1(fileInput) {

            if (fileInput.files && fileInput.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar1').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput.files[0]);

            }

        }





        function uploadProfileImage2(fileInput2) {

            if (fileInput2.files && fileInput2.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar2').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput2.files[0]);

            }

        }





        function uploadProfileImage3(fileInput3) {

            if (fileInput3.files && fileInput3.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar3').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput3.files[0]);

            }

        }





        function uploadProfileImage4(fileInput4) {

            if (fileInput4.files && fileInput4.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar4').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput4.files[0]);

            }

        }





        function uploadProfileImage5(fileInput5) {

            if (fileInput5.files && fileInput5.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar5').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput5.files[0]);

            }

        }



        function uploadProfileImage6(fileInput6) {

            if (fileInput6.files && fileInput6.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar6').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput6.files[0]);

            }

        }





        function uploadProfileImage7(fileInput7) {

            if (fileInput7.files && fileInput7.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtar7').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInput7.files[0]);

            }

        }





        function uploadProfileImageH1(fileInputH1) {

            if (fileInputH1.files && fileInputH1.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtarH1').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInputH1.files[0]);

            }

        }





        function uploadProfileImageH2(fileInputH2) {

            if (fileInputH2.files && fileInputH2.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtarH2').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInputH2.files[0]);

            }

        }





        function uploadProfileImageH3(fileInputH3) {

            if (fileInputH3.files && fileInputH3.files[0]) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $('.avtarH3').attr('src', e.target.result);

                };

                reader.readAsDataURL(fileInputH3.files[0]);

            }

        }
    </script>
@endpush