@extends('layouts.user-app')
@section('content')

    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .table-container {
            width: 80%;
            margin: 50px auto;
            max-height: 400px; /* Set the maximum height for scroll */
            overflow-y: auto; /* Enable vertical scroll */
            border: 1px solid #ccc;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th, table td {
            border: 1px solid #ccc;
            padding: 8px 12px;
            text-align: left;
        }

        table th {
            background-color: #f4f4f4;
        }

        table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        table tbody tr:hover {
            background-color: #e9e9e9;
        }

        table img {
            max-width: 100px; /* Adjust image size as needed */
            height: auto;
        }

        .details-desc {
            max-height: 1000px;
            overflow: auto;
        }

        .detail-item .time {
            display: flex;
            flex-direction: column;
        }

        .detail-item {
            border-bottom: 1px solid #8080804f;
            padding-bottom: 3rem;
        }
    </style>

    <div class="col-md-9">
        <a  href="{{route('user.in-progress')}}" class="btn btn-success">Back</a>
        @if($dailyLogs->count() > 0)
        <div class="details-desc py-5 my-5">
            <div class="container">

                @foreach($dailyLogs as $log)

                    @php
                        $decodedImage = json_decode($log->images);
                    @endphp
                    <div class="detail-item my-4">
                        <div class="row">
                            <div class="col-12">
                                <p><b>Service Name:</b> <span>{{ $log->service_id != null ? $log->service->title : $log->other_service }}</span></p>
                            </div>
                            <div class="col-6">
                                <p> <b>Date :</b> <span>{{$log->date ?? ''}}</span></p>
                            </div>
                            <div class="col-6">
                                <p class="time"><span> <b> Start Time :</b> {{$log->start_time ?? ''}}</span> <span><b> End Time :</b> {{$log->end_time ?? ''}}</span>
                                </p>
                            </div>
                            <div class="col-12">
                                <p>{{$log->description ?? ''}}</p>
                            </div>
                        </div>
                        @if($decodedImage != null)
                            <div class="d-flex flex-wrap">
                                <figure class="mx-2">
                                    @foreach($decodedImage as $images)
                                        <img src="{{$images ?? ''}}" width="200">
                                    @endforeach
                                </figure>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
        @else
            <h4 style="text-align: center;">No Logs</h4>

        @endif
    </div>

@endsection