@php
    use Illuminate\Support\Facades\Auth;
    $user = Auth::guard('user')->user();
    $share_cases = $user->share_cases->where('removed_by_user', 0);
@endphp
@foreach ($records as $date => $records)
    <div style="margin-top: 40px;" class="record-main-wrap">
        <div class="line line-date date_{{ date('Y_m_d', strtotime($date)) }}">
            <div class="timeline-label" style="background: {{ $location->organization_setting_assignment->organization_setting->location_timeline_heading_box ?? '#5ac1b6' }}; color: {{ $location->organization_setting_assignment->organization_setting->location_timeline_heading_box_text_color ?? '#000000' }}">
                @if ($date == date('Y-m-d'))
                    TODAY
                @else
                    {{ date(
                        'D jS F
                                                                                                                                                                    Y',
                        strtotime($date),
                    ) }}
                @endif
            </div>
        </div>
        @foreach ($records as $key => $record)
            @php
                $normalised_summary = $record->location_summary;
                $normalised_record_id = $record->id;
                if(isset($record->record_id)){
                    $record = $record->earliest_linked_record();
                }
                if(!isset($record->record_id)){
                    $latest_linked_record = $record->latest_linked_record();
                    if(isset($latest_linked_record)){
                        $normalised_summary = $latest_linked_record->location_summary;
                    }
                }
            @endphp
            @if (isset($record->form))
                <div
                    class="line  nearmiss_hidden   right-record nearmiss_record nearmiss_{{ $record->id }} nearmiss_status_{{ strtolower(str_replace(' ', '_', $record->status)) }}">
                    
                    <div class="content-timeline" style=" padding-bottom:60px;padding-top:20px"
                        data-color="{{ isset($record->form->color_code) ? $record->form->color_code : '#4dd6f0' }}">
                        <div class="actions">
                            
                        </div>
                        <div class="mb-2 mt-0 d-flex align-items-center justify-content-between">
                            <p class="fw-bold mb-0" style="color: var(--location-section-heading-color)">{{ $record->created_at->format('h:i A') }}</p>
                            <div class="d-flex align-items-center justify-content-between gap-1" >
                                @if (isset($record->reported_location) && (isset($record->reported_location_id) && $record->location_id != $record->reported_location_id || $record->reported_location_id != $location->id))
                                    <span class="badge tooltip-container"  style="background:#4572C4;padding-block:0.5rem;border-radius:5px;">Other site <span class="tooltip-text">
                                        This submission relates to {{ $record->reported_location->trading_name }} </span></span>
                                @endif
                                @if (isset($record->recorded_case))
                                <div class="d-flex align-items-center gap-1" style="font-size: 14px;">
                                    <svg width="20" height="20" class="me-1" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M16 7C16 6.07003 16 5.60504 15.8978 5.22354C15.6204 4.18827 14.8117 3.37962 13.7765 3.10222C13.395 3 12.93 3 12 3C11.07 3 10.605 3 10.2235 3.10222C9.18827 3.37962 8.37962 4.18827 8.10222 5.22354C8 5.60504 8 6.07003 8 7M12.8 17.5H17.7C17.98 17.5 18.12 17.5 18.227 17.4455C18.3211 17.3976 18.3976 17.3211 18.4455 17.227C18.5 17.12 18.5 16.98 18.5 16.7V14.3C18.5 14.02 18.5 13.88 18.4455 13.773C18.3976 13.6789 18.3211 13.6024 18.227 13.5545C18.12 13.5 17.98 13.5 17.7 13.5H12.8C12.52 13.5 12.38 13.5 12.273 13.5545C12.1789 13.6024 12.1024 13.6789 12.0545 13.773C12 13.88 12 14.02 12 14.3V16.7C12 16.98 12 17.12 12.0545 17.227C12.1024 17.3211 12.1789 17.3976 12.273 17.4455C12.38 17.5 12.52 17.5 12.8 17.5ZM6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V11.8C22 10.1198 22 9.27976 21.673 8.63803C21.3854 8.07354 20.9265 7.6146 20.362 7.32698C19.7202 7 18.8802 7 17.2 7H6.8C5.11984 7 4.27976 7 3.63803 7.32698C3.07354 7.6146 2.6146 8.07354 2.32698 8.63803C2 9.27976 2 10.1198 2 11.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z"
                                                stroke="rgb(103,105,121)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    <p class="mb-0" style="font-size: 14px;">Case  #{{$record->recorded_case->id}}</p>
                                </div>
                                @endif
                            </div>
                        </div>
                        <h2 class="timeline_category_title mb-0">
                            @php
                                    $pending_forms = $record->get_pending_forms(true);
                                @endphp
                                
                            <span class="d-flex align-items-center gap-1">
                                @if (!empty($record->form->display_name))
                                    {{ $record->form->display_name }}
                                @else
                                    {{ $record->form->name }}
                                @endif
                            </span>

                        <div class="details details_{{ $record->id }}" style="display:none">

                            @foreach ($record->data as $data)
                                @if ($data->question)
                                    <p>
                                        <span class="detail-title"> {{ $data->question->question_name }}: </span>
                                        {{ $data->question_value }}
                                    </p>
                                    <br>
                                @endif
                            @endforeach
                            @if ($record->recorded_case && count($record->recorded_case->root_cause_analysis) > 0)
                                @foreach ($record->recorded_case->root_cause_analysis as $request)
                                    @if (!$request->status)
                                        <a target="_blank"
                                            href="{{ route('be_spoke_forms.be_spoke_form.root_cause_analysis_request', [$request->id, $request->type]) }}">{{ $request->root_cause_analysis_type }}</a>
                                    @endif
                                @endforeach
                            @endif
                        </div>





                        {{-- Start of timeline recores show --}}

                    
                    <div>
                        @if (isset($normalised_summary))
                            @foreach ($normalised_summary as $data)
                                @if (isset($data['value']))
                                    <div style="line-height: 15px;">

                                        <p class="m-0 mt-1"
                                            style="font-size:12px; color:gray;line-height: inherit;">
                                            {{ $data['label'] ?? ' ' }}
                                        </p>
                                        @if (is_array($data['value']))
                                            @foreach ($data['value'] as $item)
                                                <p class="m-0" style="font-size: 13px">{{ $item ?? ' ' }}</p>
                                            @endforeach
                                        @else
                                            @if (isset($data['rating_icon']) && $data['rating_icon'] == 'stars')
                                                <p class="m-0" style="font-size: 13px">
                                                    @for ($i = 1; $i <= $data['total_options']; $i++)
                                                        <i class="fa fa-star" {{ $i <= $data['value'] ? 'style=color:#30ba9f' : 'style=color:#dddfeb' }} aria-hidden="true"></i>
                                                    @endfor
                                                </p>
                                            @elseif(isset($data['rating_icon']) && $data['rating_icon'] == 'label')
                                                <p class="m-0 d-flex gap-2" style="font-size: 13px">
                                                    @for ($i = 1; $i <= $data['total_options']; $i++)
                                                        <span class="rating_item p-1 px-2 {{$i == $data['value'] ? 'selected' : ''}}" style="min-width: fit-content;height: fit-content;font-size: 12px" >{{$i}}</span>
                                                    @endfor
                                                </p>
                                            @else
                                            <p class="m-0" style="font-size: 13px">{{ $data['value'] }}</p>
                                            @endif
                                        @endif
                                    </div>
                                @endif
                            @endforeach
                        @endif
                    </div>

                    @if ($record->LfpseSubmissions->count() > 0)
                        <a class=" mt-3 fw-bold" style="font-size: 15px; color:rgb(104, 104, 104);" href="{{ route('be_spoke_forms.be_spoke_form.records_view', $record->id) }}?tab=lfpse">LFPSE Submission</a>
                            <p class="mb-0 text-dark" style="font-size: 13px;"> 
                                @foreach ($record->LfpseSubmissions as $s)
                                <td >Reference No. {{$s->reference_id}}</td>
                            @endforeach</p>
                    @endif
                    @if (count($pending_forms) > 0)
                            <p class="mb-0 text-danger fw-bold" style="font-size: 12px; bottom: 5px; left: 5px;position:absolute;"> &bull; {{count($pending_forms)}} Incomplete Form - Action Needed</p>
                    @endif
                        <div class="actions-wrap-btn card-action">
                            @if ($record->canDeleteSubmission())
                            <a href="{{ route('record-soft-delete', ['id' => $record->id]) }}"
                                style="box-shadow: none;"><svg title="Delete" width="20" height="20"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M16 6V5.2C16 4.0799 16 3.51984 15.782 3.09202C15.5903 2.71569 15.2843 2.40973 14.908 2.21799C14.4802 2 13.9201 2 12.8 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6"
                                        stroke="#dadada" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg></a>
                                @endif
                            @if ($record->form->allow_responder_update)
                                <a href="{{ route('be_spoke_forms.be_spoke_form.records_view', $record->id) }}?tab=updates"
                                    style="box-shadow: none;"><svg width="20" height="20"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke="#dadada"
                                            d="M4 16.2422C2.79401 15.435 2 14.0602 2 12.5C2 10.1564 3.79151 8.23129 6.07974 8.01937C6.54781 5.17213 9.02024 3 12 3C14.9798 3 17.4522 5.17213 17.9203 8.01937C20.2085 8.23129 22 10.1564 22 12.5C22 14.0602 21.206 15.435 20 16.2422M8 16L12 12M12 12L16 16M12 12V21"
                                            stroke="black" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                </a>
                            @endif


                            @if ($record->recorded_case && $record->recorded_case->status !== 'closed')
                                @if ($record->form->allow_editing_state !== 'disable' && is_null($record->all_linked_records()->last()->id) != true && $record->canEdit())
                                    <a href="/bespoke_form_v3/#!/edit/{{ $record->all_linked_records()->last()->id }}?case_id={{ $record->recorded_case->id }}&location_id={{ $location->id }}&rec_id={{ $record->id }}"
                                        
                                        style="box-shadow: none;"><svg title="Edit" width="20"
                                        height="20" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                        d="M18 10L14 6M2.49997 21.5L5.88434 21.124C6.29783 21.078 6.50457 21.055 6.69782 20.9925C6.86926 20.937 7.03242 20.8586 7.18286 20.7594C7.35242 20.6475 7.49951 20.5005 7.7937 20.2063L21 7C22.1046 5.89543 22.1046 4.10457 21 3C19.8954 1.89543 18.1046 1.89543 17 3L3.7937 16.2063C3.49952 16.5005 3.35242 16.6475 3.24061 16.8171C3.1414 16.9676 3.06298 17.1307 3.00748 17.3022C2.94493 17.4954 2.92195 17.7021 2.87601 18.1156L2.49997 21.5Z"
                                        stroke="#dadada" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    </svg></a>
                                @endif
                                @endif


                                <a href="{{ route('be_spoke_forms.be_spoke_form.records_view', $normalised_record_id) }}"
                                    style="display: flex; align-items: center; border: none; border-radius: 5px; padding: 5px 10px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); cursor: pointer; font-size: 12px; text-decoration: none;
                                    background-color: {{ $location->organization_setting_assignment->organization_setting->location_button_color ?? '#5ac1b6' }};
                                    color: {{ $location->organization_setting_assignment->organization_setting->location_button_text_color ?? '#000000' }};" >
                                    View
                                    <svg @auth style="
                                            width: 24px;
                                            height: 24px;
                                            transform: scale(0.7);
                                    "@endauth viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8 5L16 12L8 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>    
                                </a>

                                @if (count($record->getCaseFeedbacks()) != 0)
                                    <a href="{{ route('be_spoke_forms.be_spoke_form.records_view', $record->id) }}?tab=feedbacks"
                                        style="display: flex; align-items: center; background-color: white; border: 2px solid #000000; border-radius: 5px; padding: 5px 10px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); cursor: pointer; font-size: 12px; text-decoration: none; color: black;">
                                        <svg width="20" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M11 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V14C3 14.93 3 15.395 3.10222 15.7765C3.37962 16.8117 4.18827 17.6204 5.22354 17.8978C5.60504 18 6.07003 18 7 18V20.3355C7 20.8684 7 21.1348 7.10923 21.2716C7.20422 21.3906 7.34827 21.4599 7.50054 21.4597C7.67563 21.4595 7.88367 21.2931 8.29976 20.9602L10.6852 19.0518C11.1725 18.662 11.4162 18.4671 11.6875 18.3285C11.9282 18.2055 12.1844 18.1156 12.4492 18.0613C12.7477 18 13.0597 18 13.6837 18H15.2C16.8802 18 17.7202 18 18.362 17.673C18.9265 17.3854 19.3854 16.9265 19.673 16.362C20 15.7202 20 14.8802 20 13.2V13M20.1213 3.87868C21.2929 5.05025 21.2929 6.94975 20.1213 8.12132C18.9497 9.29289 17.0503 9.29289 15.8787 8.12132C14.7071 6.94975 14.7071 5.05025 15.8787 3.87868C17.0503 2.70711 18.9497 2.70711 20.1213 3.87868Z"
                                                stroke="black" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </svg>
                                        <span
                                            style="margin-left: 6px; color:black; font-size: 14px;">Feedback</span>

                                        @if ($user->getCaseFeedbacks()->where('mark_read', 1)->count() == 1)
                                            <svg width="20px" height="20px" viewBox="0 -0.5 25 25"
                                                fill="#2BAFA5" xmlns="http://www.w3.org/2000/svg">
                                                <path fill="#2BAFA5"
                                                    d="M5.03033 11.4697C4.73744 11.1768 4.26256 11.1768 3.96967 11.4697C3.67678 11.7626 3.67678 12.2374 3.96967 12.5303L5.03033 11.4697ZM8.5 16L7.96967 16.5303C8.26256 16.8232 8.73744 16.8232 9.03033 16.5303L8.5 16ZM17.0303 8.53033C17.3232 8.23744 17.3232 7.76256 17.0303 7.46967C16.7374 7.17678 16.2626 7.17678 15.9697 7.46967L17.0303 8.53033ZM9.03033 11.4697C8.73744 11.1768 8.26256 11.1768 7.96967 11.4697C7.67678 11.7626 7.67678 12.2374 7.96967 12.5303L9.03033 11.4697ZM12.5 16L11.9697 16.5303C12.2626 16.8232 12.7374 16.8232 13.0303 16.5303L12.5 16ZM21.0303 8.53033C21.3232 8.23744 21.3232 7.76256 21.0303 7.46967C20.7374 7.17678 20.2626 7.17678 19.9697 7.46967L21.0303 8.53033ZM3.96967 12.5303L7.96967 16.5303L9.03033 15.4697L5.03033 11.4697L3.96967 12.5303ZM9.03033 16.5303L17.0303 8.53033L15.9697 7.46967L7.96967 15.4697L9.03033 16.5303ZM7.96967 12.5303L11.9697 16.5303L13.0303 15.4697L9.03033 11.4697L7.96967 12.5303ZM13.0303 16.5303L21.0303 8.53033L19.9697 7.46967L11.9697 15.4697L13.0303 16.5303Z"
                                                    fill="#000000" />
                                            </svg>
                                        @endif


                                    </a>
                                @endif
                        </div>
                    </div>
                </div>
            @endif
            <!-- Modal -->
            <div class="modal modal-md fade" id="delete_model_{{ $record->id }}" tabindex="-1" role="dialog"
                aria-hidden="true">
                <div class="modal-dialog modal-md" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"><span class="text-danger">Why are you deleting this?</span></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="mt-2">
                                <form method="post" action="{{ route('location.near_miss.delete', $record->id) }}">
                                    @csrf
                                    <div class="form-group">
                                        <label>Reason for deleting this near misss?</label>
                                        <input type="text" name="delete_reason" class="form-control" required
                                            value="">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-info"
                                            data-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-info">Delete</button>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
                    @endforeach

    </div>
@endforeach

<input type="hidden" value="{{ route('location.document.uploadHashed') }}" id="route_document">
<input type="hidden" value="{{ route('location.document.removedHashed') }}" id="route_document_removedHashed">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.content-timeline').each(function() {
            var color = $(this).data('color');
            $(this).css('--location-form-setting-color', color);
        });
    });
</script>
<script src="{{ asset('js/alertify.min.js') }}"></script>
@if (Session::has('success'))
    <script>
        alertify.success("{{ Session::get('success') }}");
    </script>
@elseif(Session::has('error'))
    <script>
        alertify.success("{{ Session::get('error') }}");
    </script>
@endif