@extends('admin/layout')
@section('page_title','List of Generic Names')
@section('medicine_select','active')
@section('generic_select','active')
@section('content')

<!-- Add Generic Modal   -->
<div class="modal fade" id="addGenericModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Add Generic Name</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" id="add_generic_form">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="generic_name">Generic Name <span class="text-red">*</span></label>
                        <input type="text" name="generic_name" id="generic_name" class="form-control generic_name"
                            placeholder="Enter Generic Name">
                        <p class="generic_name_error text-danger"></p>
                    </div>
                    <div class="form-group">
                        <label for="">Select Generic Category</label><span class="text-red">*</span>
                        <select name="generic_category" id="generic_category" class="generic_category form-control">
                            <option value="">Select Generic Category</option>
                            @foreach ($generic_category as $generic_category)
                            <option value="{{ $generic_category->id }}">{{ $generic_category->category_name
                                }}</option>
                            @endforeach
                        </select>
                        <p class="generic_category_error text-danger"></p>
                    </div>

                    <div class="form-group">
                        <label for="">Indications</label>
                        <textarea class="indications" name="indications" id="indications"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Pharmacology</label>
                        <textarea class="pharmacology" name="pharmacology" id="pharmacology"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Dosage & Administration</label>
                        <textarea class="dosage_and_administration" name="dosage_and_administration"
                            id="dosage_and_administration"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Interaction</label>
                        <textarea class="interaction" name="interaction" id="interaction"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Contraindications</label>
                        <textarea class="contraindications" name="contraindications" id="contraindications"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Side Effects</label>
                        <textarea class="side_effects" name="side_effects" id="side_effects"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Pregnancy & Lactation</label>
                        <textarea class="pregnancy_and_lactation" name="pregnancy_and_lactation"
                            id="pregnancy_and_lactation"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Precautions & Warnings</label>
                        <textarea class="precautions_and_warnings" name="precautions_and_warnings"
                            id="precautions_and_warnings"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Use In Special Populations</label>
                        <textarea class="use_in_special_populations" name="use_in_special_populations"
                            id="use_in_special_populations"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Overdose Effects</label>
                        <textarea class="overdose_effects" name="overdose_effects" id="overdose_effects"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Therapeutic Class</label>
                        <textarea class="therapeutic_class" name="therapeutic_class" id="therapeutic_class"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Storage Conditions</label>
                        <textarea class="storage_conditions" name="storage_conditions"
                            id="storage_conditions"></textarea>
                    </div>
                    
                     @isset($generics)
                    <div class="form-group">
                        <label for="">Other Generic Combinations <span class="text-red"></span></label><br/>
                        <select name="other_generic_ids[]" id="other_generic_ids" data-placeholder="Other Generic Combinations" class="other_generic_ids form-control">
                          @foreach ($generics as $opt)
                            <option value="{{$opt->id}}">{{$opt->generic_name ?? ''}}</option>
                            @endforeach 
                        </select>
                    </div>
                    @endisset

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>
                        Cancle</button>
                    <button type="submit" class="btn btn-primary save_company"><i class="fa fa-floppy-o"></i>
                        Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Add Generic Modal End -->

