@extends('backend.layout.master-tailwind')
@section('title', __('Messaging Access'))

@section('content')

{{-- Hidden forms — submitted by the toggle click handler --}}
<form action="{{ route('admin.check.contact.availability') }}" method="POST" id="form-contact" style="display:none">
  @csrf
  <input type="hidden" name="check_contact_permission" id="val-contact"
         value="{{ $record?->can_contact_freelancer == 1 ? 1 : 0 }}">
</form>

<form action="{{ route('admin.show.contact.me.button.before.login') }}" method="POST" id="form-login-btn" style="display:none">
  @csrf
  <input type="hidden" name="show_button_before_login" id="val-login-btn"
         value="{{ $record?->show_contact_me_before_login == 1 ? 1 : 0 }}">
</form>

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Messaging Access') }}</h1>
      <p class="page-sub">{{ __('Control how clients and freelancers can communicate on the platform.') }}</p>
    </div>
  </div>

  <div class="card">
    <div class="card-head"><div class="card-title">{{ __('Contact Settings') }}</div></div>
    <div>

      <div class="setting-row">
        <div class="info">
          <div class="ttl">{{ __('Allow clients to contact freelancers') }}</div>
          <div class="desc">{{ __('When enabled, clients can send direct messages to freelancers before placing an order.') }}</div>
        </div>
        <span class="switch {{ $record?->can_contact_freelancer == 1 ? 'on' : '' }}"
              data-form="form-contact" data-input="val-contact"></span>
      </div>

      <div class="setting-row">
        <div class="info">
          <div class="ttl">{{ __('Show "Contact Me" button before login') }}</div>
          <div class="desc">{{ __('When enabled, the contact button is visible to guests browsing freelancer profiles.') }}</div>
        </div>
        <span class="switch {{ $record?->show_contact_me_before_login == 1 ? 'on' : '' }}"
              data-form="form-login-btn" data-input="val-login-btn"></span>
      </div>

    </div>
  </div>

</div>

@endsection

@section('script')
<script>
document.querySelectorAll('.switch[data-form]').forEach(function (sw) {
  sw.addEventListener('click', function () {
    var isOn = sw.classList.toggle('on');
    document.getElementById(sw.dataset.input).value = isOn ? 1 : 0;
    document.getElementById(sw.dataset.form).submit();
  });
});
</script>
@endsection