@extends("layouts.admin.app")
@section("page-title")
{{__("Dashboard")}}
@endSection
@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("maintenance-orders")}}</h1>
        <p>{{__("maintenance-details")}}</p>
    </div>

    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("maintenance-orders")}}</a>
        </li>
        <li class="breadcrumb-item"><a href="#">{{__("maintenance-details")}}</a></li>
    </ul>
</div>
@endsection
@section("content")
<div class="row">
    <div class="col-md-12">
        <div class="tile" style="padding: 5px 5px 5px 5px">
            <div class="tile-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="scrollable-table">
                            <table class="table table-hover table-bordered table-fix-head" style="margin-bottom: 5px">
                                <thead style="font-size: 12px; line-height: 2px">
                                    <tr>
                                        <th style="width: 1%">#</th>
                                        <th style="width: 8%">{{__('code')}}</th>
                                        <th style="width: 20%">{{__('item')}}</th>
                                        <th style="width: 5%">{{__('unit')}}</th>
                                        <th style="width: 5%">{{__('quantity')}}</th>
                                        <th style="width: 5%">{{__('location')}}</th>
                                        <th style="width: 15%">{{__('image-before')}}</th>
                                        <th style="width: 15%">{{__('image-after')}}</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBody" style="font-size: 12px">
                                                                        @foreach($details as $detail)
                                    <tr id="trControl{{++$serial_number}}">
                                        <td style="text-align: center; padding: 5px 5px 5px 5px; margin: 0">
                                            {{$serial_number}}
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="text" style="padding: 3px;font-size: 13px" value="{{$detail->orderDetails->item->getItemCode()}}" readonly>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="text" style="padding: 3px;font-size: 13px" value="{{$detail->orderDetails->item->name}}" readonly>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="text" style="padding: 3px;font-size: 13px" value="{{$detail->orderDetails->item->unit->unit_name}}" readonly>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="text" style="padding: 3px;font-size: 13px" value="{{$detail->quantity}}" readonly>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <div class="modal fade" id="exampleModal{{$serial_number}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Location</h5>
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div>
                                                                <div class="row badge-light p-3">
                                                                    <div class="col-6" style="margin-top: 5px">
                                                                        <label>{{__('Add Location')}}</label>
                                                                        <textarea type="text" class="form-control" id="locationDesc{{$serial_number}}" placeholder="Add Location">{{$detail->location}}</textarea>
                                                                    </div>
                                                                    <div>
                                                                        <div class="col-lg-10 mb-3">
                                                                            <div class="form-group">
                                                                                <label class="control-label">{{__("Location")}}</label>
                                                                                <div id="map{{$serial_number}}" class="col-lg-12" style="width: 500px;height: 226px;border: 2px solid #ccc;"></div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-12" id="latLng">
                                                                            <div class="col-lg-6">
                                                                                <div class="form-group">
                                                                                    <label class="control-label">{{__("lat")}}</label>
                                                                                    <input class="form-control" type="text" name="lat{{$serial_number}}" id="lat{{$serial_number}}" placeholder="{{__('Enter lat')}}" value="{{$detail->latitude}}">
                                                                                    <div class="invalid-feedback" style="display: none"></div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <div class="form-group">
                                                                                    <label class="control-label">{{__("Lng")}}</label>
                                                                                    <input class="form-control" type="text" name="lng{{$serial_number}}" id="lng{{$serial_number}}" placeholder="{{__('Enter Lng')}}" value="{{$detail->longitude}}">
                                                                                    <div class="invalid-feedback" style="display: none"></div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" id="createBtn{{$serial_number}}" class="createBtn btn btn-primary form-control" onclick="createBtn({{$serial_number}})" data-toggle="modal" data-target="#exampleModal{{$serial_number}}">
                                                {{__('show')}}
                                            </button>
                                        </td>
                                        <td>
                                            @foreach($detail->before as $image)
                                            <button class="btn btn-primary show-image-btn" style="padding: 4px;" data-image-path="{{ asset($image->path . '/' . $image->group . '/' . $image->file_name) }}">{{ __('image') }}</button>
                                            @endforeach
                                        </td>
                                        <td>
                                            @foreach($detail->after as $image)
                                            <button class="btn btn-primary show-image-btn" style="padding: 4px;" data-image-path="{{ asset($image->path . '/' . $image->group . '/' . $image->file_name) }}">{{ __('image') }}</button>
                                            @endforeach
                                        </td>
                                        <!-- Modal to display the image -->
                                        <div class="modal" id="imageModal" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document" style="max-height: 50%;">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">{{__('image')}}</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <s pan aria-hidden="true">&times;</s>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body" style="display: flex;justify-content: center;">
                                                        <img id="modalImage" src="" alt="Image" width=50% height=50%>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("scripts")
