@extends('admin.layout')
@section('content')
<div class="content-wrapper"> 
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <!-- <h1> {{ trans('WhatsApp Campaign') }} <small>{{ trans('WhatsApp Campaign Test') }}...</small> </h1> -->
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('WhatsApp Campaign Test') }}</li>
    </ol>
  </section>
  
  <!-- Main content -->
  <section class="content"> 
    <!-- Info boxes --> 
    <!-- /.row -->
    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <div class="box-header">
            <h3 class="box-title">{{ trans('WhatsApp Campaign Test') }}</h3>
          </div>
          
          <!-- /.box-header -->
          <div class="box-body" style="border-top: solid 0.2px #e1dbdb;">
           @if (count($errors) > 0)
              @if($errors->any())
                @foreach ($errors->all() as $error)
                <div class="alert alert-danger alert-dismissible" role="alert">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  {{ $error }}
                </div>
                @endforeach
              @endif
            @endif
            @if(Session::has('success'))
            <p class="alert {{ Session::get('alert-class', 'alert-success') }}">{{ Session::get('success') }}</p>
            @endif

             <form id="form1">
    <div class="box-header">
        <div class="col-sm-1 col-md-1" style="margin-left:300px">
            <select class="input-sm" name="product" id="product" required>
                <option value="">Select Product</option>
                <option value="Guru" {{ $product == 'Guru' ? 'selected' : '' }}>Guru</option>
                <option value="Tashan" {{ $product == 'Tashan' ? 'selected' : '' }}>Tashan</option>
                <option value="Boss" {{ $product == 'Boss' ? 'selected' : '' }}>Boss</option>
                <option value="Vois" {{ $product == 'Vois' ? 'selected' : '' }}>Vois</option>
                <option value="Brampton" {{ $product == 'Brampton' ? 'selected' : '' }}>Brampton</option>
                <option value="Indian" {{ $product == 'Indian' ? 'selected' : '' }}>Indian</option>


            </select>
        </div>

        <div class="col-sm-1 col-md-1">
            <select class="input-sm" name="template" id="template" required>
                <option value="">Select Template</option>
                <!-- <option value="refer_earn" class="Guru" style="display:none" {{ $template == 'refer_earn' ? 'selected' : '' }}>Refer and Earn</option> -->
                <option value="holiday" class="Guru" style="display:none" {{ $template == 'holiday' ? 'selected' : '' }}>Holiday</option>
                <option value="happynewyear" class="Guru" style="display:none" {{ $template == 'happynewyear' ? 'selected' : '' }}>Happy New Year</option>
                <option value="lohri" class="Guru" style="display:none" {{ $template == 'lohri' ? 'selected' : '' }}>Lohri</option>
                <option value="pongal" class="Guru" style="display:none" {{ $template == 'pongal' ? 'selected' : '' }}>Pongal</option>
                <option value="refer_earn" class="Guru" style="display:none" {{ $template == 'refer_earn' ? 'selected' : '' }}>Refer and Earn</option>
                <option value="holi" class="Guru" style="display:none" {{ $template == 'holi' ? 'selected' : '' }}>Holi</option>
                <option value="guru_ipl_2025" class="Guru" style="display:none" {{ $template == 'guru_ipl_2025' ? 'selected' : '' }}>Guru IPL 2025</option>

                <!-- <option value="refer_earn" class="Tashan" style="display:none" {{ $template == 'refer_earn' ? 'selected' : '' }}>Refer and Earn</option> -->
                <option value="holiday" class="Tashan" style="display:none" {{ $template == 'holiday' ? 'selected' : '' }}>Holiday</option>
                <option value="happynewyear" class="Tashan" style="display:none" {{ $template == 'happynewyear' ? 'selected' : '' }}>Happy New Year</option>
                <option value="lohri" class="Tashan" style="display:none" {{ $template == 'lohri' ? 'selected' : '' }}>Lohri</option>
                <option value="pongal" class="Tashan" style="display:none" {{ $template == 'pongal' ? 'selected' : '' }}>Pongal</option>
                <option value="refer_earn" class="Tashan" style="display:none" {{ $template == 'refer_earn' ? 'selected' : '' }}>Refer and Earn</option>
                <option value="valentine" class="Tashan" style="display:none" {{ $template == 'valentine' ? 'selected' : '' }}>Valentine</option>
                <option value="holi" class="Tashan" style="display:none" {{ $template == 'holi' ? 'selected' : '' }}>Holi</option>
                <option value="tashan_ipl_2025" class="Tashan" style="display:none" {{ $template == 'tashan_ipl_2025' ? 'selected' : '' }}>Tashan IPL 2025</option>

                <!-- <option value="refer_earn" class="Boss" style="display:none" {{ $template == 'refer_earn' ? 'selected' : '' }}>Refer and Earn</option> -->
                <option value="holiday" class="Boss" style="display:none" {{ $template == 'holiday' ? 'selected' : '' }}>Holiday</option>
                <option value="happynewyear" class="Boss" style="display:none" {{ $template == 'happynewyear' ? 'selected' : '' }}>Happy New Year</option>
                <option value="lohri" class="Boss" style="display:none" {{ $template == 'lohri' ? 'selected' : '' }}>Lohri</option>
                <option value="pongal" class="Boss" style="display:none" {{ $template == 'pongal' ? 'selected' : '' }}>Pongal</option>
                <option value="refer_earn" class="Boss" style="display:none" {{ $template == 'refer_earn' ? 'selected' : '' }}>Refer and Earn</option>
                <option value="valentine" class="Boss" style="display:none" {{ $template == 'valentine' ? 'selected' : '' }}>Valentine</option>
                <option value="holi" class="Boss" style="display:none" {{ $template == 'holi' ? 'selected' : '' }}>Holi</option>
                <option value="boss_ipl_2025" class="Boss" style="display:none" {{ $template == 'boss_ipl_2025' ? 'selected' : '' }}>Boss IPL 2025</option>

                <!-- <option value="refer_earn" class="Vois" style="display:none" {{ $template == 'refer_earn' ? 'selected' : '' }}>Refer and Earn</option> -->
                <option value="holiday" class="Vois" style="display:none" {{ $template == 'holiday' ? 'selected' : '' }}>Holiday</option>
                <option value="happynewyear" class="Vois" style="display:none" {{ $template == 'happynewyear' ? 'selected' : '' }}>Happy New Year</option>
                <option value="lohri" class="Vois" style="display:none" {{ $template == 'lohri' ? 'selected' : '' }}>Lohri</option>
                <option value="pongal" class="Vois" style="display:none" {{ $template == 'pongal' ? 'selected' : '' }}>Pongal</option>
                <option value="refer_earn" class="Vois" style="display:none" {{ $template == 'refer_earn' ? 'selected' : '' }}>Refer and Earn</option>
                <option value="valentine" class="Vois" style="display:none" {{ $template == 'valentine' ? 'selected' : '' }}>Valentine</option>
                <option value="holi" class="Vois" style="display:none" {{ $template == 'holi' ? 'selected' : '' }}>Holi</option>
                <option value="vois_ipl_2025" class="Vois" style="display:none" {{ $template == 'vois_ipl_2025' ? 'selected' : '' }}>Vois IPL 2025</option>
                
                
                <option value="holi" class="Brampton" style="display:none" {{ $template == 'holi' ? 'selected' : '' }}>Holi</option>
                <option value="brampton_ipl_2025" class="Brampton" style="display:none" {{ $template == 'brampton_ipl_2025' ? 'selected' : '' }}>Brampton IPL 2025</option>


                <option value="holi" class="Indian" style="display:none" {{ $template == 'holi' ? 'selected' : '' }}>Holi</option>
                <option value="indian_ipl_2025" class="Indian" style="display:none" {{ $template == 'indian_ipl_2025' ? 'selected' : '' }}>Indian IPL 2025</option>


            </select>
        </div>

        <button type="button" class="btn btn-success" onclick="openModelConfirmation(event)">Test Template</button>
        <a href="{{ URL::to('admin/whatsapp-campaign-test')}}" class="btn btn-danger">{{ trans('Clear') }}</a>
    </div>
