@extends('backend.layout.master-tailwind')
@section('title', __('All Custom Forms'))

@section('admin_styles')
<style>
.forms-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 768px) {
    .forms-layout { grid-template-columns: 1fr; }
    .tbl .col-id,
    .tbl .col-email { display: none; }
}
</style>
@endsection

@section('content')
<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Custom Forms') }}</h1>
      <p class="page-sub">{{ __('Build and manage contact and custom forms') }}</p>
    </div>
  </div>

  <div class="forms-layout">

    {{-- Forms table --}}
    <div class="card" style="padding:0;overflow:hidden">

      @can('form-bulk-delete')
      <div id="bulk-toolbar" style="display:none;padding:10px 16px;border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--danger,#ef4444) 5%,transparent);align-items:center;gap:10px">
        <span id="bulk-count" style="font-size:12px;color:var(--text-2);flex:1"></span>
        <button type="button" id="bulk-delete-btn" class="btn sm" style="background:color-mix(in oklch,var(--danger,#ef4444) 10%,transparent);color:var(--danger,#ef4444);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent)">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
          {{ __('Delete Selected') }}
        </button>
        <form id="bulk-delete-form" action="{{ route('admin.delete.bulk.action.form') }}" method="POST" style="display:none">
          @csrf
          <div id="bulk-inputs"></div>
        </form>
      </div>
      @endcan

      <div style="overflow-x:auto">
      <table class="tbl">
        <thead>
          <tr>
            @can('form-bulk-delete')
            <th style="width:40px;padding-left:16px">
              <input type="checkbox" id="check-all" style="accent-color:var(--accent,#6366f1);width:14px;height:14px;cursor:pointer">
            </th>
            @endcan
            <th class="col-id">{{ __('ID') }}</th>
            <th>{{ __('Title') }}</th>
            <th class="col-email">{{ __('Receiving Email') }}</th>
            <th>{{ __('Actions') }}</th>
          </tr>
        </thead>
        <tbody>
          @forelse($all_forms as $form)
          <tr>
            @can('form-bulk-delete')
            <td style="padding-left:16px">
              <input type="checkbox" class="row-check" value="{{ $form->id }}" style="accent-color:var(--accent,#6366f1);width:14px;height:14px;cursor:pointer">
            </td>
            @endcan
            <td class="col-id" style="color:var(--text-3);font-size:12px">#{{ $form->id }}</td>
            <td style="font-weight:500">{{ $form->title }}</td>
            <td class="col-email" style="color:var(--text-2);font-size:12px">{{ $form->email }}</td>
            <td>
              <div style="display:flex;gap:6px;align-items:center">
                @can('form-edit')
                <a href="{{ route('admin.form.edit', $form->id) }}" class="icon-btn" title="{{ __('Edit') }}">
                  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                </a>
                @endcan
                @can('form-delete')
                <form action="{{ route('admin.form.delete', $form->id) }}" method="POST" class="form-delete-form" style="display:inline">
                  @csrf
                  <button type="button" class="icon-btn delete-form-btn" title="{{ __('Delete') }}" style="color:var(--danger,#ef4444)">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
                  </button>
                </form>
                @endcan
              </div>
            </td>
          </tr>
          @empty
          <tr>
            <td colspan="5" style="text-align:center;color:var(--text-3);padding:36px;font-size:13px">{{ __('No forms found') }}</td>
          </tr>
          @endforelse
        </tbody>
      </table>
      </div>
    </div>

    {{-- Add New Form --}}
    <div style="display:flex;flex-direction:column;gap:12px">
      @if($errors->any())
      <div style="background:color-mix(in oklch,var(--danger,#ef4444) 8%,transparent);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--danger,#ef4444);display:flex;flex-direction:column;gap:4px">
        @foreach($errors->all() as $error)<div>{{ $error }}</div>@endforeach
      </div>
      @endif
      <div class="card" style="padding:20px">
        <div style="font-size:13px;font-weight:600;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)">{{ __('Add New Form') }}</div>
        <form action="{{ route('admin.form') }}" method="POST" enctype="multipart/form-data" style="display:flex;flex-direction:column;gap:12px">
          @csrf
          <div>
            <label class="field-label" for="title">{{ __('Title') }}</label>
            <input class="input wide" type="text" name="title" id="title" value="{{ old('title') }}" placeholder="{{ __('Enter form title') }}">
          </div>
          <div>
            <label class="field-label" for="email">{{ __('Receiving Email') }}</label>
            <input class="input wide" type="text" name="email" id="email" value="{{ old('email') }}" placeholder="{{ __('Enter receiving email') }}">
          </div>
          <div>
            <label class="field-label" for="button_text">{{ __('Button Title') }}</label>
            <input class="input wide" type="text" name="button_text" id="button_text" value="{{ old('button_text') }}" placeholder="{{ __('Enter button title') }}">
          </div>
          <div>
            <label class="field-label" for="success_message">{{ __('Success Message') }}</label>
            <input class="input wide" type="text" name="success_message" id="success_message" value="{{ old('success_message') }}" placeholder="{{ __('Enter success message') }}">
          </div>
          @can('form-add')
          <div>
            <button type="submit" class="btn primary sm">{{ __('Add New Form') }}</button>
          </div>
          @endcan
        </form>
      </div>
    </div>

  </div>
