@extends('voyager::master')

@section('page_title', __('voyager::generic.view').' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i> {{ __('voyager::generic.viewing') }} {{ ucfirst($dataType->getTranslatedAttribute('display_name_singular')) }}
        &nbsp;

        @can('edit', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.edit', $dataTypeContent->getKey()) }}" class="btn btn-info">
                <i class="glyphicon glyphicon-pencil"></i> <span
                    class="hidden-xs hidden-sm">{{ __('voyager::generic.edit') }}</span>
            </a>
        @endcan
        @can('delete', $dataTypeContent)
            @if($isSoftDeleted)
                <a href="{{ route('voyager.'.$dataType->slug.'.restore', $dataTypeContent->getKey()) }}"
                   title="{{ __('voyager::generic.restore') }}" class="btn btn-default restore"
                   data-id="{{ $dataTypeContent->getKey() }}" id="restore-{{ $dataTypeContent->getKey() }}">
                    <i class="voyager-trash"></i> <span
                        class="hidden-xs hidden-sm">{{ __('voyager::generic.restore') }}</span>
                </a>
            @else
                <a href="javascript:;" title="{{ __('voyager::generic.delete') }}" class="btn btn-danger delete"
                   data-id="{{ $dataTypeContent->getKey() }}" id="delete-{{ $dataTypeContent->getKey() }}">
                    <i class="voyager-trash"></i> <span
                        class="hidden-xs hidden-sm">{{ __('voyager::generic.delete') }}</span>
                </a>
            @endif
        @endcan
        @can('browse', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.index') }}" class="btn btn-warning">
                <i class="glyphicon glyphicon-list"></i> <span
                    class="hidden-xs hidden-sm">{{ __('voyager::generic.return_to_list') }}</span>
            </a>
        @endcan
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content read container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered" style="padding-bottom:5px;">
                    <!-- form start -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-name">{{ __('voyager::seeders.data_rows.name') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <input type="hidden"
                               data-i18n="true"
                               name="name_i18n"
                               id="name_i18n"
                               value="{{ get_field_translations($dataTypeContent, 'name', 'text', true) }}">

                        <p>{{ $dataTypeContent->name }}</p>
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.main_image') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        @if($dataTypeContent->main_image)
                            <img style="max-width: 50%" class="read-image img-fluid" src="{{ filter_var($dataTypeContent->main_image, FILTER_VALIDATE_URL) ? $dataTypeContent->main_image : Voyager::image($dataTypeContent->main_image) }}" alt="">
                        @else
                            <p style="font-weight: bold; color:#500101">
                                doesn't have any image
                            </p>
                        @endif
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.description') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <input type="hidden"
                               data-i18n="true"
                               name="description_i18n"
                               id="description_i18n"
                               value="{{ get_field_translations($dataTypeContent, 'description', 'rich_text_box', true) }}">

                        <p>{!! $dataTypeContent->description !!}</p>
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::generic.images') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        @php
                            $images = $dataTypeContent->gallery()->get();
                        @endphp

                        @if($images)
                            @foreach($images as $key => $image)
                                <div class="col-md-4 image-div">
                                    <img src="{{ filter_var($image->url, FILTER_VALIDATE_URL) ? $image->url : Voyager::image( $image->url ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />

                                    <button type="button" class="btn btn-circle btn-danger remove" data-image="{{ $image->id }}">
                                        <i class="voyager-trash"></i>
                                    </button>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.stars') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->stars }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.start_date') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->start_date }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.end_date') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->end_date }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.price') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->price }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.featured') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <p>{!!  $dataTypeContent->featured ? "<span class='badge badge-success'>". __('voyager::generic.active') ."</span>" : "<span class='badge badge-danger'>". __('voyager::generic.unactivated') ."</span>" !!}</p>
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.external_booking_link') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->external_booking_link }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.whatsapp_link') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->whatsapp_link }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.area_id') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->area?->getTranslatedAttribute('name') }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.source_id') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->source?->name }}
                    </div>
                    <hr style="margin:0;">

                    {{-- Post Status --}}
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::post.status') }}</h3>
                    </div>

                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->status }}
                    </div>
                    <hr style="margin:0;">

                    {{-- Post Published at --}}
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::post.published_at') }}</h3>
                    </div>

                    <div class="panel-body" style="padding-top:0;">
                        @if($dataTypeContent->status === 'PUBLISHED')
                            {{ $dataTypeContent->published_at }}
                        @else
                            <p style="font-weight: bold; color:#500101">
                                this post not published YET!
                            </p>
                        @endif
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.location') }}</h3>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <input type="text" id="locationInput" placeholder="Click on the map to select location" readonly style="width: 100%; padding: 10px;">
                            <div id="map"></div>
                            <input type="hidden" id="latitude" name="latitude" value="{{ old('location_lat', $dataTypeContent->location_lat ?? '') }}">
                            <input type="hidden" id="longitude" name="longitude" value="{{ old('location_lng', $dataTypeContent->location_lng ?? '') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title"><i
                            class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}
                        ?</h4>
                </div>
                <div class="modal-footer">
                    <form action="{{ route('voyager.'.$dataType->slug.'.index') }}" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm"
                               value="{{ __('voyager::generic.delete_confirm') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right"
                            data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop

@section('javascript')
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <style>
        #map { height: 400px; width: 100%; }
    </style>
    <script>
        let existingLat = parseFloat(document.getElementById("latitude").value) || 24.7136;
        let existingLng = parseFloat(document.getElementById("longitude").value) || 46.6753;

        const map = L.map('map').setView([existingLat, existingLng], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        let marker = L.marker([existingLat, existingLng], { draggable: true }).addTo(map);

        function updatePositionInputs(latlng) {
            document.getElementById("latitude").value = latlng.lat;
            document.getElementById("longitude").value = latlng.lng;
            document.getElementById("locationInput").value = `Lat: ${latlng.lat}, Lng: ${latlng.lng}`;
        }

        map.on('click', function(e) {
            marker.setLatLng(e.latlng);
            updatePositionInputs(e.latlng);
        });

        marker.on('dragend', function() {
            updatePositionInputs(marker.getLatLng());
        });

        updatePositionInputs(marker.getLatLng());
    </script>

    @if ($isModelTranslatable)
        <script>
            $(document).ready(function () {
                $('.side-body').multilingual();
            });
        </script>
    @endif
    <script>
        var deleteFormAction;
        $('.delete').on('click', function (e) {
            var form = $('#delete_form')[0];

            if (!deleteFormAction) {
                // Save form action initial value
                deleteFormAction = form.action;
            }

            form.action = deleteFormAction.match(/\/[0-9]+$/)
                ? deleteFormAction.replace(/([0-9]+$)/, $(this).data('id'))
                : deleteFormAction + '/' + $(this).data('id');

            $('#delete_modal').modal('show');
        });

    </script>
@stop