<!-- Edit Generic Modal Start -->
<div class="modal fade" id="editGenericModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Edit Generic Name</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" id="update_generic_form">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="edit_id" class="edit_id" id="edit_id">
                    <div class="form-group">
                        <label for="generic_name">Generic Name <span class="text-red">*</span></label>
                        <input type="text" name="generic_name" id="edit_generic_name"
                            class="form-control edit_generic_name" placeholder="Enter Generic Name">
                        <p class="edit_generic_name_error text-danger"></p>
                    </div>
                    <div class="form-group">
                        <label for="">Select Generic Category</label><span class="text-red">*</span>
                        <div class="cat_select"></div>
                        <p class="edit_generic_category_error text-danger"></p>
                    </div>

                    <div class="form-group">
                        <label for="">Indications</label>
                        <textarea class="edit_indications" name="indications" id="edit_indications"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Pharmacology</label>
                        <textarea class="edit_pharmacology" name="pharmacology" id="edit_pharmacology"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Dosage & Administration</label>
                        <textarea class="edit_dosage_and_administration" name="dosage_and_administration"
                            id="edit_dosage_and_administration"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Interaction</label>
                        <textarea class="edit_interaction" name="interaction" id="edit_interaction"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Contraindications</label>
                        <textarea class="edit_contraindications" name="contraindications"
                            id="edit_contraindications"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Side Effects</label>
                        <textarea class="edit_side_effects" name="side_effects" id="edit_side_effects"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Pregnancy & Lactation</label>
                        <textarea class="edit_pregnancy_and_lactation" name="pregnancy_and_lactation"
                            id="edit_pregnancy_and_lactation"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Precautions & Warnings</label>
                        <textarea class="edit_precautions_and_warnings" name="precautions_and_warnings"
                            id="edit_precautions_and_warnings"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Use In Special Populations</label>
                        <textarea class="edit_use_in_special_populations" name="use_in_special_populations"
                            id="edit_use_in_special_populations"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="">Overdose Effects</label>
                        <textarea class="edit_overdose_effects" name="overdose_effects"
                            id="edit_overdose_effects"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Therapeutic Class</label>
                        <textarea class="edit_therapeutic_class" name="therapeutic_class"
                            id="edit_therapeutic_class"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Storage Conditions</label>
                        <textarea class="edit_storage_conditions" name="storage_conditions"
                            id="edit_storage_conditions"></textarea>
                    </div>
                    
                    <div class="form-group">
                    <label for="">Other Generic Combinations <span class="text-red"></span></label>
                    <select name="other_generic_ids[]" id="edit_other_generic_ids" data-placeholder="Other Generic Combinations" class="other_generic_ids form-control">
                      @foreach ($generics as $opt)
                        <option value="{{$opt->id}}">{{$opt->generic_name ?? ''}}</option>
                        @endforeach 
                    </select>
                  </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>
                        Cancle</button>
                    <button type="submit" class="btn btn-primary update_generic"><i class="fa fa-floppy-o"></i>
                        Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Edit Generic Modal End -->

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        List of Generic Names (Allopathic)
        <small>Manage</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="javascript:void(0)"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li>Medicine</li>
        <li class="active">Generic</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            @if (session()->has('delete_msg'))
            <div class="alert alert-success alert-dismissible">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong>{{session()->get('delete_msg')}}</strong>
            </div>
            @endif
            <div class="success_message"></div>
            <div class="box box-warning">
                <div class="box-header with-border">
                    <div class="d-flex justify-content-end text-right">
                        <button id="add_generic_btn" class="btn btn-info add_generic_btn"><i
                                class="fa fa-plus-circle"></i>&nbsp;&nbsp;Add
                            Generic</button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="col-md-12">
                        <div style="overflow-x: auto;">
                            <div class="generics_table"></div>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->

            </div>
        </div>
    </div>

</section>


@endsection

@section('styles')
  <!-- Select2 -->
  <style>
      .select2-container .select2-selection--single{
            box-sizing: border-box;
            cursor: pointer;
            display: block;
            height: 35px;
            user-select: none;
            -webkit-user-select: none;
            background: #fff !important;
            box-shadow: 5px 5px 12px #fdfd;
            border: 1px solid #cbc8cbed;
            vertical-align: middle;
            line-height: 35px;
            padding: 0px 5px;
        }
        
        .select2-container .select2-selection--multiple{
            background: #fff !important;
            box-shadow: 5px 5px 12px #fdfd;
            border: 1px solid #cbc8cbed;
        }
        
        /*.select2-results {*/
        /*    display: block;*/
        /*    min-height: max-content;*/
        /*    max-height: 300px;*/
        /*    overflow-y: auto;*/
        /*    z-index: 20000;*/
        /*}*/
        
        .select2-container {
            z-index: 99999;
        }

  </style>
@endsection
@section('scripts')
<script src="{{asset('backend_assets/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
<script src="{{ asset('backend_assets/custom_js/generic.js') }}"></script>
<script>
    $(document).ready(function(){
        $('#other_generic_ids').select2({
            multiple: true,
            width: '100%',
            dropdownParent: $('#other_generic_ids').parent()
        }).val(null).trigger("change");
        
         
         
        $('#edit_other_generic_ids').select2({
            multiple: true,
            width: '100%',
            dropdownParent: $('#edit_other_generic_ids').parent()
        }).val(null).trigger("change");
    })
</script>
@endsection