@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 type="text/javascript">
$(function() {
	'use strict';
	$('.repeater-contact').repeater({
		show: function () {
			$(this).slideDown();
		},
		hide: function (deleteElement) {
			if(confirm("{{ __('app.msg_delete_repeater_element') }}")) {
				$(this).slideUp(deleteElement);
			}
		},
		isFirstItemUndeletable: true
	});
	$(".modal").on("hidden.bs.modal", function() {
		document.getElementById("shortcode").select();
		document.execCommand("copy");
		$('.btn-primary').focus();
	});
});
</script>
@endpush

@section('content')
<div class="row">
  <div class="col-xl-12">
    <div class="card custom-card">
      <div class="card-body">
        <form method="post" action="{{route('broadcast.mail.headers')}}" class="needs-validation" id="frm-mail-headers" novalidate>
          @csrf
          @method('PUT')

          <div class="mb-3 pb-3 border-bottom d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div class="d-flex align-items-center flex-wrap gap-2">
              <span class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-0">{{ __('app.mail_headers') }}</span>
              <a tabindex="-1" role="button"
                data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.mail_headers')}}"
                data-bs-content="{{__('app.mail_headers_help')}}" data-bs-custom-class="header-primary">
                <i class="bi bi-question-square text-primary"></i>
              </a>
            </div>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="viewModal('modal', '{{ route('shortcodes') }}');">
              <i class="bi bi-code-slash me-1"></i>{{ __('app.shortcodes') }}
            </button>
          </div>

          <div class="mb-0">
            <div class="row mb-3">
              <div class="col-md-4">
                <label class="form-label fw-semibold mt-2">{{ __('app.header_name') }}</label>
              </div>
              <div class="col-md-1"></div>
              <div class="col-md-4">
                <label class="form-label fw-semibold mt-2">{{ __('app.header_value') }}</label>
              </div>
              <div class="col-md-3">
                <label class="form-label fw-semibold mt-2">{{ __('app.actions') }}</label>
              </div>
            </div>

            <div class="repeater-contact">
              <div data-repeater-list="mail_headers">
                @if(!empty($mail_headers))
                @foreach($mail_headers as $key => $value)
                <div data-repeater-item class="row mb-3">
                  <div class="col-md-4">
                    <input type="text" class="form-control" name="key" value="{{ \App\Http\Helper\Helper::decodeString($key) }}" placeholder="{{ __('app.header_name') }}">
                  </div>
                  <div class="col-md-1 d-flex align-items-center justify-content-center">
                    <span>:</span>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control" name="value" value="{{ \App\Http\Helper\Helper::decodeString($value) }}" placeholder="{{ __('app.header_value') }}">
                  </div>
                  <div class="col-md-3 d-flex align-items-center">
                    <button type="button" data-repeater-delete class="btn btn-outline-danger btn-sm d-inline-flex align-items-center justify-content-center" title="{{ __('app.delete') }}" aria-label="{{ __('app.delete') }}">
                      <i class="bi bi-trash"></i>
                    </button>
                  </div>
                </div>
                @endforeach
                @else
                <div data-repeater-item class="row mb-3">
                  <div class="col-md-4">
                    <input type="text" class="form-control" name="key" value="" placeholder="{{ __('app.header_name') }}">
                  </div>
                  <div class="col-md-1 d-flex align-items-center justify-content-center">
                    <span>:</span>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control" name="value" value="" placeholder="{{ __('app.header_value') }}">
                  </div>
                  <div class="col-md-3 d-flex align-items-center">
                    <button type="button" data-repeater-delete class="btn btn-outline-danger btn-sm d-inline-flex align-items-center justify-content-center" title="{{ __('app.delete') }}" aria-label="{{ __('app.delete') }}">
                      <i class="bi bi-trash"></i>
                    </button>
                  </div>
                </div>
                @endif
              </div>

              <div class="row mb-0">
                <div class="col-12">
                  <button type="button" data-repeater-create class="btn btn-outline-primary btn-sm d-inline-flex align-items-center justify-content-center" title="{{ __('app.add') }}" aria-label="{{ __('app.add') }}">
                    <i class="bi bi-plus-lg"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-12">
              <div class="d-flex gap-2">
                <button type="submit" name="save" class="btn btn-primary btn-loading">
                  <i class="bi bi-check-circle me-1"></i>{{__('app.save')}}
                </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>
  </div>
</div>
@endsection