@extends('layouts.admin')

@section('title', 'Bug Report Details - EV Charging Network')

@section('breadcrumb_title', 'Client Requests')
@section('breadcrumb_link', route('status-reports.index'))
@section('breadcrumb_sub_title', 'Details')

@section('page_title', 'Bug Report Details')

@section('content')
    <div class="min-h-screen bg-gray-50">
        <div class="row mt-4">
            <div class="col-12">
                <!-- Success/Error Messages -->
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle me-2"></i>
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h5 class="mb-0">Bug Report Details</h5>
                                <p class="text-sm mb-0">
                                    View detailed information about the client bug report.
                                </p>
                            </div>
                            <div>
                                <a href="{{ route('status-reports.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left me-2"></i>Back
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @if ($statusReport)

                            @if ($statusReport->status == 0)
                                <!-- Client's Message Card -->
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <div class="card border-primary">
                                            <div
                                                class="card-header bg-gradient-primary d-flex justify-content-between align-items-center">
                                                <h6 class="text-white mb-0">
                                                    <i class="fas fa-comment-dots me-2"></i>Client's Bug Report Message
                                                </h6>
                                                <span class="badge badge-lg bg-gradient-secondary text-white px-3 py-2"
                                                    style="font-size: 0.875rem;">
                                                    <i class="fas fa-clock me-1"></i>
                                                    Pending
                                                </span>
                                            </div>
                                            <div class="card-body">
                                                <!-- Client Info Section -->
                                                <div class="d-flex align-items-center mb-4 pb-3 border-bottom">
                                                    <div class="me-3">
                                                        <img src="{{ $statusReport->client && $statusReport->client->avatar ? config('aws_url.url') . $statusReport->client->avatar->image : config('aws_url.url') . 'user/user.png' }}"
                                                            alt="{{ $statusReport->client ? $statusReport->client->full_name : 'Deleted Client' }}"
                                                            class="avatar avatar-lg rounded-circle border border-2 border-primary"
                                                            style="width: 64px; height: 64px; object-fit: cover;">
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="mb-1">
                                                            <strong>Reported by:</strong>
                                                            <span
                                                                class="text-primary">{{ $statusReport->client ? $statusReport->client->full_name : 'Deleted Client' }}</span>
                                                        </h6>
                                                        <p class="text-sm text-muted mb-0">
                                                            <i class="fas fa-calendar me-1"></i>
                                                            <strong>Reported on:</strong>
                                                            {{ $statusReport->created_at->format('M d, Y h:i A') }}
                                                        </p>
                                                    </div>
                                                    <div>
                                                        <span
                                                            class="badge badge-lg bg-gradient-warning text-dark px-3 py-2">
                                                            <i class="fas fa-flag me-1"></i>
                                                            {{ $statusReport->requested_status ?? 'Bug Report' }}
                                                        </span>
                                                    </div>
                                                </div>

                                                <!-- Message Section -->
                                                <div class="message-content">
                                                    <h6 class="text-primary mb-2">
                                                        <i class="fas fa-message me-1"></i>Message
                                                    </h6>
                                                    <div class="p-3 bg-light border-radius-lg">
                                                        <p class="text-sm mb-0">
                                                            {{ $statusReport->description ?? 'No message provided.' }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Charging Point Form -->
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <div class="card border-info">
                                            <div class="card-header bg-gradient-info">
                                                <h6 class="text-white mb-0">
                                                    <i class="fas fa-edit me-2"></i>Update Charging Point Details
                                                </h6>
                                            </div>
                                            <div class="card-body">
                                                <form id="updateChargingPointForm">
                                                    @csrf

                                                    <!-- Address -->
                                                    <div class="row mb-4">
                                                        <div class="col-12">
                                                            <h6 class="text-primary mb-3">Address</h6>
                                                        </div>
                                                        <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" id="description" name="description" rows="3"
                                                                    placeholder="Enter charging point address" required>{{ $statusReport->chargingPoint->description }}</textarea>
                                                                <small
                                                                    class="text-danger font-weight-bold d-block 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-6">
                                                            <div class="form-group">
                                                                <label for="network"
                                                                    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" id="network" name="network">
                                                                    <option value="">Select Network</option>
                                                                    @foreach ($networks as $network)
                                                                        <option value="{{ $network->name }}"
                                                                            {{ $statusReport->chargingPoint->network->name == $network->name ? 'selected' : '' }}>
                                                                            {{ $network->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                                <small
                                                                    class="text-danger font-weight-bold d-block err_network"></small>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="power_output"
                                                                    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" id="power_output"
                                                                    name="power_output">
                                                                    <option value="">Select Power Output</option>
                                                                    @foreach ($powerOutputs as $powerOutput)
                                                                        <option value="{{ $powerOutput->name }}"
                                                                            {{ $statusReport->chargingPoint->powerOutput->name == $powerOutput->name ? 'selected' : '' }}>
                                                                            {{ $powerOutput->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                                <small
                                                                    class="text-danger font-weight-bold d-block 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">
                                                                            @php
                                                                                $is24_7 =
                                                                                    $statusReport->chargingPoint
                                                                                        ->timeLines &&
                                                                                    $statusReport->chargingPoint->timeLines
                                                                                        ->where('from', '00:00:00')
                                                                                        ->where('to', '23:59:00')
                                                                                        ->count() > 0;
                                                                            @endphp
                                                                            <input class="form-check-input" type="radio"
                                                                                name="operating_hours_type"
                                                                                id="hours_24_7" value="24_7"
                                                                                {{ $is24_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"
                                                                                {{ !$is24_7 ? '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>
                                                        @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 = $statusReport->chargingPoint->plugTypes
                                                                            ->where('id', $plugType->id)
                                                                            ->first()
                                                                            ? $statusReport->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="{{ $currentQuantity }}" min="0"
                                                                        placeholder="Quantity">
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                        <div class="col-12">
                                                            <small
                                                                class="text-danger font-weight-bold err_plug_types"></small>
                                                        </div>
                                                    </div>

                                                    <!-- Amenities -->
                                                    <div class="row mb-4">
                                                        <div class="col-12">
                                                            <h6 class="text-primary mb-3">Amenities</h6>
                                                        </div>
                                                        @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, $statusReport->chargingPoint->amenities->pluck('id')->toArray()) ? 'checked' : '' }}>
                                                                    <label class="form-check-label"
                                                                        for="amenity_{{ $amenity->id }}">
                                                                        {{ $amenity->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                        <div class="col-12">
                                                            <small
                                                                class="text-danger font-weight-bold d-block err_amenities"></small>
                                                        </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
                                                                    <span class="text-danger">*</span></label>
                                                                <select class="form-control" id="free_to_use"
                                                                    name="free_to_use">
                                                                    <option value="1"
                                                                        {{ $statusReport->chargingPoint->free_to_use == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $statusReport->chargingPoint->free_to_use == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <small
                                                                    class="text-danger font-weight-bold d-block 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"
                                                                    id="payment_price" name="payment_price"
                                                                    value="{{ $statusReport->chargingPoint->payment_price }}"
                                                                    placeholder="0.00">
                                                                <small
                                                                    class="text-danger font-weight-bold d-block 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 <span class="text-danger">*</span></label>
                                                                <select class="form-control" id="charger_status"
                                                                    name="charger_status">
                                                                    <option value="">Select Status</option>
                                                                    @foreach (\App\Enums\ChargingPointEnum::options() as $value => $label)
                                                                        <option value="{{ $value }}"
                                                                            {{ $statusReport->chargingPoint->charger_status == $value ? 'selected' : '' }}>
                                                                            {{ $label }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                                <small
                                                                    class="text-danger font-weight-bold d-block 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" id="status"
                                                                    name="status">
                                                                    <option value="">Select Status</option>
                                                                    @foreach (\App\Enums\ChargingPointAdminStatusEnum::editOptions() as $value => $label)
                                                                        <option value="{{ $value }}"
                                                                            {{ $statusReport->chargingPoint->status == $value ? 'selected' : '' }}>
                                                                            {{ $label }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                                <small
                                                                    class="text-danger font-weight-bold d-block 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" id="access_instructions" name="access_instructions" rows="3"
                                                                    placeholder="Enter access instructions">{{ $statusReport->chargingPoint->access_instructions }}</textarea>
                                                                <small
                                                                    class="text-danger font-weight-bold d-block 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" id="additional_notes" name="additional_notes" rows="3"
                                                                    placeholder="Enter additional notes">{{ $statusReport->chargingPoint->additional_notes }}</textarea>
                                                                <small
                                                                    class="text-danger font-weight-bold d-block err_additional_notes"></small>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Action Buttons -->
                                                    <div class="row mt-4">
                                                        <div class="col-12">
                                                            <div class="d-flex justify-content-end gap-2">
                                                                <button type="button" class="btn btn-success btn-lg"
                                                                    onclick="updateAndApprove()">
                                                                    <i class="fas fa-check me-2"></i>Update & Approve
                                                                    Report
                                                                </button>
                                                                <button type="button" class="btn btn-danger btn-lg"
                                                                    onclick="rejectReport('{{ $statusReport->ref_no }}')">
                                                                    <i class="fas fa-times me-2"></i>Reject Report
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <!-- Client's Message Card -->
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <div class="card border-primary">
                                                <div
                                                    class="card-header bg-gradient-primary d-flex justify-content-between align-items-center">
                                                    <h6 class="text-white mb-0">
                                                        <i class="fas fa-comment-dots me-2"></i>Client's Bug Report Message
                                                    </h6>
                                                    <span
                                                        class="badge badge-lg bg-gradient-{{ $statusReport->status == 1 ? 'success' : 'danger' }} text-white px-3 py-2"
                                                        style="font-size: 0.875rem;">
                                                        <i
                                                            class="fas fa-{{ $statusReport->status == 1 ? 'check-circle' : 'times-circle' }} me-1"></i>
                                                        {{ $statusReport->status == 1 ? 'Approved' : 'Rejected' }}
                                                    </span>
                                                </div>
                                                <div class="card-body">
                                                    <!-- Client Info Section -->
                                                    <div class="d-flex align-items-center mb-4 pb-3 border-bottom">
                                                        <div class="me-3">
                                                            <img src="{{ $statusReport->client && $statusReport->client->avatar ? config('aws_url.url') . $statusReport->client->avatar->image : config('aws_url.url') . 'user/user.png' }}"
                                                                alt="{{ $statusReport->client ? $statusReport->client->full_name : 'Deleted Client' }}"
                                                                class="avatar avatar-lg rounded-circle border border-2 border-primary"
                                                                style="width: 64px; height: 64px; object-fit: cover;">
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <h6 class="mb-1">
                                                                <strong>Reported by:</strong>
                                                                <span
                                                                    class="text-primary">{{ $statusReport->client ? $statusReport->client->full_name : 'Deleted Client' }}</span>
                                                            </h6>
                                                            <p class="text-sm text-muted mb-0">
                                                                <i class="fas fa-calendar me-1"></i>
                                                                <strong>Reported on:</strong>
                                                                {{ $statusReport->created_at->format('M d, Y h:i A') }}
                                                            </p>
                                                        </div>
                                                        <div>
                                                            <span
                                                                class="badge badge-lg bg-gradient-warning text-dark px-3 py-2">
                                                                <i class="fas fa-flag me-1"></i>
                                                                {{ $statusReport->requested_status ?? 'Bug Report' }}
                                                            </span>
                                                        </div>
                                                    </div>

                                                    <!-- Approval/Rejection Info Section -->
                                                    <div class="d-flex align-items-center mb-4 pb-3 border-bottom">
                                                        <div class="me-3">
                                                            <i
                                                                class="fas fa-{{ $statusReport->status == 1 ? 'check-circle' : 'times-circle' }} fa-3x text-{{ $statusReport->status == 1 ? 'success' : 'danger' }}"></i>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <h6 class="mb-1">
                                                                <strong>{{ $statusReport->status == 1 ? 'Approved' : 'Rejected' }}
                                                                    by:</strong>
                                                                <span
                                                                    class="text-{{ $statusReport->status == 1 ? 'success' : 'danger' }}">{{ $statusReport->approvedBy ? $statusReport->approvedBy->first_name . ' ' . $statusReport->approvedBy->last_name : 'Admin' }}</span>
                                                            </h6>
                                                            <p class="text-sm text-muted mb-0">
                                                                <i class="fas fa-calendar me-1"></i>
                                                                <strong>{{ $statusReport->status == 1 ? 'Approved' : 'Rejected' }}
                                                                    on:</strong>
                                                                {{ $statusReport->approved_at ? $statusReport->approved_at->format('M d, Y h:i A') : 'N/A' }}
                                                            </p>
                                                        </div>
                                                    </div>

                                                    <!-- Message Section -->
                                                    <div class="message-content">
                                                        <h6 class="text-primary mb-2">
                                                            <i class="fas fa-message me-1"></i>Message
                                                        </h6>
                                                        <div class="p-3 bg-light border-radius-lg">
                                                            <p class="text-sm mb-0" style="white-space: pre-wrap;">
                                                                {{ $statusReport->description ?? 'No message provided.' }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Charging Point View -->
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h6 class="mb-0">
                                                        <i class="fas fa-charging-station me-2"></i>Charging Point Details
                                                    </h6>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-xl-5 col-lg-6 text-center">
                                                            @if ($statusReport->chargingPoint->location_image_url)
                                                                <img class="w-100 border-radius-lg shadow-lg mx-auto"
                                                                    src="{{ $statusReport->chargingPoint->location_image_url }}"
                                                                    alt="location_image">
                                                            @else
                                                                <div class="w-100 border-radius-lg shadow-lg mx-auto bg-light d-flex align-items-center justify-content-center"
                                                                    style="height: 300px;">
                                                                    <div class="text-center text-muted">
                                                                        <i class="fas fa-image fa-3x mb-3"></i>
                                                                        <p class="mb-0">No Location Image</p>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                            <div class="my-gallery mt-4 pt-2"
                                                                style="overflow-x: auto; white-space: nowrap; padding-bottom: 10px;">
                                                                <div class="d-flex" style="gap: 8px;">
                                                                    @if ($statusReport->chargingPoint->images && $statusReport->chargingPoint->images->count() > 0)
                                                                        @foreach ($statusReport->chargingPoint->images as $image)
                                                                            <figure class="flex-shrink-0"
                                                                                style="width: 120px; height: 120px;">
                                                                                <img class="w-100 h-100 border-radius-lg shadow"
                                                                                    src="{{ $image->image_url }}"
                                                                                    alt="Image description"
                                                                                    style="object-fit: cover;" />
                                                                            </figure>
                                                                        @endforeach
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-lg-5 mx-auto">
                                                            <h3 class="mt-lg-0 mt-4">
                                                                {{ $statusReport->chargingPoint->name }}</h3>
                                                            <p class="text-sm mb-0">
                                                                {{ $statusReport->chargingPoint->description ?? '' }}</p>
                                                            <br>
                                                            <h6 class="mb-0 mt-3">Specifications</h6>
                                                            <div class="mt-3">
                                                                <div
                                                                    class="d-flex justify-content-between align-items-center mb-3">
                                                                    <h6 class="text-sm font-weight-bold mb-0">Latitude</h6>
                                                                    <span
                                                                        class="text-sm text-muted">{{ $statusReport->chargingPoint->lattitude ?? 'N/A' }}</span>
                                                                </div>
                                                                <div
                                                                    class="d-flex justify-content-between align-items-center mb-3">
                                                                    <h6 class="text-sm font-weight-bold mb-0">Longitude
                                                                    </h6>
                                                                    <span
                                                                        class="text-sm text-muted">{{ $statusReport->chargingPoint->longitude ?? 'N/A' }}</span>
                                                                </div>
                                                                <div
                                                                    class="d-flex justify-content-between align-items-center mb-3">
                                                                    <h6 class="text-sm font-weight-bold mb-0">Connector
                                                                        Types</h6>
                                                                    <span class="text-sm text-muted">
                                                                        @if ($statusReport->chargingPoint->plugTypes && $statusReport->chargingPoint->plugTypes->count() > 0)
                                                                            {{ $statusReport->chargingPoint->plugTypes->map(function ($plugType) {return $plugType->name . ' x ' . $plugType->pivot->quantity;})->join(', ') }}
                                                                        @else
                                                                            N/A
                                                                        @endif
                                                                    </span>
                                                                </div>
                                                                <div
                                                                    class="d-flex justify-content-between align-items-center mb-3">
                                                                    <h6 class="text-sm font-weight-bold mb-0">Network</h6>
                                                                    <span
                                                                        class="text-sm text-muted">{{ $statusReport->chargingPoint->network->name ?? 'N/A' }}</span>
                                                                </div>
                                                                <div
                                                                    class="d-flex justify-content-between align-items-center mb-3">
                                                                    <h6 class="text-sm font-weight-bold mb-0">Max Power
                                                                    </h6>
                                                                    <span
                                                                        class="text-sm text-muted">{{ $statusReport->chargingPoint->powerOutput->name ?? 'N/A' }}</span>
                                                                </div>
                                                                <div
                                                                    class="d-flex justify-content-between align-items-center mb-3">
                                                                    <h6 class="text-sm font-weight-bold mb-0">Charger
                                                                        Status</h6>
                                                                    <span class="text-sm">
                                                                        @php
                                                                            $chargerStatus = \App\Enums\ChargingPointEnum::tryFrom(
                                                                                $statusReport->chargingPoint
                                                                                    ->charger_status,
                                                                            );
                                                                            $chargerStatusClass = [
                                                                                0 => 'badge-danger',
                                                                                1 => 'badge-success',
                                                                                2 => 'badge-warning',
                                                                                4 => 'badge-secondary',
                                                                            ];
                                                                            $badgeClass =
                                                                                $chargerStatusClass[
                                                                                    $statusReport->chargingPoint
                                                                                        ->charger_status
                                                                                ] ?? 'badge-secondary';
                                                                        @endphp
                                                                        <span class="badge {{ $badgeClass }}">
                                                                            {{ $chargerStatus ? $chargerStatus->label() : 'Unknown' }}
                                                                        </span>
                                                                    </span>
                                                                </div>
                                                                <div
                                                                    class="d-flex justify-content-between align-items-center mb-3">
                                                                    <h6 class="text-sm font-weight-bold mb-0">Price</h6>
                                                                    <span class="text-sm text-muted">
                                                                        {{ $statusReport->chargingPoint->free_to_use ? 'Free' : 'LKR ' . $statusReport->chargingPoint->payment_price }}
                                                                    </span>
                                                                </div>

                                                                <div class="mb-3 mt-4">
                                                                    <h6 class="text-sm font-weight-bold mb-3">Amenities
                                                                    </h6>
                                                                    <div class="row">
                                                                        @if ($statusReport->chargingPoint->amenities && $statusReport->chargingPoint->amenities->count() > 0)
                                                                            @foreach ($statusReport->chargingPoint->amenities as $amenity)
                                                                                <div class="col-6 mb-2">
                                                                                    <div
                                                                                        class="btn btn-light border-radius-lg px-3 py-2 text-sm font-weight-bold text-dark w-100 text-start">
                                                                                        {{ $amenity->name }}
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                        @else
                                                                            <div class="col-12">
                                                                                <span class="text-sm text-muted">No
                                                                                    amenities available</span>
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                </div>

                                                                @if ($statusReport->chargingPoint->access_instructions)
                                                                    <div class="mt-4">
                                                                        <h6 class="text-sm font-weight-bold mb-2">Access
                                                                            Instructions</h6>
                                                                        <p class="text-sm text-muted">
                                                                            {{ $statusReport->chargingPoint->access_instructions }}
                                                                        </p>
                                                                    </div>
                                                                @endif

                                                                @if ($statusReport->chargingPoint->additional_notes)
                                                                    <div class="mt-4">
                                                                        <h6 class="text-sm font-weight-bold mb-2">
                                                                            Additional Notes</h6>
                                                                        <p class="text-sm text-muted">
                                                                            {{ $statusReport->chargingPoint->additional_notes }}
                                                                        </p>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            @endif
                        @else
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                Bug reports not found.
                            </div>
                        @endif
                    </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>

@endsection

@section('scripts')
    <script src="{{ asset('ev_style/js/jquery-confirm.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            console.log('Bug report details page loaded');
        });

        // Clear all error messages
        function clearErrors() {
            $('.err_network').text('');
            $('.err_power_output').text('');
            $('.err_charger_status').text('');
            $('.err_status').text('');
            $('.err_free_to_use').text('');
            $('.err_payment_price').text('');
            $('.err_description').text('');
            $('.err_access_instructions').text('');
            $('.err_additional_notes').text('');
            $('.err_plug_types').text('');
            $('.err_amenities').text('');
            $('.err_operating_hours').text('');
        }

        // Scroll to first error
        function scrollToFirstError() {
            const firstError = $('.text-danger.font-weight-bold').filter(function() {
                return $(this).text().trim() !== '';
            }).first();

            if (firstError.length) {
                $('html, body').animate({
                    scrollTop: firstError.offset().top - 100
                }, 500);
            }
        }

        // Update Charging Point and Approve Status Report
        function updateAndApprove() {
            // Clear previous errors
            clearErrors();

            $.confirm({
                theme: 'modern',
                columnClass: 'col-md-6 col-md-offset-4',
                icon: 'fa fa-check-circle text-success',
                title: 'Update & Approve',
                content: 'This will update the charging point details and approve this bug report. Do you want to continue?',
                type: 'green',
                autoClose: 'cancel|10000',
                buttons: {
                    confirm: {
                        text: 'Yes, Update & Approve',
                        btnClass: 'btn-success',
                        action: function() {
                            // Get form data
                            const formData = {
                                _token: '{{ csrf_token() }}',
                                network: $('#network').val(),
                                power_output: $('#power_output').val(),
                                charger_status: $('#charger_status').val(),
                                status: $('#status').val(),
                                free_to_use: $('#free_to_use').val(),
                                payment_price: $('#payment_price').val(),
                                description: $('#description').val(),
                                access_instructions: $('#access_instructions').val(),
                                additional_notes: $('#additional_notes').val(),
                                plug_types: {},
                                amenities: [],
                                operating_hours: []
                            };

                            // Collect operating hours
                            const hoursType = $('input[name="operating_hours_type"]:checked').val();
                            if (hoursType === '24_7') {
                                formData.operating_hours.push({
                                    name: '24/7',
                                    from: '00:00',
                                    to: '23:59'
                                });
                            } else {
                                // Collect custom hours
                                $('input[name^="custom_hours"]').each(function() {
                                    const name = $(this).attr('name');
                                    const match = name.match(/custom_hours\[([^\]]+)\]\[([^\]]+)\]/);
                                    if (match) {
                                        const entryId = match[1];
                                        const field = match[2];
                                        const value = $(this).val();

                                        if (!formData.operating_hours[entryId]) {
                                            formData.operating_hours[entryId] = {};
                                        }
                                        formData.operating_hours[entryId][field] = value;
                                    }
                                });
                                // Convert to array
                                formData.operating_hours = Object.values(formData.operating_hours).map(entry =>
                                    ({
                                        name: entry.days,
                                        from: entry.from,
                                        to: entry.to
                                    }));
                            }

                            // Collect plug types
                            $('input[name^="plug_types"]').each(function() {
                                const name = $(this).attr('name');
                                const match = name.match(/plug_types\[(\d+)\]/);
                                if (match) {
                                    const plugTypeId = match[1];
                                    const quantity = $(this).val();
                                    if (quantity > 0) {
                                        formData.plug_types[plugTypeId] = quantity;
                                    }
                                }
                            });

                            // Collect amenities
                            $('input[name="amenities[]"]:checked').each(function() {
                                formData.amenities.push($(this).val());
                            });

                            // Submit via AJAX
                            $.ajax({
                                url: '{{ route('status-reports.update-and-approve', $statusReport->ref_no) }}',
                                type: 'POST',
                                data: formData,
                                success: function(response) {
                                    if (response.success) {
                                        // Show success confirmation
                                        $.confirm({
                                            theme: 'modern',
                                            columnClass: 'col-md-6 col-md-offset-4',
                                            icon: 'fa fa-check-circle text-success',
                                            title: 'Success!',
                                            content: response.message ||
                                                'Charging point updated and bug report approved successfully!',
                                            type: 'green',
                                            autoClose: 'confirm|3000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Redirect to status reports list
                                                        window.location.href =
                                                            '{{ route('status-reports.index') }}';
                                                    }
                                                }
                                            }
                                        });
                                    } else {
                                        $.confirm({
                                            theme: 'modern',
                                            columnClass: 'col-md-6 col-md-offset-4',
                                            icon: 'fa fa-exclamation-triangle text-danger',
                                            title: 'Error!',
                                            content: response.message ||
                                                'Failed to update charging point. Please try again.',
                                            type: 'red',
                                            autoClose: 'confirm|5000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary'
                                                }
                                            }
                                        });
                                    }
                                },
                                error: function(xhr) {
                                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                                        const errors = xhr.responseJSON.errors;

                                        // Show field-specific errors
                                        $('.err_network').text(errors.network ? errors.network[0] :
                                            '');
                                        $('.err_power_output').text(errors.power_output ? errors
                                            .power_output[0] : '');
                                        $('.err_charger_status').text(errors.charger_status ? errors
                                            .charger_status[0] : '');
                                        $('.err_status').text(errors.status ? errors.status[0] :
                                            '');
                                        $('.err_free_to_use').text(errors.free_to_use ? errors
                                            .free_to_use[0] : '');
                                        $('.err_payment_price').text(errors.payment_price ? errors
                                            .payment_price[0] : '');
                                        $('.err_description').text(errors.description ? errors
                                            .description[0] : '');
                                        $('.err_access_instructions').text(errors
                                            .access_instructions ? errors.access_instructions[
                                                0] : '');
                                        $('.err_additional_notes').text(errors.additional_notes ?
                                            errors.additional_notes[0] : '');
                                        $('.err_plug_types').text(errors.plug_types ? errors
                                            .plug_types[0] : '');
                                        $('.err_amenities').text(errors.amenities ? errors
                                            .amenities[0] : '');
                                        $('.err_operating_hours').text(errors.operating_hours ?
                                            errors.operating_hours[0] : '');

                                        // Scroll to first error
                                        scrollToFirstError();
                                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                                        // For non-validation errors, show a simple alert
                                        $.confirm({
                                            theme: 'modern',
                                            columnClass: 'col-md-6 col-md-offset-4',
                                            icon: 'fa fa-exclamation-triangle text-danger',
                                            title: 'Error!',
                                            content: xhr.responseJSON.message,
                                            type: 'red',
                                            autoClose: 'confirm|5000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary'
                                                }
                                            }
                                        });
                                    }
                                }
                            });
                        }
                    },
                    cancel: {
                        text: 'Cancel',
                        btnClass: 'btn-secondary'
                    }
                }
            });
        }

        // Reject Status Report
        function rejectReport(ref_no) {
            const button = document.querySelector('button[onclick*="rejectReport"]');
            let originalText = '';

            if (button) {
                originalText = button.innerHTML;
            }

            $.confirm({
                theme: 'modern',
                columnClass: 'col-md-6 col-md-offset-4',
                icon: 'fa fa-info-circle text-danger',
                title: 'Are you Sure?',
                content: 'Do you want to reject this bug report? This action can be reviewed later.',
                type: 'red',
                autoClose: 'cancel|10000',
                buttons: {
                    confirm: {
                        text: 'Yes, Reject',
                        btnClass: 'btn-danger',
                        action: function() {
                            // Show loading state
                            if (button) {
                                button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Rejecting...';
                                button.disabled = true;
                            }

                            // Make AJAX request
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });

                            $.ajax({
                                type: "POST",
                                url: '{{ route('status-reports.reject', ':ref_no') }}'.replace(
                                    ':ref_no', ref_no),
                                success: function(response) {
                                    if (response.success) {
                                        // Reset button state
                                        if (button && originalText) {
                                            button.innerHTML = originalText;
                                            button.disabled = false;
                                        }

                                        // Show success confirmation
                                        $.confirm({
                                            theme: 'modern',
                                            columnClass: 'col-md-6 col-md-offset-4',
                                            icon: 'fa fa-check-circle text-success',
                                            title: 'Success!',
                                            content: response.message ||
                                                'Bug report rejected successfully!',
                                            type: 'green',
                                            autoClose: 'confirm|3000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Redirect to status reports list
                                                        window.location.href =
                                                            '{{ route('status-reports.index') }}';
                                                    }
                                                }
                                            }
                                        });
                                    } else {
                                        // Reset button state on failure
                                        if (button && originalText) {
                                            button.innerHTML = originalText;
                                            button.disabled = false;
                                        }

                                        $.confirm({
                                            theme: 'modern',
                                            columnClass: 'col-md-6 col-md-offset-4',
                                            icon: 'fa fa-exclamation-triangle text-danger',
                                            title: 'Error!',
                                            content: response.message ||
                                                'Failed to reject bug report. Please try again.',
                                            type: 'red',
                                            autoClose: 'confirm|5000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary'
                                                }
                                            }
                                        });
                                    }
                                },
                                error: function(xhr, status, error) {
                                    // Reset button state
                                    if (button && originalText) {
                                        button.innerHTML = originalText;
                                        button.disabled = false;
                                    }

                                    let errorMessage =
                                        'Failed to reject bug report. Please try again.';
                                    if (xhr.responseJSON && xhr.responseJSON.message) {
                                        errorMessage = xhr.responseJSON.message;
                                    }

                                    $.confirm({
                                        theme: 'modern',
                                        columnClass: 'col-md-6 col-md-offset-4',
                                        icon: 'fa fa-exclamation-triangle text-danger',
                                        title: 'Error!',
                                        content: errorMessage,
                                        type: 'red',
                                        autoClose: 'confirm|5000',
                                        buttons: {
                                            confirm: {
                                                text: 'OK',
                                                btnClass: 'btn-primary'
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: 'Cancel',
                        btnClass: 'btn-secondary'
                    }
                }
            });
        }

        // Network addition functionality
        $(document).ready(function() {
            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 keyup', function() {
                clearNetworkError();
            });

            if (saveNewNetworkBtn) {
                // 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'));
                            }
                        },
                        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
        $(document).ready(function() {
            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 keyup', function() {
                clearPowerOutputError();
            });

            if (saveNewPowerOutputBtn) {
                // 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();
                        }
                    });
                }
            }
        });

        // Show/hide payment price based on free_to_use selection
        const freeToUseSelect = document.getElementById('free_to_use');
        const paymentPriceInput = document.getElementById('payment_price');

        if (freeToUseSelect && paymentPriceInput) {
            function togglePaymentPrice() {
                if (freeToUseSelect.value === '1') {
                    paymentPriceInput.disabled = true;
                    paymentPriceInput.value = '0.00';
                } else {
                    paymentPriceInput.disabled = false;
                }
            }

            // Initial toggle on page load
            togglePaymentPrice();

            // Add event listener for changes
            freeToUseSelect.addEventListener('change', togglePaymentPrice);
        }

        // Initialize Operating Hours functionality
        initializeOperatingHours();

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

            if (!hours24_7Radio || !hoursCustomRadio) return; // Exit if elements don't exist (on non-pending pages)

            // Load existing operating hours
            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 ($statusReport->chargingPoint->timeLines && $statusReport->chargingPoint->timeLines->count() > 0)
                @php
                    $is24_7 = $statusReport->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 ($statusReport->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
                if (document.getElementById('hours_custom')) {
                    document.getElementById('hours_custom').checked = true;
                    document.getElementById('customHoursSection').style.display = 'block';
                }
            @endif
        }
    </script>
@endsection