@extends('layouts.master')

@section('styles')

@endsection

@section('content')

                    <div class="content">

                        <!-- Start::main-content -->
                        <div class="main-content">

                            <!-- Page Header -->
                            <div class="block justify-between page-header sm:flex">
                                <div>
                                    <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium"> Timeline</h3>
                                </div>
                                <ol class="flex items-center whitespace-nowrap min-w-0">
                                    <li class="text-sm">
                                        <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate" href="javascript:void(0);">
                                        Pages
                                        <i class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
                                        </a>
                                    </li>
                                    <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
                                        Timeline
                                    </li>
                                </ol>
                            </div>
                            <!-- Page Header Close -->

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Timeline -01</h5>
                                </div>
                                <div class="box-body">
                                    <div class="flex flex-row">
                                    <div class="mx-auto relative">
                                        <div class="h-full w-6 flex items-center justify-center">
                                        <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
                                        </div>
                                        <div
                                        class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
                                        <img src="{{asset('build/assets/img/users/1.jpg')}}" class="rounded-full" alt="timeline-img">
                                        </div>
                                    </div>
                                    <div class="flex w-full pb-8">
                                        <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
                                        <div class="sm:flex">
                                            <h3 class="my-auto text-gray-500 dark:text-white/70"><span class="text-dark dark:text-white">Elida
                                                Distefa</span> added a comment to <span class="text-dark dark:text-white">Anderson
                                                Itumay</span> post</h3>
                                            <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
                                            Today, 04:30 PM
                                            </p>
                                        </div>
                                        <div class="flex -space-x-2 rtl:space-x-reverse">
                                            <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}"
                                            alt="Image Description">
                                            <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}"
                                            alt="Image Description">
                                            <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/2.jpg')}}"
                                            alt="Image Description">
                                            <img class="avatar avatar-xs rounded-full" src="{{asset('build/assets/img/users/3.jpg')}}"
                                            alt="Image Description">
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="flex flex-row">
                                    <div class="mx-auto relative">
                                        <div class="h-full w-6 flex items-center justify-center">
                                        <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
                                        </div>
                                        <div
                                        class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
                                        <img src="{{asset('build/assets/img/users/3.jpg')}}" class="rounded-full" alt="timeline-img">
                                        </div>
                                    </div>
                                    <div class="flex w-full pb-8">
                                        <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
                                        <div class="sm:flex">
                                            <h3 class="my-auto text-gray-500 dark:text-white/70"><span class="text-dark dark:text-white">Samantha
                                                Melon</span> added a &#128526; reaction to <span class="text-dark dark:text-white">Anderson
                                                Itumay</span> post</h3>
                                            <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
                                            Today, 04:30 PM
                                            </p>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="flex flex-row">
                                    <div class="mx-auto relative">
                                        <div class="h-full w-6 flex items-center justify-center">
                                        <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
                                        </div>
                                        <div
                                        class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
                                        <img src="{{asset('build/assets/img/users/2.jpg')}}" class="rounded-full" alt="timeline-img">
                                        </div>
                                    </div>
                                    <div class="flex w-full pb-8">
                                        <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
                                        <div class="sm:flex">
                                            <h3 class="my-auto text-gray-500 dark:text-white/70"><span class="text-dark dark:text-white">Samantha
                                                Melon</span> like an Image</h3>
                                            <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
                                            Today, 05:45 PM
                                            </p>
                                        </div>
                                        <div><img src="{{asset('build/assets/img/gallery/2.jpg')}}" class="avatar avatar-lg rounded-sm" alt="profile-img">
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="flex flex-row">
                                    <div class="mx-auto relative">
                                        <div class="h-full w-6 flex items-center justify-center">
                                        <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
                                        </div>
                                        <div
                                        class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
                                        <img src="{{asset('build/assets/img/users/15.jpg')}}" class="rounded-full" alt="timeline-img">
                                        </div>
                                    </div>
                                    <div class="flex w-full pb-8">
                                        <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
                                        <div class="sm:flex">
                                            <h3 class="my-auto text-gray-500 dark:text-white/70"><span class="text-dark dark:text-white">Dennis
                                                Trexy</span> Shared an image</h3>
                                            <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
                                            yesterday, 10:20 am
                                            </p>
                                        </div>
                                        <div class="space-y-3">
                                            <p class="text-xs text-gray-500 dark:text-white/70">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                            Nostrum sit consequuntur quia aperiam quibusdam rerum ut! Id ducimus nobis rerum modi
                                            veniam odit totam rem asperiores adipisci, sed quia voluptas?</p>
                                            <img src="{{asset('build/assets/img/gallery/5.jpg')}}" class="avatar avatar-lg rounded-sm" alt="profile-img">
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="flex flex-row">
                                    <div class="mx-auto relative">
                                        <div class="h-full w-6 flex items-center justify-center">
                                        <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
                                        </div>
                                        <div
                                        class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
                                        <img src="{{asset('build/assets/img/users/21.jpg')}}" class="rounded-full" alt="timeline-img">
                                        </div>
                                    </div>
                                    <div class="flex w-full pb-8">
                                        <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
                                        <div class="sm:flex">
                                            <h3 class="my-auto text-gray-500 dark:text-white/70"><span class="text-dark dark:text-white">Anesthesia</span>
                                            commented on today's meeting</h3>
                                            <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
                                            yesterday, 05:06 pm
                                            </p>
                                        </div>
                                        <div
                                            class="border border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 p-4 rounded-sm">
                                            <p class="text-xs text-gray-500 dark:text-white/70">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                            Nostrum sit consequuntur quia aperiam quibusdam rerum ut! Id ducimus nobis rerum modi
                                            veniam odit totam rem asperiores adipisci, sed quia voluptas?</p>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="flex flex-row">
                                    <div class="mx-auto relative">
                                        <div class="h-full w-6 flex items-center justify-center">
                                        <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
                                        </div>
                                        <div
                                        class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px] leading-[2.3] text-gray-800 dark:text-gray-800">
                                        H
                                        </div>
                                    </div>
                                    <div class="flex w-full pb-8">
                                        <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
                                        <div class="sm:flex">
                                            <h3 class="my-auto text-gray-500 dark:text-white/70"><span class="text-dark dark:text-white">Harvey
                                                Mattos</span> Followed You</h3>
                                            <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
                                            03-12-20222, 12:06 pm
                                            </p>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="flex flex-row">
                                    <div class="mx-auto relative">
                                        <div class="h-full w-6 flex items-center justify-center">
                                        </div>
                                        <div
                                        class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
                                        <img src="{{asset('build/assets/img/users/15.jpg')}}" class="rounded-full" alt="timeline-img">
                                        </div>
                                    </div>
                                    <div class="flex w-full">
                                        <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
                                        <div class="sm:flex">
                                            <h3 class="my-auto text-gray-500 dark:text-white/70"><span class="text-dark dark:text-white">Anesthesia</span>
                                            5 Days left for Montly submission of progress report </h3>
                                            <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
                                            02-12-2022, 6:20 pm
                                            </p>
                                        </div>
                                        <div class="border border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 p-4 rounded-sm">
                                            <p class="text-xs text-gray-500 dark:text-white/70 mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum sit consequuntur quia aperiam quibusdam rerum ut! </p>
                                            <p class="text-xs text-gray-500 dark:text-white/70">Lorem ipsum dolor sit amet consectetur adipisicing elit.veniam odit totam rem asperiores adipisci, sed quia voluptas?</p>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Timeline -02</h5>
                                </div>
                                <div class="box-body">
                                    <div class="relative">
                                    <div class="timeline-start"></div>
                                    <div class="timeline-line"></div>
                                    <div class="timeline">
                                        <div class="timeline-main">
                                        <div class="timeline-left">
                                            <div class="timeline-body">
                                            <div class="box">
                                                <div class="box-body p-4">
                                                <h6 class="font-semibold text-base mb-2">Marsha Mellow updated his status</h6>
                                                <p class="text-xs text-gray-500 dark:text-white/70">Nonumy erat nonumy dolores duo ea sit, ipsum sed amet aliquyam magna kasd at. Dolor erat sit sed sea et dolor, justo dolor ipsum dolore voluptua. Sed ipsum sed.</p>
                                                </div>
                                                <div class="box-footer bg-transparent p-4">
                                                <div class="sm:space-y-0 space-y-2 sm:flex items-center justify-between">
                                                    <div class="sm:flex items-center sm:space-x-3 space-x-0 sm:space-y-0 space-y-2 rtl:space-x-reverse">
                                                    <div class="flex">
                                                        <img class="avatar avatar-sm ring-0 rounded-full" src="{{asset('build/assets/img/users/2.jpg')}}" alt="avatar">
                                                    </div>
                                                    <div>
                                                        <p class="text-slate-700 font-semibold text-sm dark:text-white">
                                                        Json Taylor
                                                        </p>
                                                        <p class="text-xs text-gray-500 dark:text-white/70">
                                                        20 min ago
                                                        </p>
                                                    </div>
                                                    </div>
                                                    <div class="space-x-0 sm:space-x-2 sm:text-end flex">
                                                    <a href="javascript:void(0);" class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex"><i class="text-xs ri ri-heart-line"></i><span class="my-2">30</span></a>
                                                    <a href="javascript:void(0);" class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex"><i class="text-xs ri ri-thumb-up-line"></i><span class="my-2">25k</span></a>
                                                    </div>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="bg-warning text-white timeline-icon">
                                            <i class="ri ri-mail-line text-lg leading-none"></i>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="timeline">
                                        <div class="timeline-main">
                                        <div class="timeline-right">
                                            <div class="timeline-body">
                                            <div class="box">
                                                <div class="box-body p-4">
                                                <h6 class="font-semibold text-base mb-2">Job Meeting</h6>
                                                <p class="text-xs text-gray-500 dark:text-white/70">Invidunt dolor justo gubergren sit voluptua ipsum lorem sanctus, justo dolores dolor dolore stet justo dolor. Eos ipsum rebum diam..</p>
                                                </div>
                                                <div class="box-footer bg-transparent p-4">
                                                <div class="sm:space-y-0 space-y-2 sm:flex items-center justify-between">
                                                    <div class="sm:flex items-center sm:space-x-3 space-x-0 sm:space-y-0 space-y-2 rtl:space-x-reverse">
                                                    <div class="flex">
                                                        <img class="avatar avatar-sm ring-0 rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="avatar">
                                                    </div>
                                                    <div>
                                                        <p class="text-slate-700 font-semibold text-sm dark:text-white">
                                                        Anderson Itumay
                                                        </p>
                                                        <p class="text-xs text-gray-500 dark:text-white/70">
                                                        11 Dec 2022
                                                        </p>
                                                    </div>
                                                    </div>
                                                    <div class="space-x-0 sm:space-x-2 sm:text-end flex">
                                                    <a href="javascript:void(0);" class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex"><i class="text-xs ri ri-heart-line"></i><span class="my-2">30</span></a>
                                                    <a href="javascript:void(0);" class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex"><i class="text-xs ri ri-thumb-up-line"></i><span class="my-2">25k</span></a>
                                                    </div>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="bg-secondary text-white timeline-icon">
                                            <i class="ri-briefcase-4-line text-lg leading-none"></i>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="timeline">
                                        <div class="timeline-main">
                                        <div class="timeline-left">
                                            <div class="timeline-body">
                                            <div class="box">
                                                <div class="box-body p-4">
                                                <h6 class="font-semibold text-base mb-2">Clark Kent posted on timeline</h6>
                                                <p class="text-xs text-gray-500 dark:text-white/70">Accusam et et stet invidunt at duo, ipsum no takimata est eos magna dolore sed, amet diam sea no diam.</p>
                                                </div>
                                                <div class="box-footer bg-transparent p-4">
                                                <div class="sm:space-y-0 space-y-2 sm:flex items-center justify-between">
                                                    <div class="sm:flex items-center sm:space-x-3 space-x-0 sm:space-y-0 space-y-2 rtl:space-x-reverse">
                                                    <div class="flex">
                                                        <img class="avatar avatar-sm ring-0 rounded-full" src="{{asset('build/assets/img/users/21.jpg')}}" alt="avatar">
                                                    </div>
                                                    <div>
                                                        <p class="text-slate-700 font-semibold text-sm dark:text-white">
                                                        Harvey Mattos
                                                        </p>
                                                        <p class="text-xs text-gray-500 dark:text-white/70">
                                                        11 Dec 2022
                                                        </p>
                                                    </div>
                                                    </div>
                                                    <div class="space-x-0 sm:space-x-2 sm:text-end flex">
                                                    <a href="javascript:void(0);" class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex"><i class="text-xs ri ri-heart-line"></i><span class="my-2">30</span></a>
                                                    <a href="javascript:void(0);" class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex"><i class="text-xs ri ri-thumb-up-line"></i><span class="my-2">25k</span></a>
                                                    </div>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="bg-danger text-white timeline-icon">
                                            <span class="text-lg leading-none">HM</span>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="timeline">
                                        <div class="timeline-main">
                                        <div class="timeline-right">
                                            <div class="timeline-body">
                                            <div class="box">
                                                <div class="box-body p-4">
                                                <h6 class="font-semibold text-base mb-2">Shady Tree send you a post</h6>
                                                <p class="text-xs text-gray-500 dark:text-white/70">Dolore justo lorem vero sed et takimata sit no dolore dolores, elitr eos et dolor consetetur sed sanctus. Ipsum amet elitr lorem clita et dolor. Kasd diam ea dolor sit accusam gubergren no kasd. Ea amet et sed takimata kasd,.</p>
                                                </div>
                                                <div class="box-footer bg-transparent p-4">
                                                <div class="sm:space-y-0 space-y-2 sm:flex items-center justify-between">
                                                    <div class="sm:flex items-center sm:space-x-3 space-x-0 sm:space-y-0 space-y-2 rtl:space-x-reverse">
                                                    <div class="flex">
                                                        <img class="avatar ring-0 rounded-full" src="{{asset('build/assets/img/users/15.jpg')}}" alt="avatar">
                                                    </div>
                                                    <div>
                                                        <p class="text-slate-700 font-semibold text-sm dark:text-white">
                                                        Anesthesia
                                                        </p>
                                                        <p class="text-xs text-gray-500 dark:text-white/70">
                                                        9 Dec 2022
                                                        </p>
                                                    </div>
                                                    </div>
                                                    <div class="space-x-0 sm:space-x-2 sm:text-end flex">
                                                    <a href="javascript:void(0);" class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex"><i class="text-xs ri ri-heart-line"></i><span class="my-2">30</span></a>
                                                    <a href="javascript:void(0);" class="text-xs leading-[0] text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark inline-flex"><i class="text-xs ri ri-thumb-up-line"></i><span class="my-2">25k</span></a>
                                                    </div>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="bg-danger text-white timeline-icon">
                                            <img class="avatar ring-0 rounded-full" src="{{asset('build/assets/img/users/15.jpg')}}" alt="avatar">
                                        </div>
                                        </div>
                                    </div>
                                    <div class="timeline-end"></div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-1 -->

                        </div>
                        <!-- Start::main-content -->

                    </div>

@endsection

@section('scripts')

@endsection