@extends('backend.layouts.app')
@section('title', $title)
@section('content')
<div class="modal fade" id="googleMapModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">
                    <i class="ri-map-pin-line"></i>
                    Show address on map
                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="addressHtml"></p>
                <div id="map" style="height: 500px; width: 100%;"></div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


@include('backend.users.partials.historyModal')


@foreach ($users as $key => $user)
<x-danger-modal :id="$user->id" header="Danger" message="Are you sure deleted it?!" link="{{ route('admin.users.destroy', $user->id) }}" />
@endforeach

<div class="row">
    <div class="col">
        <div class="card overflow-scroll">
            <form action="{{ route('admin.users.bulk-delete') }}" method="post" id="bulkForm">
                @csrf
                @method("DELETE")
                <div class="card-body">
                    <div class="pb-4">
                        <div class="card-widgets">
                            <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="animated-preview"><i class="ri-more-2-fill fs-3"></i></a>
                            <div class="dropdown btn-group">
                                <div class="dropdown-menu dropdown-menu-animated">
                                    <button class="dropdown-item" type="submit"">
                                        <i class=" ri-delete-bin-line text-danger"></i>
                                        <span class="text-danger">Bulk Delete</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <h5 class="header-title mb-0">
                            {{ $title }}
                        </h5>
                    </div>
                    <div id="yearly-sales-collapse" class="collapse show">
                        <div class="">
                            <table class="table table-nowrap table-hover mb-0" id="users-table">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="d-flex align-items-center gap-2 form-checkbox-success">
                                                <input type="checkbox" class="form-check-input check-all" id="userIds">
                                                <label class="form-check-label" for="userIds">ID</label>
                                            </div>
                                        </th>
                                        <th>Orders & Spend</th>
                                        <th>Provider</th>
                                        <th>Newslatter</th>
                                        <th>Account</th>
                                        <th>Details</th>
                                        <th>Location</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </form>
        </div> <!-- end card-->
    </div>
</div>
@endsection
@section('script')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpGhFuvKcNpH-9Gl4mpGrz03gRjpEYnN8&libraries=places"></script>
<script type="text/javascript">
    $(function() {

        var table = $('#users-table').DataTable({
            processing: true
            , serverSide: true
            , ajax: "{{ route('admin.users.index') }}"
            , columns: [{
                    data: 'id'
                    , name: 'id'
                    , orderable: false
                }
                , {
                    data: 'number_of_orders'
                    , name: 'number_of_orders'
                }
                , {
                    data: 'provider'
                    , name: 'provider'
                }
                , {
                    data: 'subscription_status'
                    , name: 'subscription_status'
                }
                , {
                    data: 'account_status'
                    , name: 'account_status'
                }
                , {
                    data: 'details'
                    , name: 'details'
                    , orderable: false
                    , searcheable: false
                }
                , {
                    data: 'location'
                    , name: 'location'
                    , orderable: false
                    , searcheable: false
                }
                , {
                    data: 'action'
                    , name: 'action'
                    , orderable: false
                    , searcheable: false
                }
            , ]
            , order: []
        });

    });

</script>

{{-- show address on google map --}}
<script>
    function showAddressOnGoogleMap(user) {
        var latitude = parseFloat(user.latitude);
        var longitude = parseFloat(user.longitud);
        if (!isNaN(latitude) && !isNaN(longitude)) {
            var location = {
                lat: latitude
                , lng: longitude
            };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15
                , center: location
            });
            var marker = new google.maps.Marker({
                position: location
                , map: map
            });
            $("#googleMapModal").modal('show');
            document.getElementById("addressHtml").innerHTML = `<span class='fw-bold'>Address: </span>${user.address}`;
        } else {
            errorNotification("Invalid latitude or longitude");
        }
    }

</script>


{{-- open history modal -> history types : walltet , points --}}
<script>
    function openHistoryModal(element, user) {
        $("#historyModal").modal('show');
        var historyType = element.getAttribute('data-type');
        $("#history-modal-title").html(`${user.first_name} ${user.last_name} ${historyType} history`);
        $.get(`{{ url()->to('/') }}/admin/users/history/${historyType}/${user.id}`)
            .done(function(response) {
                $("#history-content").html(response.html_content);
            })
            .fail(function(xhr, error) {
                errorNotification(xhr);
            })
    }


    // after close modal re add loading
    var myModalEl = document.getElementById('historyModal')
    myModalEl.addEventListener('hidden.bs.modal', function(event) {
        $("#history-content").html("<div class='spinner-grow text-success m-2' role='status'></div>")
    });

</script>

@endsection