@php use Carbon\Carbon;$idcount=0; @endphp
<div class="row" style="width: 100%;">
    <div class="col-12">

        <ul class="nav nav-pills">
            <li class="active">
                <a href="#" class="btn btn-primary"><i class="far fa-table"></i> Table</a>
            </li>
            <li>
                <a href="#" class="btn btn-outline-secondary"><i class="far fa-clock"></i>Timeline</a>
            </li>
        </ul>

        <div class="container-fluid">
            <div class="row text-center justify-content-center mb-5">
                <div class="col-xl-6 col-lg-8">
                    <h4 class="font-weight-bold hbg-dark">Document history.</h4>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
                        @foreach($docums as $doc)
                                <div class="timeline-step">
                                    <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-original-title="2003">
                                        <div class="inner-circle @if($idcount==0)inner-circle-active @else inner-circle @endif"></div>

                                        @if($idcount==0)
                                            <p class="h6 mt-3 mb-1">
                                            @if(isset($doc['O_DATE']))
                                                {{ Carbon::parse($human->data_scan)->format("d-M-Y") }}
                                            @else
                                                -
                                            @endif
                                            </p>
                                        @else

                                            <p class="h6 mt-3 mb-1">
                                                @if(isset($doc['O_DATE']))
                                                    {{ Carbon::parse($doc['O_DATE'])->format("d-M-Y") }}
                                                @else
                                                    -
                                                @endif
                                            </p>
                                        @endif


                                        <p class="h6 text-muted mb-0 mb-lg-0">Serial#: {{ $doc['SER_NUM'] }}</p>

                                        @if($idcount==0)
                                            <span class="badge badge-success">Current</span>
                                        @else
                                            <span class="badge badge-secondary">Replaced</span>
                                        @endif
                                    </div>
                                </div>
                            @php $idcount++; @endphp
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-10 offset-1">
        @php
            $headings = [
                'ID No.',
                'Serial No.',
                'Issued on.',
                'Place of Issue.',
                'Status.'
            ];
            $count=0
        @endphp
        <x-adminlte-datatable id="clients-table searchResultsCard" :heads="$headings">
            @foreach($docums as $doc)

                <tr>
                    <td>
                        @if(isset($doc['O_PID']))
                            <p class="field-value-text">{{ $doc['O_PID'] }}</p>
                        @else
                            <div class="skeleton skeleton-text short"></div>
                        @endif
                    </td>
                    <td>
                        @if(isset($doc['SER_NUM']))
                            <p class="field-value-text">{{ $doc['SER_NUM'] }}</p>
                        @else
                            <div class="skeleton skeleton-text short"></div>
                        @endif
                    </td>

                    <td>
                        @if($count==0)
                            @if(isset($doc['O_DATE']))
                                {{ Carbon::parse($human->data_scan)->format("d-M-Y") }}
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                        @else
                            @if(isset($doc['O_DATE']))
                                {{ Carbon::parse($doc['O_DATE'])->format("d-M-Y") }}
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                        @endif

                    </td>

                    <td>

                           @if(!empty($doc['PRODUCT']))
                            <p class="field-value-text">{{ $doc['PRODUCT'] }}</p>
                            @else
                              <div class="skeleton skeleton-text short"></div>
                            @endif

                    </td>
                    <td>
                        @if($count==0)
                            <span class="badge badge-success">
                             <i class="fa fa-check-circle"></i>Current</span>
                        @else
                            <span class="badge badge-secondary">Replaced</span>
                        @endif
                    </td>
                </tr>
                @php $count++; @endphp
            @endforeach

            @if(isset($docums))<p>Replaced: <strong>{{ count($docums)-1 }}</strong> times</p>@endif

        </x-adminlte-datatable>
    </div>

<style>
    .timeline-steps {
        display: flex;
        justify-content: center;
        flex-wrap: wrap
    }

    .timeline-steps .timeline-step {
        align-items: center;
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 1rem
    }

    @media (min-width:768px) {
        .timeline-steps .timeline-step:not(:last-child):after {
            content: "";
            display: block;
            border-top: .25rem dotted #3b82f6;
            width: 3.46rem;
            position: absolute;
            left: 7.5rem;
            top: .3125rem
        }
        .timeline-steps .timeline-step:not(:first-child):before {
            content: "";
            display: block;
            border-top: .25rem dotted #3b82f6;
            width: 3.8125rem;
            position: absolute;
            right: 7.5rem;
            top: .3125rem
        }
    }

    .timeline-steps .timeline-content {
        width: 10rem;
        text-align: center
    }

    .timeline-steps .timeline-content .inner-circle {
        border-radius: 1.5rem;
        height: 1rem;
        width: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #3b82f6
    }

    .timeline-steps .timeline-content .inner-circle:before {
        content: "";
        background-color: #3b82f6;
        display: inline-block;
        height: 3rem;
        width: 3rem;
        min-width: 3rem;
        border-radius: 6.25rem;
        opacity: .5
    }
    .timeline-steps .timeline-content .inner-circle-active:before{
        content: "";
        background-color: #8ff414;
        display: inline-block;
        height: 3rem;
        width: 3rem;
        min-width: 3rem;
        border-radius: 6.25rem;
        opacity: .5
    }
</style>
</div>

