@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'restraunt';
    @endphp
    <style>
        .description-cell {
            max-width: 200px;
            /* Adjust the width as necessary */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </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>Bio :</td>
                                                        <td>Monday :</td>
                                                        <td>Tuesday :</td>
                                                        <td>Wednesday :</td>
                                                        <td>Thursday :</td>
                                                        <td>Friday :</td>
                                                        <td>Saturday :</td>
                                                        <td>Sunday :</td>
                                                        <td>Image :</td>

                                                    </tr>
                                                    <tr class="w-100">
                                                        <td>{{ $restaurantItem->name }}</td>
                                                        <td>{{ $restaurantItem->restaurant_id }}</td>
                                                        <td class="description-cell">{{ $restaurantItem->bio }}</td>
                                                        @foreach (['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] as $day)
                                                            <td>
                                                                {{ isset($operating_hours[$day]) ? $operating_hours[$day]->start_time . ' - ' . $operating_hours[$day]->end_time : 'N/A' }}
                                                            </td>
                                                        @endforeach
                                                        <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>Address :</td>
                                                        <td>Try on 1 :</td>
                                                        <td>Try on 2 :</td>
                                                        <td>Try on 3 :</td>
                                                        <td>Try on 4 :</td>
                                                        <td>Exclusion :</td>
                                                        <td>Latitude :</td>
                                                        <td>Longitude :</td>
                                                    </tr>
                                                    <tr class="w-100">
                                                        <td class="description-cell">{!! $restaurantItem->description !!}</td>
                                                        <td>{{ $restaurantItem->is_active == 1 ? 'Active' : 'Expired' }}
                                                        </td>
                                                        <td class="description-cell">{{ $restaurantItem->address }}</td>
                                                        <td class="description-cell">{{ $restaurantItem->try_on_1 }}</td>
                                                        <td class="description-cell">{{ $restaurantItem->try_on_2 }}</td>
                                                        <td class="description-cell">{{ $restaurantItem->try_on_3 }}</td>
                                                        <td class="description-cell">{{ $restaurantItem->try_on_4 }}</td>
                                                        <td class="description-cell">{{ $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
