@extends('layouts.head_office_app')
@section('title', 'Head office Settings')
<style>
    .history-inner-else-div {
        width: 60%;
        margin: auto;
        margin-top: 20px;
        text-align: center;
        padding: 30px;
        font-size: 24px;
        font-weight: 600;
        color: gray
    }

    .history-inner-div {
        width: 60%;
        margin: auto;
        margin-top: 20px;
    }

    .history-card {
        width: 80%;
        box-shadow: 0px 0px 6px 2px #e1dbdb;
        border: 2px solid rgb(221 216 216);
        border-radius: 8px;
        margin: auto;
        /* padding: 8px; */
    }

    .history-card-header {
        width: 100%;
        background-color: rgb(249, 250, 250);
        padding: 15px 2px;
        border-radius: 8px;
    }

    .history-card-header {
        width: 100%;
        background-color: rgb(249, 250, 250);
        padding: 15px 2px;
        border-radius: 8px;
    }

    .history-card-header span {
        padding: 0px 8px;
    }

    .history-card-body {
        width: 100%;
        margin-top: 5px;
        padding-bottom: 15px;
    }

    .item-heading {
        font-weight: 600;
    }

    .margin-div {
        width: 98%;
        margin: auto;
    }

    .item-inner-div {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-around;
        margin: 15px 0px;
    }

    .green {
        background-color: rgba(229, 252, 229, 0.7);
    }

    .red {
        background-color: rgba(243, 209, 209, 0.3);
    }

    .value-span {
        width: 100%;
        padding: 8px 3px;

        min-height: 40px;
    }

    .outer-val-span {
        width: 45%;
    }

    .right-arrow {
        width: 6%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .history-comp-arrow {
        width: 26px;
        /* margin-bottom: 15px; */
    }
</style>
@section('sub-header')

    <div class="container mx-auto">
        <a href="{{ route('head_office.contacts.edit', $id) }}" class="link text-info">Details</a>
        <a href="{{ route('head_office.contact_view_timeline', $id) }}" class="link text-info ms-4">Timeline</a>
        <a href="{{ route('head_office.contact_intelligence', $id) }}" class="link text-info ms-4">Intelligence</a>
        <a href="{{ route('head_office.contact_matchs', $id) }}" class="link text-info ms-4">Matches</a>
        <a href="{{ route('head_office.contact_history', $id) }}" class="link text-info ms-4">History</a>
    </div>
@endsection
@section('content')
    {{-- @if (isset($new_contact)) --}}
    <div class="d-flex justify-content-between w-100">
        @if ($history_data->isNotEmpty())
            <div class="history-inner-div">
                @foreach ($history_data as $data)
                    {{-- @dd($data) --}}
                    <div class="history-card">
                        <div class="history-card-header">
                            <span> {{ $data->contactHistoryToUser->first_name }} <strong
                                    style="color: {{ $data->action == 'added' ? 'green' : 'red' }}">{{ $data->action }}</strong>
                                {{ $data->type }}
                                {{ $data->created_at->diffForHumans() }}</span>
                        </div>
                        <div class="margin-div">
                            <div class="history-card-body">

                                <div class="item-inner-div"
                                    style="@if ($data->action == 'added') display:flex; justify-content:start; @endif">
                                    <div class="outer-val-span">
                                        {{-- <div class="item-heading"><span>Removed Tags:</span></div> --}}
                                        <div class="value-span @if ($data->action == 'added') green @else red @endif">
                                            {{ $data->name }}
                                        </div>
                                    </div>

                                    @if ($data->action == 'removed')
                                        <span class="right-arrow">

                                            <img src="{{ asset('webflow_assets/home-about/images/arrow-20right.png') }}"
                                                loading="lazy" alt="" class="history-comp-arrow" />

                                        </span>
                                        <div class="outer-val-span">
                                            {{-- <div class="item-heading"><span>Added Tags:</span></div> --}}
                                            <div class="value-span green">
                                                {{ $data->removed }}
                                            </div>
                                        </div>
                                    @endif
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="d-flex w-100 justify-content-center pt-3 pb-3">
                        <div style="border: 1px solid rgb(163, 161, 161) !important; height: 40px;"></div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="history-inner-else-div">
                <span>Data not found</span>
            </div>
        @endif
    </div>


    {{-- @endif --}}
    <script src="{{ asset('admin_assets/js/select2.min.js') }}"></script>
    <script src="{{ asset('admin_assets/js/intlTelInput-jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('tribute/tribute.min.js') }}"></script>
    <script src="{{ asset('admin_assets/speech-to-text.js') }}"></script>
@endsection