@extends('layouts.user-app')
@section('content')
    @php
    $decodedContent = json_decode($estimation->other_service)
    @endphp
    <style>
        .service-dropdown-container {
            position: relative;
            display: inline-block;
        }

        .service-dropdown-toggle {
            cursor: pointer;
        }

        .service-dropdown-menu {
            display: none;
            position: absolute;
            z-index: 1000;
            border: 1px solid #ccc;
            background-color: #fff;
            min-width: 500px;
        }

        .service-dropdown-menu.active {
            display: block;
        }
    </style>

    <div class="col-md-9 layout">
        <div class="recentTable tablecard tablecard--contractor">
            <h2 class="mb-0">Estimation Jobs</h2>
            <table class="table table-responsive-lg">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">Service</th>
                    <th scope="col">Progress</th>
                    <th scope="col">Status</th>
                </tr>
                </thead>
                <tbody>
                @foreach($estimation->estimationServices as $service)

                    <tr>
                        <td>{{$service->service->title}}</td>
                        <td>{{$service->crew_progress}}</td>
                        <td>{{$service->status}}</td>


                    </tr>
                @endforeach

                @if($estimation->other_service != null)
                    @foreach($decodedContent as $services)
                        @foreach($services as $single)
                            <tr>
                                <td><p><b>Extra Service : </b>{{ $single->Service ?? '' }}</p></td>
                                <td>{{$single->Progress ?? ''}}%</td>
                                <td>{{$single->Status ?? ''}}</td>
                            </tr>
                        @endforeach
                    @endforeach
                @endif


                </tbody>
            </table>
        </div>
    </div>

@endsection
@push('script')
    <script>
        $(document).ready(function () {
            $('.service-dropdown-toggle').click(function () {
                $(this).siblings('.service-dropdown-menu').toggleClass('active');
            });
        });
    </script>
@endpush