@extends('layouts.admin')

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

@section('breadcrumb_title', 'Charging Points')
@section('breadcrumb_sub_title', 'Create New')
@section('page_title', 'Create New Charging Point')

@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">New Charging Point Details</h5>
                        <p class="text-sm mb-0">
                            Create a new charging point at location ({{ $latitude }}, {{ $longitude }}). No existing
                            charging points were found within 50 meters of this location.
                        </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') }}"
                                            placeholder="Enter charging point name">
                                        <small class="text-danger font-weight-bold err_name"></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="latitude_display" class="form-label">Latitude <span
                                                class="text-danger">*</span></label>
                                        <input type="number" step="any" class="form-control" id="latitude_display"
                                            value="{{ old('latitude', $latitude) }}" placeholder="e.g., 40.7128" readonly
                                            disabled>
                                        <!-- Hidden field for form submission -->
                                        <input type="hidden" name="latitude" value="{{ old('latitude', $latitude) }}">
                                        <small class="text-danger font-weight-bold err_latitude"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="longitude_display" class="form-label">Longitude <span
                                                class="text-danger">*</span></label>
                                        <input type="number" step="any" class="form-control" id="longitude_display"
                                            value="{{ old('longitude', $longitude) }}" placeholder="e.g., -74.0060" readonly
                                            disabled>
                                        <!-- Hidden field for form submission -->
                                        <input type="hidden" name="longitude" value="{{ old('longitude', $longitude) }}">
                                        <small class="text-danger font-weight-bold err_longitude"></small>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="description" class="form-label">Address <span
                                                class="text-danger">*</span></label>
                                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                                            rows="3" placeholder="Enter description">{{ old('description') }}</textarea>
                                        <small class="text-danger font-weight-bold err_description"></small>
                                    </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-control @error('network') is-invalid @enderror" id="network"
                                            name="network">
                                            <option value="">Select Network</option>
                                            @foreach ($networks as $network)
                                                <option value="{{ $network->name }}"
                                                    {{ old('network') == $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-control @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') == $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', '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') == '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>
                                            </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>
                                    <small class="text-danger font-weight-bold err_operating_hours"></small>
                                </div>
                            </div>

                            <!-- Plug Types -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary mb-3">Plug Types <span class="text-danger">*</span></h6>
                                    <div class="row">
                                        @foreach ($plugTypes as $plugType)
                                            <div class="col-md-3">
                                                <div class="form-group pt-2" style="margin-bottom: 0px;">
                                                    <label for="plug_type_{{ $plugType->id }}"
                                                        class="form-label">{{ $plugType->name }}</label>
                                                    <input type="number" class="form-control"
                                                        id="plug_type_{{ $plugType->id }}"
                                                        name="plug_types[{{ $plugType->id }}]"
                                                        value="{{ old('plug_types.' . $plugType->id) }}" min="0"
                                                        placeholder="0">
                                                </div>
                                                <small
                                                    class="text-danger font-weight-bold err_plug_types_{{ $plugType->id }}"></small>

                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="col-12">
                                        <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', [])) ? '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>

                                    <!-- Upload New Images -->
                                    <div class="mb-3">
                                        <label for="additional_images" class="form-label">Upload 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">Images Preview</label>
                                            <div id="new-images-container" class="row">
                                                <!-- New images will be added here -->
                                            </div>
                                        </div>
                                    </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" selected>Yes</option>
                                            <option value="0">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', '0.00') }}" placeholder="0.00" readonly
                                            style="background-color: #e9ecef; cursor: not-allowed;">
                                        <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', 1) == $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', 1) == $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') }}</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') }}</textarea>
                                        <small class="text-danger font-weight-bold err_additional_notes"></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">Upload Location Image <span
                                                class="text-danger">*</span></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 an image of the charging point location.
                                            Max size: 2MB. Supported formats: JPEG, PNG, JPG, GIF</small>
                                        <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">
                                            <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>
                                            <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>

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

    <!-- INLINE Payment Price Toggle Script - Runs Immediately -->
    <script>
        console.log('=== INLINE SCRIPT LOADING ===');

        // Wait for jQuery to be available
        function initPaymentPriceToggle() {
            if (typeof jQuery === 'undefined') {
                console.log('jQuery not loaded yet, waiting...');
                setTimeout(initPaymentPriceToggle, 100);
                return;
            }

            console.log('jQuery is available, initializing...');

            jQuery(document).ready(function($) {
                console.log('=== INLINE JQUERY READY ===');
                console.log('free_to_use element:', $('#free_to_use').length);
                console.log('payment_price element:', $('#payment_price').length);

                // FORCE default value to "1" (Yes) if no value is set
                if (!$('#free_to_use').val() || $('#free_to_use').val() === '') {
                    console.log('No value set, forcing default to 1 (Yes)');
                    $('#free_to_use').val('1');
                }

                console.log('Initial free_to_use value:', $('#free_to_use').val());

                function updatePaymentPrice() {
                    var isFree = $('#free_to_use').val();
                    console.log('updatePaymentPrice called, isFree:', isFree);

                    if (isFree == '1') {
                        console.log('Making readonly (Yes)');
                        $('#payment_price').prop('readonly', true);
                        $('#payment_price').val('0.00');
                        $('#payment_price').css('background-color', '#e9ecef');
                        $('#payment_price').css('cursor', 'not-allowed');
                    } else {
                        console.log('Making editable (No)');
                        $('#payment_price').prop('readonly', false);
                        $('#payment_price').css('background-color', '#ffffff');
                        $('#payment_price').css('cursor', 'text');
                        if ($('#payment_price').val() == '0.00') {
                            $('#payment_price').val('');
                        }
                    }

                    console.log('Readonly state:', $('#payment_price').prop('readonly'));
                }

                // Run immediately
                updatePaymentPrice();

                // On change
                $('#free_to_use').change(function() {
                    console.log('Dropdown changed to:', $(this).val());
                    updatePaymentPrice();
                });

                console.log('=== INLINE SETUP COMPLETE ===');
            });
        }

        // Start initialization
        initPaymentPriceToggle();
    </script>

    <!-- Add Network Modal -->
    <div class="modal fade" id="addNetworkModal" tabindex="-1" aria-labelledby="addNetworkModalLabel">
        <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">
        <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">
        <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() {
            // Toggle payment price readonly state based on free_to_use selection
            // MUST BE FIRST to ensure it runs before any potential errors
            const freeToUseSelect = document.getElementById('free_to_use');
            const paymentPriceInput = document.getElementById('payment_price');

            console.log('=== PAYMENT PRICE TOGGLE INITIALIZATION ===');
            console.log('Free to Use Select Element:', freeToUseSelect);
            console.log('Payment Price Input Element:', paymentPriceInput);

            if (freeToUseSelect && paymentPriceInput) {
                console.log('Both elements found, initializing togglePaymentPrice');
                console.log('Initial free_to_use value:', freeToUseSelect.value);

                function togglePaymentPrice() {
                    console.log('togglePaymentPrice called, current value:', freeToUseSelect.value);

                    if (freeToUseSelect.value === '1') {
                        // Free to use = Yes -> Make readonly and set to 0.00
                        console.log('Setting payment_price to READONLY (free to use = Yes)');
                        paymentPriceInput.setAttribute('readonly', 'readonly');
                        paymentPriceInput.readOnly = true;
                        paymentPriceInput.value = '0.00';
                        paymentPriceInput.style.backgroundColor = '#e9ecef';
                        paymentPriceInput.style.cursor = 'not-allowed';
                    } else {
                        // Free to use = No -> Make editable
                        console.log('Setting payment_price to EDITABLE (free to use = No)');
                        paymentPriceInput.removeAttribute('readonly');
                        paymentPriceInput.readOnly = false;
                        paymentPriceInput.style.backgroundColor = '#ffffff';
                        paymentPriceInput.style.cursor = 'text';
                        // Clear the value or keep it if user had entered something before
                        if (paymentPriceInput.value === '0.00' || paymentPriceInput.value === '') {
                            paymentPriceInput.value = '';
                        }
                    }

                    console.log('After toggle - readonly:', paymentPriceInput.readOnly, 'value:', paymentPriceInput
                        .value);
                }

                freeToUseSelect.addEventListener('change', function() {
                    console.log('free_to_use changed to:', freeToUseSelect.value);
                    togglePaymentPrice();
                });

                // Initial call to set the default state
                console.log('Calling togglePaymentPrice for initial setup...');
                togglePaymentPrice();
                console.log('=== PAYMENT PRICE TOGGLE COMPLETE ===');
            } else {
                console.error('ERROR: Could not find free_to_use or payment_price elements!');
            }

            // Initialize operating hours functionality
            initializeOperatingHours();

            // Handle location image file selection and preview
            const locationImageInput = document.getElementById('location_image');
            const selectedImageInfo = document.getElementById('selected-image-info');
            const selectedImageName = document.getElementById('selected-image-name');
            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';

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

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

                    // Show no image preview
                    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 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.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';
                }
            };

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

                            // Show success message (optional)
                            console.log('Power output added successfully:', powerOutputName);
                        }
                    },
                    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() {
                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');

                // 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 = bootstrap.Modal.getOrCreateInstance(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)'));
                        const modalDaysError = document.getElementById('modalDaysError');
                        if (modalDaysError) {
                            if (availableDays.length === 0) {
                                modalDaysError.textContent = 'All days have already been selected';
                            } else {
                                modalDaysError.textContent = 'Please select at least one day';
                            }
                        }
                        hasErrors = true;
                    }

                    // Validate time selection
                    if (!fromTime || !toTime) {
                        const modalTimeError = document.getElementById('modalTimeError');
                        if (modalTimeError) {
                            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() {
                const modalDaysError = document.getElementById('modalDaysError');
                const modalTimeError = document.getElementById('modalTimeError');

                if (modalDaysError) {
                    modalDaysError.textContent = '';
                }
                if (modalTimeError) {
                    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();
            }

            // Function to clear validation errors
            function clearCreateErrors() {
                $('.err_name').text('');
                $('.err_description').text('');
                $('.err_latitude').text('');
                $('.err_longitude').text('');
                $('.err_location_image').text('');
                $('.err_additional_images').text('');
                $('.err_network').text('');
                $('.err_power_output').text('');
                $('.err_operating_hours_type').text('');
                $('.err_operating_hours').text('');
                $('.err_plug_types').text('');
                // Clear all plug type specific errors
                $('[class^="err_plug_types_"]').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('');
                $('.border-danger').removeClass('border-danger');
            }

            // AJAX form submission using jQuery (following edit page 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}">`
                        );
                    });

                    console.log('Added 24/7 operating hours');
                } 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}">`
                            );
                        }
                    });

                    console.log('Added', $('.custom-hours-entry').length, 'custom operating hours entries');
                }

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

                    console.log('Added additional images to FormData:', {
                        count: selectedFiles.length,
                        files: selectedFiles.map(f => f.name)
                    });
                }

                // Debug: Log FormData contents
                console.log('FormData contents:');
                for (let pair of formData.entries()) {
                    console.log(pair[0] + ': ' + (pair[1] instanceof File ? pair[1].name : pair[1]));
                }

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

                        // 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 created 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) {
                                    // Convert dot notation to underscore for class names (e.g., plug_types.1 -> plug_types_1)
                                    const errorClass = key.replace(/\./g, '_');
                                    const errorMessage = Array.isArray(item) ? item[0] :
                                        item;

                                    console.log('Error key:', key);
                                    console.log('Error class:', errorClass);
                                    console.log('Error message:', errorMessage);
                                    console.log('Target element:', '.err_' +
                                        errorClass);

                                    $('.err_' + errorClass).text(errorMessage);

                                    // Handle special cases for latitude and longitude
                                    if (key === 'latitude') {
                                        $('#latitude_display').addClass(
                                            'border-danger');
                                    } else if (key === 'longitude') {
                                        $('#longitude_display').addClass(
                                            'border-danger');
                                    } else {
                                        // For array fields, target the input with the field name
                                        const fieldId = key.replace(/\./g, '_');
                                        $('#' + fieldId).addClass('border-danger');
                                        // Also try to target plug_type_X format
                                        if (key.startsWith('plug_types.')) {
                                            const plugTypeId = key.split('.')[1];
                                            $('#plug_type_' + plugTypeId).addClass(
                                                'border-danger');
                                        }
                                    }
                                }
                            });
                            // Re-initialize operating hours to restore radio button states
                            initializeOperatingHours();
                        }
                    },
                    statusCode: {
                        401: function() {
                            window.location.href = '{{ route('login') }}';
                        },
                        419: function() {
                            window.location.href = '{{ route('login') }}';
                        },
                    },
                    error: function(xhr, status, error) {
                        $('#loader').hide();
                        console.log('AJAX Error:', xhr, status, error);
                        console.log('Response:', xhr.responseJSON);

                        // Handle validation errors (422)
                        if (xhr.status === 422) {
                            clearCreateErrors();
                            var response = xhr.responseJSON;
                            if (response && response.errors) {
                                $.each(response.errors, function(key, item) {
                                    if (key) {
                                        // Convert dot notation to underscore for class names (e.g., plug_types.1 -> plug_types_1)
                                        const errorClass = key.replace(/\./g, '_');
                                        const errorMessage = Array.isArray(item) ? item[
                                            0] : item;

                                        console.log('Error key:', key);
                                        console.log('Error class:', errorClass);
                                        console.log('Error message:', errorMessage);
                                        console.log('Target element:', '.err_' +
                                            errorClass);

                                        $('.err_' + errorClass).text(errorMessage);

                                        // Handle special cases for latitude and longitude
                                        if (key === 'latitude') {
                                            $('#latitude_display').addClass(
                                                'border-danger');
                                        } else if (key === 'longitude') {
                                            $('#longitude_display').addClass(
                                                'border-danger');
                                        } else {
                                            // For array fields, target the input with the field name
                                            const fieldId = key.replace(/\./g, '_');
                                            $('#' + fieldId).addClass('border-danger');
                                            // Also try to target plug_type_X format
                                            if (key.startsWith('plug_types.')) {
                                                const plugTypeId = key.split('.')[1];
                                                $('#plug_type_' + plugTypeId).addClass(
                                                    'border-danger');
                                            }
                                        }
                                    }
                                });
                            }
                            // Re-initialize operating hours to restore radio button states
                            initializeOperatingHours();
                        } 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'
                                    }
                                }
                            });
                        }
                    }
                });
            });

        });
    </script>

    <!-- Standalone Payment Price Toggle Script -->
    <script>
        $(document).ready(function() {
            console.log('=== JQUERY PAYMENT PRICE TOGGLE START ===');

            // Toggle payment price based on free_to_use selection
            function togglePaymentPrice() {
                var freeToUseValue = $('#free_to_use').val();
                console.log('togglePaymentPrice - free_to_use value:', freeToUseValue);

                if (freeToUseValue === '1') {
                    // Free to use = Yes -> readonly
                    console.log('Setting to READONLY (Yes)');
                    $('#payment_price')
                        .prop('readonly', true)
                        .val('0.00')
                        .css({
                            'background-color': '#e9ecef',
                            'cursor': 'not-allowed'
                        });
                } else {
                    // Free to use = No -> editable
                    console.log('Setting to EDITABLE (No)');
                    $('#payment_price')
                        .prop('readonly', false)
                        .css({
                            'background-color': '#ffffff',
                            'cursor': 'text'
                        });

                    // Clear value if it's 0.00
                    if ($('#payment_price').val() === '0.00' || $('#payment_price').val() === '') {
                        $('#payment_price').val('');
                    }
                }

                console.log('After toggle - readonly:', $('#payment_price').prop('readonly'), 'value:', $(
                    '#payment_price').val());
            }

            // Initial setup
            console.log('Initial free_to_use value:', $('#free_to_use').val());
            togglePaymentPrice();

            // Listen for changes
            $('#free_to_use').on('change', function() {
                console.log('free_to_use CHANGED to:', $(this).val());
                togglePaymentPrice();
            });

            console.log('=== JQUERY PAYMENT PRICE TOGGLE COMPLETE ===');
        });
    </script>
@endsection