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

@section('styles')

@endsection

@push('scripts')
<script src="{{asset('components/jquery-repeater/jquery.repeater.min.js')}}"></script>
<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('assets/js/segmentation.js')}}"></script>
@endpush

@section('content')
<div class="row">
  <div class="col-12">
    <div class="card custom-card">
      <div class="card-body">
        <form method="post" action="{{route('list_segmentations.store')}}" class="needs-validation" novalidate>
          @csrf
          <input type="hidden" name="type" value="{{ isset($type) ? $type : 'List' }}">
          
          <!-- Basic Information Section -->
          <div class="row mb-3">
            <div class="col-12">
              <div class="form-group">
                <label class="form-label fw-semibold mt-2">{{__('app.name')}}</label>
                <input type="text" class="form-control" placeholder="{{__('app.name')}}" id="name" name="name" required>
                <div class="invalid-feedback">{{__('app.name_required')}}</div>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <label class="form-label fw-semibold mt-2">{{__('app.lists')}}
                  <a href="{{route('lists.create')}}" class="text-primary ms-1">
                    <i class="bi bi-plus-circle"></i>
                  </a>
                  <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" 
                     title="{{__('app.lists')}}" data-bs-content="{{__('app.segmentation_lists_help')}}" 
                     data-bs-custom-class="header-primary" class="text-primary ms-1">
                    <i class="bi bi-question-circle"></i>
                  </a>
                </label>
                @include('includes.dropdown_lists', ['popup' => 0, 'multiple' => 1, 'required' => 1])
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label fw-semibold mt-2">{{__('app.allow_unsub')}}
                  <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" 
                     title="{{__('app.allow_unsub')}}" data-bs-content="{{__('app.segmentation_allow_unsub_help')}}" 
                     data-bs-custom-class="header-primary" class="text-primary ms-1">
                    <i class="bi bi-question-circle"></i>
                  </a>
                </label>
                <select name="allow_unsub" class="form-select form-select-lg">
                  <option value="Yes">{{ __('app.yes') }}</option>
                  <option value="No">{{ __('app.no')}}</option>			          
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label fw-semibold mt-2">{{__('app.allow_bounced')}}
                  <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" 
                     title="{{__('app.allow_bounced')}}" data-bs-content="{{__('app.segmentation_allow_bounced_help')}}" 
                     data-bs-custom-class="header-primary" class="text-primary ms-1">
                    <i class="bi bi-question-circle"></i>
                  </a>
                </label>
                <select name="allow_bounced" class="form-select form-select-lg">
                  <option value="Yes">{{ __('app.yes') }}</option>
                  <option value="No">{{ __('app.no')}}</option>			          
                </select>
              </div>
            </div>
          </div>
          <!-- Contact Filters Section -->
          <div class="row mb-3">
            <div class="col-12">
              <div class="d-flex align-items-center">
                <div class="me-3">
                  <span class="avatar avatar-xs avatar-rounded bg-info svg-white">
                    <i class="bi bi-people"></i>
                  </span>
                </div>
                <h6 class="mb-0 text-info fw-semibold fs-14">{{ __('app.contact_filters') }}
                  <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" 
                     title="{{__('app.contact_filters')}}" data-bs-content="{{__('app.segmentation_contact_filters_help')}}" 
                     data-bs-custom-class="header-primary" class="text-primary ms-1">
                    <i class="bi bi-question-circle"></i>
                  </a>
                </h6>
              </div>
            </div>
            <div class="col-12">
              <div class="box-body repeater-contact">
                <div data-repeater-list="contact_filter">
                  <div data-repeater-item class="row mt-3">
                    <div class="col-md-4">
                      <span data-repeater-delete>AND</span>
                      <select name="name" class="form-select" onchange="loadContactAction(this, '{{ __('app.use_comma_for_multiples') }}');">
                        <option value=""></option>
                        <option value="email">{{ __('app.email') }}</option>
                        <option value="status">{{ __('app.status') }}</option>
                        <option value="source">{{ __('app.source') }}</option>
                      </select>
                    </div>
                    <div class="col-md-3">
                      <span data-repeater-delete>&nbsp;</span>
                      <select name="action" class="form-select"></select>
                    </div>
                    <div class="col-md-4">
                      <span data-repeater-delete>&nbsp;</span>
                      <select name="value" class="form-select"></select>
                    </div>
                    <div class="col-md-1" style="margin:inherit;">
                      <span data-repeater-delete>&nbsp;</span>
                      <input data-repeater-delete type="button" class="btn btn-danger" value="Delete"/>
                    </div>
                  </div>
                </div>
                <div class="col-12 mt-2">
                  <input data-repeater-create type="button" class="btn btn-outline-primary" value="Add"/>
                </div>
              </div>
            </div>
          </div>
          <!-- Custom Fields Filters Section -->
          <div class="row mb-3">
            <div class="col-12">
              <div class="d-flex align-items-center">
                <div class="me-3">
                  <span class="avatar avatar-xs avatar-rounded bg-info svg-white">
                    <i class="bi bi-list-check"></i>
                  </span>
                </div>
                <h6 class="mb-0 text-info fw-semibold fs-14">{{ __('app.custom_fields_filters') }}
                  <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" 
                     title="{{__('app.custom_fields_filters')}}" data-bs-content="{{__('app.segmentation_custom_fields_filters_help')}}" 
                     data-bs-custom-class="header-primary" class="text-primary ms-1">
                    <i class="bi bi-question-circle"></i>
                  </a>
                </h6>
              </div>
            </div>
            <div class="col-12">
              <div class="box-body repeater-contact">
                <div data-repeater-list="custom_fields_filter">
                  <div data-repeater-item class="row mt-3">
                    <div class="col-md-4">
                      <span data-repeater-delete>AND</span>
                      <select name="name" class="form-select" onchange="loadCustomFieldAction(this, '{{ __('app.use_comma_for_multiples') }}')">
                        <option value=""></option>
                        @if(!empty($custom_fields))
                          @foreach($custom_fields as $custom_field)
                            <option value="{{ $custom_field->id }}">{{ $custom_field->name }}</option>
                          @endforeach
                        @endif
                      </select>
                    </div>
                    <div class="col-md-3">
                      <span data-repeater-delete>&nbsp;</span>
                      <select name="action" class="form-select">
                        <option value=""></option>
                        <option value="is">is</option>
                        <option value="is_not">is not</option>
                        <option value="contain">contain</option>
                        <option value="not_contain">doesn't</option>
                      </select>
                    </div>
                    <div class="col-md-4">
                      <span data-repeater-delete>&nbsp;</span>
                      <input type="text" name="value" class="form-control" placeholder="{{ __('app.use_comma_for_multiples') }}">
                    </div>
                    <div class="col-md-1" style="margin:inherit;">
                      <span data-repeater-delete>&nbsp;</span>
                      <input data-repeater-delete type="button" class="btn btn-danger" value="Delete"/>
                    </div>
                  </div>
                </div>
                <div class="col-12 mt-2">
                  <input data-repeater-create type="button" class="btn btn-outline-primary" value="Add"/>
                </div>
              </div>
            </div>
          </div>
          <!-- Date Filters Section -->
          <div class="row mb-3">
            <div class="col-12">
              <div class="d-flex align-items-center">
                <div class="me-3">
                  <span class="avatar avatar-xs avatar-rounded bg-info svg-white">
                    <i class="bi bi-calendar"></i>
                  </span>
                </div>
                <h6 class="mb-0 text-info fw-semibold fs-14">{{ __('app.date_filters') }}
                  <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" 
                     title="{{__('app.date_filters')}}" data-bs-content="{{__('app.segmentation_date_filters_help')}}" 
                     data-bs-custom-class="header-primary" class="text-primary ms-1">
                    <i class="bi bi-question-circle"></i>
                  </a>
                </h6>
              </div>
            </div>
            <div class="col-12">
              <div class="box-body repeater-contact">
                <div data-repeater-list="dates_filter">
                  <div data-repeater-item class="row mt-3">
                    <div class="col-md-4">
                      <span data-repeater-delete>AND</span>
                      <select name="name" class="form-select" onchange="loadDateFieldAction(this)">
                        <option value=""></option>
                        <option value="subscription_date">{{__('app.subscription_date')}}</option>
                        @if(!empty($custom_fields))
                          @foreach($custom_fields_date as $custom_field)
                            <option value="{{ $custom_field->id }}">{{ $custom_field->name }}</option>
                          @endforeach
                        @endif
                      </select>
                    </div>
                    <div class="col-md-3">
                      <span data-repeater-delete>&nbsp;</span>
                      <select name="action" class="form-select" onchange="loadDate(this)">
                        <option value=""></option>
                        <option value="is">is</option>
                        <option value="is_not">is not</option>
                        <option value="after">after</option>
                        <option value="before">before</option>
                      </select>
                    </div>
                    <div class="col-md-4">
                      <span data-repeater-delete>&nbsp;</span>
                      <input type="text" name="value" class="form-control" id="datetime">
                    </div>
                    <div class="col-md-1" style="margin:inherit;">
                      <span data-repeater-delete>&nbsp;</span>
                      <input data-repeater-delete type="button" class="btn btn-danger" value="Delete"/>
                    </div>
                  </div>
                </div>
                <div class="col-12 mt-2">
                  <input data-repeater-create type="button" class="btn btn-outline-primary" value="Add"/>
                </div>
              </div>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="row">
            <div class="col-12">
              <div class="d-flex gap-2 justify-content-start">
              <button type="submit" name="save" class="btn btn-primary btn-loading">
                  <i class="bi bi-check-lg me-1"></i>{{__('app.save')}}
                </button>
                <a href="{{route('list_segmentations.index')}}" class="btn btn-light">
                  <i class="bi bi-arrow-left me-1"></i>{{__('app.cancel')}}
                </a>                
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<span id="segment_delete_msg" data-value="{{ __('app.segment_delete_msg')}}"></span>
@endsection