@extends('template.index')

@section('css')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('template/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('template/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('template/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
@endsection

@section('content')
<!-- Main content -->
<section class="content profile-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <!-- Profile Image -->
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <div class="text-center">
                            <div class="profile-user-img img-fluid img-circle">
                                <i class="nav-icon fas fa-user-circle icon-size"></i>
                            </div>
                        </div>
                        <input type="hidden" id="hidden_patient_id" value="{{ $patient->id }}"/>
                        <input type="hidden" id="hidden_user_id" value="1"/>
                        <input type="hidden" id="hidden_branch_id" value="1"/>
                        @php
                            if(!empty($data->middlename)) {
                                $name = $patient->firstname . " " . $patient->middlename . " " . $patient->lastname;
                            } else {
                                $name = $patient->firstname . " " . $patient->lastname;
                            }
                            
                            $name = strtolower($name);

                            $name = ucwords($name);
                        @endphp
                        <h3 class="profile-username text-center">{{ $name }}</h3>

                        <hr>
                        
                        @php
                            if (!empty($patient->nickname)){
                                $nickname = $patient->nickname;

                                $nickname = strtolower($nickname);

                                $nickname = ucwords($nickname);
                            } else{
                                $nickname = "N/A";
                            }
                        @endphp

                        <strong>@ Nickname</strong>
                        <p class="text-muted">{{ $nickname }}</p>

                        <hr>
                        
                        <strong><i class="fas fa-calendar-check"></i> Age</strong>
                        <p class="text-muted">{{ $add_age = $patient->age + (date('Y') - date('Y', strtotime($patient->created_at))) }}</p>

                        <hr>

                        <strong><i class="fas fa-venus-mars"></i> Gender</strong>
                        <p class="text-muted">{{ $patient->gender }}</p>

                        <hr>

                        <strong><i class="fas fa-phone-alt"></i> Contact Number</strong>
                        <p class="text-muted">{{ (!empty($patient->contact) ? $patient->contact : "N/A" ) }}</p>

                        <hr>

                        <strong><i class="fas fa-chalkboard-teacher"></i> Course</strong>
                        <p class="text-muted">{{ (!empty($patient->course) ? $patient->course : "N/A" ) }}</p>

                        <hr>

                        <strong><i class="fas fa-school"></i> School</strong>
                        <p class="text-muted">{{ (!empty($patient->school) ? $patient->school : "N/A" ) }}</p>

                        <hr>

                        <strong><i class="fas fa-briefcase"></i> Occupation</strong>
                        <p class="text-muted">{{ (!empty($patient->occupation) ? $patient->occupation : "N/A" ) }}</p>

                        <hr>

                        <strong><i class="fas fa-map-marker-alt mr-1"></i> Address</strong>
                        <p class="text-muted">{{ $address['province'] }}, {{ $address['municipality'] }}</p>
                    </div>
                </div>
            </div>
        
            <!-- /.col -->
            <div class="col-md-9">
                <div class="card card-outline">
                    <div class="card-header p-2">
                        <ul class="nav nav-pills">
                            @if (session()->get('user_type') != 'Practitioner')
                                <li class="nav-item"><a class="nav-link {{ session()->get('user_type') != 'Practitioner' ? 'active' : ''}}" href="#medical_record" id="medical_record_tab" data-toggle="tab">Medical Record</a></li>
                                <li class="nav-item"><a class="nav-link" href="#medical_purchase" id="medical_purchase_tab" data-toggle="tab">Medical Purchase</a></li>
                            @endif
                           
                            <li class="nav-item"><a class="nav-link {{ session()->get('user_type') == 'Practitioner' ? 'active' : ''}}" href="#procedure_record" id="procedure_tab" data-toggle="tab">Procedure</a></li>
                            <li class="nav-item"><a class="nav-link" href="#images" id="image_tab" data-toggle="tab">Images</a></li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            @if (session()->get('user_type') != 'Practitioner')
                            <div class="{{ session()->get('user_type') != 'Practitioner' ? 'active' : ''}} tab-pane" id="medical_record">
                                <div class="row">
                                    <div class="col-md-12 text-right mb-2 p-0">
                                        {{-- @if (session()->get('user_type') == 'Doctor') --}}
                                            <button type="button" id="btn_add_medical_record" class="btn btn-success" data-toggle="modal" data-target="#medical_record_modal"><i class="fas fa-plus"></i> Medical Record</button>
                                        {{-- @endif --}}
                                    </div>
                                    <div class="col-md-12 p-0">
                                        <table id="record_table" class="table table-bordered table-hover">
                                            <thead>
                                                <th>Date</th>
                                                {{-- <th>Clinical Findings</th> --}}
                                                <th>Diagnosis</th>
                                                <th>Management</th>
                                                <th>Follow-up</th>
                                                <th>Seen by</th>
                                                <th>Action</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="medical_purchase">
                                <div class="row">
                                    <div class="col-md-12 text-right mb-2">
                                        <button type="button" id="btn_add_purchase" class="btn btn-success" data-toggle="modal" data-target="#purchase_modal"><i class="fas fa-plus"></i> Purchase</button>
                                    </div>
                                    <div class="col-md-12">
                                        <table id="purchase_table" class="table table-bordered table-hover">
                                            <thead>
                                                <th>Date</th>
                                                <th>Branch</th>
                                                <th>Medicine Name</th>
                                                <th>Medicine Type</th>
                                                <th>Quantity</th>
                                                <th>SA #</th>
                                                <th>Note</th>
                                                <th>Action</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            @endif
                           
                            <div class="{{ session()->get('user_type') == 'Practitioner' ? 'active' : ''}} tab-pane" id="procedure_record">
                                <div class="row">
                                    <div class="col-md-12 text-right mb-2">
                                        <button type="button" id="btn_add_procedure" class="btn btn-success" data-toggle="modal" data-target="#procedure_modal"><i class="fas fa-plus"></i> Procedure</button>
                                    </div>
                                    <div class="col-md-12">
                                        <table id="procedure_table" class="table table-bordered table-hover">
                                            <thead>
                                                <th>Date</th>
                                                <th>Equipment Type</th>
                                                <th>Procedure Name</th>
                                                <th>No of Procedures Done</th>
                                                <!-- <th>Price</th> -->
                                                <th>Action</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="images">
                                <div class="row">
                                    <div class="col-md-12 text-right mb-2">
                                        <button type="button" id="btn_add_image" class="btn btn-success" data-toggle="modal" data-target="#upload_image_modal"><i class="fas fa-plus"></i> Upload</button>
                                    </div>
                                    <div class="col-md-12">
                                        <table id="image_table" class="table table-bordered table-hover">
                                            <thead>
                                                <th>Date</th>
                                                <th>Note</th>
                                                <th>Image</th>
                                                <th>Action</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                    </div><!-- /.card-body -->
                </div>
            </div>
        </div>
    </div>
    <!-- /.container-fluid -->
</section>
<!-- /.content -->


<!-- Medical Record Modal -->
<div class="modal fade" id="medical_record_modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
        <form id="medical_record_form" method="post">
                <div class="modal-header">
                    <h4 class="modal-title">Medical Record Form</h4>
                    <button type="button" class="close btn_cancel_medical_record" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="clinical_findings" class="col-sm-4 col-form-label">Clinical Findings</label>
                        <div class="col-sm-8">
                            <textarea id="clinical_findings" name="clinical_findings" class="form-control" placeholder="Clinical Findings"></textarea>
                        </div>
                    </div>
                    
                    <div class="form-group row">
                        <label for="diagnosis" class="col-sm-4 col-form-label">Diagnosis</label>
                        <div class="col-sm-8">
                            <select id="diagnosis" name="diagnosis[]" multiple="multiple" class="form-control select2bs4" style="width: 100%;">
                               
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="management" class="col-sm-4 col-form-label">Management</label>
                        <div class="col-sm-8">
                            <select id="management" name="management[]" multiple="multiple" class="form-control select2bs4" style="width: 100%;">
                                
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label">Medication</label>
                        <div class="col-sm-8">
                            <input style="font-size: 1rem; width: 18px; height: 18px; vertical-align: -webkit-baseline-middle;" type="checkbox" id="no_medication" name="no_medication" value="">
                            <label for="no_medication" class="form-check-label" style="vertical-align: -webkit-baseline-middle;">No medication</label>
                        </div>
                        <label class="col-sm-4 col-form-label"></label>
                        <div class="col-sm-8">
                            <input style="font-size: 1rem; width: 18px; height: 18px; vertical-align: -webkit-baseline-middle;" type="checkbox" id="medication_outside" name="medication_outside" value="">
                            <label for="medication_outside" class="form-check-label" style="vertical-align: -webkit-baseline-middle;">Medication procured outside</label>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="instruction" class="col-sm-4 col-form-label">Instruction</label>
                        <div class="col-sm-8">
                            <textarea id="instruction" name="instruction" class="form-control" placeholder="Instruction"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="follow_up" class="col-sm-4 col-form-label">Follow Up</label>
                        <div class="col-sm-8">
                            <input type="date" id="follow_up" name="follow_up" class="form-control" placeholder="Follow-up date">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label">Consultation Fee</label>
                        <div class="col-sm-8">
                            <input style="font-size: 1rem; width: 18px; height: 18px; vertical-align: -webkit-baseline-middle;" type="checkbox" id="fee" name="fee" value="">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label">Seen by</label>
                        <div class="col-sm-8">
                            <select id="seen_by" name="seen_by" class="form-control select2bs4" style="width: 100%;">
                                
                            </select>
                        </div>
                    </div>

                    <input type="hidden" name="hidden_medical_record_id" id="hidden_medical_record_id" />
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" id="btn_cancel_medical_record" class="btn btn-default btn_cancel_medical_record" data-dismiss="modal">Cancel</button>
                    <input type="submit" id="btn_action_medical_record" name="btn_action_medical_record" data-action="add" class="btn btn-primary" value="">
                </div>
        </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="view_medical_modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Medical Record</h4>
                    <button type="button" class="close btn_cancel_medical_record" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <hr>
                    <div id="show_findings">
                        
                    </div>
                    
                    <div id="show_diagnoses">
                        
                    </div>
                    
                    <div id="show_management">
                        
                    </div>
                    
                    <div id="show_medication">
                       
                    </div>
                    
                    <div id="show_instruction">
                        
                    </div>
                    
                    <div id="show_follow_up">
                       
                    </div>

                    <div id="show_seen_by">
                        
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" id="btn_cancel_medical_record" class="btn btn-default btn_cancel_medical_record" data-dismiss="modal">Cancel</button>
                </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- Purchase Modal -->
<div class="modal fade" id="purchase_modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
        <form id="purchase_form" method="post">
                <div class="modal-header">
                    <h4 class="modal-title">Purchase Form</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="branch" class="col-sm-4 col-form-label">Branch</label>
                        <div class="col-sm-8">
                            <select id="branch" name="branch" class="form-control select2bs4" style="width: 100%;">
                                
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="branch_medicine" class="col-sm-4 col-form-label">Medicine</label>
                        <div class="col-sm-8">
                            <select id="branch_medicine" name="branch_medicine" class="form-control select2bs4" style="width: 100%;">
                                
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="quantity" class="col-sm-4 col-form-label">Quantity</label>
                        <div class="col-sm-8">
                            <input type="number" id="quantity" name="quantity" class="form-control" placeholder="Quantity"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="sa" class="col-sm-4 col-form-label">SA #</label>
                        <div class="col-sm-8">
                            <input type="text" id="sa" name="sa" class="form-control" placeholder="SA #"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="note" class="col-sm-4 col-form-label">Note</label>
                        <div class="col-sm-8">
                            <textarea id="note" name="note" class="form-control" placeholder="Note"></textarea>
                        </div>
                    </div>
                    <input type="hidden" name="hidden_purchase_id" id="hidden_purchase_id" />
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" id="btn_cancel_purchase" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <input type="submit" id="btn_action_purchase" name="btn_action_purchase" data-action="add" class="btn btn-primary" value="Add">
                </div>
        </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- Procedure Modal -->

<div class="modal fade" id="procedure_modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
        <form id="procedure_form" method="post">
                <div class="modal-header">
                    <h4 class="modal-title">Procedure Form</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="created_at" class="col-sm-4 col-form-label">Date</label>
                        <div class="col-sm-8">
                            <input type="date" id="created_at" name="created_at" class="form-control" placeholder="Created at">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="equipment" class="col-sm-4 col-form-label">Equipment Type</label>
                        <div class="col-sm-8">
                            <select id="equipment" name="equipment" class="form-control select2bs4" style="width: 100%;">
                               
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="procedure" class="col-sm-4 col-form-label">Procedure Name</label>
                        <div class="col-sm-8">
                            <select id="procedure" name="procedure" class="form-control select2bs4" style="width: 100%;">
                               
                            </select>
                        </div>
                    </div>

                    <input type="hidden" name="hidden_procedure_id" id="hidden_procedure_id" />
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" id="btn_cancel_procedure" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <input type="submit" id="btn_action_procedure" name="btn_action_procedure" data-action="add" class="btn btn-primary" value="Add">
                </div>
        </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- Procedure Modal -->
<div class="modal fade" id="add_procedure_modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
        <form id="add_procedure_form" method="post">
                <div class="modal-header">
                    <h4 class="modal-title">Add Procedure Form</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="price" class="col-sm-4 col-form-label">Price</label>
                        <div class="col-sm-8">
                            <input type="number" id="price" name="price" class="form-control" placeholder="Price">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="done_by" class="col-sm-4 col-form-label">Done by</label>
                        <div class="col-sm-8">
                            <select id="done_by" name="done_by" class="form-control select2bs4" style="width: 100%;">
                               
                            </select>                        
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="sa" class="col-sm-4 col-form-label">SA #</label>
                        <div class="col-sm-8">
                            <input type="text" id="sa" name="sa" class="form-control" placeholder="SA #">
                        </div>
                    </div>

                    <input type="hidden" name="hidden_procedure_id" id="hidden_procedure_id" />
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" id="btn_cancel_procedure" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <input type="submit" id="btn_action_add_procedure" name="btn_action_add_procedure" data-action="add" class="btn btn-primary" value="Add">
                </div>
        </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- Procedure Modal -->
<div class="modal fade" id="procedure_history_modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Procedure logs</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="procedure_history">
                    <div class="row">
                        <div class="col-sm-3 text-bold">Date</div>
                        <div class="col-sm-3 text-bold">Price</div>
                        <div class="col-sm-3 text-bold">Done by</div>
                        <div class="col-sm-3 text-bold">SA #</div>
                    </div>
                </div>
                <div id="procedure_logs">
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" id="" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<!-- Image Modal -->
<div class="modal fade" id="upload_image_modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
        <form id="image_form" method="post" enctype="multipart/form-data">
                <div class="modal-header">
                    <h4 class="modal-title">Upload Image</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">    
                    <div class="form-group row">
                        <label for="images" class="col-sm-4 col-form-label">Image</label>
                        <div class="col-sm-8">
                            <input type="file" multiple="multiple" class="" id="images" name="images[]" accept="image/jpeg,image/jpg,image/png">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="note" class="col-sm-4 col-form-label">Note</label>
                        <div class="col-sm-8">
                            <textarea id="note" name="note" class="form-control" placeholder="Note"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" id="btn_cancel_image" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <input type="submit" id="btn_action_image" name="btn_action_image" data-action="add" class="btn btn-primary" value="Upload">
                </div>
        </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- Image Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="previewModalLabel">Preview Image</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
          <img id="previewImage" src="" style="width: 100%; height: 100%;"/>
            </div>
        </div>
    </div>
</div>
  

@endsection

@section('js')
<!-- DataTables  & Plugins -->
<script src="{{ asset('template/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('template/plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('template/plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('template/plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
<script src="{{ asset('template/plugins/bs-custom-file-input/bs-custom-file-input.min.js') }}"></script>
<script src="{{ asset('js/patient/profile.js') }}"></script>
<script>
    $(function () {
      bsCustomFileInput.init();
    });
</script>
@endsection