@extends('layouts.app')
@section('title', __('app.sending_domain'))

@push('scripts')
<script>
$(document).ready(function () {
  $('#group_id').select2({
    placeholder: '{{ __("app.select_group") }}',
    allowClear: false,
    width: '100%',
    minimumResultsForSearch: 0
  });

  if (typeof bootstrap !== 'undefined' && bootstrap.Popover) {
    document.querySelectorAll('.sending-domain-edit-page [data-bs-toggle="popover"]').forEach(function (el) {
      try {
        if (!bootstrap.Popover.getInstance(el)) {
          new bootstrap.Popover(el, { container: 'body' });
        }
      } catch (e) { /* ignore */ }
    });
  }
});
</script>
<style>
.sending-domain-edit-page .sd-sec-title {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}
.sending-domain-edit-page textarea.font-monospace {
  font-size: 0.75rem;
  line-height: 1.4;
}
/* Match group (Select2) height to Active / Auto verification (.form-select-sm) */
.sending-domain-edit-page {
  --sd-select-sm-h: 2.125rem;
}
.sending-domain-edit-page select.form-select-sm {
  min-height: var(--sd-select-sm-h);
  height: var(--sd-select-sm-h);
}
.sending-domain-edit-page .select2-container {
  min-height: var(--sd-select-sm-h) !important;
}
.sending-domain-edit-page .select2-container .select2-selection--single,
.sending-domain-edit-page .select2-container.select2-container--default .select2-selection--single {
  min-height: var(--sd-select-sm-h) !important;
  max-height: var(--sd-select-sm-h) !important;
  height: var(--sd-select-sm-h) !important;
}
.sending-domain-edit-page .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.sending-domain-edit-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  min-height: var(--sd-select-sm-h) !important;
  max-height: var(--sd-select-sm-h) !important;
  height: var(--sd-select-sm-h) !important;
  line-height: calc(var(--sd-select-sm-h) - 2px) !important;
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
  font-size: 0.875rem !important;
}
.sending-domain-edit-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--sd-select-sm-h) - 2px) !important;
  top: 50% !important;
  transform: translateY(-50%);
  margin-top: 0 !important;
}
</style>
@endpush

