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

@push('scripts')
@if($list_id)<script>loadListCustomFields('{{ $list_id }}');</script>@endif
<script>
(function () {
   'use strict';
   var form = document.getElementById('contact-create-form');
   var listSelect = document.getElementById('list_ids');

   function clearListInvalid() {
      if (!listSelect) return;
      $(listSelect).closest('.multiselect-native-select').removeClass('is-invalid');
   }

   $("#list_ids").on('change', function () {
       var list_id = $(this).val();
       clearListInvalid();
       if (list_id === '' || list_id === null) {
         $('#list_custom_fields').html('');
         return;
       }
       loadListCustomFields(list_id);
   });

   if (form && listSelect) {
      form.addEventListener('submit', function (e) {
         if (listSelect.value) {
            clearListInvalid();
            return;
         }
         e.preventDefault();
         form.classList.add('was-validated');
         $(listSelect).closest('.multiselect-native-select').addClass('is-invalid');
         $(".btn-loading").find("i").removeClass("spinner-border spinner-border-sm align-middle");
      }, true);
   }
})();
</script>
@endpush

@section('content')
<div class="card custom-card">
   <div class="card-body">
      <form id="contact-create-form" method="POST" action="{{ route('contacts.store') }}" class="needs-validation" novalidate>
         @csrf
         
         <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.list')}}
                     <a href="{{ route('lists.create') }}" class="text-primary ms-1">
                        <i class="bi bi-plus-circle"></i>
                     </a>
                  </label>
                  @include('includes.dropdown_lists', ['popup' => 0, 'multiselect' => 0, 'required' => 1, 'client_package_lists' => 0])
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.email')}}</label>
                  <input type="email" class="form-control" placeholder="{{__('app.email')}}" value="{{ old('email') }}" name="email" required>
                  <div class="invalid-feedback">{{__('app.email_required')}}</div>
               </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.contact_settings') }}</div>
            <div class="row">
            <div class="col-md-6">
               <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.active')}}
                     <a tabindex="-1" role="button"
                        data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.active')}}"
                        data-bs-content="{{__('app.import_contact_active_help')}}" data-bs-custom-class="header-primary">
                        <i class="bi bi-question-circle text-primary ms-1"></i>
                     </a>
                  </label>
                  <select name="is_active" class="form-select">
                     <option value="1">{{ __('app.yes') }}</option>
                     <option value="0">{{ __('app.no')}}</option>
                  </select>
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.subscribed')}}
                     <a tabindex="-1" role="button"
                        data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.subscribed')}}"
                        data-bs-content="{{__('app.add_contact_subscribed_help')}}" data-bs-custom-class="header-primary">
                        <i class="bi bi-question-circle text-primary ms-1"></i>
                     </a>
                  </label>
                  <select name="is_unsubscribed" class="form-select">
                     <option value="0">{{ __('app.yes') }}</option>
                     <option value="1">{{ __('app.no')}}</option>
                  </select>
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.confirmed')}}
                     <a tabindex="-1" role="button"
                        data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.confirmed')}}"
                        data-bs-content="{{__('app.import_contact_confirmed_help')}}" data-bs-custom-class="header-primary">
                        <i class="bi bi-question-circle text-primary ms-1"></i>
                     </a>
                  </label>
                  <select name="is_confirmed" class="form-select">
                     <option value="0">{{ __('app.no')}}</option>
                     <option value="1">{{ __('app.yes') }}</option>
                  </select>
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.verified')}}
                     <a tabindex="-1" role="button"
                        data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.verified')}}"
                        data-bs-content="{{__('app.import_contact_verified_help')}}" data-bs-custom-class="header-primary">
                        <i class="bi bi-question-circle text-primary ms-1"></i>
                     </a>
                  </label>
                  <select name="is_verified" class="form-select">
                     <option value="0">{{ __('app.no')}}</option>
                     <option value="1">{{ __('app.yes') }}</option>
                  </select>
               </div>
            </div>
            <div class="col-12">
               <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.skip_already_exist')}}
                     <a tabindex="-1" role="button"
                        data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.skip_already_exist')}}"
                        data-bs-content="{{__('app.skip_already_exist_help')}}" data-bs-custom-class="header-primary">
                        <i class="bi bi-question-circle text-primary ms-1"></i>
                     </a>
                  </label>
                  <select name="skip_already_exist" class="form-select">
                     <option value="0">{{ __('app.no')}}</option>
                     <option value="1">{{ __('app.yes') }}</option>
                  </select>
               </div>
            </div>
            </div>
         </div>

         <div class="mb-0">
            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.custom_fields') }}</div>
            <div class="row">
            <div class="col-12" id="list_custom_fields">
               <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{ __('app.no_custom_field') }}</label>
               </div>
            </div>
            </div>
         </div>

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