@extends('vendor.layout.master')
@section('content')
@section('service', 'active')
@section('title', 'Edit Service')

<div class="container-xxl flex-grow-1 container-p-y">
    <style>
        .form-control {
            margin-bottom: 2rem !important;
        }

        .form-check {
            margin-bottom: 2rem !important;
        }

        .text-danger {
            font-size: 0.875rem;
        }
    </style>
    <div class="row">
        <div class="card">
            <h5 class="card-header">Edit Service</h5>
            <div class="card-body">
                <form action="{{route('vendor.update.service')}}" method="post" class="row" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="time" class="form-control" value="60">

                    <input type="hidden" name="id" @if(!empty($service)) value="{{$service->id}}" @endif>


                    {{-- Category ID --}}
                    <div class="form-group col-md-12">
                        <label class="">Category</label>
                        <select name="category_id" class="form-control">
                            <option value="">Select Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ $service->category_id == $category->id ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Business ID --}}
                    <div class="form-group col-md-12">
                        <label class="">Business</label>
                        <select name="business_id" class="form-control">
                            <option value="">Select Business</option>
                            @foreach($businesses as $business)
                                <option value="{{ $business->id }}" {{ $service->business_id == $business->id ? 'selected' : '' }}>
                                    {{ $business->business_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('business_id')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Service Name --}}
                    <div class="form-group col-md-12">
                        <label class="">Service Name</label>
                        <input type="text" name="service_name" class="form-control" value="{{ old('service_name', $service->service_name) }}">
                        @error('service_name')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Description --}}
                    <div class="form-group col-md-12">
                        <label class="">Description</label>
                        <textarea name="description" class="form-control" rows="3">{{ old('description', $service->description) }}</textarea>
                        @error('description')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Time --}}
                    {{-- <div class="form-group col-md-12">
                        <label class="">Time</label>
                        <input type="text" name="time" class="form-control" value="{{ old('time', $service->time) }}">
                        @error('time')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div> --}}

                    {{-- Price --}}
                    <div class="form-group col-md-12">
                        <label class="">Price</label>
                        <input type="number" name="price" class="form-control" step="0.01" value="{{ old('price', $service->price) }}">
                        @error('price')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group col-md-12">
                        <label class="">Search Location</label>
                        <input type="text" id="searchInput" class="form-control">
                    </div>

                    {{-- Address --}}
                    <div class="form-group col-md-12">
                        <label class="">Address</label>
                        <input type="text" name="address" id="address" class="form-control" value="{{ old('address', $service->address) }}" readonly>
                        @error('address')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                     {{-- Location Details --}}
                     <div class="form-group col-md-4">
                        <label class="">City</label>
                        <input type="text" name="city" id="city" class="form-control" value="{{ old('city', $service->city) }}" readonly>
                        @error('city')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group col-md-4">
                        <label class="">State</label>
                        <input type="text" name="state" id="state" class="form-control" value="{{ old('state', $service->state) }}" readonly>
                        @error('state')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group col-md-4">
                        <label class="">Country</label>
                        <input type="text" name="country" id="country" class="form-control" value="{{ old('country', $service->country) }}" readonly>
                        @error('country')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Coordinates --}}
                    <div class="form-group col-md-6">
                        <label class="">Latitude</label>
                        <input type="text" name="latitude" id="latitude" class="form-control" value="{{ old('latitude', $service->latitude) }}" readonly>
                        @error('latitude')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group col-md-6">
                        <label class="">Longitude</label>
                        <input type="text" name="longitude" id="longitude" class="form-control" value="{{ old('longitude', $service->longitude) }}" readonly>
                        @error('longitude')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Service Video --}}
                    <div class="form-group col-md-12">
                        <label class="">Service Video</label>
                        <input type="file" name="service_video" class="form-control">
                        @if($service->service_video)
                            <video width="200" controls>
                                <source src="{{ asset('uploads/videos/'.$service->service_video) }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        @endif
                        @error('service_video')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Service Images --}}
                    <div class="form-group col-md-12">
                        <label class="">Service Images (Max 10)</label>
                        <input type="file" name="images[]" class="form-control" multiple>
                        @if($service->images)
                            <div class="mt-2">
                                @foreach(json_decode($service->images, true) as $image)
                                    <img src="{{ asset('uploads/images/'.$image) }}" width="100" class="me-2">
                                @endforeach
                            </div>
                        @endif
                        @error('images')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                        @error('images.*')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Service Timings --}}
                    <div class="form-group col-md-12">
                        <label class="">Service Timings</label>
                        <div id="timingSection">
                            @foreach($service->service_timings as $timing)
                                <div class="row productdiv">
                                    <div class="col-md-3">
                                        <label>Day</label>
                                        <select name="day[]" class="form-control">
                                            <option value="mon" {{ $timing->day == 'mon' ? 'selected' : '' }}>Monday</option>
                                            <option value="tue" {{ $timing->day == 'tue' ? 'selected' : '' }}>Tuesday</option>
                                            <option value="wed" {{ $timing->day == 'wed' ? 'selected' : '' }}>Wednesday</option>
                                            <option value="thu" {{ $timing->day == 'thu' ? 'selected' : '' }}>Thursday</option>
                                            <option value="fri" {{ $timing->day == 'fri' ? 'selected' : '' }}>Friday</option>
                                            <option value="sat" {{ $timing->day == 'sat' ? 'selected' : '' }}>Saturday</option>
                                            <option value="sun" {{ $timing->day == 'sun' ? 'selected' : '' }}>Sunday</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label>Start Time</label>
                                        <input type="time" name="start_time[]" class="form-control" value="{{ old('start_time[]', date('H:i', strtotime($timing->start_time ?? ''))) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label>End Time</label>
                                        <input type="time" name="end_time[]" class="form-control" value="{{ old('end_time[]', date('H:i', strtotime($timing->end_time ?? ''))) }}">
                                    </div>
                                    <div class="col-md-3" style="align-content:center;">
                                        <button type="button" class="btn btn-danger delete-btn w-100" @if ($loop->first)
                                            style="display:none;"@endif>
                                            <i class="fas fa-trash"></i> Delete
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-success mt-2 add-btn">Add More Timings</button>
                    </div>

                    {{-- Submit Button --}}
                    <div class="form-group offset-md-10 col-md-2 col-sm-12">
                        <button class="btn btn-primary" type="submit">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script>
    function initAutocomplete() {
        var input = document.getElementById('searchInput');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) return;

            document.getElementById('latitude').value = place.geometry.location.lat();
            document.getElementById('longitude').value = place.geometry.location.lng();

            let addressComponents = place.address_components;
            let address = "", city = "", state = "", country = "";

            for (let i = 0; i < addressComponents.length; i++) {
                let types = addressComponents[i].types;
                if (types.includes("street_address") || types.includes("route")) {
                    address = addressComponents[i].long_name;
                }
                if (types.includes("locality")) {
                    city = addressComponents[i].long_name;
                }
                if (types.includes("administrative_area_level_1")) {
                    state = addressComponents[i].long_name;
                }
                if (types.includes("country")) {
                    country = addressComponents[i].long_name;
                }
            }

            document.getElementById('address').value = address;
            document.getElementById('city').value = city;
            document.getElementById('state').value = state;
            document.getElementById('country').value = country;
            document.getElementById('mapLinkInput').value = "";
        });
    }
    google.maps.event.addDomListener(window, 'load', initAutocomplete);

    function extractCoordsFromUrl(url) {
            const match = url.match(/@(-?\d+\.\d+),(-?\d+\.\d+)/) || url.match(/q=(-?\d+\.\d+),(-?\d+\.\d+)/);
            if (match) {
                return {
                    lat: parseFloat(match[1]),
                    lng: parseFloat(match[2])
                };
            }
            return null;
        }

    async function getAddressFromCoords(lat, lng) {
        const apiKey = 'AIzaSyDXJS_VZMhnp0szh92aZGg8RHszz6RMQN8';
        const response = await fetch(
            `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}`);
        const data = await response.json();

        if (data.status === 'OK') {
            const result = data.results[0];
            document.getElementById('latitude').value = lat;
            document.getElementById('longitude').value = lng;
            document.getElementById('address').value = result.formatted_address;
            document.getElementById('searchInput').value = '';

            let city = '',
                state = '',
                country = '';
            result.address_components.forEach(component => {
                if (component.types.includes("locality")) city = component.long_name;
                if (component.types.includes("administrative_area_level_1")) state = component
                .long_name;
                if (component.types.includes("country")) country = component.long_name;
            });

            document.getElementById('city').value = city;
            document.getElementById('state').value = state;
            document.getElementById('country').value = country;
        }
    }

    async function resolveShortMapLink(link) {
        try {
            const response = await fetch(`/vendor/resolve-maps-link?link=${encodeURIComponent(link)}`);
            const data = await response.json();

            if (data.resolved_url) {
                const coords = extractCoordsFromUrl(data.resolved_url);
                if (coords) {
                    getAddressFromCoords(coords.lat, coords.lng);
                } else {
                    alert("Could not extract coordinates from the resolved URL.");
                }
            } else {
                alert(data.error || "Failed to resolve map link.");
            }
        } catch (err) {
            console.error(err);
            alert("Error occurred while resolving the link.");
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('mapLinkInput').addEventListener('change', function () {
            const link = this.value.trim();
            if (link.includes('maps.app.goo.gl')) {
                resolveShortMapLink(link);
            } else {
                const coords = extractCoordsFromUrl(link);
                if (coords) {
                    getAddressFromCoords(coords.lat, coords.lng);
                } else {
                    alert('Invalid or unsupported map link.');
                }
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $(document).on('click', '.add-btn', function() {
            if ($('.productdiv').length > 6) {
                alert('Limit Reached! Maximum 7 days allowed.');
            } else {
                var clone = $('.productdiv').first().clone();
                clone.find("input").val("").end();
                clone.find('.delete-btn').show();
                $('#timingSection').append(clone);
            }
        });
        $(document).on('click', '.delete-btn', function () {
            if ($('.productdiv').length > 1) {
                $(this).closest('.productdiv').remove();
            }
        });
    });
</script>

@endpush