</form>

<!-- Modal -->
<div id="whats-app-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">
                    Send Template on WhatsApp Test<span id="redmine-sku"></span>
                </h4>
            </div>
            <div class="modal-body">
                <form id="form1" method="post" action="{{ url('admin/whatsapp-campaign-test') }}" enctype="multipart/form-data">
                    @csrf()

                    <div class="form-group">
                      <input type="hidden" id="hiddenProduct"  name="hiddenProduct" value="">
                      <input type="hidden" id="hiddenTemplate" name="hiddenTemplate" value="">

                      <p><strong>Selected Product:</strong> <span id="modal-product"></span></p>
                      <p><strong>Selected Template:</strong> <span id="modal-template"></span></p>

                      <p><strong>Phone Numbers with country code:</strong> 
                        <input type=text name="hiddenPhone" value="" placeholder="14033518181, 918851611201" class="form-control"/>
                      </p>

                      <strong>Template Content:</strong>
                        <div id="img"></div> 
                      
                      
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-right">
                            <button type="submit" class="btn btn-primary" id="whats-app_template_submit">Send Template</button>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <div class="alert alert-danger data-dismiss" style="display: none;" role="alert"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="text-align: left;">
                <div id="delivery-inspection-list" class="table-responsive" style="max-height: 500px; overflow-y: scroll;"></div>
            </div>
        </div>
    </div>
