@extends('layouts.default')

@section('content')

<div class="container-fluid">
    <div class="row g-3">
                 
        <div class="col-xl-6 col-lg-6">
            <div class="card border-0 pb-0">
                <div class="card-header flex-wrap border-0 pb-0">
                    <h3 class="fs-20 mb-0 text-black">Notifications History</h3>
                    <a href="{{url('patient-list')}}" class="text-primary font-w500">View more >></a>
                </div>
                <div class="card-body recent-patient px-0">
                    <div id="DZ_W_Todo2" class="widget-media px-4 dz-scroll height320">
                        <ul class="timeline">
                            <li>
                                <div class="timeline-panel flex-wrap">
                                    <div class="media me-3">
                                        <img class="rounded-circle" alt="image" width="50" src="{{asset('images/widget/1.jpg')}}">
                                    </div>
                                    <div class="media-body">
                                        <h5 class="mb-1"><a class="text-black" href="{{url('patient-details')}}">SOS Alert activated</a></h5>
                                        <span class="fs-14">Metro Corporate Centre – Unit C-05-02 triggered SOS</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="timeline-panel flex-wrap">
                                    <div class="media me-3">
                                        <img class="rounded-circle" alt="image" width="50" src="{{asset('images/widget/2.jpg')}}">
                                    </div>
                                    <div class="media-body">
                                        <h5 class="mb-1"><a class="text-black" href="{{url('patient-details')}}">Incident INC-000246 created</a></h5>
                                        <span class="fs-14">Suspicious Activity at Emerald Residence Block B</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="timeline-panel flex-wrap">
                                    <div class="media me-3">
                                        <img class="rounded-circle" alt="image" width="50" src="{{asset('images/widget/3.jpg')}}">
                                    </div>
                                    <div class="media-body">
                                        <h5 class="mb-1"><a class="text-black" href="{{url('patient-details')}}">Patrol missed: Route Gamma</a></h5>
                                        <span class="fs-14">Scheduled patrol not started at Lakeside Commercial Park</span>
                                    </div>
                                </div>
                            </li>
                                <li>
                                <div class="timeline-panel flex-wrap">
                                    <div class="media me-3">
                                        <img class="rounded-circle" alt="image" width="50" src="{{asset('images/widget/5.jpg')}}">
                                    </div>
                                    <div class="media-body">
                                        <h5 class="mb-1"><a class="text-black" href="{{url('patient-details')}}">Visitor Priya Kumar checked in</a></h5>
                                        <span class="fs-14">Checked in at Main Guardhouse – Unit A-12-03</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="timeline-panel flex-wrap">
                                    <div class="media me-3">
                                        <img class="rounded-circle" alt="image" width="50" src="{{asset('images/widget/1.jpg')}}">
                                    </div>
                                    <div class="media-body">
                                        <h5 class="mb-1"><a class="text-black" href="{{url('patient-details')}}">Guard Hassan clocked in</a></h5>
                                        <span class="fs-14">Emerald Residence, Main Guardhouse – GPS verified</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-6 col-lg-6">
    <div class="card h-100">
        <div class="card-body">
            <h4 class="card-title mb-3">Notification Channels</h4>

            <div class="notification-setting">
                <span>📱 &nbsp; In-App</span>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" role="switch" checked>
                </div>
            </div>

            <div class="notification-setting">
                <span>🔔 &nbsp; Push Notification (FCM)</span>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" role="switch" checked>
                </div>
            </div>

            <div class="notification-setting">
                <span>🍒 &nbsp; Push Notification (APNS)</span>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" role="switch" checked>
                </div>
            </div>

            <div class="notification-setting">
                <span>📧 &nbsp; Email</span>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" role="switch" checked>
                </div>
            </div>

            <div class="notification-setting">
                <span>💬 &nbsp; SMS</span>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" role="switch">
                </div>
            </div>

            <h4 class="card-title mt-4 mb-2">External Integrations</h4>

            <div class="integration-setting">
                <span><i class="integration-dot"></i> Google Maps / Maps Services</span>
                <span class="badge badge-success light">CONFIGURED</span>
            </div>
            <div class="integration-setting">
                <span><i class="integration-dot"></i> Firebase FCM</span>
                <span class="badge badge-success light">CONFIGURED</span>
            </div>
            <div class="integration-setting">
                <span><i class="integration-dot"></i> APNS (Apple)</span>
                <span class="badge badge-success light">CONFIGURED</span>
            </div>
            <div class="integration-setting">
                <span><i class="integration-dot"></i> Payment Gateway</span>
                <span class="badge badge-success light">CONFIGURED</span>
            </div>
        </div>
    </div>
</div>          
    </div>
    </div>

@endsection
@push('scripts')
<script>
    function assignedDoctor()
    {

        /*  testimonial one function by = owl.carousel.js */
        jQuery('.assigned-doctor').owlCarousel({
            loop:false,
            margin:30,
            nav:true,
            autoplaySpeed: 3000,
            navSpeed: 3000,
            paginationSpeed: 3000,
            slideSpeed: 3000,
            smartSpeed: 3000,
            autoplay: false,
            dots: false,
            navText: ['<i class="fa fa-caret-left"></i>', '<i class="fa fa-caret-right"></i>'],
            responsive:{
                0:{
                    items:1
                },
                576:{
                    items:2
                },
                767:{
                    items:3
                },
                991:{
                    items:2
                },
                1200:{
                    items:3
                },
                1600:{
                    items:4
                },
                1920:{
                    items:5
                }
            }
        })
    }

    jQuery(window).on('load',function(){
        setTimeout(function(){
            assignedDoctor();
        }, 1000);
    });

</script>
@endpush