@extends('layouts.admin')

@section('title', 'Update Request Details - EV Charging Network')

@section('breadcrumb_title', 'Update Requests')
@section('breadcrumb_sub_title', 'Details')
@section('page_title', 'Update Request Details')
@section('breadcrumb_link', route('charging-point-update-requests.index'))

@section('content')
    <div class="min-h-screen bg-gray-50">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h5 class="mb-0">Update Request Details</h5>
                                <p class="text-sm mb-0">
                                    View details of the charging point update request.
                                </p>
                            </div>
                            <div>
                                @if ($updateRequest)
                                    @if ($updateRequest->status == 0)
                                        <a href="{{ route('charging-point-update-requests.requests') }}"
                                            class="btn btn-secondary">
                                            <i class="fas fa-arrow-left me-2"></i>Back
                                        </a>
                                    @else
                                        <a href="{{ route('charging-point-update-requests.index') }}"
                                            class="btn btn-secondary">
                                            <i class="fas fa-arrow-left me-2"></i>Back
                                        </a>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @if ($updateRequest)
                            <!-- Charging Point Static Information -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h5 class="card-title text-primary mb-3">
                                                <i class="fas fa-charging-station me-2"></i>
                                                {{ $updateRequest->chargingPoint->name ?? 'Unnamed Charging Point' }}
                                            </h5>
                                            <p class="card-text text-muted mb-2">
                                                <strong>Address:</strong>
                                                {{ $updateRequest->chargingPoint->description ?? 'No description available' }}
                                            </p>
                                            <p class="card-text text-muted mb-0">
                                                <strong>Client:</strong>
                                                {{ $updateRequest->chargingPoint->client ? $updateRequest->chargingPoint->client->first_name . ' ' . $updateRequest->chargingPoint->client->last_name : 'N/A' }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h5 class="card-title text-primary mb-3">
                                                <i class="fas fa-user me-2"></i>
                                                Requested By
                                            </h5>
                                            <p class="card-text text-muted mb-0">
                                                <strong>Client:</strong>
                                                {{ $updateRequest->client ? $updateRequest->client->first_name . ' ' . $updateRequest->client->last_name : 'N/A' }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if ($updateRequest->status == 0)

                                <!-- Comparison Table -->
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="text-primary mb-3">Comparison View</h6>
                                        <div class="table-responsive" style="overflow-x: visible;">
                                            <table class="table table-bordered" style="table-layout: fixed; width: 100%;">
                                                <thead class="thead-light">
                                                    <tr>
                                                        <th class="text-center" style="width: 20%;">Field</th>
                                                        <th class="text-center" style="width: 40%;">Original</th>
                                                        <th class="text-center" style="width: 40%;">Requested</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            <strong>Network</strong></td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->chargingPoint->network->name ?? 'N/A' }}</td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->network->name ?? 'N/A' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            <strong>Power Output</strong></td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->chargingPoint->powerOutput->name ?? 'N/A' }}</td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->powerOutput->name ?? 'N/A' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            <strong>Charger Status</strong></td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            @if ($updateRequest->chargingPoint->charger_status !== null)
                                                                @php
                                                                    $statusEnum = \App\Enums\ChargingPointEnum::tryFrom(
                                                                        $updateRequest->chargingPoint->charger_status,
                                                                    );
                                                                    $statusLabel = $statusEnum
                                                                        ? $statusEnum->label()
                                                                        : 'Unknown';
                                                                @endphp
                                                                <span class="badge badge-info">{{ $statusLabel }}</span>
                                                            @else
                                                                N/A
                                                            @endif
                                                        </td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            @if ($updateRequest->charger_status !== null)
                                                                @php
                                                                    $statusEnum = \App\Enums\ChargingPointEnum::tryFrom(
                                                                        $updateRequest->charger_status,
                                                                    );
                                                                    $statusLabel = $statusEnum
                                                                        ? $statusEnum->label()
                                                                        : 'Unknown';
                                                                @endphp
                                                                <span class="badge badge-info">{{ $statusLabel }}</span>
                                                            @else
                                                                N/A
                                                            @endif
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            <strong>Payment</strong></td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            @if ($updateRequest->chargingPoint->free_to_use)
                                                                <span class="badge badge-success">Free</span>
                                                            @else
                                                                LKR {{ $updateRequest->chargingPoint->payment_price }}
                                                            @endif
                                                        </td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            @if ($updateRequest->free_to_use)
                                                                <span class="badge badge-success">Free</span>
                                                            @else
                                                                LKR {{ $updateRequest->payment_price }}
                                                            @endif
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            <strong>Access Instructions</strong></td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->chargingPoint->access_instructions ?: 'N/A' }}
                                                        </td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->access_instructions ?: 'N/A' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            <strong>Additional Notes</strong></td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->chargingPoint->additional_notes ?: 'N/A' }}</td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->additional_notes ?: 'N/A' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            <strong>Status</strong></td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            @if ($updateRequest->chargingPoint->status == 0)
                                                                <span class="badge badge-warning">Under Review</span>
                                                            @elseif($updateRequest->chargingPoint->status == 1)
                                                                <span class="badge badge-success">Verified</span>
                                                            @elseif($updateRequest->chargingPoint->status == 2)
                                                                <span class="badge badge-info">Merged</span>
                                                            @elseif($updateRequest->chargingPoint->status == 3)
                                                                <span class="badge badge-danger">Rejected</span>
                                                            @else
                                                                N/A
                                                            @endif
                                                        </td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            @if ($updateRequest->status == 0)
                                                                <span class="badge badge-warning">Under Review</span>
                                                            @elseif($updateRequest->status == 1)
                                                                <span class="badge badge-success">Verified</span>
                                                            @elseif($updateRequest->status == 2)
                                                                <span class="badge badge-info">Merged</span>
                                                            @elseif($updateRequest->status == 3)
                                                                <span class="badge badge-danger">Rejected</span>
                                                            @else
                                                                N/A
                                                            @endif
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            <strong>Created At</strong></td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->chargingPoint->created_at->format('M d, Y H:i') }}
                                                        </td>
                                                        <td
                                                            style="word-wrap: break-word; word-break: break-word; white-space: normal;">
                                                            {{ $updateRequest->created_at->format('M d, Y H:i') }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <!-- Timeline Comparison -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h6 class="text-primary mb-3">Operating Hours Comparison</h6>
                                        <div class="row">
                                            <!-- Original Timeline -->
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-header bg-light">
                                                        <h6 class="mb-0 text-primary">Original Operating Hours</h6>
                                                    </div>
                                                    <div class="card-body">
                                                        @if ($updateRequest->chargingPoint->timeLines && $updateRequest->chargingPoint->timeLines->count() > 0)
                                                            <div class="table-responsive">
                                                                <table class="table table-sm">
                                                                    <thead>
                                                                        <tr>
                                                                            <th class="text-center">Day</th>
                                                                            <th class="text-center">From</th>
                                                                            <th class="text-center">To</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($updateRequest->chargingPoint->timeLines as $timeLine)
                                                                            <tr>
                                                                                <td class="text-center">{{ $timeLine->name }}
                                                                                </td>
                                                                                <td class="text-center">{{ $timeLine->from }}
                                                                                </td>
                                                                                <td class="text-center">{{ $timeLine->to }}
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        @else
                                                            <p class="text-muted text-center">No operating hours set</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Requested Timeline -->
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-header bg-light">
                                                        <h6 class="mb-0 text-success">Requested Operating Hours</h6>
                                                    </div>
                                                    <div class="card-body">
                                                        @if ($updateRequest->timeLines && $updateRequest->timeLines->count() > 0)
                                                            <div class="table-responsive">
                                                                <table class="table table-sm">
                                                                    <thead>
                                                                        <tr>
                                                                            <th class="text-center">Day</th>
                                                                            <th class="text-center">From</th>
                                                                            <th class="text-center">To</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($updateRequest->timeLines as $timeLine)
                                                                            <tr>
                                                                                <td class="text-center">{{ $timeLine->name }}
                                                                                </td>
                                                                                <td class="text-center">{{ $timeLine->from }}
                                                                                </td>
                                                                                <td class="text-center">{{ $timeLine->to }}
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        @else
                                                            <p class="text-muted text-center">No operating hours set</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Plug Types Comparison -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h6 class="text-primary mb-3">Plug Types Comparison</h6>
                                        <div class="row">
                                            <!-- Original Plug Types -->
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-header bg-light">
                                                        <h6 class="mb-0 text-primary">Original Plug Types</h6>
                                                    </div>
                                                    <div class="card-body">
                                                        @if ($updateRequest->chargingPoint->plugTypes && $updateRequest->chargingPoint->plugTypes->count() > 0)
                                                            <div class="table-responsive">
                                                                <table class="table table-sm">
                                                                    <thead>
                                                                        <tr>
                                                                            <th class="text-center">Plug Type</th>
                                                                            <th class="text-center">Quantity</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($updateRequest->chargingPoint->plugTypes as $plugType)
                                                                            <tr>
                                                                                <td class="text-center">{{ $plugType->name }}
                                                                                </td>
                                                                                <td class="text-center">
                                                                                    {{ $plugType->pivot->quantity }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        @else
                                                            <p class="text-muted text-center">No plug types</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Requested Plug Types -->
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-header bg-light">
                                                        <h6 class="mb-0 text-success">Requested Plug Types</h6>
                                                    </div>
                                                    <div class="card-body">
                                                        @if ($updateRequest->plugTypes && $updateRequest->plugTypes->count() > 0)
                                                            <div class="table-responsive">
                                                                <table class="table table-sm">
                                                                    <thead>
                                                                        <tr>
                                                                            <th class="text-center">Plug Type</th>
                                                                            <th class="text-center">Quantity</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($updateRequest->plugTypes as $plugType)
                                                                            <tr>
                                                                                <td class="text-center">{{ $plugType->name }}
                                                                                </td>
                                                                                <td class="text-center">
                                                                                    {{ $plugType->pivot->quantity }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        @else
                                                            <p class="text-muted text-center">No plug types</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Amenities Comparison -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h6 class="text-primary mb-3">Amenities Comparison</h6>
                                        <div class="row">
                                            <!-- Original Amenities -->
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-header bg-light">
                                                        <h6 class="mb-0 text-primary">Original Amenities</h6>
                                                    </div>
                                                    <div class="card-body">
                                                        @if ($updateRequest->chargingPoint->amenities && $updateRequest->chargingPoint->amenities->count() > 0)
                                                            <div class="d-flex flex-wrap">
                                                                @foreach ($updateRequest->chargingPoint->amenities as $amenity)
                                                                    <span
                                                                        class="badge badge-secondary me-2 mb-2">{{ $amenity->name }}</span>
                                                                @endforeach
                                                            </div>
                                                        @else
                                                            <p class="text-muted text-center">No amenities</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Requested Amenities -->
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-header bg-light">
                                                        <h6 class="mb-0 text-success">Requested Amenities</h6>
                                                    </div>
                                                    <div class="card-body">
                                                        @if ($updateRequest->amenities && $updateRequest->amenities->count() > 0)
                                                            <div class="d-flex flex-wrap">
                                                                @foreach ($updateRequest->amenities as $amenity)
                                                                    <span
                                                                        class="badge badge-primary me-2 mb-2">{{ $amenity->name }}</span>
                                                                @endforeach
                                                            </div>
                                                        @else
                                                            <p class="text-muted text-center">No amenities</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Images Section -->
                                @if ($updateRequest->location_image_url || ($updateRequest->images && $updateRequest->images->count() > 0))
                                    <div class="row mt-4">
                                        <div class="col-12">
                                            <h6 class="text-primary mb-3">Requested Images</h6>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <!-- Empty left column for balance -->
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="text-center">
                                                        @if ($updateRequest->location_image_url)
                                                            <img class="w-100 border-radius-lg shadow-lg mx-auto mb-3"
                                                                src="{{ $updateRequest->location_image_url }}"
                                                                alt="location_image">
                                                        @endif
                                                        @if ($updateRequest->images && $updateRequest->images->count() > 0)
                                                            <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 ($updateRequest->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>
                                                            <!-- 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>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <!-- Action Buttons -->
                                <!-- @if ($updateRequest->status == 0) -->
                                    <!-- Under Review -->
                                    <div class="row mt-4">
                                        <div class="col-12">
                                            <div class="d-flex justify-content-end">
                                                <button type="button" class="btn btn-success me-2"
                                                    onclick="approveUpdateRequest({{ $updateRequest->id }})">
                                                    <i class="fas fa-check"></i> Approve
                                                </button>
                                                <button type="button" class="btn btn-danger"
                                                    onclick="rejectUpdateRequest({{ $updateRequest->id }})">
                                                    <i class="fas fa-times"></i> Reject
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                <!-- @endif -->
                            @else
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between align-items-center mb-4">
                                                    <h5 class="mb-0 text-primary"><i class="fas fa-code-pull-request me-2"></i>Request Details</h5>
                                                    @if ($updateRequest->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($updateRequest->status == 3)
                                                        <span class="badge bg-danger text-white px-3 py-2">
                                                            <i class="fas fa-times-circle me-1"></i>Rejected
                                                        </span>
                                                    @endif
                                                </div>
                                                
                                                <div class="row">
                                                    <div class="col-xl-5 col-lg-6 text-center">
                                                        @if ($updateRequest->location_image_url)
                                                            <img class="w-100 border-radius-lg shadow-lg mx-auto"
                                                                src="{{ $updateRequest->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 ($updateRequest->images && $updateRequest->images->count() > 0)
                                                                    @foreach ($updateRequest->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">
                                                        <h6 class="mb-0 mt-3">Specifications</h6>
                                                        <div class="d-flex justify-content-between align-items-center mb-3 mt-3">
                                                            <h6 class="text-sm font-weight-bold mb-0">Plug Types</h6>
                                                            <span
                                                                class="text-sm text-muted">{{ $updateRequest->plugTypes && $updateRequest->plugTypes->count() > 0? $updateRequest->plugTypes->map(function ($plugType) {return $plugType->name . ' x ' . $plugType->pivot->quantity;})->join(', '): '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">Network</h6>
                                                            <span class="text-sm text-muted">{{ $updateRequest->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">{{ $updateRequest->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 ($updateRequest->timeLines && $updateRequest->timeLines->count() > 0)
                                                                    @php

                                                                        $is24_7 =
                                                                            $updateRequest->timeLines->count() === 1 &&
                                                                            $updateRequest->timeLines->first()->name === '24/7' &&
                                                                            $updateRequest->timeLines->first()->from === '00:00:00' &&
                                                                            $updateRequest->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 ($updateRequest->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">{{ $updateRequest->free_to_use ? 'Free' : 'LKR ' . $updateRequest->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">{{ $updateRequest->access_type ?? 'Public' }}</span>
                                                        </div>
                                                        <div class="mb-3">
                                                            <h6 class="text-sm font-weight-bold mb-3">Access Instructions</h6>
                                                            @if ($updateRequest->access_instructions)
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <span
                                                                            class="text-sm text-muted">{{ $updateRequest->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 ($updateRequest->additional_notes)
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <span
                                                                            class="text-sm text-muted">{{ $updateRequest->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 ($updateRequest->amenities && $updateRequest->amenities->count() > 0)
                                                                    @foreach ($updateRequest->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>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @else
                            <div class="text-center py-4">
                                <i class="fas fa-exclamation-triangle fa-2x text-warning mb-2"></i>
                                <p class="text-muted">Update request not found.</p>
                            </div>
                        @endif
                    </div>
                </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');

        function approveUpdateRequest(id) {
            $.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 Approve this update request?',
                type: 'green',
                autoClose: 'cancel|10000',
                buttons: {
                    confirm: {
                        text: 'Yes, Approve',
                        btnClass: 'btn-success',
                        action: function() {
                            var data = {
                                "_token": $('meta[name="csrf-token"]').attr('content'),
                                "id": id,
                            }
                            $('#loader').show()
                            $.ajax({
                                type: "POST",
                                url: "{{ url('/charging-point-update-requests/approve') }}/" + id,
                                data: data,
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                success: function(response) {
                                    $('#loader').hide()
                                    if (response.success) {
                                        // Show success confirmation
                                        $.confirm({
                                            theme: 'modern',
                                            columnClass: 'col-md-6 col-md-offset-4',
                                            icon: 'fa fa-check-circle text-success',
                                            title: 'Success!',
                                            content: response.message ||
                                                'Update request approved successfully!',
                                            type: 'green',
                                            autoClose: 'confirm|3000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Redirect to new request list
                                                        window.location.href =
                                                            "{{ route('charging-point-update-requests.requests') }}";
                                                    }
                                                }
                                            }
                                        });
                                    } else {
                                        $.confirm({
                                            theme: 'modern',
                                            columnClass: 'col-md-6 col-md-offset-4',
                                            icon: 'fa fa-exclamation-triangle text-danger',
                                            title: 'Error!',
                                            content: response.message ||
                                                'Failed to approve update request. Please try again.',
                                            type: 'red',
                                            autoClose: 'confirm|5000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Do nothing, just close
                                                    }
                                                }
                                            }
                                        });
                                    }
                                },
                                statusCode: {
                                    401: function() {
                                        $('#loader').hide()
                                        window.location.href =
                                            '{{ route('login') }}'; //or what ever is your login URI
                                    },
                                    419: function() {
                                        $('#loader').hide()
                                        window.location.href =
                                            '{{ route('login') }}'; //or what ever is your login URI
                                    },
                                },
                                error: function(data) {
                                    $('#loader').hide()
                                    $.confirm({
                                        theme: 'modern',
                                        columnClass: 'col-md-6 col-md-offset-4',
                                        icon: 'fa fa-exclamation-triangle text-danger',
                                        title: 'Error!',
                                        content: 'Something went wrong. 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-secondary',
                        action: function() {
                            $('#loader').hide()
                        }
                    },
                }
            });
        }



        function rejectUpdateRequest(id) {
            $.confirm({
                theme: 'modern',
                columnClass: 'col-md-6 col-md-offset-4',
                icon: 'fa fa-info-circle text-danger',
                title: 'Are you Sure?',
                content: 'Do you want to Reject this update request?',
                type: 'red',
                autoClose: 'cancel|10000',
                buttons: {
                    confirm: {
                        text: 'Yes, Reject',
                        btnClass: 'btn-danger',
                        action: function() {
                            var data = {
                                "_token": $('meta[name="csrf-token"]').attr('content'),
                                "id": id,
                            }
                            $('#loader').show()
                            $.ajax({
                                type: "POST",
                                url: "{{ url('/charging-point-update-requests/reject') }}/" + id,
                                data: data,
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                success: function(response) {
                                    $('#loader').hide()
                                    if (response.success) {
                                        // Show success confirmation
                                        $.confirm({
                                            theme: 'modern',
                                            columnClass: 'col-md-6 col-md-offset-4',
                                            icon: 'fa fa-check-circle text-success',
                                            title: 'Success!',
                                            content: response.message ||
                                                'Update request rejected successfully!',
                                            type: 'green',
                                            autoClose: 'confirm',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Redirect to new request list
                                                        window.location.href =
                                                            "{{ route('charging-point-update-requests.requests') }}";
                                                    }
                                                }
                                            }
                                        });
                                    } else {
                                        $.confirm({
                                            theme: 'modern',
                                            columnClass: 'col-md-6 col-md-offset-4',
                                            icon: 'fa fa-exclamation-triangle text-danger',
                                            title: 'Error!',
                                            content: response.message ||
                                                'Failed to reject update request. Please try again.',
                                            type: 'red',
                                            autoClose: 'confirm|5000',
                                            buttons: {
                                                confirm: {
                                                    text: 'OK',
                                                    btnClass: 'btn-primary',
                                                    action: function() {
                                                        // Do nothing, just close
                                                    }
                                                }
                                            }
                                        });
                                    }
                                },
                                statusCode: {
                                    401: function() {
                                        $('#loader').hide()
                                        window.location.href =
                                            '{{ route('login') }}'; //or what ever is your login URI
                                    },
                                    419: function() {
                                        $('#loader').hide()
                                        window.location.href =
                                            '{{ route('login') }}'; //or what ever is your login URI
                                    },
                                },
                                error: function(data) {
                                    $('#loader').hide()
                                    $.confirm({
                                        theme: 'modern',
                                        columnClass: 'col-md-6 col-md-offset-4',
                                        icon: 'fa fa-exclamation-triangle text-danger',
                                        title: 'Error!',
                                        content: 'Something went wrong. 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-secondary',
                        action: function() {
                            $('#loader').hide()
                        }
                    },
                }
            });
        }
    </script>
@endsection