@php
    $title = $sub->name;
@endphp
@extends('layouts.app')
@section('title', $title)
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => __('project.index'), 'url' => route('projects.index')],
                ['label' => $project->name, 'url' => route('projects.show', $project)],
                ['label' => __('project.subs.index', ['project' => $project->name]), 'url' => route('projects.subs.index', $project)],
                ['label' => $title, 'url' => '']
            ]"/>
        </x-slot>

        <x-slot name="right">
            @include('shared.button', ['type' => 'edit', 'url' => route('projects.subs.edit', [$project, $sub])])
            @include('shared.button', ['type' => 'delete', 'url' => route('projects.subs.destroy', [$project, $sub])])
        </x-slot>
    </x-page-header>

    <x-hr/>

    <ul class="space-y-5">
        <li>
            {{ __('forms.user') }} : {{ $sub->User->name }}
        </li>
        <li>
            {{ __('forms.name') }} : {{ $sub->name }}
        </li>
        <li>
            {{ __('forms.description') }} : {{ $sub->description ?? '---' }}
        </li>
        <li>
            {{ __('forms.ProjectName') }} : {{ $project->name }}
        </li>
        <li>
            {{ __('forms.ProjectType') }} : {{ __('project.types.values.' . $project->type) }}
        </li>
        @if($project->type == 'Panorama')
            <li>
                {{ __('forms.PanoramaFileType') }} : {{ __('forms.' . $sub->Panorama->type) }}
            </li>
        @endif
        <li>
            {{ __('forms.CreatedAt') }} : {{ CheckDateTime($project->created_at, 'show', 'FullDateTime') }}
        </li>
        <li>
            {{ __('forms.UpdatedAt') }} : {{ CheckDateTime($project->updated_at, 'show', 'FullDateTime') }}
        </li>
    </ul>
    @switch($project->type)
        @case('ImageProcessing')
            <h3 class="text-2xl my-5">
                {{ __('forms.images') }}
            </h3>
            <div id="files">
                @include('projects.subs.partial.ar', ['ar' => $sub->AR(), 'show' => true])
            </div>
            @break
        @case('Panorama')
            <h3 class="text-2xl my-5">
                {{ __('forms.items') }}
            </h3>
            <div
                class="relative overflow-x-auto shadow-md rounded-lg mt-5 border-2 border-gray-300 dark:border-gray-700">
                <table id="data" class="w-full text-sm text-left rtl:text-right text-gray-900 dark:text-gray-100">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr class="text-center">
                        <th scope="col" class="px-6 py-3">
                            #
                        </th>
                        <th scope="col" class="px-6 py-3">
                            {{ __('forms.title') }}
                        </th>
                        <th scope="col" class="px-6 py-3">
                            {{ __('forms.form') }}
                        </th>
                        <th scope="col" class="px-6 py-3">
                            X
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Y
                        </th>
                        <!-- <th scope="col" class="px-6 py-3">
                            Z
                        </th> -->
                        @if($sub->Panorama->type == 'video')
                            <th scope="col" class="px-6 py-3">
                                From
                            </th>
                            <th scope="col" class="px-6 py-3">
                                To
                            </th>
                        @endif
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($sub->Panorama->Items as $key => $item)
                        <tr class="odd:bg-dar-gray-100 odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 text-center">
                            <td class="px-6 py-4">
                                {{ $key + 1 }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $item->title }}
                            </td>
                            <td class="px-6 py-4">
                                <a href="{{ route('forms.show', $item->Form) }}" target="_blank"
                                   class="hover:text-blue-500">
                                    {{ $item->Form->name }}
                                </a>
                            </td>
                            <td class="px-6 py-4">
                                {{ $item->x }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $item->y }}
                            </td>
                            <!-- <td class="px-6 py-4">
                                {{ $item->z }}
                            </td> -->
                            @if($sub->Panorama->type == 'video')
                                <td class="px-6 py-4">
                                    {{ $item->from ?? '---' }}
                                </td>
                                <td class="px-6 py-4">
                                    {{ $item->to ?? '---' }}
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr class="odd:bg-dar-gray-100 odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                            <td colspan="4" class="px-6 py-4">
                                {{ __('table.NoRecords') }}
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
            @break
        @case('VR')
            @break
        @case('Location')
            <button type="button" onclick="LocateMe()"
                    class="mt-5 flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                <i class="bi bi-person-circle me-2"></i>
                Locate Me
            </button>
            <div id="map" class="w-full h-96 rounded-md shadow-lg z-10 my-5"></div>
            <div class="grid grid-cols-2 sm:grid-cols-10 gap-2">
                @foreach($sub->Locations() as $location)
                    <button type="button" onclick="TrackDevice({{ json_encode($location) }})"
                            class="flex items-center text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                        <i class="bi bi-geo-alt-fill me-2"></i>
                        Track {{ $location['name'] }}
                    </button>
                @endforeach
            </div>
            @break
        @case('3D')
            @if($sub->Files->where('use_type', '!=', 'icon')->count())
                <h3 class="text-2xl mt-5">
                    Textures :
                </h3>
                <ul class="grid md:grid-cols-7 gap-6 mt-5">
                    @foreach($sub->Files->where('use_type', '!=', 'icon') as $file)
                        <li>
                            <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-700 hover:shadow-xl">
                                <a href="{{ asset($file->path) }}" data-fancybox="3D"
                                   data-caption="Usage : {{ $file->use_type }}">
                                    <img src="{{ asset($file->path) }}" alt="{{ $file->use_type }}"
                                         class="sm:w-48 sm:h-48 rounded-md shadow-2xl"/>
                                </a>
                                <p class="text-center mt-2">
                                    {{ $file->use_type }}
                                </p>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
            <h3 class="text-2xl mt-5">
                3D Models :
            </h3>
            <x-table :headers="$sub->ModelsTable('headers')" :rows="$sub->ModelsTable('rows')" :data="$sub->Models"
                     :pagination='false'/>
            @break
    @endswitch

    @if($project->type == 'Location')
        <script>
            let map;
            let userIcon;
            let userMarker;
            let markers = [];
            let zoomLevel = 13;
            const devices = @json($sub->Locations());
            devices.forEach((device) => {
                markers.push(device.id);
            });
            document.addEventListener('DOMContentLoaded', function () {
                map = L.map('map').setView([{{ head($sub->Locations())['lat'] }}, {{ head($sub->Locations())['lang'] }}], zoomLevel);

                const customIcon = L.icon({
                    iconUrl: 'https://s8.uupload.ir/files/metariom_k1n.png',
                    iconSize: [38, 38],
                    iconAnchor: [19, 38],
                    popupAnchor: [0, -30]
                });

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: 'Metariom Map'
                }).addTo(map);

                devices.forEach((device) => {
                    markers[device.key] = L.marker([device.lat, device.lang], {icon: customIcon}).addTo(map);
                    markers[device.key].bindPopup('<b>' + device.name + '</b></br><a href="geo:' + device.lat + ',' + device.lang + '" onclick="setTimeout(() => SetLoading(false), 1000)">Navigate</a>');
                });

                $('.leaflet-attribution-flag').parent().parent().css('border-top-left-radius', '5px');
                $('.leaflet-attribution-flag').parent().next().remove();
                $('.leaflet-attribution-flag').parent().remove();

                // Define a custom icon for the user's location
                userIcon = L.icon({
                    iconUrl: 'https://icons.veryicon.com/png/o/miscellaneous/two-color-icon-library/user-286.png', // Replace with your custom marker image path
                    iconSize: [38, 38],
                    iconAnchor: [19, 38],
                    popupAnchor: [0, -30]
                });
            });

            function LocateMe() {
                zoomLevel = map.getZoom();
                // Check if geolocation is available
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        function (position) {
                            var lat = position.coords.latitude;
                            var lng = position.coords.longitude;

                            // Update the map to center on the user's location
                            map.setView([lat, lng], zoomLevel);

                            // Add or move the marker to the user's location
                            if (userMarker) {
                                userMarker.setLatLng([lat, lng]);
                                userMarker.bindPopup('<b>You are here!</b>').openPopup();
                            } else {
                                userMarker = L.marker([lat, lng], {icon: userIcon}).addTo(map);
                                userMarker.bindPopup('<b>You are here!</b>').openPopup();
                            }
                        },
                        function (error) {
                            alert('Unable to retrieve your location. Please enable location services.');
                        }
                    );
                } else {
                    alert('Geolocation is not supported by your browser.');
                }
            }

            function TrackDevice(device) {
                zoomLevel = map.getZoom();
                map.setView([device.lat, device.lang], zoomLevel);
                markers[device.key].openPopup();
            }
        </script>
    @endif
@endsection