@extends('layouts.admin')

@section('title', 'Edit Charging Point - EV Charging Network')

@section('breadcrumb_title', 'Charging Points')
@section('breadcrumb_sub_title', 'Edit')
@section('page_title', 'Edit Charging Point')
@section('breadcrumb_link', route('charging-points.index'))
@section('content')
    <div class="min-h-screen bg-gray-50">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <!-- Card header -->
                    <div class="card-header">
                        <h5 class="mb-0">Edit Charging Point Details</h5>
                        <p class="text-sm mb-0">
                            Update the charging point "{{ $chargingPoint->name }}" at location
                            ({{ $chargingPoint->lattitude }}, {{ $chargingPoint->longitude }}).
                        </p>
                    </div>

                    <!-- Card body -->
                    <div class="card-body">
                        <form method="POST" enctype="multipart/form-data" id="chargingPointForm">
                            @csrf
                            <!-- Hidden fields -->
                            <input type="hidden" name="guard" value="web">
                            <input type="hidden" name="created_by" value="{{ auth()->id() }}">
                            <input type="hidden" name="operating_hours" id="operatingHoursDataHidden" value="">

                            <!-- Basic Information -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Basic Information</h6>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="name" class="form-label">Charging Point Name <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                            id="name" name="name" value="{{ old('name', $chargingPoint->name) }}"
                                            placeholder="Enter charging point name">
                                        <small class="text-danger font-weight-bold err_name"></small>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="description" class="form-label">Address</label>
                                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                                            rows="3" placeholder="Enter description">{{ old('description', $chargingPoint->description) }}</textarea>
                                        <small class="text-danger font-weight-bold err_description"></small>
                                    </div>
                                </div>
                            </div>

                            <!-- Location Information -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Location Information</h6>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="lattitude" class="form-label">Latitude <span
                                                class="text-danger">*</span></label>
                                        <input type="number" step="any"
                                            class="form-control @error('lattitude') is-invalid @enderror" id="lattitude"
                                            name="lattitude" value="{{ old('lattitude', $chargingPoint->lattitude) }}"
                                            placeholder="e.g., 40.7128" readonly disabled>
                                        <small class="text-danger font-weight-bold err_lattitude"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="longitude" class="form-label">Longitude <span
                                                class="text-danger">*</span></label>
                                        <input type="number" step="any"
                                            class="form-control @error('longitude') is-invalid @enderror" id="longitude"
                                            name="longitude" value="{{ old('longitude', $chargingPoint->longitude) }}"
                                            placeholder="e.g., -74.0060" readonly disabled>
                                        <small class="text-danger font-weight-bold err_longitude"></small>
                                    </div>
                                </div>
                            </div>

                            <!-- Location Image -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Location Image</h6>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="location_image" class="form-label">Update Location Image</label>
                                        <input type="file"
                                            class="form-control @error('location_image') is-invalid @enderror"
                                            id="location_image" name="location_image"
                                            accept="image/jpeg,image/png,image/jpg,image/gif">
                                        <small class="form-text text-muted">Upload a new image to replace the current one.
                                            Max size: 2MB. Supported formats: JPEG, PNG, JPG, GIF</small>
                                        <div id="current-image-info" class="mt-2">
                                            @if ($chargingPoint->location_image)
                                                <div class="alert alert-info py-2">
                                                    <i class="fas fa-image me-2"></i>
                                                    <span>Current image:
                                                        {{ basename($chargingPoint->location_image) }}</span>
                                                </div>
                                            @else
                                                <div class="alert alert-warning py-2">
                                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                                    <span>No current image uploaded</span>
                                                </div>
                                            @endif
                                        </div>
                                        <div id="selected-image-info" class="mt-2" style="display: none;">
                                            <div class="alert alert-success py-2">
                                                <i class="fas fa-check-circle me-2"></i>
                                                <span id="selected-image-name"></span>
                                            </div>
                                        </div>
                                        <small class="text-danger font-weight-bold err_location_image"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">Image Preview</label>
                                        <div id="image-preview-container">
                                            @if ($chargingPoint->location_image_url)
                                                <div id="current-image-preview">
                                                    <img src="{{ $chargingPoint->location_image_url }}"
                                                        alt="Current location image" class="img-fluid border rounded"
                                                        style="width: 100%; height: 200px; object-fit: cover;">
                                                </div>
                                            @else
                                                <div id="no-image-preview">
                                                    <div class="border rounded p-3 text-center text-muted"
                                                        style="width: 100%; height: 200px; display: flex; align-items: center; justify-content: center;">
                                                        <div>
                                                            <i class="fas fa-image fa-2x mb-2"></i>
                                                            <div>No image uploaded</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                            <div id="new-image-preview" style="display: none;">
                                                <img id="preview-image" alt="New image preview"
                                                    class="img-fluid border rounded"
                                                    style="width: 100%; height: 200px; object-fit: cover;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Technical Details -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Technical Details</h6>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="network_id" class="form-label d-flex align-items-center">
                                            <span>Network <span class="text-danger">*</span></span>
                                            <button type="button" class="btn btn-success rounded-circle p-1 ms-2 mt-3"
                                                id="addNetworkBtn" data-bs-toggle="modal"
                                                data-bs-target="#addNetworkModal" title="Add New Network"
                                                style="width: 20px; height: 20px; font-size: 10px;">
                                                <i class="fas fa-plus text-white"></i>
                                            </button>
                                        </label>
                                        <select class="form-select @error('network') is-invalid @enderror" id="network"
                                            name="network">
                                            <option value="">Select Network</option>
                                            @foreach ($networks as $network)
                                                <option value="{{ $network->name }}"
                                                    {{ old('network', $chargingPoint->network->name) == $network->name ? 'selected' : '' }}>
                                                    {{ $network->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-danger font-weight-bold err_network"></small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="power_output_id" class="form-label d-flex align-items-center">
                                            <span>Power Output <span class="text-danger">*</span></span>
                                            <button type="button" class="btn btn-success rounded-circle p-1 ms-2 mt-3"
                                                id="addPowerOutputBtn" data-bs-toggle="modal"
                                                data-bs-target="#addPowerOutputModal" title="Add New Power Output"
                                                style="width: 20px; height: 20px; font-size: 10px;">
                                                <i class="fas fa-plus text-white"></i>
                                            </button>
                                        </label>
                                        <select class="form-select @error('power_output') is-invalid @enderror"
                                            id="power_output" name="power_output">
                                            <option value="">Select Power Output</option>
                                            @foreach ($powerOutputs as $powerOutput)
                                                <option value="{{ $powerOutput->name }}"
                                                    {{ old('power_output', $chargingPoint->powerOutput->name) == $powerOutput->name ? 'selected' : '' }}>
                                                    {{ $powerOutput->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-danger font-weight-bold err_power_output"></small>
                                    </div>
                                </div>
                            </div>

                            <!-- Operating Hours -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Operating Hours</h6>

                                    <!-- Operating Hours Type Selection -->
                                    <div class="form-group mb-3">
                                        <label class="form-label">Operating Hours Type <span
                                                class="text-danger">*</span></label>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio"
                                                        name="operating_hours_type" id="hours_24_7" value="24_7"
                                                        {{ old('operating_hours_type', $chargingPoint->timeLines && $chargingPoint->timeLines->where('from', '00:00:00')->where('to', '23:59:00')->count() > 0 ? '24_7' : '') == '24_7' ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="hours_24_7">
                                                        <strong>24/7</strong> - Available all day, every day
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio"
                                                        name="operating_hours_type" id="hours_custom" value="custom"
                                                        {{ old('operating_hours_type', $chargingPoint->timeLines && $chargingPoint->timeLines->where('from', '00:00:00')->where('to', '23:59:00')->count() == 0 ? 'custom' : '') == 'custom' ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="hours_custom">
                                                        <strong>Custom</strong> - Set specific days and times
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Custom Operating Hours Section -->
                                    <div id="customHoursSection" class="mt-3" style="display: none;">
                                        <div class="card">
                                            <div class="card-header d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0">Custom Operating Hours</h6>
                                                <button type="button" class="btn btn-success btn-sm"
                                                    id="addCustomHoursBtn">
                                                    <i class="fas fa-plus me-1"></i>Add Hours
                                                </button>
                                            </div>
                                            <div class="card-body">
                                                <div id="customHoursList">
                                                    <!-- Custom hours will be added here dynamically -->
                                                </div>
                                                <small class="text-danger font-weight-bold err_operating_hours"></small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Hidden field to store operating hours data -->
                                    <input type="hidden" name="operating_hours_data" id="operatingHoursData"
                                        value="">
                                    <small class="text-danger font-weight-bold err_operating_hours_type"></small>
                                </div>
                            </div>

                            <!-- Plug Types -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Plug Types</h6>
                                    <div class="row">
                                        @foreach ($plugTypes as $plugType)
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="plug_type_{{ $plugType->id }}"
                                                        class="form-label">{{ $plugType->name }}</label>
                                                    @php
                                                        $currentQuantity = $chargingPoint->plugTypes
                                                            ->where('id', $plugType->id)
                                                            ->first()
                                                            ? $chargingPoint->plugTypes
                                                                ->where('id', $plugType->id)
                                                                ->first()->pivot->quantity
                                                            : 0;
                                                    @endphp
                                                    <input type="number" class="form-control"
                                                        id="plug_type_{{ $plugType->id }}"
                                                        name="plug_types[{{ $plugType->id }}]"
                                                        value="{{ old('plug_types.' . $plugType->id, $currentQuantity) }}"
                                                        min="0" placeholder="Quantity">
                                                </div>
                                            </div>
                                        @endforeach
                                        <small class="text-danger font-weight-bold err_plug_types"></small>
                                    </div>
                                </div>
                            </div>

                            <!-- Amenities -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Amenities</h6>
                                    <div class="row">
                                        @foreach ($amenities as $amenity)
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        id="amenity_{{ $amenity->id }}" name="amenities[]"
                                                        value="{{ $amenity->id }}"
                                                        {{ in_array($amenity->id, old('amenities', $chargingPoint->amenities->pluck('id')->toArray())) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="amenity_{{ $amenity->id }}">
                                                        {{ $amenity->name }}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <!-- Additional Images -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Additional Images</h6>

                                    <!-- Existing Images -->
                                    @if ($chargingPoint->images && $chargingPoint->images->count() > 0)
                                        <div class="mb-3">
                                            <label class="form-label">Current Images</label>
                                            <div class="row" id="existing-images-container">
                                                @foreach ($chargingPoint->images as $image)
                                                    <div class="col-md-3 mb-3" data-image-id="{{ $image->id }}">
                                                        <div class="position-relative">
                                                            <img src="{{ $image->image_url }}" alt="Charging point image"
                                                                class="img-fluid border rounded"
                                                                style="width: 100%; height: 150px; object-fit: cover;">
                                                            <button type="button"
                                                                class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1"
                                                                onclick="removeExistingImage({{ $image->id }})"
                                                                title="Remove image">
                                                                <i class="fas fa-times"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @else
                                        <div class="mb-3">
                                            <div class="alert alert-info">
                                                <i class="fas fa-info-circle me-2"></i>
                                                No additional images uploaded yet.
                                            </div>
                                        </div>
                                    @endif

                                    <!-- Upload New Images -->
                                    <div class="mb-3">
                                        <label for="additional_images" class="form-label">Upload New Images</label>
                                        <input type="file"
                                            class="form-control @error('additional_images') is-invalid @enderror"
                                            id="additional_images" name="additional_images[]"
                                            accept="image/jpeg,image/png,image/jpg,image/gif" multiple>
                                        <small class="form-text text-muted">Select up to 3 images to upload. Max size: 2MB
                                            each. Supported formats: JPEG, PNG, JPG, GIF</small>
                                        <div id="image-limit-warning" class="alert alert-warning mt-2"
                                            style="display: none;">
                                            <i class="fas fa-exclamation-triangle me-2"></i>
                                            <span>You can only upload a maximum of 3 images at once.</span>
                                        </div>
                                        <small class="text-danger font-weight-bold err_additional_images"></small>
                                    </div>

                                    <!-- New Images Preview -->
                                    <div id="new-images-preview" class="row" style="display: none;">
                                        <div class="col-12">
                                            <label class="form-label">New Images Preview</label>
                                            <div id="new-images-container" class="row">
                                                <!-- New images will be added here -->
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Hidden fields for removed images -->
                                    <div id="removed-images-container">
                                        <!-- Hidden inputs for removed image IDs will be added here -->
                                    </div>
                                </div>
                            </div>

                            <!-- Pricing and Access -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Pricing and Access</h6>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="free_to_use" class="form-label">Free to Use</label>
                                        <select class="form-control @error('free_to_use') is-invalid @enderror"
                                            id="free_to_use" name="free_to_use">
                                            <option value="1"
                                                {{ old('free_to_use', $chargingPoint->free_to_use) == 1 ? 'selected' : '' }}>
                                                Yes</option>
                                            <option value="0"
                                                {{ old('free_to_use', $chargingPoint->free_to_use) == 0 ? 'selected' : '' }}>
                                                No</option>
                                        </select>
                                        <small class="text-danger font-weight-bold err_free_to_use"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="payment_price" class="form-label">Payment Price</label>
                                        <input type="number" step="0.01"
                                            class="form-control @error('payment_price') is-invalid @enderror"
                                            id="payment_price" name="payment_price"
                                            value="{{ old('payment_price', $chargingPoint->payment_price) }}"
                                            placeholder="0.00">
                                        <small class="text-danger font-weight-bold err_payment_price"></small>
                                    </div>
                                </div>

                            </div>

                            <!-- Status -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Status</h6>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="charger_status" class="form-label">Charger Status</label>
                                        <select class="form-control @error('charger_status') is-invalid @enderror"
                                            id="charger_status" name="charger_status">
                                            <option value="">Select Status</option>
                                            @foreach (\App\Enums\ChargingPointEnum::options() as $value => $label)
                                                <option value="{{ $value }}"
                                                    {{ old('charger_status', $chargingPoint->charger_status) == $value ? 'selected' : '' }}>
                                                    {{ $label }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-danger font-weight-bold err_charger_status"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="status" class="form-label">Status</label>
                                        <select class="form-control @error('status') is-invalid @enderror" id="status"
                                            name="status">
                                            <option value="">Select Status</option>
                                            @foreach (\App\Enums\ChargingPointAdminStatusEnum::editOptions() as $value => $label)
                                                <option value="{{ $value }}"
                                                    {{ old('status', $chargingPoint->status) == $value ? 'selected' : '' }}>
                                                    {{ $label }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-danger font-weight-bold err_status"></small>
                                    </div>
                                </div>
                            </div>

                            <!-- Additional Information -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Additional Information</h6>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="access_instructions" class="form-label">Access Instructions</label>
                                        <textarea class="form-control @error('access_instructions') is-invalid @enderror" id="access_instructions"
                                            name="access_instructions" rows="3" placeholder="Enter access instructions">{{ old('access_instructions', $chargingPoint->access_instructions) }}</textarea>
                                        <small class="text-danger font-weight-bold err_access_instructions"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="additional_notes" class="form-label">Additional Notes</label>
                                        <textarea class="form-control @error('additional_notes') is-invalid @enderror" id="additional_notes"
                                            name="additional_notes" rows="3" placeholder="Enter additional notes">{{ old('additional_notes', $chargingPoint->additional_notes) }}</textarea>
                                        <small class="text-danger font-weight-bold err_additional_notes"></small>
                                    </div>
                                </div>
                            </div>


                            <!-- Submit Buttons -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between">
                                        <a href="{{ route('charging-points.index') }}" class="btn btn-secondary">
                                            <i class="fas fa-arrow-left me-2"></i>Back to List
                                        </a>
                                        <div>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-save me-2"></i>Update Charging Point
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Network Modal -->
    <div class="modal fade" id="addNetworkModal" tabindex="-1" aria-labelledby="addNetworkModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addNetworkModalLabel">Add New Network</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addNetworkForm">
                        <div class="form-group">
                            <label for="newNetworkName" class="form-label">Network Name <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="newNetworkName" name="newNetworkName"
                                placeholder="Enter network name" required>
                            <small class="text-danger font-weight-bold err_newNetworkName"></small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveNewNetworkBtn">Add Network</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Power Output Modal -->
    <div class="modal fade" id="addPowerOutputModal" tabindex="-1" aria-labelledby="addPowerOutputModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPowerOutputModalLabel">Add New Power Output</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addPowerOutputForm">
                        <div class="form-group">
                            <label for="newPowerOutputName" class="form-label">Power Output Value <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="newPowerOutputName" name="newPowerOutputName"
                                placeholder="e.g., 23, 150" required>
                            <small class="text-danger font-weight-bold err_newPowerOutputName"></small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveNewPowerOutputBtn">Add Power Output</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Custom Operating Hours Modal -->
    <div class="modal fade" id="addCustomHoursModal" tabindex="-1" aria-labelledby="addCustomHoursModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCustomHoursModalLabel">Add Custom Operating Hours</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addCustomHoursForm">
                        <div class="form-group mb-3">
                            <label class="form-label">Select Days <span class="text-danger">*</span></label>
                            <div class="row">
                                @php
                                    $days = [
                                        'Monday',
                                        'Tuesday',
                                        'Wednesday',
                                        'Thursday',
                                        'Friday',
                                        'Saturday',
                                        'Sunday',
                                    ];
                                @endphp
                                @foreach ($days as $day)
                                    <div class="col-md-6 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input day-checkbox" type="checkbox"
                                                id="modal_day_{{ strtolower($day) }}" value="{{ $day }}">
                                            <label class="form-check-label" for="modal_day_{{ strtolower($day) }}">
                                                {{ $day }}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <small class="text-danger font-weight-bold" id="modalDaysError"></small>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Operating Time Range <span class="text-danger">*</span></label>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="modalOperatingFrom" class="form-label">From</label>
                                    <input type="time" class="form-control" id="modalOperatingFrom"
                                        name="operatingFrom" value="08:00" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="modalOperatingTo" class="form-label">To</label>
                                    <input type="time" class="form-control" id="modalOperatingTo" name="operatingTo"
                                        value="18:00" required>
                                </div>
                            </div>
                            <small class="text-danger font-weight-bold" id="modalTimeError"></small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveCustomHoursBtn">Add Hours</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize operating hours functionality
            initializeOperatingHours();

            // Handle location image file selection and preview
            const locationImageInput = document.getElementById('location_image');
            const currentImageInfo = document.getElementById('current-image-info');
            const selectedImageInfo = document.getElementById('selected-image-info');
            const selectedImageName = document.getElementById('selected-image-name');
            const currentImagePreview = document.getElementById('current-image-preview');
            const noImagePreview = document.getElementById('no-image-preview');
            const newImagePreview = document.getElementById('new-image-preview');
            const previewImage = document.getElementById('preview-image');

            locationImageInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    // Show file name
                    selectedImageName.textContent = `Selected: ${file.name}`;
                    selectedImageInfo.style.display = 'block';
                    currentImageInfo.style.display = 'none';

                    // Show image preview
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImage.src = e.target.result;
                        newImagePreview.style.display = 'block';

                        // Hide current image preview
                        if (currentImagePreview) {
                            currentImagePreview.style.display = 'none';
                        }
                        if (noImagePreview) {
                            noImagePreview.style.display = 'none';
                        }
                    };
                    reader.readAsDataURL(file);
                } else {
                    // Reset to original state
                    selectedImageInfo.style.display = 'none';
                    currentImageInfo.style.display = 'block';
                    newImagePreview.style.display = 'none';

                    // Show original image preview
                    if (currentImagePreview) {
                        currentImagePreview.style.display = 'block';
                    }
                    if (noImagePreview) {
                        noImagePreview.style.display = 'block';
                    }
                }
            });

            // Handle additional images management with cumulative selection
            const additionalImagesInput = document.getElementById('additional_images');
            const newImagesPreview = document.getElementById('new-images-preview');
            const newImagesContainer = document.getElementById('new-images-container');
            const removedImagesContainer = document.getElementById('removed-images-container');
            const imageLimitWarning = document.getElementById('image-limit-warning');
            const MAX_IMAGES = 3;

            // Store selected files globally
            let selectedFiles = [];

            additionalImagesInput.addEventListener('change', function(e) {
                const newFiles = Array.from(e.target.files);

                // Add new files to existing selection
                selectedFiles = [...selectedFiles, ...newFiles];

                // Check if total exceeds limit
                if (selectedFiles.length > MAX_IMAGES) {
                    imageLimitWarning.style.display = 'block';
                    imageLimitWarning.innerHTML = `
                <i class="fas fa-exclamation-triangle me-2"></i>
                <span>You can only upload a maximum of 3 images. Currently selected: ${selectedFiles.length}. Only the first 3 will be kept.</span>
            `;

                    // Keep only first 3 files
                    selectedFiles = selectedFiles.slice(0, MAX_IMAGES);
                } else {
                    imageLimitWarning.style.display = 'none';
                }

                // Update the file input with all selected files
                updateFileInput();

                // Process and display all selected files
                processImageFiles(selectedFiles);

                // Clear the input so same files can be selected again if needed
                e.target.value = '';
            });

            function updateFileInput() {
                const dt = new DataTransfer();
                selectedFiles.forEach(file => dt.items.add(file));
                additionalImagesInput.files = dt.files;
            }

            function processImageFiles(files) {
                if (files.length > 0) {
                    newImagesPreview.style.display = 'block';
                    newImagesContainer.innerHTML = '';

                    files.forEach((file, index) => {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const imageDiv = document.createElement('div');
                            imageDiv.className = 'col-md-3 mb-3';
                            imageDiv.innerHTML = `
                        <div class="position-relative">
                            <img src="${e.target.result}" 
                                 alt="New image preview" 
                                 class="img-fluid border rounded" 
                                 style="width: 100%; height: 150px; object-fit: cover;">
                            <button type="button" 
                                    class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" 
                                    onclick="removeNewImage(${index})"
                                    title="Remove image">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    `;
                            newImagesContainer.appendChild(imageDiv);
                        };
                        reader.readAsDataURL(file);
                    });
                } else {
                    newImagesPreview.style.display = 'none';
                }
            }

            // Global functions for image management
            window.removeExistingImage = function(imageId) {
                const imageElement = document.querySelector(`[data-image-id="${imageId}"]`);
                if (imageElement) {
                    // Add hidden input for removed image
                    const hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'removed_images[]';
                    hiddenInput.value = imageId;
                    removedImagesContainer.appendChild(hiddenInput);

                    // Remove from display
                    imageElement.remove();

                    // Show message if no images left
                    const existingContainer = document.getElementById('existing-images-container');
                    if (existingContainer && existingContainer.children.length === 0) {
                        existingContainer.innerHTML = `
                    <div class="col-12">
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            All images will be removed on save.
                        </div>
                    </div>
                `;
                    }
                }
            };

            window.removeNewImage = function(index) {
                // Remove from selectedFiles array
                selectedFiles.splice(index, 1);

                // Update the file input
                updateFileInput();

                // Reprocess and display remaining files
                processImageFiles(selectedFiles);

                // Hide warning if under limit
                if (selectedFiles.length <= MAX_IMAGES) {
                    imageLimitWarning.style.display = 'none';
                }
            };

            // Toggle payment price field based on free_to_use selection
            function togglePaymentPriceField() {
                var freeToUse = $('#free_to_use').val();

                if (freeToUse === '1') {
                    // If Free to Use = YES (1) -> Make payment_price READONLY
                    $('#payment_price').val('0.00');
                    $('#payment_price').prop('readonly', true);
                    $('#payment_price').prop('disabled', true);
                    $('#payment_price').addClass('bg-light');
                } else {
                    // If Free to Use = NO (0) -> Make payment_price EDITABLE
                    $('#payment_price').val('');
                    $('#payment_price').prop('readonly', false);
                    $('#payment_price').prop('disabled', false);
                    $('#payment_price').removeClass('bg-light');
                }
            }

            // Run on page load
            togglePaymentPriceField();

            // Run when user changes free_to_use dropdown
            $('#free_to_use').on('change', function() {
                togglePaymentPriceField();
            });

            // Network addition functionality
            const addNetworkBtn = document.getElementById('addNetworkBtn');
            const saveNewNetworkBtn = document.getElementById('saveNewNetworkBtn');
            const newNetworkNameInput = document.getElementById('newNetworkName');
            const networkSelect = document.getElementById('network');
            const addNetworkModal = document.getElementById('addNetworkModal');

            // Clear network error function
            function clearNetworkError() {
                $('.err_newNetworkName').text('');
                $('#newNetworkName').removeClass('border-danger');
            }

            // Clear error when input field is clicked or typed in
            $('#newNetworkName').on('focus input', function() {
                clearNetworkError();
            });

            // Handle save new network button click
            saveNewNetworkBtn.addEventListener('click', function() {
                const networkName = newNetworkNameInput.value.trim();

                // Clear previous errors
                clearNetworkError();

                if (!networkName) {
                    $('#newNetworkName').addClass('border-danger');
                    $('.err_newNetworkName').text('Network name is required');
                    return;
                }

                // Disable button to prevent double submission
                saveNewNetworkBtn.disabled = true;
                saveNewNetworkBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Adding...';

                // Make AJAX request to save the network
                $.ajax({
                    type: "POST",
                    url: "{{ route('networks.store') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        name: networkName,
                        status: 1 // Active status
                    },
                    dataType: "JSON",
                    success: function(response) {
                        if (response.status === true) {
                            // Add new option to select with the network name as value
                            const newOption = document.createElement('option');
                            newOption.value = networkName;
                            newOption.textContent = networkName;
                            newOption.setAttribute('data-is-new', 'true');

                            // Add before the last option (if there's a "Select Network" option)
                            const selectOption = networkSelect.querySelector(
                                'option[value=""]');
                            if (selectOption) {
                                networkSelect.insertBefore(newOption, selectOption.nextSibling);
                            } else {
                                networkSelect.appendChild(newOption);
                            }

                            // Select the new option
                            newOption.selected = true;

                            // Close modal and clear input
                            const modal = bootstrap.Modal.getInstance(addNetworkModal);
                            modal.hide();
                            newNetworkNameInput.value = '';

                            // Trigger change event to notify other parts of the form
                            networkSelect.dispatchEvent(new Event('change'));

                            // Show success message (optional)
                            console.log('Network added successfully:', networkName);
                        }
                    },
                    error: function(xhr) {
                        // Handle validation errors
                        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                            clearNetworkError();
                            const errors = xhr.responseJSON.errors;
                            if (errors.name) {
                                $('#newNetworkName').addClass('border-danger');
                                $('.err_newNetworkName').text(Array.isArray(errors.name) ?
                                    errors.name[0] : errors.name);
                            }
                        } else {
                            // Show generic error message
                            $('#newNetworkName').addClass('border-danger');
                            $('.err_newNetworkName').text(
                                'Failed to add network. Please try again.');
                        }
                    },
                    complete: function() {
                        // Re-enable button
                        saveNewNetworkBtn.disabled = false;
                        saveNewNetworkBtn.innerHTML = 'Add Network';
                    }
                });
            });

            // Reset form when modal is opened
            if (addNetworkBtn) {
                addNetworkBtn.addEventListener('click', function() {
                    clearNetworkError();
                    newNetworkNameInput.value = '';
                });
            }

            // Reset form when modal is closed
            $('#addNetworkModal').on('hidden.bs.modal', function() {
                clearNetworkError();
                $('#addNetworkForm')[0].reset();
            });

            // Handle Enter key in the input field
            if (newNetworkNameInput) {
                newNetworkNameInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        saveNewNetworkBtn.click();
                    }
                });
            }

            // Power Output addition functionality
            const addPowerOutputBtn = document.getElementById('addPowerOutputBtn');
            const saveNewPowerOutputBtn = document.getElementById('saveNewPowerOutputBtn');
            const newPowerOutputNameInput = document.getElementById('newPowerOutputName');
            const powerOutputSelect = document.getElementById('power_output');
            const addPowerOutputModal = document.getElementById('addPowerOutputModal');

            // Clear power output error function
            function clearPowerOutputError() {
                $('.err_newPowerOutputName').text('');
                $('#newPowerOutputName').removeClass('border-danger');
            }

            // Clear error when input field is clicked or typed in
            $('#newPowerOutputName').on('focus input', function() {
                clearPowerOutputError();
            });

            // Handle save new power output button click
            saveNewPowerOutputBtn.addEventListener('click', function() {
                const powerOutputValue = newPowerOutputNameInput.value.trim();

                // Clear previous errors
                clearPowerOutputError();

                if (!powerOutputValue) {
                    $('#newPowerOutputName').addClass('border-danger');
                    $('.err_newPowerOutputName').text('Power output value is required');
                    return;
                }

                // Add kW suffix
                const powerOutputName = powerOutputValue + 'kW';

                // Validate power output format (should be like "23kW", "150kW", etc.)
                const powerOutputPattern = /^[0-9]+(\.[0-9]+)?(kw)$/i;
                if (!powerOutputPattern.test(powerOutputName)) {
                    $('#newPowerOutputName').addClass('border-danger');
                    $('.err_newPowerOutputName').text(
                        'Power output value must be a number (e.g., 23, 150)');
                    return;
                }

                // Disable button to prevent double submission
                saveNewPowerOutputBtn.disabled = true;
                saveNewPowerOutputBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Adding...';

                // Make AJAX request to save the power output
                $.ajax({
                    type: "POST",
                    url: "{{ route('power-outputs.store') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        name: powerOutputName,
                        status: 1 // Active status
                    },
                    dataType: "JSON",
                    success: function(response) {
                        if (response.status === true) {
                            // Add new option to select with the power output name as value
                            const newOption = document.createElement('option');
                            newOption.value = powerOutputName;
                            newOption.textContent = powerOutputName;
                            newOption.setAttribute('data-is-new', 'true');

                            // Add before the last option (if there's a "Select Power Output" option)
                            const selectOption = powerOutputSelect.querySelector(
                                'option[value=""]');
                            if (selectOption) {
                                powerOutputSelect.insertBefore(newOption, selectOption
                                    .nextSibling);
                            } else {
                                powerOutputSelect.appendChild(newOption);
                            }

                            // Select the new option
                            newOption.selected = true;

                            // Close modal and clear input
                            const modal = bootstrap.Modal.getInstance(addPowerOutputModal);
                            modal.hide();
                            newPowerOutputNameInput.value = '';

                            // Trigger change event to notify other parts of the form
                            powerOutputSelect.dispatchEvent(new Event('change'));

                        }
                    },
                    error: function(xhr) {
                        // Handle validation errors
                        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                            clearPowerOutputError();
                            const errors = xhr.responseJSON.errors;
                            if (errors.name) {
                                $('#newPowerOutputName').addClass('border-danger');
                                $('.err_newPowerOutputName').text(Array.isArray(errors.name) ?
                                    errors.name[0] : errors.name);
                            }
                        } else {
                            // Show generic error message
                            $('#newPowerOutputName').addClass('border-danger');
                            $('.err_newPowerOutputName').text(
                                'Failed to add power output. Please try again.');
                        }
                    },
                    complete: function() {
                        // Re-enable button
                        saveNewPowerOutputBtn.disabled = false;
                        saveNewPowerOutputBtn.innerHTML = 'Add Power Output';
                    }
                });
            });

            // Reset form when modal is opened
            if (addPowerOutputBtn) {
                addPowerOutputBtn.addEventListener('click', function() {
                    clearPowerOutputError();
                    newPowerOutputNameInput.value = '';
                });
            }

            // Reset form when modal is closed
            $('#addPowerOutputModal').on('hidden.bs.modal', function() {
                clearPowerOutputError();
                $('#addPowerOutputForm')[0].reset();
            });

            // Handle Enter key in the input field
            if (newPowerOutputNameInput) {
                newPowerOutputNameInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        saveNewPowerOutputBtn.click();
                    }
                });
            }

            // Operating Hours functionality
            function initializeOperatingHours(loadFromDatabase = true) {
                const hours24_7Radio = document.getElementById('hours_24_7');
                const hoursCustomRadio = document.getElementById('hours_custom');
                const customHoursSection = document.getElementById('customHoursSection');
                const addCustomHoursBtn = document.getElementById('addCustomHoursBtn');
                const saveCustomHoursBtn = document.getElementById('saveCustomHoursBtn');
                const addCustomHoursModal = document.getElementById('addCustomHoursModal');

                // Load existing operating hours only on initial page load
                if (loadFromDatabase) {
                    loadExistingOperatingHours();
                }

                // Handle radio button changes
                function toggleCustomSection() {
                    if (hoursCustomRadio.checked) {
                        customHoursSection.style.display = 'block';
                    } else {
                        customHoursSection.style.display = 'none';
                    }
                }

                hours24_7Radio.addEventListener('change', toggleCustomSection);
                hoursCustomRadio.addEventListener('change', toggleCustomSection);

                // Initial call to set correct state
                toggleCustomSection();

                // Handle add custom hours button
                addCustomHoursBtn.addEventListener('click', function() {
                    resetCustomHoursModal();
                    clearModalErrors();
                    updateDaySelection(); // Disable already selected days
                    const modal = new bootstrap.Modal(addCustomHoursModal);
                    modal.show();
                });

                // Handle save custom hours button
                saveCustomHoursBtn.addEventListener('click', function() {
                    // Clear previous errors
                    clearModalErrors();

                    const selectedDays = Array.from(document.querySelectorAll(
                        '#addCustomHoursModal .day-checkbox:checked')).map(cb => cb.value);
                    const fromTime = document.getElementById('modalOperatingFrom').value;
                    const toTime = document.getElementById('modalOperatingTo').value;

                    let hasErrors = false;

                    // Validate days selection
                    if (selectedDays.length === 0) {
                        const availableDays = Array.from(document.querySelectorAll(
                            '#addCustomHoursModal .day-checkbox:not(:disabled)'));
                        if (availableDays.length === 0) {
                            document.getElementById('modalDaysError').textContent =
                                'All days have already been selected';
                        } else {
                            document.getElementById('modalDaysError').textContent =
                                'Please select at least one day';
                        }
                        hasErrors = true;
                    }

                    // Validate time selection
                    if (!fromTime || !toTime) {
                        document.getElementById('modalTimeError').textContent =
                            'Please select both from and to times';
                        hasErrors = true;
                    }

                    // If there are validation errors, don't proceed
                    if (hasErrors) {
                        return;
                    }

                    // Add custom hours entry
                    addCustomHoursEntry(selectedDays, fromTime, toTime);

                    // Close modal
                    const modal = bootstrap.Modal.getInstance(addCustomHoursModal);
                    modal.hide();

                    // Reset form
                    resetCustomHoursModal();
                });
            }

            // Function to add custom hours entry (one entry per day)
            function addCustomHoursEntry(days, fromTime, toTime) {
                const customHoursList = document.getElementById('customHoursList');

                // Create separate entries for each selected day
                days.forEach(day => {
                    const entryId = 'custom_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                    const timeText = `${fromTime} - ${toTime}`;

                    const entryHtml = `
                <div class="custom-hours-entry mb-3 p-3 border rounded" data-entry-id="${entryId}">
                    <div class="row align-items-center">
                        <div class="col-md-4">
                            <strong>Day:</strong> ${day}
                        </div>
                        <div class="col-md-4">
                            <strong>Time:</strong> ${timeText}
                        </div>
                        <div class="col-md-4 text-end">
                            <button type="button" class="btn btn-danger btn-sm" onclick="removeCustomHoursEntry('${entryId}')">
                                <i class="fas fa-trash"></i> Remove
                            </button>
                        </div>
                    </div>
                    <!-- Hidden inputs for form submission -->
                    <input type="hidden" name="custom_hours[${entryId}][days]" value="${day}">
                    <input type="hidden" name="custom_hours[${entryId}][from]" value="${fromTime}">
                    <input type="hidden" name="custom_hours[${entryId}][to]" value="${toTime}">
                </div>
            `;

                    customHoursList.insertAdjacentHTML('beforeend', entryHtml);
                });
            }

            // Function to remove custom hours entry
            window.removeCustomHoursEntry = function(entryId) {
                const entry = document.querySelector(`[data-entry-id="${entryId}"]`);
                if (entry) {
                    entry.remove();
                    // Re-enable the day in modal if it's open
                    updateDaySelection();
                }
            };

            // Function to clear modal validation errors
            function clearModalErrors() {
                document.getElementById('modalDaysError').textContent = '';
                document.getElementById('modalTimeError').textContent = '';
            }

            // Function to get currently selected days from custom hours list
            function getSelectedDays() {
                const selectedDays = [];
                document.querySelectorAll('.custom-hours-entry').forEach(entry => {
                    const dayText = entry.querySelector('strong').nextSibling.textContent.trim();
                    selectedDays.push(dayText);
                });
                return selectedDays;
            }

            // Function to disable already selected days in modal
            function updateDaySelection() {
                const selectedDays = getSelectedDays();
                const dayCheckboxes = document.querySelectorAll('#addCustomHoursModal .day-checkbox');

                dayCheckboxes.forEach(checkbox => {
                    const dayValue = checkbox.value;
                    const label = checkbox.nextElementSibling;

                    if (selectedDays.includes(dayValue)) {
                        checkbox.disabled = true;
                        checkbox.checked = false;
                        label.style.color = '#6c757d';
                        label.style.textDecoration = 'line-through';
                        label.title = 'This day is already selected';
                    } else {
                        checkbox.disabled = false;
                        label.style.color = '';
                        label.style.textDecoration = '';
                        label.title = '';
                    }
                });
            }

            // Function to reset custom hours modal
            function resetCustomHoursModal() {
                document.querySelectorAll('#addCustomHoursModal .day-checkbox').forEach(cb => {
                    cb.checked = false;
                    // Reset visual styling
                    const label = cb.nextElementSibling;
                    label.style.color = '';
                    label.style.textDecoration = '';
                    label.title = '';
                });
                document.getElementById('modalOperatingFrom').value = '08:00';
                document.getElementById('modalOperatingTo').value = '18:00';
                clearModalErrors();
            }

            // Load existing operating hours from the database
            function loadExistingOperatingHours() {
                @if ($chargingPoint->timeLines && $chargingPoint->timeLines->count() > 0)
                    @php
                        $is24_7 = $chargingPoint->timeLines->where('from', '00:00:00')->where('to', '23:59:00')->count() > 0;
                    @endphp

                    @if ($is24_7)
                        // Set 24/7 as selected
                        document.getElementById('hours_24_7').checked = true;
                    @else
                        // Set custom as selected and load existing custom hours
                        document.getElementById('hours_custom').checked = true;
                        document.getElementById('customHoursSection').style.display = 'block';

                        @foreach ($chargingPoint->timeLines as $timeLine)
                            @if ($timeLine->from !== '00:00:00' || $timeLine->to !== '23:59:00')
                                addCustomHoursEntry(
                                    ['{{ $timeLine->name }}'],
                                    '{{ \Carbon\Carbon::parse($timeLine->from)->format('H:i') }}',
                                    '{{ \Carbon\Carbon::parse($timeLine->to)->format('H:i') }}'
                                );
                            @endif
                        @endforeach
                    @endif
                @else
                    // No existing operating hours, default to custom
                    document.getElementById('hours_custom').checked = true;
                    document.getElementById('customHoursSection').style.display = 'block';
                @endif
            }


            // Function to clear validation errors
            function clearUpdateErrors() {
                $('.err_name').text('');
                $('.err_description').text('');
                $('.err_lattitude').text('');
                $('.err_longitude').text('');
                $('.err_location_image').text('');
                $('.err_additional_images').text('');
                $('.err_network').text('');
                $('.err_power_output').text('');
                $('.err_operating_hours').text('');
                $('.err_operating_hours_type').text('');
                $('.err_free_to_use').text('');
                $('.err_payment_price').text('');
                $('.err_charger_status').text('');
                $('.err_status').text('');
                $('.err_access_instructions').text('');
                $('.err_additional_notes').text('');
                $('.err_plug_types').text('');
                $('.border-danger').removeClass('border-danger');
            }

            // AJAX form submission using jQuery (following amenity pattern)
            $('#chargingPointForm').submit(function(e) {
                e.preventDefault();
                // Get the selected operating hours type
                const hoursType = $('input[name="operating_hours_type"]:checked');

                // Clear any existing operating hours inputs (but not the radio buttons or data field)
                $('input[name^="operating_hours["]').not('#operatingHoursData').remove();

                if (hoursType.val() === '24_7') {
                    // Add 24/7 operating hours
                    $('#chargingPointForm').append(
                        '<input type="hidden" name="operating_hours[0][name]" value="24/7">');
                    $('#chargingPointForm').append(
                        '<input type="hidden" name="operating_hours[0][from]" value="00:00">');
                    $('#chargingPointForm').append(
                        '<input type="hidden" name="operating_hours[0][to]" value="23:59">');

                    // Add all days
                    const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
                        'Sunday'
                    ];
                    days.forEach((day, index) => {
                        $('#chargingPointForm').append(
                            `<input type="hidden" name="operating_hours[0][days][${index}]" value="${day}">`
                        );
                    });

                } else {
                    // Add custom operating hours (each entry is now one day)
                    $('.custom-hours-entry').each(function(index) {
                        const entry = $(this);
                        const daysInput = entry.find('input[name*="[days]"]');
                        const fromInput = entry.find('input[name*="[from]"]');
                        const toInput = entry.find('input[name*="[to]"]');

                        if (daysInput.length && fromInput.length && toInput.length) {
                            const day = daysInput.val().trim();

                            // Add name (single day)
                            $('#chargingPointForm').append(
                                `<input type="hidden" name="operating_hours[${index}][name]" value="${day}">`
                            );

                            // Add from time
                            $('#chargingPointForm').append(
                                `<input type="hidden" name="operating_hours[${index}][from]" value="${fromInput.val()}">`
                            );

                            // Add to time
                            $('#chargingPointForm').append(
                                `<input type="hidden" name="operating_hours[${index}][to]" value="${toInput.val()}">`
                            );

                            // Add single day
                            $('#chargingPointForm').append(
                                `<input type="hidden" name="operating_hours[${index}][days][0]" value="${day}">`
                            );
                        }
                    });
                }

                let formData = new FormData($('#chargingPointForm')[0]);

                // Manually add additional images to FormData
                if (selectedFiles && selectedFiles.length > 0) {
                    // Clear any existing additional_images entries
                    formData.delete('additional_images[]');

                    // Add each selected file
                    selectedFiles.forEach((file, index) => {
                        formData.append('additional_images[]', file);
                    });
                }

                $.ajax({
                    type: "POST",
                    beforeSend: function() {
                        $('#loader').show();
                    },
                    url: "{{ route('charging-points.update', $chargingPoint->ref_no) }}",
                    data: formData,
                    dataType: "JSON",
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(response) {
                        $('#loader').hide();
                        clearUpdateErrors();

                        // Check if response has status and it's true
                        if (response.status === true) {
                            // Show success popup
                            $.confirm({
                                theme: 'modern',
                                columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                                title: 'Success!',
                                content: response.message ||
                                    'Charging point updated successfully!',
                                type: 'green',
                                typeAnimated: true,
                                buttons: {
                                    confirm: {
                                        text: 'OK',
                                        btnClass: 'btn-primary',
                                        action: function() {
                                            // Redirect to index page
                                            window.location.href =
                                                '{{ route('charging-points.index') }}';
                                        }
                                    }
                                }
                            });
                        } else {
                            $.each(response.errors, function(key, item) {
                                if (key) {
                                    $('.err_' + key).text(Array.isArray(item) ? item[
                                        0] : item);
                                    $('#' + key).addClass('border-danger');
                                }
                            });
                            // Re-initialize operating hours functionality without reloading database data
                            initializeOperatingHours(false);
                        }
                    },
                    statusCode: {
                        401: function() {
                            window.location.href = '{{ route('login') }}';
                        },
                        419: function() {
                            window.location.href = '{{ route('login') }}';
                        },
                    },
                    error: function(xhr, status, error) {
                        $('#loader').hide();

                        // Handle validation errors (422)
                        if (xhr.status === 422) {
                            clearUpdateErrors();
                            var response = xhr.responseJSON;
                            if (response && response.errors) {
                                $.each(response.errors, function(key, item) {
                                    if (key) {
                                        $('.err_' + key).text(Array.isArray(item) ?
                                            item[0] : item);
                                        $('#' + key).addClass('border-danger');
                                    }
                                });
                            }
                            // Re-initialize operating hours functionality without reloading database data
                            initializeOperatingHours(false);
                        } else {
                            // Handle other errors
                            var errorMessage = 'Something went wrong!';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }

                            $.confirm({
                                theme: 'modern',
                                columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                                title: 'Error!',
                                content: errorMessage,
                                type: 'red',
                                typeAnimated: true,
                                buttons: {
                                    confirm: {
                                        text: 'OK',
                                        btnClass: 'btn-danger'
                                    }
                                }
                            });
                        }
                    }
                });
            });

            // Test function to debug operating hours
            window.testOperatingHoursCollection = function() {
                const hoursType = document.querySelector('input[name="operating_hours_type"]:checked');
                if (!hoursType) {
                    alert('Please select an operating hours type first');
                    return;
                }

                if (hoursType.value === '24_7') {
                    alert('24/7 operating hours selected - Available all day, every day');
                } else {
                    const customEntries = document.querySelectorAll('.custom-hours-entry');
                    if (customEntries.length === 0) {
                        alert('Custom operating hours selected but no entries added yet');
                    } else {
                        let message = `Custom operating hours (${customEntries.length} entries):\n\n`;
                        customEntries.forEach((entry, index) => {
                            const daysText = entry.querySelector('strong').nextSibling.textContent
                                .trim();
                            const timeText = entry.querySelectorAll('strong')[1].nextSibling.textContent
                                .trim();
                            message += `${index + 1}. ${daysText} - ${timeText}\n`;
                        });
                        alert(message);
                    }
                }
            };


        });
    </script>

@endsection