@extends('frontend.layout')
@section('page_title', "single generic")
@section('styles')
  <!-- Select2 -->
  <!--<link rel="stylesheet" href="{{asset('backend_assets/bower_components/select2/dist/css/select2.min.css')}}">-->
  <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;
        }
        
        .select2-results {
            display: block;
            min-height: max-content;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .other-comb:hover {
            background: green;
            color: #fff;
        }
        
        .other-comb:hover a{
            color: #fff;
        }
        .modal-body {
          padding: 20px !important;
          max-height: 600px;
          overflow-y: auto;
        }

  </style>
@endsection

@section('content')

<section class="section" style="height: auto !important;">
    <div class="container" style="height: auto !important;">
        <div class="row" style="height: auto !important;">

            <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
                <div class="row">
                    <div class="col-xs-12 brand-header">
                        <h2 style="color:#000 !important;">{{ $generic_info->generic_name ?? ''}}</h2>
                    </div>
                    <div class="col-xs-12 packages-wrapper">
                        <div>
                            <a class="btn btn-outline-info" data-toggle="modal" data-target="#other-combinations" id="generic__btn" data-generic="{{ $generic_info->generic_name ?? ''}}" style="margin: 20px 0px;">Other Combinations</a>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    
                <span class="hidden-sm hidden-xs">
                </span>

                <div class="generic-data-container en" style="height: auto !important;">
                    @if ($generic_info->indications)
                    <div>

                        <h4 class="ac-header">Indications</h4>

                        <div class="ac-body">
                            {!! $generic_info->indications !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->pharmacology)
                    <div>

                        <h4 class="ac-header">Pharmacology</h4>

                        <div class="ac-body">
                            {!! $generic_info->pharmacology !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->dosage_and_administration)
                    <div>

                        <h4 class="ac-header">Dosage And Administration</h4>

                        <div class="ac-body">
                            {!! $generic_info->dosage_and_administration !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->interaction)
                    <div>

                        <h4 class="ac-header">Interaction</h4>

                        <div class="ac-body">
                            {!! $generic_info->interaction !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->contraindications)
                    <div>

                        <h4 class="ac-header">Contraindications</h4>

                        <div class="ac-body">
                            {!! $generic_info->contraindications !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->side_effects)
                    <div>

                        <h4 class="ac-header">Side Effects</h4>

                        <div class="ac-body">
                            {!! $generic_info->side_effects !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->pregnancy_and_lactation)
                    <div>

                        <h4 class="ac-header">Pregnancy And Lactation</h4>

                        <div class="ac-body">
                            {!! $generic_info->pregnancy_and_lactation !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->precautions_and_warnings)
                    <div>

                        <h4 class="ac-header">Precautions And Warnings</h4>

                        <div class="ac-body">
                            {!! $generic_info->precautions_and_warnings !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->overdose_effects)
                    <div>

                        <h4 class="ac-header">Overdose Effects</h4>

                        <div class="ac-body">
                            {!! $generic_info->overdose_effects !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->therapeutic_class)
                    <div>

                        <h4 class="ac-header">Therapeutic Class</h4>

                        <div class="ac-body">
                            {!! $generic_info->therapeutic_class !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->use_in_special_populations)
                    <div>

                        <h4 class="ac-header">Use in special populations</h4>

                        <div class="ac-body">
                            {!! $generic_info->use_in_special_populations !!}
                        </div>
                    </div>
                    @endif

                    @if ($generic_info->storage_conditions)
                    <div>

                        <h4 class="ac-header">Storage Conditions</h4>

                        <div class="ac-body">
                            {!! $generic_info->storage_conditions !!}
                        </div>
                    </div>
                    @endif




                </div>
                </div>
            </div>
            
            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                <h2>Available Brand Names <a 
                href="{{ route('brands') }}?alternative={{str_replace('%','||', $generic_info->generic_name)}}&ref={{$generic_info->id}}" 
                class="btn btn-outline-info d-inline">View Details</a></h2>
                <div class="row">
                    <div class="col-md-12 mb-4" style="margin-bottom: 20px;">
                        <select name="company_name" id="company_name" data-placeholder="Filter By Company">
                            @foreach($companies as $company)
                            <option value="{{ $company->id }}">{{ $company->text ?? ''}}</option>
                            @endforeach
                        </select>
                    </div>     
                    
                    <div class="col-md-12 mb-4" id="reset-container" style="display:none;">
                        <button onclick="clearFilter()" class="btn btn-danger">Reset</button>
                    </div>
                </div>
                
                <div class="row" id="brand_container_wrapper">
                    @foreach ($available_brands as $item)
                    <div class="col-md-6" data-companyid="{{ $item->company_id}}">
                    
                        <a href="{{url('/brands')}}/{{$item->b_id}}/{{strtolower(str_replace(' ', '-', $item->brand_name))}}"
                            class="hoverable-block">
                    
                            <div class="row data-row">
                    
                                <div class="col-xs-12 data-row-top">
                                    <span class="md-icon-container"><img src="{{asset('common_image/dosages')}}/{{$item->icon_image}}"
                                            alt="{{$item->dosage_forms}}" title="Capsule" class="dosage-icon"></span> {{$item->brand_name}}
                                </div>
                                <div class="col-xs-12 data-row-strength">
                                    <span class="grey-ligten">{{$item->strength}}</span>
                                </div>
                                <div class="col-xs-12">
                                    {{$item->generic_name}}
                                </div>
                                @if ($item->company_name)
                                <div class="col-xs-12">
                                    <span class="data-row-company">
                    
                                        {{$item->company_name}}
                    
                    
                                    </span>
                                </div>
                                @endif
                                <div class="col-xs-12 packages-wrapper">
                                    <div class="package-container">
                                        <span class="unit-price">
                                            <span class="package-pricing">
                                                Unit Price : &#2547 {{$item->unit_price}}
                                            </span>
                                        </span>
                                    </div>
                                </div>
                    
                            </div>
                    
                        </a>
                    
                    </div>
                    @endforeach
                </div>
            </div>

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

<div class="modal fade" id="other-combinations" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel" data-parentid="{{ $generic_info->id ?? '' }}">Other combinations</h5>
        <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="row" id="body-content"></div>
      </div>
    </div>
  </div>
</div>

@section('scripts')
<script src="{{ asset('backend_assets/bower_components/jquery/dist/jquery.min.js') }}"></script>
  <!-- Select2 -->
  <script src="{{asset('backend_assets/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
<script>
    $(document).ready(function(){
        
        init();
        
        $(document).on("change","#company_name", loadBrands)
        $(document).on("click","#generic__btn", loadOtherGeneric)
        
    })
    
    
    function loadBrands(){
         $('#reset-container').css({
            display:'block'
        })
        
        let company_id = $(this).val();
        
        let matches = $(document).find(`[data-companyid=${company_id}]`);
        
        $('#brand_container_wrapper')
        .children()
        .filter(function(){
            return $(this).data('companyid') == company_id;
        })
        .show();
        
        
        $('#brand_container_wrapper')
        .children()
        .filter(function(){
            return $(this).data('companyid') != company_id;
        })
        .hide();
        
    }
    
    
    function loadOtherGeneric(){
        
        let 
        parent_id  = $('#exampleModalLabel').attr("data-parentid"),
        generic_id = parent_id;

        
        $.ajax({
            url: `{{ route('loadAlterNativesBrands')}}?parent_id=${parent_id}&generic_id=${generic_id}`,
            method:'GET',
            beforeSend(){
                // Request sending
            },
            success(data){
                 
                 let html = "";
                 
                 data.forEach(g => {
                     html += `<div class="col-sm-5 col-xs-12 other-comb" style="margin: 5px; padding: 5px 10px;">
                     <a target="_blank" href="{{url('/brands')}}/${g.generic_id}/${parent_id}?otc=${generic_id}">${g.generic_name ?? ''}</a>
                     </div>`;
                 })
                
                $('#body-content').html(html);
            },
            error(err){
                $('#body-content').html('<div class="col-xs-12 text-center text-danger">Error loading combinations. Please try again.</div>');
            }
        })
    }
    
  
    
    function init(){
        $('#company_name').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
    }
    
    
    function clearFilter(){
        $('#company_name').val(null).trigger("change");
        $('#reset-container').css({
            display:'none'
        })
        
         $('#brand_container_wrapper')
        .children()
        .show();

    }
</script>
@endsection