@extends('frontend.layout')
@section('page_title', 'List of Brand Names')

@section('content')

<section class="section">
    <div class="container">
        
        <div class="row" style="height: max-content !important;">
            <div class="col-md-12" style="border-left: 5px solid green;margin-left:10px; margin-bottom: 20px;">
                <h2 style="margin:0px;">{{$generic_name ?? ''}}</h2>
                <p>Available Brands</p>
            </div>
        </div>
        
        @if($generic_id)
        <div class="row">
            <div class="col-md-12">
                <a class="btn btn-outline-info" data-toggle="modal" data-target="#other-combinations" id="generic__btn" data-generic="{{ $generic_name ?? ''}}" style="margin: 20px 0px;">Other Generic Combinations</a>
            </div>
        </div>
        @endif 

        <div class="row">
             <div class="col-md-2 mb-4">
                <h4>Filter By:</h4>
            </div>
            <div class="col-md-3 mb-4 col-sm-12">
                <select name="company_name" id="company_name" data-placeholder="Select Company">
                    @foreach($companies as $company)
                    <option value="{{ $company->id }}">{{ $company->text ?? ''}}</option>
                    @endforeach
                </select>
            </div> 
            
            <div class="col-md-3 mb-4 col-sm-12">
                <select name="strength" id="strength" data-placeholder="Select Strength">
                    @foreach($strengths as $strength)
                    <option value="{{ $strength->text }}">{{$strength->text ?? ''}}</option>
                    @endforeach
                </select>
            </div>  
            
            <div class="col-md-3 mb-4 col-sm-12">
                <select name="dosage_forms" id="dosage_forms" data-placeholder="Select Dosage Forms">
                    @foreach($dosages as $dosage)
                    <option value="{{ $dosage->id }}">{{$dosage->text ?? ''}}</option>
                    @endforeach
                </select>
            </div>      
            
            <div class="col-md-1 mb-4">
                <button onclick="clearFilter()" class="btn btn-danger">Clear</button>
            </div>
            
            <div class="col-xs-12 margin-b-5 table-responsive">
                <table class="table table-striped" style="margin-top: 20px !important;">
                    <thead>
                        <tr class="bg-success text-white" style="color: #fff !important;">
                            <th class="text-white">Brand Name</th>
                            <th class="text-white">Dosage Form</th>
                            <th class="text-white">Strength</th>
                            <th class="text-white">Company</th>
                            <th class="text-white">Unit Price & Pack Size</th>
                        </tr>
                    </thead>
                    <tbody id="refTbody">
                        @foreach($brands as $brand)
                        
                            <tr class='clickable-row pe-auto' style="cursor: pointer" data-href="/brands/{{ $brand->b_id }}/{{$brand->brand_name}}">
                                <td>{{$brand->brand_name ?? ''}}</td>
                                <td><img width="25" src="{{asset('common_image/dosages')}}/{{$brand->icon_image}}" alt="{{$brand->dosage_forms}}"/> {{$brand->dosage_forms ?? ''}}</td>
                                <td>{{$brand->strength ?? ''}}</td>
                                <td>{{$brand->company_name ?? ''}}</td>
                                <td class="text-center">{{$brand->unit_price ?? '0'}}</td>
                            </tr>
                        
                        @endforeach
                    </tbody>
                </table>
            </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="{{ $parent_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>

@endsection

@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;
        }
        
        .mb-4 {
            margin-bottom: 10px;
        }

  </style>
@endsection

@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", loadAltBrands)
        $(document).on("change","#strength", loadAltBrands)
        $(document).on("change","#dosage_forms", loadAltBrands)
        $(document).on("click","#generic__btn", loadOtherGeneric)
        
    })
    
    
    function loadOtherGeneric(){
        
        let 
        parent_id  = $('#exampleModalLabel').attr("data-parentid"),
        generic_id = {{ request('ref')}};

        
        $.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=${g.parent_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 loadAltBrands(){
        let 
        company_name = $('#company_name').val() ?? '',
        strength = $('#strength').val() ?? '',
        dosage_forms = $('#dosage_forms').val() ?? '',
        generic_id = {{ request('ref')}};
        
        $.ajax({
            url: `{{ route('loadAlterNativesBrands')}}?company_name=${company_name}&strength=${ strength ? strength.replace(/\+/g,'||') : ''}&dosage_forms=${dosage_forms}&generic_id=${generic_id}`,
            method:'GET',
            beforeSend(){
                // Request sending
            },
            success(data){
                 let html = "";
                 
                 data.forEach(brand => {
                     html += `<tr>
                            <td>${brand.brand_name ?? ''}</td>
                            <td><img width="25" src="{{asset('common_image/dosages')}}/${brand.icon_image}" alt="${brand.dosage_forms ?? ''}"/> ${brand.dosage_forms ?? ''}</td>
                            <td>${brand.strength ?? ''}</td>
                            <td>${brand.company_name ?? ''}</td>
                            <td>${brand.unit_price ?? '0'}</td>
                        </tr>`;
                        
                 })
                $('#refTbody').html(html);
            },
            error(err){
                $('#refTbody').html('<tr><td colspan="5" class="text-center">Error loading data. Please try again.</td></tr>');
            }
        })
    }
    
    
    function init(){
        $('#company_name').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
        $('#strength').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
        $('#dosage_forms').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
        $(".clickable-row").click(function() {
        window.location = $(this).data("href");
        });
    }
    
    
    function clearFilter(){
        $('#company_name').val(null).trigger("change");
        $('#strength').val(null).trigger("change");
        $('#dosage_forms').val(null).trigger("change");
        
        loadAltBrands();

    }
</script>
@endsection