</div>

<script>
  function openModelConfirmation(event){
    event.preventDefault();

    var selectedProduct = document.getElementById('product').value;
    var selectedTemplate = document.getElementById('template').value;

    if (!selectedProduct || !selectedTemplate) {
        alert('Please select both Product and Template');
        return; 
    }

    document.getElementById('modal-product').innerText = selectedProduct;
    document.getElementById('modal-template').innerText = selectedTemplate;

    document.getElementById('hiddenProduct').value = selectedProduct;
    document.getElementById('hiddenTemplate').value = selectedTemplate;

    showImage(selectedProduct, selectedTemplate);
    console.log( selectedProduct, selectedTemplate);

    jQuery('.alert-danger').hide().empty();
    $('#whats-app-modal').modal('show');

  }


function showImage(product, template) {
  console.log(product, template,'showImage' )
    var imgDiv = document.getElementById('img');
    var imagePath = '';
    var baseURL = "{{ env('APP_URL') }}";

    if (product === 'Guru' && template === 'happynewyear') {
        imagePath = baseURL + '/assets/whatsapp/guru_happyNewYear.PNG'; 
    } else if (product === 'Guru' && template === 'holiday') {
        imagePath = baseURL + '/assets/whatsapp/guru_holiday.PNG';
    } else if (product === 'Guru' && template === 'lohri') {
        imagePath = baseURL + '/assets/whatsapp/lohri-guru.PNG';
    } else if (product === 'Guru' && template === 'pongal') {
        imagePath = baseURL + '/assets/whatsapp/pongal-guru.PNG';
    } else if (product === 'Guru' && template === 'refer_earn') {
        imagePath = baseURL + '/assets/whatsapp/refer_guru.PNG';
    }  else if (product === 'Guru' && template === 'holi') {
        imagePath = baseURL + '/assets/whatsapp/ss-guru-holi.PNG';
    }   else if (product === 'Guru' && template === 'guru_ipl_2025') {
        imagePath = baseURL + '/assets/whatsapp/guru_ipl_2025.PNG';
    } 
    
    else if (product === 'Tashan' && template === 'happynewyear') {
        imagePath = baseURL + '/assets/whatsapp/tashan_happyNewYear.PNG';
    } else if (product === 'Tashan' && template === 'holiday') {
        imagePath = baseURL + '/assets/whatsapp/tashan_holiday.PNG';
    } else if (product === 'Tashan' && template === 'lohri') {
        imagePath = baseURL + '/assets/whatsapp/lohri-tashan.PNG';
    }  else if (product === 'Tashan' && template === 'pongal') {
        imagePath = baseURL + '/assets/whatsapp/pongal-tashan.PNG';
    } else if (product === 'Tashan' && template === 'refer_earn') {
        imagePath = baseURL + '/assets/whatsapp/refer_tashan.PNG';
    } else if (product === 'Tashan' && template === 'valentine') {
        imagePath = baseURL + '/assets/whatsapp/tashan_valentine.PNG';
    } else if (product === 'Tashan' && template === 'holi') {
        imagePath = baseURL + '/assets/whatsapp/ss-tashan-holi.PNG';
    } else if (product === 'Tashan' && template === 'tashan_ipl_2025') {
        imagePath = baseURL + '/assets/whatsapp/tashan_ipl_2025.PNG';
    }
    
    else if (product === 'Boss' && template === 'happynewyear') {
        imagePath = baseURL + '/assets/whatsapp/boss_happyNewYear.PNG';
    } else if (product === 'Boss' && template === 'holiday') {
        imagePath = baseURL + '/assets/whatsapp/boss_holiday.PNG';
    } else if (product === 'Boss' && template === 'lohri') {
        imagePath = baseURL + '/assets/whatsapp/lohri-boss.PNG';
    } else if (product === 'Boss' && template === 'pongal') {
        imagePath = baseURL + '/assets/whatsapp/pongal-boss.PNG';
    } else if (product === 'Boss' && template === 'refer_earn') {
        imagePath = baseURL + '/assets/whatsapp/refer_boss.PNG';
    } else if (product === 'Boss' && template === 'valentine') {
        imagePath = baseURL + '/assets/whatsapp/boss_valentine.PNG';
    } else if (product === 'Boss' && template === 'holi') {
        imagePath = baseURL + '/assets/whatsapp/ss-boss-holi.PNG';
    } else if (product === 'Boss' && template === 'boss_ipl_2025') {
        imagePath = baseURL + '/assets/whatsapp/boss_ipl_2025.PNG';
    }
    
    else if (product === 'Vois' && template === 'happynewyear') {
        imagePath = baseURL + '/assets/whatsapp/vois_happyNewYear.PNG';
    } else if (product === 'Vois' && template === 'holiday') {
        imagePath = baseURL + '/assets/whatsapp/vois_holiday.PNG';
    } else if (product === 'Vois' && template === 'lohri') {
        imagePath = baseURL + '/assets/whatsapp/lohri-vois.PNG';
    }  else if (product === 'Vois' && template === 'pongal') {
        imagePath = baseURL + '/assets/whatsapp/pongal-vois.PNG';
    } else if (product === 'Vois' && template === 'refer_earn') {
        imagePath = baseURL + '/assets/whatsapp/refer_vois.PNG';
    } else if (product === 'Vois' && template === 'valentine') {
        imagePath = baseURL + '/assets/whatsapp/voi_valentine.PNG';
    } else if (product === 'Vois' && template === 'holi') {
        imagePath = baseURL + '/assets/whatsapp/ss-vois-holi.PNG';
    } else if (product === 'Vois' && template === 'vois_ipl_2025') {
        imagePath = baseURL + '/assets/whatsapp/vois_ipl_2025.PNG';
    }


    else if (product === 'Indian' && template === 'holi') {
        imagePath = baseURL + '/assets/whatsapp/ss-indian-holi.PNG';
    }
    else if (product === 'Indian' && template === 'indian_ipl_2025') {
        imagePath = baseURL + '/assets/whatsapp/indian_ipl_2025.PNG';
    }

    else if (product === 'Brampton' && template === 'holi') {
        imagePath = baseURL + '/assets/whatsapp/ss-brampton-holi.PNG';
    }
    else if (product === 'Brampton' && template === 'brampton_ipl_2025') {
        imagePath = baseURL + '/assets/whatsapp/brampton_ipl_2025.PNG';
    }
    
    else {
        imagePath = '';
    }

    if (imagePath) {
        imgDiv.innerHTML = '<img src="' + imagePath + '" alt="Template Image" class="img-responsive" />';
    } else {
        imgDiv.innerHTML = '<p>No image available for this combination.</p>';
    }
}

    var selectedProduct = document.getElementById('product').value;
    var selectedTemplate = document.getElementById('template').value;

  var data = {
      product: selectedProduct,
      template: selectedTemplate
  };

$.ajax({
        url: '{{ URL::to("admin/whatsapp-campaign-test")}}',
        type: "POST",
        data: data,
        success: function(response) {
            console.log('API Response:', response);
            alert('Data sent successfully');
        },
        error: function(error) {
            console.error('Error sending data:', error);
            alert('Error occurred while sending data');
        }
    });

</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
  // Show Guru options by default
  // $('.Guru').show();

  $('#product').change(function() {
    var selectedProduct = $(this).val();
    $('#template option').hide();

    if (selectedProduct === 'Guru') {
      $('.Guru').show(); 
    } else if (selectedProduct === 'Tashan') {
      $('.Tashan').show(); 
    } else if (selectedProduct === 'Boss') {
      $('.Boss').show(); 
    }
    else if (selectedProduct === 'Brampton') {
      $('.Brampton').show(); 
    }
    else if (selectedProduct === 'Indian') {
      $('.Indian').show(); 
    }
    else if (selectedProduct === 'Vois') {
      $('.Vois').show(); 
    } else {
      $('#template').val(''); 
    }
  });
});
</script>
@endsection