@extends('layouts.app')
@section('title', $page_title)

@section('styles')
<link href="{{asset('assets/css/schedule.css')}}" rel="stylesheet" >
<style>
/* Email input group styling */
.input-group > .select2-container {
  flex: 1 1 auto;
  width: auto !important;
}
#from_email_part1 {
  height: 100%;
}
</style>
@endsection

@push('scripts')
<script src="{{ asset('components/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('components/ckeditor/plugins/mc_uploader/plugin.js') }}"></script>
<script src="{{ asset('assets/js/campaign.js') }}?v={{ filemtime(public_path('assets/js/campaign.js')) }}"></script>
<script>
loadBasedOnData('{{$trigger->based_on}}', 'edit', '{{$trigger->id}}');
loadBasedOnAction('{{$trigger->action}}', 'edit', '{{$trigger->id}}');

$(document).ready(function() {
  // Initialize Select2 for email domain dropdown
  $('#sending-domains').select2({
    placeholder: '{{__("app.select_domain")}}',
    allowClear: false,
    width: '100%'
  });
  
  // Add validation for lists multiselect
  var forms = document.getElementsByClassName('needs-validation');
  Array.prototype.filter.call(forms, function (form) {
    form.addEventListener('submit', function (event) {
      var formIsValid = form.checkValidity();
      
      // Always validate lists
      const listDropdown = document.getElementById("list_ids");
      var listValid = true;
      
      if (listDropdown && !listDropdown.disabled) {
        var listSelectedValues = $(listDropdown).val();
        var isValid = false;
        
        if (listSelectedValues === null || listSelectedValues === undefined) {
          isValid = false;
        } else if (Array.isArray(listSelectedValues)) {
          var validValues = listSelectedValues.filter(function(val) { 
            return val !== '' && val !== null && val !== undefined && String(val).trim() !== ''; 
          });
          isValid = validValues.length > 0;
        } else if (typeof listSelectedValues === 'string') {
          isValid = listSelectedValues.trim() !== '' && listSelectedValues !== null;
        }
        
        if (isValid) {
          var $selectedOptions = $(listDropdown).find('option:selected[value!=""]');
          isValid = $selectedOptions.length > 0;
        }
        
        listValid = isValid;
        
        var $listMultiselectBtn = $(listDropdown).next('.btn-group').find('.multiselect');
        if ($listMultiselectBtn.length === 0) {
          $listMultiselectBtn = $(listDropdown).siblings('.btn-group').find('.multiselect');
        }
        if ($listMultiselectBtn.length === 0) {
          $listMultiselectBtn = $(listDropdown).closest('.form-group, .col-md-12, .col-12').find('.multiselect');
        }
        
        if (!isValid) {
          if ($listMultiselectBtn.length > 0) {
            $listMultiselectBtn.addClass("is-invalid").css({
              'border-color': '#dc3545',
              'box-shadow': '0 0 0 0.2rem rgba(220, 53, 69, 0.25)'
            });
          }
          $(listDropdown).addClass("is-invalid");
          var $feedback = $('#list_ids_feedback');
          if ($feedback.length === 0) {
            $feedback = $(listDropdown).next('.invalid-feedback');
          }
          if ($feedback.length === 0) {
            $feedback = $(listDropdown).siblings('.invalid-feedback');
          }
          if ($feedback.length === 0) {
            $feedback = $(listDropdown).closest('.form-group, .col-md-12, .col-12').find('.invalid-feedback');
          }
          if ($feedback.length > 0) {
            $feedback.show();
          }
        } else {
          if ($listMultiselectBtn.length > 0) {
            $listMultiselectBtn.removeClass("is-invalid").css({
              'border-color': '',
              'box-shadow': ''
            });
          }
          $(listDropdown).removeClass("is-invalid");
          var $feedback = $('#list_ids_feedback');
          if ($feedback.length === 0) {
            $feedback = $(listDropdown).next('.invalid-feedback');
          }
          if ($feedback.length === 0) {
            $feedback = $(listDropdown).siblings('.invalid-feedback');
          }
          if ($feedback.length === 0) {
            $feedback = $(listDropdown).closest('.form-group, .col-md-12, .col-12').find('.invalid-feedback');
          }
          if ($feedback.length > 0) {
            $feedback.hide();
          }
        }
      }
      
      // Always validate sending server
      const sendingServerDropdown = document.getElementById("sending_server_ids");
      var sendingServerValid = true;
      
      if (sendingServerDropdown) {
        var selectedValues = $(sendingServerDropdown).val();
        var isValid = false;
        
        if (selectedValues === null || selectedValues === undefined) {
          isValid = false;
        } else if (Array.isArray(selectedValues)) {
          var validValues = selectedValues.filter(function(val) { 
            return val !== '' && val !== null && val !== undefined && String(val).trim() !== ''; 
          });
          isValid = validValues.length > 0;
        } else if (typeof selectedValues === 'string') {
          isValid = selectedValues.trim() !== '' && selectedValues !== null;
        }
        
        if (isValid) {
          var $selectedOptions = $(sendingServerDropdown).find('option:selected[value!=""]');
          isValid = $selectedOptions.length > 0;
        }
        
        sendingServerValid = isValid;
        
        var $multiselectBtn = $(sendingServerDropdown).next('.btn-group').find('.multiselect');
        if ($multiselectBtn.length === 0) {
          $multiselectBtn = $(sendingServerDropdown).siblings('.btn-group').find('.multiselect');
        }
        if ($multiselectBtn.length === 0) {
          $multiselectBtn = $(sendingServerDropdown).closest('.form-group, .col-md-12, .col-12').find('.multiselect');
        }
        
        if (!isValid) {
          if ($multiselectBtn.length > 0) {
            $multiselectBtn.addClass("is-invalid").css({
              'border-color': '#dc3545',
              'box-shadow': '0 0 0 0.2rem rgba(220, 53, 69, 0.25)'
            });
          }
          $(sendingServerDropdown).addClass("is-invalid");
          var $feedback = $('#sending_server_ids_feedback');
          if ($feedback.length === 0) {
            $feedback = $(sendingServerDropdown).next('.invalid-feedback');
          }
          if ($feedback.length === 0) {
            $feedback = $(sendingServerDropdown).siblings('.invalid-feedback');
          }
          if ($feedback.length === 0) {
            $feedback = $(sendingServerDropdown).closest('.form-group, .col-md-12, .col-12').find('.invalid-feedback');
          }
          if ($feedback.length > 0) {
            $feedback.show();
          }
        } else {
          if ($multiselectBtn.length > 0) {
            $multiselectBtn.removeClass("is-invalid").css({
              'border-color': '',
              'box-shadow': ''
            });
          }
          $(sendingServerDropdown).removeClass("is-invalid");
          var $feedback = $('#sending_server_ids_feedback');
          if ($feedback.length === 0) {
            $feedback = $(sendingServerDropdown).next('.invalid-feedback');
          }
          if ($feedback.length === 0) {
            $feedback = $(sendingServerDropdown).siblings('.invalid-feedback');
          }
          if ($feedback.length === 0) {
            $feedback = $(sendingServerDropdown).closest('.form-group, .col-md-12, .col-12').find('.invalid-feedback');
          }
          if ($feedback.length > 0) {
            $feedback.hide();
          }
        }
      }
      
      // Prevent submission if form is invalid OR lists is invalid OR sending server is invalid
      if (!formIsValid || !listValid || !sendingServerValid) {
        event.preventDefault();
        event.stopPropagation();
        // Remove button loader if validation fails
        $(".btn-loading").find("i").removeClass("spinner-border spinner-border-sm align-middle");
      }
      
      form.classList.add('was-validated');
    }, false);
  });
  
  // Clear validation on change for lists
  $('#list_ids').on('change', function() {
    var $select = $(this);
    if ($select.prop('disabled')) return; // Skip if disabled
    
    var selectedValues = $select.val();
    var hasSelection = false;
    
    if (selectedValues === null || selectedValues === undefined) {
      hasSelection = false;
    } else if (Array.isArray(selectedValues)) {
      var validValues = selectedValues.filter(function(val) { 
        return val !== '' && val !== null && val !== undefined && String(val).trim() !== ''; 
      });
      hasSelection = validValues.length > 0;
    } else if (typeof selectedValues === 'string') {
      hasSelection = selectedValues.trim() !== '' && selectedValues !== null;
    }
    
    if (hasSelection) {
      var $selectedOptions = $select.find('option:selected[value!=""]');
      hasSelection = $selectedOptions.length > 0;
    }
    
    var $multiselectBtn = $select.next('.btn-group').find('.multiselect');
    if ($multiselectBtn.length === 0) {
      $multiselectBtn = $select.siblings('.btn-group').find('.multiselect');
    }
    if ($multiselectBtn.length === 0) {
      $multiselectBtn = $select.closest('.form-group, .col-md-12, .col-12').find('.multiselect');
    }
    
    if (hasSelection) {
      $select.removeClass("is-invalid");
      if ($multiselectBtn.length > 0) {
        $multiselectBtn.removeClass("is-invalid").css({
          'border-color': '',
          'box-shadow': ''
        });
      }
      var $feedback = $('#list_ids_feedback');
      if ($feedback.length === 0) {
        $feedback = $select.next('.invalid-feedback');
      }
      if ($feedback.length === 0) {
        $feedback = $select.siblings('.invalid-feedback');
      }
      if ($feedback.length === 0) {
        $feedback = $select.closest('.form-group, .col-md-12, .col-12').find('.invalid-feedback');
      }
      if ($feedback.length > 0) {
        $feedback.hide();
      }
    }
  });
  
  // Clear validation on change for sending server
  $('#sending_server_ids').on('change', function() {
    var $select = $(this);
    var selectedValues = $select.val();
    var hasSelection = false;
    
    if (selectedValues === null || selectedValues === undefined) {
      hasSelection = false;
    } else if (Array.isArray(selectedValues)) {
      var validValues = selectedValues.filter(function(val) { 
        return val !== '' && val !== null && val !== undefined && String(val).trim() !== ''; 
      });
      hasSelection = validValues.length > 0;
    } else if (typeof selectedValues === 'string') {
      hasSelection = selectedValues.trim() !== '' && selectedValues !== null;
    }
    
    if (hasSelection) {
      var $selectedOptions = $select.find('option:selected[value!=""]');
      hasSelection = $selectedOptions.length > 0;
    }
    
    var $multiselectBtn = $select.next('.btn-group').find('.multiselect');
    if ($multiselectBtn.length === 0) {
      $multiselectBtn = $select.siblings('.btn-group').find('.multiselect');
    }
    if ($multiselectBtn.length === 0) {
      $multiselectBtn = $select.closest('.form-group, .col-md-12, .col-12').find('.multiselect');
    }
    
    if (hasSelection) {
      $select.removeClass("is-invalid");
      if ($multiselectBtn.length > 0) {
        $multiselectBtn.removeClass("is-invalid").css({
          'border-color': '',
          'box-shadow': ''
        });
      }
      var $feedback = $('#sending_server_ids_feedback');
      if ($feedback.length === 0) {
        $feedback = $select.next('.invalid-feedback');
      }
      if ($feedback.length === 0) {
        $feedback = $select.siblings('.invalid-feedback');
      }
      if ($feedback.length === 0) {
        $feedback = $select.closest('.form-group, .col-md-12, .col-12').find('.invalid-feedback');
      }
      if ($feedback.length > 0) {
        $feedback.hide();
      }
    }
  });
});
</script>
@endpush

