<!DOCTYPE html>
<html>
<head>
    <title>Med-X | EHR List</title>
    <link rel="icon" href="{{env('AUTH_SERVER_URL')}}/public/images/fevicon.png" type="image/png">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <link rel="stylesheet" href="{{env('APP_URL').'/public/assets/css/landingpage.css'}}">
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-BL22687NVB"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-BL22687NVB');
    </script>
    <!-- End Google Analytics -->
</head>
<body>
    <div class="row">
        <div class="col-md-12">
            <div class="text-center pt-4 pb-3">
                <img src="{{env('AUTH_SERVER_URL')}}/public/images/MedX-Logo.png " class="logo" alt="Med-X Logo">
            </div>
        </div>
        @foreach($responseData as $index => $data)
            <?php  
                $class = ($index % 2 == 0) ? 'float-right' : 'float-left';
                $width = $data['ehrSlug'] == 'ehr-default' ? 200 : ($data['ehrSlug'] == 'epic' ? 100 : ($data['ehrSlug'] == 'eka-care' ? 170 : 0));
            ?>
            <div class="col-md-6 pl-0 pr-0">
                <div class="card card-shadow {{$class}} custom-card" data-card-id="card{{$index}}">
                    @if($width > 0)
                        <input type="radio" name="card-selection" class="card-radio d-none" id="radio-card{{$index}}" value="{{$data['ehrSlug']}}">
                        <div class="text-center pb-3">
                            <img src="{{asset('assets/img/'.$data['ehrSlug'].'.png')}}" width="{{$width}}" alt="{{$data['ehrName']}}">
                        </div>
                        <div class="ehr-content">
                            <p>{{$data['description']}}</p>
                        </div>
                    @else
                        <h3 class="coming-soon">Coming Soon...</h3>
                    @endif
                </div>
            </div>
        @endforeach
        <div class="col-md-12">
            <div class="text-center pt-4 pb-3">
                <button class="btn btn-primary" id="submit-button" disabled>Submit</button>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" async></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" async></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.custom-card').click(function() {
                $('.card-radio').prop('checked', false);
                $(this).find('.card-radio').prop('checked', true);
                $('.custom-card').removeClass('active');
                $(this).addClass('active');
                $('#submit-button').prop('disabled', false);
            });
            
            $('#submit-button').click(function(event) {
                var selectedValue = $('input[name="card-selection"]:checked').val();
                if (selectedValue != '' && selectedValue == 'eka-care') {
                    Swal.fire({
                        position: "top-end",
                        text: "Currently, only zapEHR is implemented. We are working on integrating with other EHR systems.",
                        showConfirmButton: false,
                        timer: 2000
                    });
                    event.preventDefault();
                } else if (selectedValue != '') {
                    window.location.href = window.location.origin+"/login/"+selectedValue;
                } else {
                    Swal.fire({
                        position: "top-end",
                        text: "Please select one platform before submitting!",
                        showConfirmButton: false,
                        timer: 2000
                    });
                    event.preventDefault();
                }
            });
        });
    </script>
</body>
</html>