@extends('layouts.admin')

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

@section('breadcrumb_title', 'Update Requests')
@section('breadcrumb_sub_title', 'View Only')
@section('page_title', 'View Update Request')

@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 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Update Request Details</h5>
                    <a href="{{ route('charging-point-update-requests.index') }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left"></i> Back to Update Requests
                    </a>
                </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->first_name . ' ' . $updateRequest->chargingPoint->client->last_name ?? 'N/A' }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Requested Changes Information -->
                            <div class="col-12">
                                <h6 class="text-success mb-3">Requested Changes</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <td><strong>Network:</strong></td>
                                                <td>{{ $updateRequest->network->name ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Power Output:</strong></td>
                                                <td>{{ $updateRequest->powerOutput->name ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Charger Status:</strong></td>
                                                <td>
                                                    @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><strong>Payment:</strong></td>
                                                <td>
                                                    @if($updateRequest->free_to_use)
                                                        <span class="badge badge-success">Free</span>
                                                    @else
                                                        ${{ $updateRequest->payment_price }}
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Access Instructions:</strong></td>
                                                <td>{{ $updateRequest->access_instructions ?: 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Additional Notes:</strong></td>
                                                <td>{{ $updateRequest->additional_notes ?: 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Status:</strong></td>
                                                <td>
                                                    @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><strong>Created At:</strong></td>
                                                <td>{{ $updateRequest->created_at->format('M d, Y H:i') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Updated Plug Types -->
                                @if($updateRequest->plugTypes && $updateRequest->plugTypes->count() > 0)
                                    <h6 class="text-success mb-3 mt-4">Requested Plug Types</h6>
                                    <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>
                                @endif

                                <!-- Updated Amenities -->
                                @if($updateRequest->amenities && $updateRequest->amenities->count() > 0)
                                    <h6 class="text-success mb-3 mt-4">Requested Amenities</h6>
                                    <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>
                                @endif
                            </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">Update Request Images</h6>
                                    <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">
                                            @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>
                        @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>
                            <a href="{{ route('charging-point-update-requests.index') }}" class="btn btn-primary">
                                <i class="fas fa-arrow-left"></i> Back to Update Requests
                            </a>
                        </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');
</script>
@endsection