@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 business 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 -->


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

    <div class="row">
        <div class="col">
            <div class="card overflow-scroll">
                <form action="{{ route('admin.wholesales.bulk-delete-requests') }}" 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="wholesales-requests-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>Company</th>
                                        <th>Trade License</th>
                                        <th>Contact person</th>
                                        <th>Business location</th>
                                        <th>Hear us</th>
                                        <th>Confirmed</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 = $('#wholesales-requests-table').DataTable({
                processing: true
                , serverSide: true
                , ajax: "{{ route('admin.wholesales.requests') }}"
                , columns: [{
                    data: 'id'
                    , name: 'id'
                    , orderable: false
                }
                    , {
                        data: 'company_name'
                        , name: 'company_name'
                        , orderable: false
                        , searcheable: false
                    }
                    , {
                        data: 'trade_license'
                        , name: 'trade_license'
                        , orderable: false
                        , searcheable: false
                    }
                    , {
                        data: 'contact_person'
                        , name: 'contact_person'
                        , orderable: false
                        , searcheable: false
                    }
                    , {
                        data: 'business_location'
                        , name: 'business_location'
                        , orderable: false
                        , searcheable: false
                    }
                    , {
                        data: 'hear_us'
                        , name: 'hear_us'
                        , orderable: false
                        , searcheable: false
                    }
                    , {
                        data: 'confirmed'
                        , name: 'confirmed'
                        , orderable: false
                        , searcheable: false
                    }
                    , {
                        data: 'action'
                        , name: 'action'
                        , orderable: false
                        , searcheable: false
                    }
                    ,]
                , order: []
            });

        });

    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpGhFuvKcNpH-9Gl4mpGrz03gRjpEYnN8&libraries=places"></script>
    {{-- show address on google map --}}
    <script>
        function showAddressOnGoogleMap(user) {
            var latitude = parseFloat(user.business_latitude);
            var longitude = parseFloat(user.business_longitude);
            console.log(latitude)
            console.log(longitude)
            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');
            } else {
                errorNotification("Invalid latitude or longitude");
            }
        }

    </script>

@endsection