@include('forms/elements/header_start')

<link href="{{ asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/plugins/dropzone/dist/dropzone.css') }}" rel="stylesheet" type="text/css">

<style>
    .card-header {
        background-color: #027eaa!important;
        color:white;
    }
    label{
        font-size: 22px;
    }
</style>
@include('patients/elements/header_end')

<!-- Page title -->
<ul class="list-inline menu-left mb-0">
    <li class="list-inline-item">
        <button type="button" class="button-menu-mobile open-left waves-effect">
            <i class="ion-navicon"></i>
        </button>
    </li>
    <li class="hide-phone list-inline-item app-search">
        <h2 class="page-title">Pacemaker</h2>
    </li>
</ul>

<div class="clearfix"></div>
</nav>

</div>
<!-- Top Bar End -->

<!-- ==================
     PAGE CONTENT START
     ================== -->

<div class="page-content-wrapper">
    @include('patients.elements.list')


    <div class="container-fluid col-md-10 offset-md-1">

        <div class="row">
            <div class="col-md-12 col-xl-12">
                <div class="card m-b-30">
                    <div class="card-header text-center">48% complete</div>

                    <div class="card-body">

{{--                        <h4 class="mt-0 header-title">Animated stripes</h4>--}}
                        <div class="">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%"></div>
                            </div>
                        </div>
                    </div>
                </div>
             </div>

        </div>
        <!-- end row -->

        <div class="row">
            <div class="col-md-9 col-xl-9">
                <div class="card m-b-30">
                    <h4 class="card-header mt-0">Cardiac</h4>

                    <div class="card-body">
                        <form action="{{ isset($id) ? route('patients.store.pacemaker.answer', ['id' => $id]) : route('patients.store.pacemaker.answer') }} " method="POST" enctype="multipart/form-data" autocomplete="off">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">

                                <div class="form-group">
                                    <label>Please upload an image of your pacemaker card</label>
                                    <input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary" name="image">

                                    @if ($errors->has('image'))
                                        <span class="badge badge-danger">{{ $errors->first('image') }}</span>
                                    @endif

                                </div>

                            </div>
                            <div class="col-md-12">

                                <div class="form-group">
                                    <label>Device Last Tested</label>
                                    <div>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" name="device_last_tested" id="datepicker" value="{{ old('device_last_tested') }}">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                            </div>
                                        </div><!-- input-group -->

                                        @if ($errors->has('device_last_tested'))
                                            <span class="badge badge-danger">{{ $errors->first('device_last_tested') }}</span>
                                        @endif

                                    </div>

                                </div>
                            </div>
                        </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary btn-flat pull-right">Submit</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xl-3">
                <div class="card m-b-30">
                    <img class="card-img-top img-fluid" src="{{ asset('assets/images/h3a-logo-black.jpg') }}" alt="Card image cap">
                </div>
            </div>
        </div>
        <!-- end row -->

    </div>


</div> <!-- Page content Wrapper -->

</div> <!-- content -->

@include('forms/elements/footer_start')

<script src="{{ asset('assets/plugins/select2/js/select2.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>

<!-- Plugins Init js -->
<script src="{{ asset('assets/pages/form-advanced.js') }}"></script>

<script src="{{ asset('assets/plugins/dropzone/dist/dropzone.js') }}"></script>

<script>

    $(function(){
        $('#datepicker').datepicker({
            format: "dd.mm.yyyy",
            todayBtn: "linked",
            language: "en"
        });
    });

</script>

@include('forms/elements/footer_end')