@php $attributes = json_decode($trigger->attributes); @endphp

@section('content')
<div class="row">
  <div class="col-12">
    <div class="card custom-card">
      <div class="card-body">
        <form method="POST" action="{{ route('triggers.update', $trigger->id) }}" class="needs-validation" novalidate>
          @csrf
          @method('PUT')

          <div class="mb-3 pb-3 border-bottom">
            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.basic_information') }}</div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.name')}}</label>
                  <input type="text" class="form-control" placeholder="{{__('app.name')}}"
                  aria-label="{{__('app.name')}}" value="{{ $trigger->name }}"  name="name" required>
                  <div class="invalid-feedback">{{__('app.name_required')}}</div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.status')}}</label>
                  <select class="form-select" name="is_active">
                     <option value="1" {{ $trigger->is_active ? 'selected' : '' }}>{{__('app.active')}}</option>
                     <option value="0" {{ !$trigger->is_active ? 'selected' : '' }}>{{__('app.in_active')}}</option>
                  </select>
                </div>
              </div>
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.detail')}}</label>
                  <textarea class="form-control" placeholder="{{__('app.detail')}}" rows="3" name="detail">{{ $trigger->detail }}</textarea>
                </div>
              </div>
            </div>
          </div>

          <div class="mb-3 pb-3 border-bottom">
            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.trigger_configuration') }}</div>
            <div class="row">
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{ __('app.based_on') }}
                    <a tabindex="-1" role="button"
                      data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.based_on')}}"
                      data-bs-content="{{__('app.trigger_based_on_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
                    </a>
                  </label>
                  <input type="text" class="form-control" placeholder="{{__('app.name')}}"
                  aria-label="{{__('app.name')}}" value="{{ ucfirst($trigger->based_on) }}" disabled>
                  <input type="hidden" name="based_on" value="{{$trigger->based_on}}">
                </div>
              </div>
              <div class="col-12">
                <div id="based-on-data"></div>
                <div id="action-data"></div>
              </div>
            </div>
          </div>

          <div class="mb-3 pb-3 border-bottom">
            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.sending_configuration') }}</div>
            <div class="row">
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.delivery_servers')}}
                     <a tabindex="-1" role="button"
                     data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.lists')}}"
                     data-bs-content="{{__('app.packages_delivery_servers')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
                     </a>
                   </label>
                   @php $sending_server_ids = json_decode($attributes->sending_server_ids); @endphp
                   @include('includes.dropdown_sending_server', ['popup' => 0, 'multiple' => 1, 'required' => 1])
                </div>
              </div>
            </div>
          </div>

          <div class="mb-3 pb-3 border-bottom">
            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.sender_information') }}</div>
            <div class="row">
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.from_detail')}}
                     <a tabindex="-1" role="button"
                      data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.from_detail')}}"
                      data-bs-content="{{__('app.from_detail_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
                      </a>
                   </label>
                  <div class="d-flex flex-wrap align-items-center gap-3 mt-2">
                    <label class="form-check-label mb-0"><input name="from_detail" class="form-check-input me-1" type="radio" value="sending_server" {{ $attributes->from_detail == 'sending_server' ? 'checked' : '' }}> {{__('app.as_defined_for_sending_server')}}</label>
                    <label class="form-check-label mb-0"><input name="from_detail" class="form-check-input me-1" type="radio" value="list" {{ $attributes->from_detail == 'list' ? 'checked' : '' }}> {{__('app.as_defined_for_list')}}</label>
                    <label class="form-check-label mb-0"><input name="from_detail" class="form-check-input me-1" type="radio" value="custom" {{ $attributes->from_detail == 'custom' ? 'checked' : '' }}> {{__('app.custom')}}</label>
                  </div>
                </div>
              </div>
            </div>
            @php
            $form_detail_custom = ($attributes->from_detail == 'custom' && !empty($attributes->from_detail_custom))
              ? json_decode($attributes->from_detail_custom)
              : null;
            @endphp
            <div class="row mt-3" id="custom_email_data" style="{{ $attributes->from_detail == 'custom' ? '' : 'display: none;' }}">
              <div class="col-md-3">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.from_name')}}</label>
                  <input type="text" class="form-control" placeholder="{{__('app.from_name')}}" value="{{ $form_detail_custom ? ($form_detail_custom->from_name ?? '') : '' }}" name="from_name">
                </div>
              </div>
              <div class="col-md-5">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.from_email')}}</label>
                  <div class="input-group">
                    <div style="width: 35%;">
                      <input type="text" name="from_email_part1" value="{{ ($form_detail_custom && !empty($form_detail_custom->from_email)) ? strstr($form_detail_custom->from_email, '@', true) : '' }}" class="form-control" placeholder="{{__('app.from_email_example')}}">
                    </div>
                    <span class="input-group-text">@</span>
                    <select name="from_email_part2" id="sending-domains" class="single-select form-select">
                      @include('includes.dropdown_sending_domains')
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.reply_email')}}</label>
                  <input type="email" class="form-control" placeholder="{{__('app.reply_email')}}" value="{{ $form_detail_custom ? ($form_detail_custom->reply_email ?? '') : '' }}" name="reply_email">
                </div>
              </div>
            </div>
          </div>

          <div class="mb-0">
            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.sending_speed') }}</div>
            <div class="row">
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{ __('app.sending_speed') }}
                     <a tabindex="-1" role="button"
                     data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.sending_speed')}}"
                     data-bs-content="{{__('app.sending_speed_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
                    </a>
                 </label>
                  <select class="form-select" name="sending_speed" id="speed">
                     <option value="unlimited" {{ $attributes->sending_speed == 'unlimited' ? 'selected="selected"' : '' }}>{{ __('app.unlimited') }}</option>
                     <option value="limited" {{ $attributes->sending_speed == 'limited' ? 'selected="selected"' : '' }}>{{ __('app.limited') }}</option>
                  </select>
                </div>
              </div>
              <div class="col-12" id="speed-attributes" style="{{ $attributes->sending_speed == 'limited' ? '' : 'display: none;' }}">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="form-label fw-semibold mt-2">{{__('app.limit')}}</label>
                      <input type="number" class="form-control" name="limit" id="limit" value="{{ $attributes->limit ?? '1000' }}" min="1" placeholder="1000">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="form-label fw-semibold mt-2">{{__('app.duration')}}</label>
                      <select name="duration" id="duration" class="form-select" >
                        <option value="hour" {{ $attributes->duration == 'hour' ? 'selected="selected"' : '' }}>{{ __('app.hourly') }}</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-12">
              <div class="d-flex gap-2">
                <a href="{{route('triggers.index')}}" class="btn btn-light">
                  <i class="bi bi-arrow-left me-1"></i>{{__('app.cancel')}}
                </a>
                <button type="submit" name="save_continue" value="1" class="btn btn-primary btn-loading">
                  <i class="bi bi-save me-1"></i>{{__('app.save_continue')}}
                </button>
                <button type="submit" name="save_exit" value="1" class="btn btn-success btn-loading">
                  <i class="bi bi-check-lg me-1"></i>{{__('app.save_exit')}}
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection