@extends('admin.layout.master')
@section('content')
@section('service', 'active')
@section('title', 'Add 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">Add Service</h5>
            <div class="card-body">
                <form action="{{ route('admin.store.service') }}" method="post" class="row"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="time" class="form-control" value="60">


                    {{-- 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 }}"
                                    {{ old('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" id="business_select" class="form-control">
                            <option value="">Select Business</option>
                            @foreach($businesses as $business)
                                <option value="{{ $business->id }}" data-vendor="{{ $business->vendor_id }}"
                                    {{ old('business_id') == $business->id ? 'selected' : '' }}>
                                    {{ $business->business_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('business_id')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <input type="hidden" name="vendor_id" id="vendor_id"
                        value="{{ old('vendor_id') }}">


                    {{-- 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') }}">
                        @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') }}</textarea>
                        @error('description')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Time --}}
                    {{-- <div class="form-group col-md-12" disabled>
                        <label class="">Time</label>
                        <input type="text" name="time" class="form-control" value="{{ old('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') }}">
                @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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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">
                @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>
                @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">
                <div id="timingSection">
                    @php
                        // Get old input or model data, ensure it's properly formatted
                        $oldTimings = old('day', []);
                        $modelTimings = isset($model) ? $model->timings->toArray() : [];

                        // Merge and format the timings data
                        $timings = [];
                        if (!empty($oldTimings)) {
                        // Handle case when old input exists
                        foreach ($oldTimings as $index => $day) {
                        $timings[] = [
                        'day' => $day,
                        'start_time' => old('start_time.'.$index, ''),
                        'end_time' => old('end_time.'.$index, '')
                        ];
                        }
                        } elseif (!empty($modelTimings)) {
                        // Handle case when model data exists
                        $timings = $modelTimings;
                        } else {
                        // Default empty timing
                        $timings = [['day' => 'mon', 'start_time' => '', 'end_time' => '']];
                        }
                    @endphp

                    @foreach($timings as $index => $timing)
                        @php
                            // Ensure $timing is always an array
                            $timing = is_array($timing) ? $timing : ['day' => 'mon', 'start_time' => '', 'end_time' =>
                            ''];
                            $day = $timing['day'] ?? 'mon';
                            $start_time = $timing['start_time'] ?? '';
                            $end_time = $timing['end_time'] ?? '';
                        @endphp
                        <div class="row productdiv mb-3" data-index="{{ $index }}">
                            <div class="col-md-3">
                                <label>Day</label>
                                <select name="day[]" class="form-control" required>
                                    <option value="mon"
                                        {{ $day == 'mon' ? 'selected' : '' }}>
                                        Monday</option>
                                    <option value="tue"
                                        {{ $day == 'tue' ? 'selected' : '' }}>
                                        Tuesday</option>
                                    <option value="wed"
                                        {{ $day == 'wed' ? 'selected' : '' }}>
                                        Wednesday</option>
                                    <option value="thu"
                                        {{ $day == 'thu' ? 'selected' : '' }}>
                                        Thursday</option>
                                    <option value="fri"
                                        {{ $day == 'fri' ? 'selected' : '' }}>
                                        Friday</option>
                                    <option value="sat"
                                        {{ $day == 'sat' ? 'selected' : '' }}>
                                        Saturday</option>
                                    <option value="sun"
                                        {{ $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="{{ $start_time }}"
                                    required>
                            </div>
                            <div class="col-md-3">
                                <label>End Time</label>
                                <input type="time" name="end_time[]" class="form-control" value="{{ $end_time }}"
                                    required>
                            </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">
                    <i class="fas fa-plus"></i> 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[] = [
                                    'court_name' => $courtName,
                                ];
                            }
                        } else {
                            // Default one input
                            $courts[] = ['court_name' => ''];
                        }
                    @endphp

                    @foreach($courts as $index => $court)
                        <div class="row court-row mb-3" data-index="{{ $index }}">
                            <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">Submit</button>
            </div>
            </form>
        </div>
    </div>
</div>
</div>
@endsection
@push('script')
    <script>
        $(document).ready(function () {
            // alert()
            $('#business_select').change(function () {
                var vendorId = $(this).find(':selected').data('vendor'); // Get vendor ID
                $('#vendor_id').val(vendorId); // Set vendor ID in hidden field
            });
        });

    </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;
        //     });
        // }

        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 () {
            // Add More Service Timings
            $(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();
                    $('#timingSection').append(clone);
                }
            });
        });

    </script> -->

    <script>
        $(document).ready(function () {
            // Show delete button on first load if multiple exist
            // if ($('.productdiv').length > 1) {
            //     $('.delete-btn').show();
            // }

            // Add More Service Timings
            $(document).on('click', '.add-btn', function () {
                if ($('.productdiv').length >= 7) {
                    alert('Limit Reached! Maximum 7 days allowed.');
                } else {
                    var lastIndex = parseInt($('.productdiv').last().data('index')) || 0;
                    var newIndex = lastIndex + 1;

                    var clone = $('.productdiv').first().clone();
                    clone.attr('data-index', newIndex);
                    clone.find("input").val("");
                    clone.find("select").val("mon");
                    clone.find('.delete-btn').show();

                    // Update names with new index
                    clone.find('[name^="day"]').attr('name', 'day[' + newIndex + ']');
                    clone.find('[name^="start_time"]').attr('name', 'start_time[' + newIndex + ']');
                    clone.find('[name^="end_time"]').attr('name', 'end_time[' + newIndex + ']');

                    $('#timingSection').append(clone);
                }
            });

            // Delete Service Timing
            $(document).on('click', '.delete-btn', function () {
                if ($('.productdiv').length > 1) {
                    $(this).closest('.productdiv').remove();
                }

                // Hide delete button if only one remains
                // if ($('.productdiv').length === 1) {
                //     $('.delete-btn').hide();
                // }
            });

            // Add More Court Timings Section
            $(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);
            });

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

    </script>
@endpush