</div>
@endsection

@section('script')
<script>
(function () {

  // Single row delete
  document.querySelectorAll('.delete-form-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var form = this.closest('.form-delete-form');
      Swal.fire({
        title: '{{ __("Delete Form?") }}',
        text: '{{ __("This action cannot be undone.") }}',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: '{{ __("Delete") }}',
        confirmButtonColor: '#ef4444',
        cancelButtonText: '{{ __("Cancel") }}'
      }).then(function (result) {
        if (result.isConfirmed) form.submit();
      });
    });
  });

  // Bulk delete
  var checkAll    = document.getElementById('check-all');
  var bulkToolbar = document.getElementById('bulk-toolbar');
  var bulkCount   = document.getElementById('bulk-count');
  var bulkDeleteBtn  = document.getElementById('bulk-delete-btn');
  var bulkDeleteForm = document.getElementById('bulk-delete-form');
  var bulkInputs     = document.getElementById('bulk-inputs');

  function getChecked() {
    return Array.from(document.querySelectorAll('.row-check:checked'));
  }

  function updateBulkToolbar() {
    if (!bulkToolbar) return;
    var checked = getChecked();
    if (checked.length > 0) {
      bulkToolbar.style.display = 'flex';
      bulkCount.textContent = checked.length + ' {{ __("item(s) selected") }}';
    } else {
      bulkToolbar.style.display = 'none';
    }
  }

  if (checkAll) {
    checkAll.addEventListener('change', function () {
      document.querySelectorAll('.row-check').forEach(function (cb) {
        cb.checked = checkAll.checked;
      });
      updateBulkToolbar();
    });
  }

  document.querySelectorAll('.row-check').forEach(function (cb) {
    cb.addEventListener('change', function () {
      if (checkAll && !this.checked) checkAll.checked = false;
      updateBulkToolbar();
    });
  });

  if (bulkDeleteBtn) {
    bulkDeleteBtn.addEventListener('click', function () {
      var checked = getChecked();
      if (!checked.length) return;
      Swal.fire({
        title: '{{ __("Delete Selected?") }}',
        text: '{{ __("This action cannot be undone.") }}',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: '{{ __("Delete") }}',
        confirmButtonColor: '#ef4444',
        cancelButtonText: '{{ __("Cancel") }}'
      }).then(function (result) {
        if (result.isConfirmed) {
          bulkInputs.innerHTML = '';
          checked.forEach(function (cb) {
            var inp = document.createElement('input');
            inp.type = 'hidden';
            inp.name = 'ids[]';
            inp.value = cb.value;
            bulkInputs.appendChild(inp);
          });
          bulkDeleteForm.submit();
        }
      });
    });
  }

}());
</script>
@endsection