@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">

<!-- DataTables -->
<link href="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Responsive datatable examples -->
<link href="{{ asset('assets/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    .card-header {
        background-color: #027eaa!important;
    }
    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">Surgical History</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-12">

{{--        <div class="row">--}}
{{--            <div class="col-md-12 col-xl-12">--}}
{{--                <div class="card m-b-30">--}}
{{--                    <div class="card-header text-center">20% 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="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--             </div>--}}

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

        <div class="row">


            <div class="col-sm-12 col-md-12 col-xl-12">
                <div class="card m-b-30">
                    <h4 class="card-header mt-0">Add Surgery</h4>

                    <div class="card-body">

                        @if(Session::has('success'))
                            <div class="card m-b-30 text-white card-success">
                                <div class="card-body text-center">
                                    <p>The surgery details have been added successfully.</p>
                                </div>
                            </div>

                        @elseif(Session::has('error'))

                            <div class="card m-b-30 text-white card-danger">
                                <div class="card-body text-center">
                                    <p>Password does not match</p>
                                </div>
                            </div>
                        @endif

                        <form action="{{ isset($id) ? route('surgical-history.patients.store.surgical', ['id' => $id]) :  route('surgical-history.patients.store.surgical') }} " method="POST" enctype="multipart/form-data" autocomplete="off">
                            @csrf

                            <div class="row">

                                <div class="col-md-12 col-sm-12 col-xl-4">
                                    <div class="form-group">
                                        <label>Surgery Name
                                            {{--                                            <i class="ion-help-circled" rel="tooltip" title="Select active status" data-content="Plese enter the name of surgery conducted."></i>--}}
                                        </label>

                                        <input type="text" class="form-control" placeholder="Enter surgery name" id="surgery-name" name="surgery_name">

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

                                    </div>
                                </div>

                                <div class="col-md-12 col-sm-12 col-xl-4">
                                    <div class="form-group">
                                        <label>Date of Surgery</label>
                                        <div>
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="Select from calendar" id="surgery_date" name="surgery_date">
                                                <div class="input-group-append">
                                                    <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                                </div>
                                            </div><!-- input-group -->

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

                                <div class="col-md-12 col-sm-12 col-xl-4">
                                    <div class="form-group">
                                        <label class="control-label">General or Sedation?</label>

                                        <select class="select2 form-control sedation-select" id="sedation" name="sedation_type" data-placeholder="Choose ...">
                                            <option value="">Select from dropdown</option>
                                            <option value="general">General</option>
                                            <option value="sedation">Sedation</option>
                                        </select>

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

                                    </div>
                                </div>




                            </div>

                            <!-- textarea -->
                            <div class="form-group">
                                <label>Complications (if any)

                                    {{--                                    <i class="ion-help-circled" rel="tooltip" title="Please enter the description of the questionnaire in a few words/sentences."></i></i>--}}
                                </label>
                                <textarea class="form-control" rows="3" id="project_description" name="complications" placeholder="Enter your task description here..."></textarea>

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

                            </div>

                            <div class="form-group">
                                <label class="control-label">Anasthetic Complications</label>

                                <select class="select2 form-control complications-select" id="anasthetic-complications" multiple="multiple" name="anasthetic_complications[]" data-placeholder="Choose ...">
                                    <option value="">Select from dropdown</option>
                                    <option value="None">None</option>
                                    <option value="Nausea">Nausea</option>
                                    <option value="Vomiting">Vomiting</option>
                                    <option value="Difficult Intubation">Difficult Intubation</option>
                                </select>

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

                            </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-sm-12 col-md-12 col-xl-12">
                <div class="card m-b-30">
                    <h4 class="card-header mt-0">Surgical History</h4>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable-buttons" class="table table-striped table-bordered" cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th>Surgery Name</th>
                                    <th>Date of Surgery</th>
                                    <th>Sedation Type</th>
                                    <th>Created</th>
                                    <th>Updated</th>
                                </tr>
                                </thead>


                                <tbody>
                                @foreach($surgicalHistory as $surgery)
                                    <tr>
                                        <td>{{ $surgery->surgery_name }}</td>
                                        <td>{{ date('m/d/Y', strtotime($surgery->surgery_date)) }}</td>
                                        <td>{{ $surgery->sedation_type }}</td>
                                        <td>{{ date('m/d/Y', strtotime($surgery->created_at)) }}</td>
                                        <td>{{ $surgery->updated_at->diffForHumans() }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </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/face-placeholder.png') }}" alt="Card image cap">--}}

{{--                    <div class="card-header text-center"><h4>Contact Us</h4></div>--}}
{{--                    <div class="card-body">--}}

{{--                    </div>--}}
{{--                </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>

<!-- Required datatable js -->
<script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
<!-- Buttons examples -->
<script src="{{ asset('assets/plugins/datatables/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/jszip.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/buttons.print.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/buttons.colVis.min.js') }}"></script>
<!-- Responsive examples -->
<script src="{{ asset('assets/plugins/datatables/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>

<!-- Datatable init js -->
<script src="{{ asset('assets/pages/datatables.init.js') }}"></script>


<script>
    $(function () {

        $( "#height" ).change(function() {
            $('.bmi-calc').empty();
            var weight = $('#weight').val();
            var height = $('#height').val();

            var bmi = weight/(height/100*height/100);

            $('.bmi-calc').append('<h1>BMI: <small>' + bmi.toFixed(2) + '</small></h1>');
        });
        $( "#weight" ).change(function() {
            $('.bmi-calc').empty();
            var weight = $('#weight').val();
            var height = $('#height').val();

            var bmi = weight/(height/100*height/100);

            $('.bmi-calc').append('<h1>BMI: <small>' + bmi.toFixed(2) + '</small></h1>');
        });
        $( "#bmi" ).click(function() {
            $('.bmi-calc').empty();
            var weight = $('#weight').val();
            var height = $('#height').val();

            var bmi = weight/(height/100*height/100);

            $('.bmi-calc').append('<h1>BMI: <small>' + bmi.toFixed(2) + '</small></h1>');
        });
    });
    $(function(){
        $('#surgery_date').datepicker({
            format: "mm/dd/yyyy",
            language: "en"
        });

        $(".sedation-select").select2();
        $(".complications-select").select2();
    });

</script>

@include('forms/elements/footer_end')