@section('content')
<div class="row">
  <div class="col-12">
    <span id="sending-domain-verified-label" data-value="{{ __('app.verified') }}" class="d-none"></span>
    <span id="sending-domain-unverified-label" data-value="{{ __('app.unverified') }}" class="d-none"></span>
    <div class="card custom-card border-0 shadow-sm sending-domain-edit-page">
      <div class="card-body p-3">
        <form method="POST" action="{{ route('sending_domains.update', $sending_domain->id) }}" class="needs-validation" novalidate>
          @csrf
          @method('PUT')

          <div class="mb-3">
            <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
              <span class="form-label small mb-0 text-secondary">{{ __('app.protocol') }} / {{ __('app.domain') }}</span>
            </div>
            <div class="input-group input-group-sm">
              <select name="protocol" id="sending_domain_protocol" class="form-select flex-shrink-0" style="max-width: 7.25rem;" aria-label="{{ __('app.protocol') }}">
                <option value="https://" {{ $sending_domain->protocol == 'https://' ? 'selected' : '' }}>https://</option>
                <option value="http://" {{ $sending_domain->protocol == 'http://' ? 'selected' : '' }}>http://</option>
              </select>
              <input type="text" class="form-control" id="sending_domain_domain" name="domain" value="{{ $sending_domain->domain }}" required autocomplete="off" placeholder="example.com" aria-label="{{ __('app.domain') }}">
            </div>
            <div class="invalid-feedback">{{ __('app.domain_required') }}</div>
          </div>

          <div class="mb-3 pb-3 border-bottom">
            <div class="text-secondary text-uppercase fw-semibold sd-sec-title mb-2">{{ __('app.settings') }}</div>
            <div class="row g-2 align-items-end">
              <div class="col-12 col-md-6">
                <label class="form-label small mb-0 text-secondary d-flex align-items-center gap-1" for="group_id">
                  {{ __('app.group') }}
                  <a href="javascript:;" onclick="viewModal('modal', '{{ route('group.create', ['type_id' => config('custom.group_sending_domains')]) }}');" class="text-primary" tabindex="-1" title="{{ __('app.add') }}"><i class="bi bi-plus-circle"></i></a>
                </label>
                <select name="group_id" class="single-select form-select form-select-sm" id="group_id" required>
                  @foreach($groups as $id => $group_name)
                  <option value="{{ $id }}" {{ $sending_domain->group_id == $id ? 'selected' : '' }}>{{ $group_name }}</option>
                  @endforeach
                </select>
                <div class="invalid-feedback">{{ __('app.select_group_error') }}</div>
              </div>
              <div class="col-6 col-md-3">
                <label class="form-label small mb-0 text-secondary" for="is_active">{{ __('app.active') }}</label>
                <select name="is_active" id="is_active" class="form-select form-select-sm" aria-label="{{ __('app.active') }}">
                  <option value="1" {{ $sending_domain->is_active ? 'selected' : '' }}>{{ __('app.yes') }}</option>
                  <option value="0" {{ $sending_domain->is_active ? '' : 'selected' }}>{{ __('app.no') }}</option>
                </select>
              </div>
              <div class="col-6 col-md-3">
                <label class="form-label small mb-0 text-secondary d-flex align-items-center gap-1" for="auto_verification">
                  {{ __('app.auto_verification') }}
                  <a tabindex="-1" role="button"
                    data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left" title="{{ __('app.auto_verification') }}"
                    data-bs-content="{{ __('app.domain_auto_verfication_help') }}" data-bs-custom-class="header-primary" class="text-primary p-0 lh-1">
                    <i class="bi bi-question-circle" aria-hidden="true"></i>
                  </a>
                </label>
                <select name="auto_verification" id="auto_verification" class="form-select form-select-sm" aria-label="{{ __('app.auto_verification') }}">
                  <option value="0" {{ $sending_domain->auto_verification ? '' : 'selected' }}>{{ __('app.no') }}</option>
                  <option value="1" {{ $sending_domain->auto_verification ? 'selected' : '' }}>{{ __('app.yes') }}</option>
                </select>
              </div>
            </div>
          </div>

          <div class="row g-2 mb-3 small">
            <div class="col-12 col-lg-6">
              <div class="d-flex gap-2 p-2 rounded border border-primary border-opacity-25 bg-primary bg-opacity-10">
                <i class="bi bi-info-circle flex-shrink-0 text-primary" aria-hidden="true"></i>
                <span class="lh-sm">{{ __('app.dns_values_setup_help') }}</span>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <div class="d-flex gap-2 p-2 rounded border border-warning border-opacity-50 bg-warning bg-opacity-10">
                <i class="bi bi-exclamation-triangle flex-shrink-0" aria-hidden="true"></i>
                <span class="lh-sm">{{ __('app.alert_keys_dns_values') }}</span>
              </div>
            </div>
          </div>

          <div class="mb-3">
            <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
              <span class="text-secondary text-uppercase fw-semibold sd-sec-title">{{ __('app.keys') }}</span>
              <a href="{{ route('download.keys', ['id' => $sending_domain->id]) }}" class="btn btn-outline-success btn-sm py-0 px-2 ms-auto">
                <i class="bi bi-download"></i> {{ __('app.download') }}
              </a>
            </div>
            <div class="row g-2">
              <div class="col-md-6">
                <label class="form-label small mb-0 text-secondary" for="public_key">{{ __('app.public_key') }}</label>
                <textarea class="form-control form-control-sm font-monospace" id="public_key" name="public_key" rows="3" placeholder="{{ __('app.public_key') }}">{{ $sending_domain->public_key }}</textarea>
              </div>
              <div class="col-md-6">
                <label class="form-label small mb-0 text-secondary" for="private_key">{{ __('app.private_key') }}</label>
                <textarea class="form-control form-control-sm font-monospace" id="private_key" name="private_key" rows="3" placeholder="{{ __('app.private_key') }}">{{ $sending_domain->private_key }}</textarea>
              </div>
            </div>
          </div>

          <div class="mb-3">
            <div class="text-secondary text-uppercase fw-semibold sd-sec-title mb-2">{{ __('app.dns_entries') }}</div>
            <div class="small text-secondary mb-2 lh-sm border-start border-3 border-secondary border-opacity-25 ps-2">
              {!! str_replace('[domain-name]', $sending_domain->domain, __('app.help_dns_entries')) !!}
            </div>
            <div class="table-responsive border rounded">
              <table class="table table-sm table-hover align-middle mb-0 sending-domains-dns-table">
                <thead class="table-light">
                  <tr class="small">
                    <th scope="col" class="fw-semibold py-2 ps-2 text-nowrap" style="width: 7.5rem; min-width: 7.5rem;">{{ __('app.type') }}</th>
                    <th scope="col" class="fw-semibold py-2">{{ __('app.host') }}</th>
                    <th scope="col" class="fw-semibold py-2">{{ __('app.value') }}</th>
                    <th scope="col" class="fw-semibold py-2 pe-2 text-center" style="width: 4rem;">{{ __('app.verified') }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="ps-2 py-2 text-nowrap"><span class="badge bg-primary">TXT</span> <span class="small text-secondary">DKIM</span></td>
                    <td class="py-1">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control font-monospace" style="font-size: 0.75rem;" name="host_dkim" value="{{ $sending_domain->host_dkim }}" aria-label="{{ __('app.host') }} DKIM">
                        <button class="btn btn-outline-secondary btn-copy-dns" type="button" aria-label="{{ __('app.copy') }}"><i class="bi bi-copy"></i></button>
                      </div>
                    </td>
                    <td class="py-1">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control font-monospace" style="font-size: 0.75rem;" name="value_dkim" value="{{ $sending_domain->value_dkim }}" aria-label="{{ __('app.value') }} DKIM">
                        <button class="btn btn-outline-secondary btn-copy-dns" type="button" aria-label="{{ __('app.copy') }}"><i class="bi bi-copy"></i></button>
                      </div>
                    </td>
                    <td class="text-center pe-2 py-2">
                      <span id="key-{{ $sending_domain->id }}" class="rz-status-pill rz-status-pill--icon-only {{ $sending_domain->is_verified_key ? 'is-yes' : 'is-no' }}" title="{{ $sending_domain->is_verified_key ? __('app.verified') : __('app.unverified') }}" aria-label="{{ $sending_domain->is_verified_key ? __('app.verified') : __('app.unverified') }}">
                        <i class="bi {{ $sending_domain->is_verified_key ? 'bi-check-circle-fill' : 'bi-x-circle-fill' }} rz-status-pill__icon" aria-hidden="true"></i>
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td class="ps-2 py-2 text-nowrap"><span class="badge bg-primary">TXT</span> <span class="small text-secondary">SPF</span></td>
                    <td class="py-1">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control font-monospace" style="font-size: 0.75rem;" name="host_spf" value="{{ $sending_domain->host_spf }}" aria-label="{{ __('app.host') }} SPF">
                        <button class="btn btn-outline-secondary btn-copy-dns" type="button" aria-label="{{ __('app.copy') }}"><i class="bi bi-copy"></i></button>
                      </div>
                    </td>
                    <td class="py-1">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control font-monospace" style="font-size: 0.75rem;" name="value_spf" value="{{ $sending_domain->value_spf }}" aria-label="{{ __('app.value') }} SPF">
                        <button class="btn btn-outline-secondary btn-copy-dns" type="button" aria-label="{{ __('app.copy') }}"><i class="bi bi-copy"></i></button>
                      </div>
                    </td>
                    <td class="text-center pe-2 py-2">
                      <span id="spf-{{ $sending_domain->id }}" class="rz-status-pill rz-status-pill--icon-only {{ $sending_domain->is_verified_spf ? 'is-yes' : 'is-no' }}" title="{{ $sending_domain->is_verified_spf ? __('app.verified') : __('app.unverified') }}" aria-label="{{ $sending_domain->is_verified_spf ? __('app.verified') : __('app.unverified') }}">
                        <i class="bi {{ $sending_domain->is_verified_spf ? 'bi-check-circle-fill' : 'bi-x-circle-fill' }} rz-status-pill__icon" aria-hidden="true"></i>
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td class="ps-2 py-2 text-nowrap"><span class="badge bg-primary">TXT</span> <span class="small text-secondary">DMARC</span></td>
                    <td class="py-1">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control font-monospace" style="font-size: 0.75rem;" name="host_dmarc" value="{{ $sending_domain->host_dmarc }}" aria-label="{{ __('app.host') }} DMARC">
                        <button class="btn btn-outline-secondary btn-copy-dns" type="button" aria-label="{{ __('app.copy') }}"><i class="bi bi-copy"></i></button>
                      </div>
                    </td>
                    <td class="py-1">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control font-monospace" style="font-size: 0.75rem;" name="value_dmarc" value="{{ $sending_domain->value_dmarc }}" aria-label="{{ __('app.value') }} DMARC">
                        <button class="btn btn-outline-secondary btn-copy-dns" type="button" aria-label="{{ __('app.copy') }}"><i class="bi bi-copy"></i></button>
                      </div>
                    </td>
                    <td class="text-center pe-2 py-2">
                      <span id="dmarc-{{ $sending_domain->id }}" class="rz-status-pill rz-status-pill--icon-only {{ $sending_domain->is_verified_dmarc ? 'is-yes' : 'is-no' }}" title="{{ $sending_domain->is_verified_dmarc ? __('app.verified') : __('app.unverified') }}" aria-label="{{ $sending_domain->is_verified_dmarc ? __('app.verified') : __('app.unverified') }}">
                        <i class="bi {{ $sending_domain->is_verified_dmarc ? 'bi-check-circle-fill' : 'bi-x-circle-fill' }} rz-status-pill__icon" aria-hidden="true"></i>
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div class="d-flex flex-wrap gap-2 pt-2 border-top">
            <button type="submit" class="btn btn-primary btn-sm btn-loading">
              <i class="bi bi-check-lg me-1"></i>{{ __('app.update') }}
            </button>
            <button type="button" class="btn btn-info btn-sm btn-loading" onclick="validateDomain('{{ $sending_domain->id }}')">
              <i class="bi bi-shield-check me-1"></i>{{ __('app.validate') }}
            </button>
            <a href="{{ route('sending_domains.index') }}" class="btn btn-light btn-sm">
              <i class="bi bi-arrow-left me-1"></i>{{ __('app.cancel') }}
            </a>
          </div>
        </form>

        <div class="mb-0 pt-3 mt-3 border-top">
          <div class="text-secondary text-uppercase fw-semibold sd-sec-title mb-2">{{ __('app.manual_verification') }}</div>
          <div class="small text-secondary mb-2">{{ __('app.manual_verification_help') }}</div>
          <form method="POST" action="{{ route('sending_domains.manual_verification', $sending_domain->id) }}" class="row g-2 align-items-end">
            @csrf
            @method('PUT')
            <div class="col-12 col-md-4">
              <label class="form-label small mb-0 text-secondary">DKIM</label>
              <select name="is_verified_key" class="form-select form-select-sm">
                <option value="0" {{ $sending_domain->is_verified_key ? '' : 'selected' }}>{{ __('app.unverified') }}</option>
                <option value="1" {{ $sending_domain->is_verified_key ? 'selected' : '' }}>{{ __('app.verified') }}</option>
              </select>
            </div>
            <div class="col-12 col-md-4">
              <label class="form-label small mb-0 text-secondary">SPF</label>
              <select name="is_verified_spf" class="form-select form-select-sm">
                <option value="0" {{ $sending_domain->is_verified_spf ? '' : 'selected' }}>{{ __('app.unverified') }}</option>
                <option value="1" {{ $sending_domain->is_verified_spf ? 'selected' : '' }}>{{ __('app.verified') }}</option>
              </select>
            </div>
            <div class="col-12 col-md-4">
              <label class="form-label small mb-0 text-secondary">DMARC</label>
              <select name="is_verified_dmarc" class="form-select form-select-sm">
                <option value="0" {{ $sending_domain->is_verified_dmarc ? '' : 'selected' }}>{{ __('app.unverified') }}</option>
                <option value="1" {{ $sending_domain->is_verified_dmarc ? 'selected' : '' }}>{{ __('app.verified') }}</option>
              </select>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-check2-circle me-1"></i>{{ __('app.save_manual_verification') }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@include('includes.modal')
@endsection