@extends('admin.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('admin.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>

                    <div class="form-group col-md-12">
                        <label class="">Search Location with Link</label>
                        <input type="text" id="mapLinkInput" class="form-control" placeholder="Paste Google Maps Link here" />
                    </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>

                    {{-- Court Timings Section --}}
                    <div class="form-group col-md-12">
                        <div id="courtSection">
                            @php
                                $oldCourts = old('court_name', []);
                                $courts = [];

                                if (!empty($oldCourts)) {
                                    foreach ($oldCourts as $index => $courtName) {
                                        $courts[] = ['id' => null, 'court_name' => $courtName];
                                    }
                                } elseif (!empty($service->service_courts)) {
                                    foreach ($service->service_courts as $court) {
                                        $courts[] = ['id' => $court->id, 'court_name' => $court->court_name];
                                    }
                                } else {
                                    $courts[] = ['id' => null, 'court_name' => ''];
                                }
                            @endphp

                            @foreach($courts as $index => $court)
                                <div class="row court-row mb-3" data-index="{{ $index }}">
                                    <input type="hidden" name="court_id[]" value="{{ $court['id'] }}">
                                    <div class="col-md-4">
                                        <label>Court Name</label>
                                        <input type="text" name="court_name[]" class="form-control" value="{{ $court['court_name'] }}" required>
                                    </div>

                                    {{-- Hidden fixed durations --}}
                                    <input type="hidden" name="durations[{{ $index }}][]" value="60">
                                    <input type="hidden" name="durations[{{ $index }}][]" value="90">
                                    <input type="hidden" name="durations[{{ $index }}][]" value="120">

                                    <div class="col-md-4" style="align-content:center;">
                                        <p class="mb-0">Fixed Durations: <strong>60, 90, 120</strong> minutes</p>
                                    </div>

                                    <div class="col-md-4" style="align-content:center;">
                                        <button type="button" class="btn btn-danger w-100 delete-court-btn" @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-court-btn">
                            <i class="fas fa-plus"></i> Add More Courts
                        </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;
    //     });
    // }
    // google.maps.event.addDomListener(window, 'load', initAutocomplete);

    function initAutocomplete() {
        var input = document.getElementById('searchInput');
        var autocomplete = new google.maps.places.Autocomplete(input);

        // Set fields to retrieve formatted address along with geometry
        autocomplete.setFields(['address_component', 'geometry', 'formatted_address']);

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) return;  // If there's no geometry, return early

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

            // Get full formatted address
            var fullAddress = place.formatted_address || '';  // Fallback to empty string if address is not found

            // Populate the address field with the formatted address
            document.getElementById('address').value = fullAddress;

            // Extract address components as required
            let address = "", city = "", state = "", country = "";
            let addressComponents = place.address_components;

            // Loop through address components to extract city, state, and country
            for (let i = 0; i < addressComponents.length; i++) {
                let component = addressComponents[i];
                let types = component.types;

                if (types.includes("street_address") || types.includes("route")) {
                    address = component.long_name;
                }
                if (types.includes("locality")) {
                    city = component.long_name;
                }
                if (types.includes("administrative_area_level_1")) {
                    state = component.long_name;
                }
                if (types.includes("country")) {
                    country = component.long_name;
                }
            }

            // Populate the form fields with the extracted address components
            document.getElementById('address').value = address || fullAddress;  // Use full address if address field is empty
            document.getElementById('city').value = city || '';
            document.getElementById('state').value = state || '';
            document.getElementById('country').value = country || '';
            document.getElementById('mapLinkInput').value = '';
        });
    }

    // Initialize the autocomplete function when the window loads
    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(`/admin/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();
            }
        });

        $(document).on('click', '.add-court-btn', function () {
            var lastIndex = parseInt($('.court-row').last().data('index')) || 0;
            var newIndex = lastIndex + 1;

            var newRow = `
                <div class="row court-row mb-3" data-index="${newIndex}">
                    <div class="col-md-4">
                        <label>Court Name</label>
                        <input type="text" name="court_name[]" class="form-control" required>
                    </div>

                    <input type="hidden" name="durations[${newIndex}][]" value="60">
                    <input type="hidden" name="durations[${newIndex}][]" value="90">
                    <input type="hidden" name="durations[${newIndex}][]" value="120">

                    <div class="col-md-4" style="align-content:center;">
                        <p class="mb-0">Fixed Durations: <strong>60, 90, 120</strong> minutes</p>
                    </div>

                    <div class="col-md-4" style="align-content:center;">
                        <button type="button" class="btn btn-danger w-100 delete-court-btn">
                            <i class="fas fa-trash"></i> Delete
                        </button>
                    </div>
                </div>
            `;

            $('#courtSection').append(newRow);
        });

        $(document).on('click', '.delete-court-btn', function () {
            if ($('.court-row').length > 1) {
                $(this).closest('.court-row').remove();
            }
        });
    });
</script>

@endpush