@extends('layouts.contractor-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: 450px;
            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('contractor.in-progress')}}" class="btn btn-success">Back</a>
        <div class="details-desc py-5 my-5">
            <div class="container">

                <h3 style="text-align: center">All Daily Logs of your services</h3>

                @foreach($dailyLogs as $log)

                    @php
                        $decodedImage = json_decode($log->images);
                    @endphp
                    <div class="detail-item my-4">
                        <a href="{{route('contractor.daily_logs.delete',$log->id)}}" class="btn btn-danger"> Delete</a>
                        <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>
        <div>

{{--            <form action="{{route('contractor.daily_logs.form')}}" method="post" enctype="multipart/form-data">--}}
{{--                @csrf--}}
{{--                <input type="hidden" name="estimation_id" value="{{$id}}">--}}
{{--                <div class="date">--}}
{{--                </div>--}}
{{--                <div class="container">--}}
{{--                    <div class="row">--}}
{{--                        <div class="col-3">--}}
{{--                            <div>--}}
{{--                                <label>Select Date*</label>--}}
{{--                                @error('date')--}}
{{--                                <label class="btn btn-danger">{{$message}}</label>--}}
{{--                                @enderror--}}
{{--                                <div id="calendar"></div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col-3">--}}
{{--                            <div class="form-group">--}}
{{--                                <label>Select Start Time*</label>--}}
{{--                                <input type="text" class="form-control" placeholder="HH:MM AM/PM"--}}
{{--                                       pattern="^(0[1-9]|1[0-2]):[0-5][0-9] (AM|PM)$" name="start_time" required>--}}
{{--                                <small class="form-text text-muted">Format: HH:MM AM/PM</small>--}}
{{--                            </div>--}}
{{--                            <div class="form-group">--}}
{{--                                <label>Select End Time*</label>--}}
{{--                                <input type="text" class="form-control" placeholder="HH:MM AM/PM"--}}
{{--                                       pattern="^(0[1-9]|1[0-2]):[0-5][0-9] (AM|PM)$" name="end_time" required>--}}
{{--                                <small class="form-text text-muted">Format: HH:MM AM/PM</small>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div class="col-12">--}}
{{--                            <div class="form-group">--}}
{{--                                <label>Description*</label>--}}
{{--                                <input type="text" class="form-control" name="description" required>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div>--}}
{{--                            <div>--}}
{{--                                <label>Image*</label>--}}
{{--                                <input type="file" name="images[]" multiple>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div class="col-12">--}}
{{--                            <button class="btn themeBtn">Submit</button>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </form>--}}
        </div>
    </div>

@endsection
@push('script')
    <link href="{{asset('css/vanilla-calendar.min.css')}}" rel="stylesheet">
    <script src="{{asset('js/vanilla-calendar.min.js')}}" defer></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const calendar = new VanillaCalendar('#calendar');
            calendar.init();


            document.querySelector('#calendar').addEventListener('click', function (event) {
                const clickedElement = event.target.closest('.vanilla-calendar-day__btn');

                if (clickedElement) {
                    const selectedDate = clickedElement.getAttribute('data-calendar-day');
                    var linkHtml = '<input type="hidden" value="' + selectedDate + '" name="date">';
                    $('.date').html(linkHtml);
                }
            });


        });
    </script>
@endpush