@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'restraunt';
    @endphp
    <style>
        .text-scrollable {
            max-height: 100px;
            /* Adjust based on your layout */
            overflow-y: auto;
            word-wrap: break-word;
            white-space: pre-wrap;
            /* Preserve whitespace and wrap text */
        }

        table {
            width: 100%;
            table-layout: auto;
        }

        td {
            padding: 10px;
            vertical-align: top;
        }
    </style>

    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4 left">
                            <a class="d-flex align-items-center justify-content-center pl-2"
                                href="{{ route('manage.restaurants') }}">
                                <img class="back-btn" src="{{ asset('public/assets/img/left-arrow.svg') }}">
                                <h6 class="card-title p-0">View Details</h6>
                            </a>
                        </div>
                    </div>


                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn p-0">
                        <div class="view-details">
                            <div class="simple-tab">
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel"
                                        aria-labelledby="home-tab" tabindex="0">
                                        <div class="row">
                                            <div class="col-md-6 mb-10 tabs23">
                                                <table>
                                                    <tr class="title">
                                                        <td>Restaurant Name :</td>
                                                        <td>Restaurant ID :</td>
                                                        <td style="min-height:60px; align-items:start;">Bio :</td>
                                                        <td>Try on 1 :</td>
                                                        <td>Try on 2 :</td>
                                                        <td>Try on 3 :</td>
                                                        <td>Try on 4 :</td>
                                                        <td>Image :</td>
                                                    </tr>
                                                    <tr class="w-100">
                                                        <td>{{ $restaurantItem->name }}</td>
                                                        <td>{{ $restaurantItem->restaurant_id }}</td>
                                                        <td class="text-scrollable" style="height:60px; align-items:start;">{{ $restaurantItem->bio }}</td>
                                                        <td class="text-scrollable">{{ $restaurantItem->try_on_1 }}</td>
                                                        <td class="text-scrollable">{{ $restaurantItem->try_on_2 }}</td>
                                                        <td class="text-scrollable">{{ $restaurantItem->try_on_3 }}</td>
                                                        <td class="text-scrollable">{{ $restaurantItem->try_on_4 }}</td>
                                                        <td>
                                                            <div id="imageInputPreviewNormal" style="width: 30%;">
                                                                <img src="{{ $restaurantItem->image }}" alt="Image Preview"
                                                                    style="width: 40%;">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="col-md-6 mb-10">
                                                <table>
                                                    <tr class="title">
                                                        {{-- <td>Description :</td> --}}
                                                        <td>Status :</td>
                                                        <td style="height:60px; align-items:start;">Address :</td>
                                                        <td style="height:60px; align-items:start;">Exclusion :</td>
                                                        <td>Latitude :</td>
                                                        <td>Longitude :</td>
                                                    </tr>
                                                    <tr class="w-100">
                                                        {{-- <td class="text-scrollable">{!! $restaurantItem->description !!}</td> --}}
                                                        <td>{{ $restaurantItem->is_active == 1 ? 'Active' : 'Expired' }}
                                                        </td>
                                                        <td  class="text-scrollable" style="height:60px; align-items:start;">{{ $restaurantItem->address }}</td>

                                                        <td class="text-scrollable" style="height:60px; align-items:start;">{{ $restaurantItem->exclusion }}</td>
                                                        <td>{{ $restaurantItem->latitude }}</td>
                                                        <td>{{ $restaurantItem->longtitude }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
        </div>
    @endsection

    @section('section_script')
        <script>
            const imageInputEdit = document.getElementById('imageInputNormal');
            const imagePreviewEdit = document.getElementById('imageInputPreviewNormal');

            imageInputEdit.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        const img = document.createElement('img');
                        img.src = event.target.result;
                        img.style.maxWidth = '200px';
                        img.style.maxHeight = '200px';
                        imagePreviewEdit.innerHTML = '';
                        imagePreviewEdit.appendChild(img);
                    };
                    reader.readAsDataURL(file);
                } else {
                    imagePreviewEdit.innerHTML = '';
                }
            });
        </script>
    @endsection
