@extends('layouts.admin')

@section('title', 'Charging Point View - EV Charging Network')
@section('breadcrumb_title', 'Charging Points')
@section('breadcrumb_sub_title', 'View')
@section('page_title', 'Charging Point View')

@php
    $status = $chargingPoint->status;
@endphp
@if ($status == 0)
    @section('breadcrumb_link', route('charging-points.requests'))
@else
    @section('breadcrumb_link', route('charging-points.index'))
@endif
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <!-- Back Button -->
                    <div class="d-flex justify-content-end align-items-center mb-4">
                        @if ($status == 0)
                            <a href="{{ route('charging-points.requests') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Back
                            </a>
                        @else
                            <a href="{{ route('charging-points.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Back
                            </a>
                        @endif
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h5 class="mb-0">Charging Point Details</h5>
                            <p class="text-sm mb-0">
                                This charging point has been merged into the main charging point below.
                            </p>
                        </div>
                        @if ($status == 2)
                            <span class="badge bg-info text-dark px-3 py-2">
                                <i class="fas fa-link me-1"></i>Merged
                            </span>
                        @elseif($status == 0)
                            <span class="badge bg-warning text-white px-3 py-2">
                                <i class="fas fa-clock me-1"></i>Under Review
                            </span>
                        @elseif($status == 1)
                            <span class="badge bg-success text-white px-3 py-2">
                                <i class="fas fa-check-circle me-1"></i>Verified
                            </span>
                        @elseif($status == 3)
                            <span class="badge bg-danger text-white px-3 py-2">
                                <i class="fas fa-times-circle me-1"></i>Rejected
                            </span>
                        @elseif($status == 4)
                            <span class="badge bg-secondary text-white px-3 py-2">
                                <i class="fas fa-times-circle me-1"></i>Inactive
                            </span>
                        @endif
                    </div>

                    <div class="row">
                        <div class="col-xl-5 col-lg-6 text-center">
                            @if ($chargingPoint->location_image_url)
                                <img class="w-100 border-radius-lg shadow-lg mx-auto"
                                    src="{{ $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" itemscope itemtype="http://schema.org/ImageGallery"
                                style="overflow-x: auto; white-space: nowrap; padding-bottom: 10px;">
                                <div class="d-flex" style="gap: 8px;">
                                    @if ($chargingPoint->images && $chargingPoint->images->count() > 0)
                                        @foreach ($chargingPoint->images as $image)
                                            <figure class="flex-shrink-0" itemprop="associatedMedia" itemscope
                                                itemtype="http://schema.org/ImageObject"
                                                style="width: 120px; height: 120px;">
                                                <a href="{{ $image->image_url }}" itemprop="contentUrl" data-size="500x600">
                                                    <img class="w-100 h-100 border-radius-lg shadow"
                                                        src="{{ $image->image_url }}" alt="Image description"
                                                        style="object-fit: cover;" />
                                                </a>
                                            </figure>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <!-- Root element of PhotoSwipe. Must have class pswp. -->
                            <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="pswp__bg"></div>
                                <!-- Slides wrapper with overflow:hidden. -->
                                <div class="pswp__scroll-wrap">
                                    <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
                                    <!-- don't modify these 3 pswp__item elements, data is added later on. -->
                                    <div class="pswp__container">
                                        <div class="pswp__item"></div>
                                        <div class="pswp__item"></div>
                                        <div class="pswp__item"></div>
                                    </div>
                                    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
                                    <div class="pswp__ui pswp__ui--hidden">
                                        <div class="pswp__top-bar">
                                            <!--  Controls are self-explanatory. Order can be changed. -->
                                            <div class="pswp__counter"></div>
                                            <button class="btn btn-white btn-sm pswp__button pswp__button--close">Close
                                                (Esc)</button>
                                            <button
                                                class="btn btn-white btn-sm pswp__button pswp__button--fs">Fullscreen</button>
                                            <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                                            <!-- element will get class pswp__preloader--active when preloader is running -->
                                            <div class="pswp__preloader">
                                                <div class="pswp__preloader__icn">
                                                    <div class="pswp__preloader__cut">
                                                        <div class="pswp__preloader__donut"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                                            <div class="pswp__share-tooltip"></div>
                                        </div>
                                        <div class="pswp__caption">
                                            <div class="pswp__caption__center"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="col-lg-5 mx-auto">
                            <h3 class="mt-lg-0 mt-4">{{ $chargingPoint->name }}</h3>
                            <p class="text-sm mb-0">{{ $chargingPoint->description ?? '' }}</p>
                            <div class="rating">
                                <i class="fas fa-star" aria-hidden="true"></i>
                                <i class="fas fa-star" aria-hidden="true"></i>
                                <i class="fas fa-star" aria-hidden="true"></i>
                                <i class="fas fa-star" aria-hidden="true"></i>
                                <i class="fas fa-star-half-alt" aria-hidden="true"></i>
                            </div>
                            <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">{{ $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">{{ $chargingPoint->longitude ?? 'N/A' }}</span>
                                </div>
                                <div class="mb-3">
                                    <h6 class="text-sm font-weight-bold mb-2">Plug Types</h6>
                                    @if($chargingPoint->plugTypes && $chargingPoint->plugTypes->count() > 0)
                                        <div class="row">
                                            @foreach($chargingPoint->plugTypes as $index => $plugType)
                                                @if($index % 3 == 0)
                                                    </div><div class="row">
                                                @endif
                                                <div class="col-4 mb-2">
                                                    <small class="font-weight-bold">{{ $plugType->name }} x{{ $plugType->pivot->quantity }}</small>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <span class="text-sm text-muted">N/A</span>
                                    @endif
                                </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">{{ $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">Power Output</h6>
                                    <span class="text-sm text-muted">{{ $chargingPoint->powerOutput->name ?? 'N/A' }}
                                    </span>
                                </div>
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <h6 class="text-sm font-weight-bold mb-0">Operating Hours</h6>
                                    <div class="text-sm text-muted">
                                        @if ($chargingPoint->timeLines && $chargingPoint->timeLines->count() > 0)
                                            @php

                                                $is24_7 =
                                                    $chargingPoint->timeLines->count() === 1 &&
                                                    $chargingPoint->timeLines->first()->name === '24/7' &&
                                                    $chargingPoint->timeLines->first()->from === '00:00:00' &&
                                                    $chargingPoint->timeLines->first()->to === '23:59:00';
                                            @endphp
                                            @if ($is24_7)
                                                <div class="d-flex align-items-center justify-content-end">
                                                    <i class="fas fa-clock text-success me-1"></i>
                                                    <span class="text-success font-weight-bold">Open 24/7</span>
                                                </div>
                                            @else
                                                <div class="table-responsive">
                                                    <table class="table table-sm table-borderless mb-0">
                                                        <tbody>
                                                            @foreach ($chargingPoint->timeLines as $timeLine)
                                                                <tr>
                                                                    <td class="text-xs text-start">{{ $timeLine->name }}
                                                                    </td>
                                                                    <td class="text-xs text-end">
                                                                        @if ($timeLine->from === '00:00:00' && $timeLine->to === '23:59:00')
                                                                            <span class="text-success font-weight-bold">24
                                                                                Hours</span>
                                                                        @elseif($timeLine->from === $timeLine->to)
                                                                            <span class="text-danger">Closed</span>
                                                                        @else
                                                                            {{ date('H:i', strtotime($timeLine->from)) }} -
                                                                            {{ date('H:i', strtotime($timeLine->to)) }}
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @endif
                                        @else
                                            <div class="d-flex align-items-center justify-content-end">
                                                <i class="fas fa-clock text-success me-1"></i>
                                                <span class="text-success font-weight-bold">Open 24/7</span>
                                            </div>
                                        @endif
                                    </div>
                                </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">{{ $chargingPoint->free_to_use ? 'Free' : 'LKR ' . $chargingPoint->payment_price }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="text-sm font-weight-bold mb-0">Access</h6>
                                    <span class="text-sm text-muted">{{ $chargingPoint->access_type ?? 'Public' }}</span>
                                </div>

                                <div class="mb-3">
                                    <h6 class="text-sm font-weight-bold mb-3">Access Instructions</h6>
                                    @if ($chargingPoint->access_instructions)
                                        <div class="row">
                                            <div class="col-12">
                                                <span
                                                    class="text-sm text-muted">{{ $chargingPoint->access_instructions ?? 'N/A' }}</span>
                                            </div>
                                        </div>
                                    @else
                                        <span class="text-sm text-muted">No access instructions available</span>
                                    @endif
                                </div>

                                <div class="mb-3">
                                    <h6 class="text-sm font-weight-bold mb-3">Additional Notes</h6>
                                    @if ($chargingPoint->additional_notes)
                                        <div class="row">
                                            <div class="col-12">
                                                <span
                                                    class="text-sm text-muted">{{ $chargingPoint->additional_notes ?? 'N/A' }}</span>
                                            </div>
                                        </div>
                                    @else
                                        <span class="text-sm text-muted">No additional notes available</span>
                                    @endif
                                </div>

                                <div class="mb-3">
                                    <h6 class="text-sm font-weight-bold mb-3">Amenities</h6>
                                    <div class="row">
                                        @if ($chargingPoint->amenities && $chargingPoint->amenities->count() > 0)
                                            @foreach ($chargingPoint->amenities as $amenity)
                                                <div class="col-6 col-md-4 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>
                            </div>

                        </div>
                    </div>

                    @if ($status == 2)
                        <div class="row mt-5">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h5 class="mb-0">Main Charging Point Details</h5>
                                            </div>
                                            @if ($chargingPoint->mergedTo)
                                                <div class="text-end">
                                                    @if ($chargingPoint->mergedTo->status == 0)
                                                        <span class="badge bg-info text-white px-3 py-2">
                                                            <i class="fas fa-clock me-1"></i>Under Review
                                                        </span>
                                                    @elseif($chargingPoint->mergedTo->status == 1)
                                                        <span class="badge bg-success text-white px-3 py-2">
                                                            <i class="fas fa-check-circle me-1"></i>Verified
                                                        </span>
                                                    @elseif($chargingPoint->mergedTo->status == 2)
                                                        <span class="badge bg-warning text-dark px-3 py-2">
                                                            <i class="fas fa-link me-1"></i>Merged
                                                        </span>
                                                    @elseif($chargingPoint->mergedTo->status == 3)
                                                        <span class="badge bg-danger text-white px-3 py-2">
                                                            <i class="fas fa-times-circle me-1"></i>Rejected
                                                        </span>
                                                    @else
                                                        <span class="badge bg-secondary text-white px-3 py-2">
                                                            <i class="fas fa-question-circle me-1"></i>Unknown
                                                        </span>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        @if ($chargingPoint->mergedTo)
                                            <div class="row">
                                                <div class="col-xl-5 col-lg-6 text-center">
                                                    @if ($chargingPoint->mergedTo->location_image_url)
                                                        <img class="w-100 border-radius-lg shadow-lg mx-auto"
                                                            src="{{ $chargingPoint->mergedTo->location_image_url }}"
                                                            alt="main_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" itemscope
                                                        itemtype="http://schema.org/ImageGallery"
                                                        style="overflow-x: auto; white-space: nowrap; padding-bottom: 10px;">
                                                        <div class="d-flex" style="gap: 8px;">
                                                            @foreach ($chargingPoint->mergedTo->images as $image)
                                                                <figure class="flex-shrink-0" itemprop="associatedMedia"
                                                                    itemscope itemtype="http://schema.org/ImageObject"
                                                                    style="width: 120px; height: 120px;">
                                                                    <a href="{{ $image->image_url }}"
                                                                        itemprop="contentUrl" data-size="500x600">
                                                                        <img class="w-100 h-100 border-radius-lg shadow"
                                                                            src="{{ $image->image_url }}"
                                                                            alt="Image description"
                                                                            style="object-fit: cover;" />
                                                                    </a>
                                                                </figure>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-lg-5 mx-auto">
                                                    <h3 class="mt-lg-0 mt-4">{{ $chargingPoint->mergedTo->name }}</h3>
                                                    <p class="text-sm mb-0">
                                                        {{ $chargingPoint->mergedTo->description ?? '' }}</p>
                                                    <div class="rating">
                                                        <i class="fas fa-star" aria-hidden="true"></i>
                                                        <i class="fas fa-star" aria-hidden="true"></i>
                                                        <i class="fas fa-star" aria-hidden="true"></i>
                                                        <i class="fas fa-star" aria-hidden="true"></i>
                                                        <i class="fas fa-star-half-alt" aria-hidden="true"></i>
                                                    </div>
                                                    <br>
                                                    <h6 class="mb-0 mt-3">Specifications</h6>
                                                    <div class="mt-3">
                                                        <div class="mb-3">
                                                            <h6 class="text-sm font-weight-bold mb-2">Plug Types</h6>
                                                            @if($chargingPoint->mergedTo->plugTypes && $chargingPoint->mergedTo->plugTypes->count() > 0)
                                                                <div class="row">
                                                                    @foreach($chargingPoint->mergedTo->plugTypes as $index => $plugType)
                                                                        @if($index % 3 == 0)
                                                                            </div><div class="row">
                                                                        @endif
                                                                        <div class="col-4 mb-2">
                                                                            <small class="font-weight-bold">{{ $plugType->name }} x{{ $plugType->pivot->quantity }}</small>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            @else
                                                                <span class="text-sm text-muted">N/A</span>
                                                            @endif
                                                        </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">{{ $chargingPoint->mergedTo->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">Power Output</h6>
                                                            <span
                                                                class="text-sm text-muted">{{ $chargingPoint->mergedTo->powerOutput->name ?? 'N/A' }}
                                                            </span>
                                                        </div>

                                                        <div class="d-flex justify-content-between align-items-start mb-3">
                                                            <h6 class="text-sm font-weight-bold mb-0">Operating Hours</h6>
                                                            <div class="text-sm text-muted">
                                                                @if ($chargingPoint->mergedTo->timeLines && $chargingPoint->mergedTo->timeLines->count() > 0)
                                                                    @php
                                                                        $is24_7 =
                                                                            $chargingPoint->mergedTo->timeLines->count() ===
                                                                                1 &&
                                                                            $chargingPoint->mergedTo->timeLines->first()
                                                                                ->name === '24/7' &&
                                                                            $chargingPoint->mergedTo->timeLines->first()
                                                                                ->from === '00:00:00' &&
                                                                            $chargingPoint->mergedTo->timeLines->first()
                                                                                ->to === '23:59:00';
                                                                    @endphp

                                                                    @if ($is24_7)
                                                                        <div
                                                                            class="d-flex align-items-center justify-content-end">
                                                                            <i class="fas fa-clock text-success me-1"></i>
                                                                            <span
                                                                                class="text-success font-weight-bold">Open
                                                                                24/7</span>
                                                                        </div>
                                                                    @else
                                                                        <div class="table-responsive">
                                                                            <table
                                                                                class="table table-sm table-borderless mb-0">
                                                                                <tbody>
                                                                                    @foreach ($chargingPoint->mergedTo->timeLines as $timeLine)
                                                                                        <tr>
                                                                                            <td class="text-xs text-start">
                                                                                                {{ $timeLine->name }}</td>
                                                                                            <td class="text-xs text-end">
                                                                                                @if ($timeLine->from === '00:00:00' && $timeLine->to === '23:59:00')
                                                                                                    <span
                                                                                                        class="text-success font-weight-bold">24
                                                                                                        Hours</span>
                                                                                                @elseif($timeLine->from === $timeLine->to)
                                                                                                    <span
                                                                                                        class="text-danger">Closed</span>
                                                                                                @else
                                                                                                    {{ date('H:i', strtotime($timeLine->from)) }}
                                                                                                    -
                                                                                                    {{ date('H:i', strtotime($timeLine->to)) }}
                                                                                                @endif
                                                                                            </td>
                                                                                        </tr>
                                                                                    @endforeach
                                                                                </tbody>
                                                                            </table>
                                                                        </div>
                                                                    @endif
                                                                @else
                                                                    <div
                                                                        class="d-flex align-items-center justify-content-end">
                                                                        <i class="fas fa-clock text-success me-1"></i>
                                                                        <span class="text-success font-weight-bold">Open
                                                                            24/7</span>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </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">{{ $chargingPoint->mergedTo->free_to_use ? 'Free' : 'LKR ' . $chargingPoint->mergedTo->payment_price }}</span>
                                                        </div>

                                                        <div
                                                            class="d-flex justify-content-between align-items-center mb-3">
                                                            <h6 class="text-sm font-weight-bold mb-0">Access</h6>
                                                            <span
                                                                class="text-sm text-muted">{{ $chargingPoint->mergedTo->access_type ?? 'Public' }}</span>
                                                        </div>

                                                        <div class="mb-3">
                                                            <h6 class="text-sm font-weight-bold mb-3">Amenities</h6>
                                                            <div class="row">
                                                                @if ($chargingPoint->mergedTo->amenities && $chargingPoint->mergedTo->amenities->count() > 0)
                                                                    @foreach ($chargingPoint->mergedTo->amenities as $amenity)
                                                                        <div class="col-6 col-md-4 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>
                                                        <div class="mb-3">
                                                            <h6 class="text-sm font-weight-bold mb-3">Access Instructions</h6>
                                                            @if ($chargingPoint->mergedTo->access_instructions)
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <span
                                                                            class="text-sm text-muted">{{ $chargingPoint->mergedTo->access_instructions ?? 'N/A' }}</span>
                                                                    </div>
                                                                </div>
                                                            @else
                                                                <span class="text-sm text-muted">No access instructions available</span>
                                                            @endif
                                                        </div>

                                                        <div class="mb-3">
                                                            <h6 class="text-sm font-weight-bold mb-3">Additional Notes</h6>
                                                            @if ($chargingPoint->mergedTo->additional_notes)
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <span
                                                                            class="text-sm text-muted">{{ $chargingPoint->mergedTo->additional_notes ?? 'N/A' }}</span>
                                                                    </div>
                                                                </div>
                                                            @else
                                                                <span class="text-sm text-muted">No additional notes available</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="text-center py-4">
                                                <i class="fas fa-exclamation-triangle text-warning fa-3x mb-3"></i>
                                                <h5 class="text-muted">Main charging point not found</h5>
                                                <p class="text-sm text-muted">The main charging point this was merged into
                                                    could not be found.</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($status == 0)
                        <div class="row mt-5" id="approveOrRejectMainChargingPoint">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-3">
                                    <button type="button" class="btn btn-danger" id="rejectBtn"
                                        onclick="rejectChargingPoint()">
                                        <i class="fas fa-times me-2"></i>Reject
                                    </button>
                                    <button type="button" class="btn btn-success" id="approveBtn"
                                        onclick="approveChargingPoint()">
                                        <i class="fas fa-check me-2"></i>Approve
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-5">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="mb-0">Other Charging Points</h5>
                                        <p class="text-sm mb-0">
                                            Manage duplicate charging point requests for review and approval.
                                        </p>
                                    </div>
                                    <div class="card-body">
                                        <!-- Search and Filter Controls -->
                                        <div class="row mb-4">
                                            <div class="col-md-6">
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                                    <input type="text" class="form-control" id="searchDuplicates"
                                                        placeholder="Search duplicate charging points...">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <select class="form-select" id="perPageSelect">
                                                    <option value="5">5 per page</option>
                                                    <option value="10" selected>10 per page</option>
                                                    <option value="15">15 per page</option>
                                                    <option value="20">20 per page</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="text-sm text-muted d-flex align-items-center h-100">
                                                    <span id="resultsInfo">Showing 1 to 10 of
                                                        {{ $chargingPoint->duplicateChargingPoints->count() }}
                                                        results</span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Duplicate Charging Points Cards -->
                                        <div id="duplicatesContainer">
                                            @foreach ($chargingPoint->duplicateChargingPoints as $duplicateChargingPoint)
                                                <div class="duplicate-card mb-4"
                                                    data-searchable="{{ strtolower($duplicateChargingPoint->name . ' ' . ($duplicateChargingPoint->description ?? '') . ' ' . ($duplicateChargingPoint->network->name ?? '')) }}">
                                                    <div class="card shadow-sm">
                                                        <div class="card-body p-4">
                                                            <div class="row">
                                                                <div class="col-md-8">
                                                                    <!-- Header Section -->
                                                                    <h6 class="card-title font-weight-bold text-dark mb-1">
                                                                        {{ $duplicateChargingPoint->name }}</h6>
                                                                    <p class="text-sm text-muted mb-3">
                                                                        {{ $duplicateChargingPoint->description ?? 'Location not specified' }}
                                                                    </p>

                                                                    <!-- Detailed Specifications -->
                                                                    <div class="mb-3">
                                                                        <div class="row">
                                                                            <div class="col-6">
                                                                                <div class="mb-2">
                                                                                    <h6 class="text-xs font-weight-bold mb-1">Plug Types</h6>
                                                                                    @if($duplicateChargingPoint->plugTypes && $duplicateChargingPoint->plugTypes->count() > 0)
                                                                                        <div class="row">
                                                                                            @foreach($duplicateChargingPoint->plugTypes as $index => $plugType)
                                                                                                @if($index % 3 == 0)
                                                                                                    </div><div class="row">
                                                                                                @endif
                                                                                                <div class="col-4 mb-1">
                                                                                                    <small class="text-xs text-muted">{{ $plugType->name }} x{{ $plugType->pivot->quantity }}</small>
                                                                                                </div>
                                                                                            @endforeach
                                                                                        </div>
                                                                                    @else
                                                                                        <span class="text-xs text-muted">N/A</span>
                                                                                    @endif
                                                                                </div>

                                                                                <div
                                                                                    class="d-flex justify-content-between align-items-center mb-2">
                                                                                    <h6
                                                                                        class="text-xs font-weight-bold mb-0">
                                                                                        Network</h6>
                                                                                    <span
                                                                                        class="text-xs text-muted">{{ $duplicateChargingPoint->network->name ?? 'N/A' }}</span>
                                                                                </div>

                                                                                <div
                                                                                    class="d-flex justify-content-between align-items-center mb-2">
                                                                                    <h6
                                                                                        class="text-xs font-weight-bold mb-0">
                                                                                        Power Output</h6>
                                                                                    <span
                                                                                        class="text-xs text-muted">{{ $duplicateChargingPoint->powerOutput->name ?? 'N/A' }}</span>
                                                                                </div>

                                                                                <div
                                                                                    class="d-flex justify-content-between align-items-center mb-2">
                                                                                    <h6
                                                                                        class="text-xs font-weight-bold mb-0">
                                                                                        Access</h6>
                                                                                    <span
                                                                                        class="text-xs text-muted">{{ $duplicateChargingPoint->access_type ?? 'Public' }}</span>
                                                                                </div>

                                                                                <div class="mb-2">
                                                                                    <div class="row">
                                                                                        <div class="col-12">
                                                                                            <h6 class="text-xs font-weight-bold mb-1">Access Instructions</h6>
                                                                                        </div>
                                                                                    </div>
                                                                                    @if ($duplicateChargingPoint->access_instructions)
                                                                                        <div class="row">
                                                                                            <div class="col-12">
                                                                                                <span class="text-xs text-muted">{{ $duplicateChargingPoint->access_instructions ?? 'N/A' }}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    @else
                                                                                        <div class="row">
                                                                                            <div class="col-12">
                                                                                                <span class="text-xs text-muted">No access instructions available</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    @endif
                                                                                </div>

                                                                                <div class="mb-2">
                                                                                    <div class="row">
                                                                                        <div class="col-12">
                                                                                            <h6 class="text-xs font-weight-bold mb-1">Additional Notes</h6>
                                                                                        </div>
                                                                                    </div>
                                                                                    @if ($duplicateChargingPoint->additional_notes)
                                                                                        <div class="row">
                                                                                            <div class="col-12">
                                                                                                <span class="text-xs text-muted">{{ $duplicateChargingPoint->additional_notes ?? 'N/A' }}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    @else
                                                                                        <div class="row">
                                                                                            <div class="col-12">
                                                                                                <span class="text-xs text-muted">No additional notes available</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    @endif
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-6">
                                                                                <div
                                                                                    class="d-flex justify-content-between align-items-start mb-2">
                                                                                    <h6
                                                                                        class="text-xs font-weight-bold mb-0">
                                                                                        Operating Hours</h6>
                                                                                    <div class="text-xs text-muted">
                                                                                        @if ($duplicateChargingPoint->timeLines && $duplicateChargingPoint->timeLines->count() > 0)
                                                                                            @php
                                                                                                $is24_7 =
                                                                                                    $duplicateChargingPoint->timeLines->count() ===
                                                                                                        1 &&
                                                                                                    $duplicateChargingPoint->timeLines->first()
                                                                                                        ->name ===
                                                                                                        '24/7' &&
                                                                                                    $duplicateChargingPoint->timeLines->first()
                                                                                                        ->from ===
                                                                                                        '00:00:00' &&
                                                                                                    $duplicateChargingPoint->timeLines->first()
                                                                                                        ->to ===
                                                                                                        '23:59:00';
                                                                                            @endphp

                                                                                            @if ($is24_7)
                                                                                                <div
                                                                                                    class="d-flex align-items-center justify-content-end">
                                                                                                    <i class="fas fa-clock text-success me-1"
                                                                                                        style="font-size: 0.6rem;"></i>
                                                                                                    <span
                                                                                                        class="text-success font-weight-bold">24/7</span>
                                                                                                </div>
                                                                                            @else
                                                                                                <div
                                                                                                    class="table-responsive">
                                                                                                    <table
                                                                                                        class="table table-sm table-borderless mb-0"
                                                                                                        style="font-size: 0.7rem;">
                                                                                                        <tbody>
                                                                                                            @foreach ($duplicateChargingPoint->timeLines as $timeLine)
                                                                                                                <tr>
                                                                                                                    <td
                                                                                                                        class="text-xs text-start">
                                                                                                                        {{ $timeLine->name }}
                                                                                                                    </td>
                                                                                                                    <td
                                                                                                                        class="text-xs text-end">
                                                                                                                        @if ($timeLine->from === '00:00:00' && $timeLine->to === '23:59:00')
                                                                                                                            <span
                                                                                                                                class="text-success font-weight-bold">24h</span>
                                                                                                                        @elseif($timeLine->from === $timeLine->to)
                                                                                                                            <span
                                                                                                                                class="text-danger">Closed</span>
                                                                                                                        @else
                                                                                                                            {{ date('H:i', strtotime($timeLine->from)) }}-{{ date('H:i', strtotime($timeLine->to)) }}
                                                                                                                        @endif
                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                            @endforeach
                                                                                                        </tbody>
                                                                                                    </table>
                                                                                                </div>
                                                                                            @endif
                                                                                        @else
                                                                                            <div
                                                                                                class="d-flex align-items-center justify-content-end">
                                                                                                <i class="fas fa-clock text-success me-1"
                                                                                                    style="font-size: 0.6rem;"></i>
                                                                                                <span
                                                                                                    class="text-success font-weight-bold">24/7</span>
                                                                                            </div>
                                                                                        @endif
                                                                                    </div>
                                                                                </div>


                                                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                                                    <h6 class="text-xs font-weight-bold mb-0">Price</h6>
                                                                                    <span
                                                                                        class="text-xs text-muted">{{ $duplicateChargingPoint->free_to_use ? 'Free' : 'LKR ' . $duplicateChargingPoint->payment_price }}</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <!-- Amenities -->
                                                                    <div class="mb-3">
                                                                        <h6 class="text-sm font-weight-bold mb-3">Amenities
                                                                        </h6>
                                                                        <div class="row">
                                                                            @if ($duplicateChargingPoint->amenities && $duplicateChargingPoint->amenities->count() > 0)
                                                                                @foreach ($duplicateChargingPoint->amenities as $amenity)
                                                                                    <div class="col-6 col-md-4 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>

                                                                    <!-- Verification Status -->
                                                                    <div class="mb-3">
                                                                        <div class="d-flex align-items-center mb-1">
                                                                            <i
                                                                                class="fas fa-check-circle text-success me-2"></i>
                                                                            <span class="text-sm">EXIF Valid</span>
                                                                        </div>
                                                                        <div class="d-flex align-items-center">
                                                                            <i
                                                                                class="fas fa-check-circle text-success me-2"></i>
                                                                            <span class="text-sm">GPS Match</span>
                                                                        </div>
                                                                    </div>

                                                                    <!-- Action Buttons -->
                                                                    <div class="d-flex gap-2">
                                                                        <button
                                                                            class="btn btn-danger btn-sm border-radius-lg px-4 remove-duplicate-btn"
                                                                            data-main-id="{{ $chargingPoint->id }}"
                                                                            data-duplicate-id="{{ $duplicateChargingPoint->id }}"
                                                                            data-duplicate-name="{{ $duplicateChargingPoint->name }}">
                                                                            <i class="fas fa-times me-1"></i>
                                                                            Remove
                                                                        </button>
                                                                        <button
                                                                            class="btn btn-success btn-sm border-radius-lg px-4 merge-charging-point-btn"
                                                                            data-main-id="{{ $chargingPoint->id }}"
                                                                            data-duplicate-id="{{ $duplicateChargingPoint->id }}"
                                                                            data-duplicate-name="{{ $duplicateChargingPoint->name }}">
                                                                            <i class="fas fa-check me-1"></i>
                                                                            Merge
                                                                        </button>
                                                                    </div>
                                                                </div>

                                                                <!-- Right Column - Images -->
                                                                <div class="col-md-4">
                                                                    <div class="row">
                                                                        <!-- Location Image -->
                                                                        @if ($duplicateChargingPoint->location_image_url)
                                                                            <div class="col-4 mb-2">
                                                                                <img src="{{ $duplicateChargingPoint->location_image_url }}"
                                                                                    alt="Location image"
                                                                                    class="img-fluid border-radius-lg"
                                                                                    style="height: 80px; object-fit: cover; width: 100%;">
                                                                            </div>
                                                                        @endif

                                                                        <!-- Additional Images -->
                                                                        @if ($duplicateChargingPoint->images && $duplicateChargingPoint->images->count() > 0)
                                                                            @foreach ($duplicateChargingPoint->images->take(2) as $image)
                                                                                <div class="col-4 mb-2">
                                                                                    <img src="{{ $image->image_url }}"
                                                                                        alt="Charging point image"
                                                                                        class="img-fluid border-radius-lg"
                                                                                        style="height: 80px; object-fit: cover; width: 100%;">
                                                                                </div>
                                                                            @endforeach
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                        <!-- Pagination -->
                                        <nav aria-label="Duplicate charging points pagination" class="mt-4">
                                            <ul class="pagination justify-content-center" id="duplicatesPagination">
                                                <!-- Pagination will be generated by JavaScript -->
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        if (document.getElementById('choices-quantity')) {
            var element = document.getElementById('choices-quantity');
            const example = new Choices(element, {
                searchEnabled: false,
                itemSelectText: ''
            });
        };

        if (document.getElementById('choices-material')) {
            var element = document.getElementById('choices-material');
            const example = new Choices(element, {
                searchEnabled: false,
                itemSelectText: ''
            });
        };

        if (document.getElementById('choices-colors')) {
            var element = document.getElementById('choices-colors');
            const example = new Choices(element, {
                searchEnabled: false,
                itemSelectText: ''
            });
        };

        // Gallery Carousel
        if (document.getElementById('products-carousel')) {
            var myCarousel = document.querySelector('#products-carousel')
            var carousel = new bootstrap.Carousel(myCarousel)
        }


        // Products gallery

        var initPhotoSwipeFromDOM = function(gallerySelector) {

            // parse slide data (url, title, size ...) from DOM elements
            // (children of gallerySelector)
            var parseThumbnailElements = function(el) {
                var thumbElements = el.childNodes,
                    numNodes = thumbElements.length,
                    items = [],
                    figureEl,
                    linkEl,
                    size,
                    item;

                for (var i = 0; i < numNodes; i++) {

                    figureEl = thumbElements[i]; // <figure> element
                    // include only element nodes
                    if (figureEl.nodeType !== 1) {
                        continue;
                    }

                    linkEl = figureEl.children[0]; // <a> element

                    size = linkEl.getAttribute('data-size').split('x');

                    // create slide object
                    item = {
                        src: linkEl.getAttribute('href'),
                        w: parseInt(size[0], 10),
                        h: parseInt(size[1], 10)
                    };

                    if (figureEl.children.length > 1) {
                        // <figcaption> content
                        item.title = figureEl.children[1].innerHTML;
                    }

                    if (linkEl.children.length > 0) {
                        // <img> thumbnail element, retrieving thumbnail url
                        item.msrc = linkEl.children[0].getAttribute('src');
                    }

                    item.el = figureEl; // save link to element for getThumbBoundsFn
                    items.push(item);
                }

                return items;
            };

            // find nearest parent element
            var closest = function closest(el, fn) {
                return el && (fn(el) ? el : closest(el.parentNode, fn));
            };

            // triggers when user clicks on thumbnail
            var onThumbnailsClick = function(e) {
                e = e || window.event;
                e.preventDefault ? e.preventDefault() : e.returnValue = false;

                var eTarget = e.target || e.srcElement;

                // find root element of slide
                var clickedListItem = closest(eTarget, function(el) {
                    return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
                });

                if (!clickedListItem) {
                    return;
                }

                // find index of clicked item by looping through all child nodes
                // alternatively, you may define index via data- attribute
                var clickedGallery = clickedListItem.parentNode,
                    childNodes = clickedListItem.parentNode.childNodes,
                    numChildNodes = childNodes.length,
                    nodeIndex = 0,
                    index;

                for (var i = 0; i < numChildNodes; i++) {
                    if (childNodes[i].nodeType !== 1) {
                        continue;
                    }

                    if (childNodes[i] === clickedListItem) {
                        index = nodeIndex;
                        break;
                    }
                    nodeIndex++;
                }



                if (index >= 0) {
                    // open PhotoSwipe if valid index found
                    openPhotoSwipe(index, clickedGallery);
                }
                return false;
            };

            // parse picture index and gallery index from URL (#&pid=1&gid=2)
            var photoswipeParseHash = function() {
                var hash = window.location.hash.substring(1),
                    params = {};

                if (hash.length < 5) {
                    return params;
                }

                var vars = hash.split('&');
                for (var i = 0; i < vars.length; i++) {
                    if (!vars[i]) {
                        continue;
                    }
                    var pair = vars[i].split('=');
                    if (pair.length < 2) {
                        continue;
                    }
                    params[pair[0]] = pair[1];
                }

                if (params.gid) {
                    params.gid = parseInt(params.gid, 10);
                }

                return params;
            };

            var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
                var pswpElement = document.querySelectorAll('.pswp')[0],
                    gallery,
                    options,
                    items;

                items = parseThumbnailElements(galleryElement);

                // define options (if needed)
                options = {

                    // define gallery index (for URL)
                    galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                    getThumbBoundsFn: function(index) {
                        // See Options -> getThumbBoundsFn section of documentation for more info
                        var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                            pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                            rect = thumbnail.getBoundingClientRect();

                        return {
                            x: rect.left,
                            y: rect.top + pageYScroll,
                            w: rect.width
                        };
                    }

                };

                // PhotoSwipe opened from URL
                if (fromURL) {
                    if (options.galleryPIDs) {
                        // parse real index when custom PIDs are used
                        // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
                        for (var j = 0; j < items.length; j++) {
                            if (items[j].pid == index) {
                                options.index = j;
                                break;
                            }
                        }
                    } else {
                        // in URL indexes start from 1
                        options.index = parseInt(index, 10) - 1;
                    }
                } else {
                    options.index = parseInt(index, 10);
                }

                // exit if index not found
                if (isNaN(options.index)) {
                    return;
                }

                if (disableAnimation) {
                    options.showAnimationDuration = 0;
                }

                // Pass data to PhotoSwipe and initialize it
                gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                gallery.init();
            };

            // loop through all gallery elements and bind events
            var galleryElements = document.querySelectorAll(gallerySelector);

            for (var i = 0, l = galleryElements.length; i < l; i++) {
                galleryElements[i].setAttribute('data-pswp-uid', i + 1);
                galleryElements[i].onclick = onThumbnailsClick;
            }

            // Parse URL and open gallery if it contains #&pid=3&gid=1
            var hashData = photoswipeParseHash();
            if (hashData.pid && hashData.gid) {
                openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
            }
        };

        // execute above function
        initPhotoSwipeFromDOM('.my-gallery');

        // Duplicate charging points search and pagination
        let currentPage = 1;
        let perPage = 10;
        let allCards = document.querySelectorAll('.duplicate-card');
        let filteredCards = Array.from(allCards);

        function filterAndPaginate() {
            const searchTerm = document.getElementById('searchDuplicates').value.toLowerCase();
            const perPageValue = parseInt(document.getElementById('perPageSelect').value);
            perPage = perPageValue;

            // Filter cards based on search term
            filteredCards = Array.from(allCards).filter(card => {
                const searchableText = card.getAttribute('data-searchable');
                return searchableText.includes(searchTerm);
            });

            // Hide all cards first
            allCards.forEach(card => {
                card.style.display = 'none';
            });

            // Show filtered cards for current page
            const startIndex = (currentPage - 1) * perPage;
            const endIndex = startIndex + perPage;
            const pageCards = filteredCards.slice(startIndex, endIndex);

            pageCards.forEach(card => {
                card.style.display = 'block';
            });

            // Update pagination
            renderPagination();

            // Update results info
            updateResultsInfo();
        }

        function renderPagination() {
            const totalPages = Math.ceil(filteredCards.length / perPage);
            const pagination = document.getElementById('duplicatesPagination');

            if (totalPages <= 1) {
                pagination.innerHTML = '';
                return;
            }

            let paginationHTML = '';

            // Previous button
            paginationHTML += `
            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${currentPage - 1})">{{ '<' }}</a>
            </li>
        `;

            // Page numbers
            for (let i = 1; i <= totalPages; i++) {
                if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
                    paginationHTML += `
                    <li class="page-item ${i === currentPage ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
                    </li>
                `;
                } else if (i === currentPage - 2 || i === currentPage + 2) {
                    paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                }
            }

            // Next button
            paginationHTML += `
            <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${currentPage + 1})">{{ '>' }}</a>
            </li>
        `;

            pagination.innerHTML = paginationHTML;
        }

        function changePage(page) {
            const totalPages = Math.ceil(filteredCards.length / perPage);
            if (page >= 1 && page <= totalPages) {
                currentPage = page;
                filterAndPaginate();
            }
        }

        function updateResultsInfo() {
            const startIndex = (currentPage - 1) * perPage + 1;
            const endIndex = Math.min(currentPage * perPage, filteredCards.length);
            const total = filteredCards.length;

            document.getElementById('resultsInfo').textContent =
                `Showing ${startIndex} to ${endIndex} of ${total} results`;
        }

        // Event listeners
        document.getElementById('searchDuplicates').addEventListener('input', function() {
            currentPage = 1;
            filterAndPaginate();
        });

        document.getElementById('perPageSelect').addEventListener('change', function() {
            currentPage = 1;
            filterAndPaginate();
        });

        // Initialize
        filterAndPaginate();

        // Remove Duplicate Charging Point Functionality
        function removeDuplicateChargingPoint(mainId, duplicateId, duplicateName, button) {
            console.log('removeDuplicateChargingPoint called with:', {
                mainId,
                duplicateId,
                duplicateName
            });
            $.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 remove "${duplicateName}" as a duplicate charging point?`,
                type: 'red',
                autoClose: 'cancel|10000',
                buttons: {
                    confirm: {
                        text: 'Yes, Remove',
                        btnClass: 'btn-danger',
                        action: function() {
                            // Show loading state
                            const originalText = button.innerHTML;
                            button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Removing...';
                            button.disabled = true;

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

                            $.ajax({
                                type: "POST",
                                url: '{{ route('charging-points.removeDuplication') }}',
                                data: {
                                    main_charging_point_id: mainId,
                                    duplicate_charging_point_id: duplicateId
                                },
                                success: function(response) {
                                    if (response.success) {
                                        // Reset button state immediately
                                        button.innerHTML = originalText;
                                        button.disabled = false;

                                        // Success - remove the card from DOM
                                        const card = button.closest('.duplicate-card');
                                        card.style.transition = 'opacity 0.3s ease';
                                        card.style.opacity = '0';

                                        setTimeout(() => {
                                            card.remove();
                                            // Update pagination and results info
                                            allCards = document.querySelectorAll(
                                                '.duplicate-card');
                                            filteredCards = Array.from(allCards);
                                            filterAndPaginate();

                                            // 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 ||
                                                    'Duplicate charging point removed successfully!',
                                                type: 'green',
                                                autoClose: 'confirm|3000',
                                                buttons: {
                                                    confirm: {
                                                        text: 'OK',
                                                        btnClass: 'btn-primary',
                                                        action: function() {
                                                            // Do nothing, just close
                                                        }
                                                    }
                                                }
                                            });
                                        }, 300);
                                    } else {
                                        // Reset button state on failure
                                        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: 'Failed to remove duplicate charging point. Please try again.',
                                            type: 'red',
                                            autoClose: 'confirm|5000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Do nothing, just close
                                                    }
                                                }
                                            }
                                        });
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error:', error);

                                    // Reset button state
                                    button.innerHTML = originalText;
                                    button.disabled = false;

                                    // Show error confirmation
                                    $.confirm({
                                        theme: 'modern',
                                        columnClass: 'col-md-6 col-md-offset-4',
                                        icon: 'fa fa-exclamation-triangle text-danger',
                                        title: 'Error!',
                                        content: 'Failed to remove duplicate charging point. Please try again.',
                                        type: 'red',
                                        autoClose: 'confirm|5000',
                                        buttons: {
                                            confirm: {
                                                text: 'OK',
                                                btnClass: 'btn-primary',
                                                action: function() {
                                                    // Do nothing, just close
                                                }
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: 'Cancel',
                        btnClass: 'btn-primary',
                        action: function() {
                            // Do nothing, just close
                        }
                    }
                }
            });
        }

        // Merge Charging Point Functionality
        function mergeChargingPoint(mainId, duplicateId, duplicateName, button) {
            console.log('mergeChargingPoint called with:', {
                mainId,
                duplicateId,
                duplicateName
            });
            $.confirm({
                theme: 'modern',
                columnClass: 'col-md-6 col-md-offset-4',
                icon: 'fa fa-info-circle text-success',
                title: 'Are you Sure?',
                content: `Do you want to merge "${duplicateName}" with the main charging point?`,
                type: 'green',
                autoClose: 'cancel|10000',
                buttons: {
                    confirm: {
                        text: 'Yes, Merge',
                        btnClass: 'btn-success',
                        action: function() {
                            // Show loading state
                            const originalText = button.innerHTML;
                            button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Merging...';
                            button.disabled = true;

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

                            $.ajax({
                                type: "POST",
                                url: '{{ route('charging-points.mergeChargingPoint') }}',
                                data: {
                                    main_charging_point_id: mainId,
                                    duplicate_charging_point_id: duplicateId
                                },
                                success: function(response) {
                                    if (response.success) {
                                        // Reset button state immediately
                                        button.innerHTML = originalText;
                                        button.disabled = false;

                                        // Success - remove the card from DOM
                                        const card = button.closest('.duplicate-card');
                                        card.style.transition = 'opacity 0.3s ease';
                                        card.style.opacity = '0';

                                        setTimeout(() => {
                                            card.remove();
                                            // Update pagination and results info
                                            allCards = document.querySelectorAll(
                                                '.duplicate-card');
                                            filteredCards = Array.from(allCards);
                                            filterAndPaginate();

                                            // 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 points merged successfully!',
                                                type: 'green',
                                                autoClose: 'confirm|3000',
                                                buttons: {
                                                    confirm: {
                                                        text: 'OK',
                                                        btnClass: 'btn-primary',
                                                        action: function() {
                                                            // Refresh the page
                                                            window.location
                                                                .reload();
                                                        }
                                                    }
                                                }
                                            });
                                        }, 300);
                                    } else {
                                        // Reset button state on failure
                                        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: 'Failed to merge charging points. Please try again.',
                                            type: 'red',
                                            autoClose: 'confirm|5000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Do nothing, just close
                                                    }
                                                }
                                            }
                                        });
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error:', error);

                                    // Reset button state
                                    button.innerHTML = originalText;
                                    button.disabled = false;

                                    // Show error confirmation
                                    $.confirm({
                                        theme: 'modern',
                                        columnClass: 'col-md-6 col-md-offset-4',
                                        icon: 'fa fa-exclamation-triangle text-danger',
                                        title: 'Error!',
                                        content: 'Failed to merge charging points. Please try again.',
                                        type: 'red',
                                        autoClose: 'confirm|5000',
                                        buttons: {
                                            confirm: {
                                                text: 'OK',
                                                btnClass: 'btn-primary',
                                                action: function() {
                                                    // Do nothing, just close
                                                }
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: 'Cancel',
                        btnClass: 'btn-primary',
                        action: function() {
                            // Do nothing, just close
                        }
                    }
                }
            });
        }

        // Approve Charging Point Functionality
        function approveChargingPoint() {
            console.log('approveChargingPoint called');
            const chargingPointName = '{{ $chargingPoint->name }}';
            const refNo = '{{ $chargingPoint->ref_no }}';
            const button = document.getElementById('approveBtn');

            $.confirm({
                theme: 'modern',
                columnClass: 'col-md-6 col-md-offset-4',
                icon: 'fa fa-info-circle text-success',
                title: 'Are you Sure?',
                content: `Do you want to approve "${chargingPointName}" charging point?`,
                type: 'green',
                autoClose: 'cancel|10000',
                buttons: {
                    confirm: {
                        text: 'Yes, Approve',
                        btnClass: 'btn-success',
                        action: function() {
                            // Show loading state
                            const originalText = button.innerHTML;
                            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Approving...';
                            button.disabled = true;

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

                            $.ajax({
                                type: "POST",
                                url: '{{ route('charging-points.approveChargingPoint', ':refNo') }}'
                                    .replace(':refNo', refNo),
                                success: function(response) {
                                    if (response.success) {
                                        // Reset button state immediately
                                        button.innerHTML = originalText;
                                        button.disabled = false;

                                        // Success - hide the approve/reject section
                                        const approveRejectSection = document.getElementById(
                                            'approveOrRejectMainChargingPoint');
                                        approveRejectSection.style.transition = 'opacity 0.3s ease';
                                        approveRejectSection.style.opacity = '0';

                                        setTimeout(() => {
                                            approveRejectSection.style.display = 'none';

                                            // 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 approved successfully!',
                                                type: 'green',
                                                autoClose: 'confirm|3000',
                                                buttons: {
                                                    confirm: {
                                                        text: 'OK',
                                                        btnClass: 'btn-primary',
                                                        action: function() {
                                                            // Redirect to charging points requests
                                                            window.location
                                                                .href =
                                                                '{{ route('charging-points.requests') }}';
                                                        }
                                                    }
                                                }
                                            });
                                        }, 300);
                                    } else {
                                        // Reset button state on failure
                                        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: 'Failed to approve charging point. Please try again.',
                                            type: 'red',
                                            autoClose: 'confirm|5000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Do nothing, just close
                                                    }
                                                }
                                            }
                                        });
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error:', error);

                                    // Reset button state
                                    button.innerHTML = originalText;
                                    button.disabled = false;

                                    // Show error confirmation
                                    $.confirm({
                                        theme: 'modern',
                                        columnClass: 'col-md-6 col-md-offset-4',
                                        icon: 'fa fa-exclamation-triangle text-danger',
                                        title: 'Error!',
                                        content: 'Failed to approve charging point. Please try again.',
                                        type: 'red',
                                        autoClose: 'confirm|5000',
                                        buttons: {
                                            confirm: {
                                                text: 'OK',
                                                btnClass: 'btn-primary',
                                                action: function() {
                                                    // Do nothing, just close
                                                }
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: 'Cancel',
                        btnClass: 'btn-primary',
                        action: function() {
                            // Do nothing, just close
                        }
                    }
                }
            });
        }

        // Reject Charging Point Functionality
        function rejectChargingPoint() {
            console.log('rejectChargingPoint called');
            const chargingPointName = '{{ $chargingPoint->name }}';
            const refNo = '{{ $chargingPoint->ref_no }}';
            const button = document.getElementById('rejectBtn');

            $.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 "${chargingPointName}" charging point?`,
                type: 'red',
                autoClose: 'cancel|10000',
                buttons: {
                    confirm: {
                        text: 'Yes, Reject',
                        btnClass: 'btn-danger',
                        action: function() {
                            // Show loading state
                            const originalText = button.innerHTML;
                            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('charging-points.rejectChargingPoint', ':refNo') }}'
                                    .replace(':refNo', refNo),
                                success: function(response) {
                                    if (response.success) {
                                        // Reset button state immediately
                                        button.innerHTML = originalText;
                                        button.disabled = false;

                                        // Success - hide the approve/reject section
                                        const approveRejectSection = document.getElementById(
                                            'approveOrRejectMainChargingPoint');
                                        approveRejectSection.style.transition = 'opacity 0.3s ease';
                                        approveRejectSection.style.opacity = '0';

                                        setTimeout(() => {
                                            approveRejectSection.style.display = 'none';

                                            // 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 rejected successfully!',
                                                type: 'green',
                                                autoClose: 'confirm|3000',
                                                buttons: {
                                                    confirm: {
                                                        text: 'OK',
                                                        btnClass: 'btn-primary',
                                                        action: function() {
                                                            // Redirect to charging points requests
                                                            window.location
                                                                .href =
                                                                '{{ route('charging-points.requests') }}';
                                                        }
                                                    }
                                                }
                                            });
                                        }, 300);
                                    } else {
                                        // Reset button state on failure
                                        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: 'Failed to reject charging point. Please try again.',
                                            type: 'red',
                                            autoClose: 'confirm|5000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Do nothing, just close
                                                    }
                                                }
                                            }
                                        });
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error:', error);

                                    // Reset button state
                                    button.innerHTML = originalText;
                                    button.disabled = false;

                                    // Show error confirmation
                                    $.confirm({
                                        theme: 'modern',
                                        columnClass: 'col-md-6 col-md-offset-4',
                                        icon: 'fa fa-exclamation-triangle text-danger',
                                        title: 'Error!',
                                        content: 'Failed to reject charging point. Please try again.',
                                        type: 'red',
                                        autoClose: 'confirm|5000',
                                        buttons: {
                                            confirm: {
                                                text: 'OK',
                                                btnClass: 'btn-primary',
                                                action: function() {
                                                    // Do nothing, just close
                                                }
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: 'Cancel',
                        btnClass: 'btn-primary',
                        action: function() {
                            // Do nothing, just close
                        }
                    }
                }
            });
        }

        // Add event listeners to all remove buttons
        document.addEventListener('click', function(e) {
            console.log('Click detected on:', e.target);
            if (e.target.closest('.remove-duplicate-btn')) {
                console.log('Remove button clicked');
                e.preventDefault();
                const button = e.target.closest('.remove-duplicate-btn');
                const mainId = button.getAttribute('data-main-id');
                const duplicateId = button.getAttribute('data-duplicate-id');
                const duplicateName = button.getAttribute('data-duplicate-name');

                console.log('Button data:', {
                    mainId,
                    duplicateId,
                    duplicateName
                });
                removeDuplicateChargingPoint(mainId, duplicateId, duplicateName, button);
            }

            if (e.target.closest('.merge-charging-point-btn')) {
                console.log('Merge button clicked');
                e.preventDefault();
                const button = e.target.closest('.merge-charging-point-btn');
                const mainId = button.getAttribute('data-main-id');
                const duplicateId = button.getAttribute('data-duplicate-id');
                const duplicateName = button.getAttribute('data-duplicate-name');

                console.log('Button data:', {
                    mainId,
                    duplicateId,
                    duplicateName
                });
                mergeChargingPoint(mainId, duplicateId, duplicateName, button);
            }
        });
    </script>

@endsection