<!-- Google analytics script-->
<script>
    $(document).ready(function() {
        // JavaScript to handle the modal functionality
        const modal = $("#imageModal");
        const modalImage = $("#modalImage");

        function showModal(imagePath) {
            modalImage.attr("src", imagePath);
            modal.modal("show");
        }

        // Event listeners for buttons
        $(".show-image-btn").on("click", function() {
            const imagePath = $(this).data("image-path");
            showModal(imagePath);
        });
    });
</script>
<script type="text/javascript">
    var map, marker;
    var mapRowNo;
    let noOfRows = $('.table tbody tr').length;

    function createBtn(rowNo) {
        mapRowNo = rowNo;
        if (rowNo === undefined || rowNo === null)
            rowNo = 1;
        let latVal = parseFloat($("#lat" + rowNo).val());
        let lngVal = parseFloat($("#lng" + rowNo).val());
        if (latVal == 0 && lngVal == 0 || ($("#lat" + rowNo).val() == "" && $("#lng" + rowNo).val() == "")) {
            latVal = 24.172538;
            lngVal = 44.965225;
            $("#lat" + rowNo).val(latVal);
            $("#lng" + rowNo).val(lngVal)
        }

        let defaultPosition = {
            lat: latVal,
            lng: lngVal
        };
        map = new google.maps.Map(document.getElementById("map" + rowNo), {
            center: defaultPosition,
            zoom: 8,
            draggable: false, // Disable map dragging
            zoomControl: false, // Disable zoom control
            scrollwheel: false, // Disable scroll zoom
            disableDoubleClickZoom: true, // Disable double click zoom
            gestureHandling: "none" // Disable all gestures
        });
        marker = new google.maps.Marker({
            position: defaultPosition,
            map: map,
            draggable: true
        });
        map.addListener("center_changed", changeMarkerPosition);
        map.addListener("zoom_change", changeMarkerPosition);
        marker.addListener("dragend", setPositionToInputs)
    }

    function changeMarkerPosition() {
        let latlng = map.getCenter();
        marker.setPosition(latlng);
        setPositionToInputs();
    }

    function setPositionToInputs() {
        let inputLat = marker.getPosition().lat();
        let inputLng = marker.getPosition().lng();
        $("#lat" + mapRowNo).val(inputLat);
        $("#lng" + mapRowNo).val(inputLng);
        getAddressByReverseGeocoding(inputLat, inputLng, function(address) {
            $("#locationDesc" + mapRowNo).val(address);
        });
    }

    function getAddressByReverseGeocoding(lat, lng, callback) {
        var latlng = new google.maps.LatLng(lat, lng);
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
            'latLng': latlng
        }, function(results, status) {
            if (status !== google.maps.GeocoderStatus.OK) {
                alert(status);
            }
            if (status == google.maps.GeocoderStatus.OK) {
                var address = results[0].formatted_address;
                callback(address);
            }
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEiJBaJbjjg8prC40SagCJotsXS9-Pyxk&callback=createBtn&libraries=&v=weekly"></script>
@endsection