@extends('layouts.app')

@section('content')

<style>
    /* Same styles as before */
    * {
        box-sizing: border-box;
    }

    body {
        background-color: #474e5d;
        font-family: Helvetica, sans-serif;
    }

    .timeline {
        position: relative;
        max-width: 600px; 
        margin-left : 35%;
        padding-top : 50px; 
    }

    .timeline::after {
        content: '';
        position: absolute;
        width: 6px;
        background-color: white;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
    }

    .container {
        padding: 10px 40px;
        position: relative;
        background-color: inherit;
        width: 50%;
    }

    .container::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        right: -17px;
        background-color: white;
        border: 4px solid #FF9F55;
        top: 15px;
        border-radius: 50%;
        z-index: 1;
    }

    .left {
        left: -200px;
    }

    .right {
        left: 33%;
    }

    .left::before {
        content: " ";
        height: 0;
        position: absolute;
        top: 22px;
        width: 0;
        z-index: 1;
        right: 30px;
        border: medium solid white;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent white;
    }

    .right::before {
        content: " ";
        height: 0;
        position: absolute;
        top: 22px;
        width: 0;
        z-index: 1;
        left: 30px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    .right::after {
        left: -16px;
    }

    .content {
        padding: 20px 30px;
        background-color: white;
        position: relative;
        border-radius: 16px;
    }

    @media screen and (max-width: 600px) {
        .timeline::after {
            left: 31px;
        }

        .container {
            padding-left: 70px;
            padding-right: 25px;
        }

        .container::before {
            left: 60px;
            border: medium solid white;
            border-width: 10px 10px 10px 0;
            border-color: transparent white transparent transparent;
        }

        .left::after, .right::after {
            left: 15px;
            height: 500px;
        }

        .right {
            left: 0%;
        }
    }
</style>

<section class="col-sm-12">
    <div class="timeline">
        @foreach($receivedDates as $index => $receivedDate)
            <div class="container {{ $index % 2 == 0 ? 'left' : 'right' }}">
                <div class="content">
                    <h4>{{ \Carbon\Carbon::parse($receivedDate)->format('M/Y') }}</h4>  <!-- Formatting the year from the received date -->
                    <!-- <p>{{ $models[$index] }}</p>  //Display the corresponding asset -->
                    <p>Holder : {{ $models[$index]->holder->name }}</p>
                </div>
            </div>
        @endforeach
    </div>
</section>

@endsection