@extends('layouts.app')

@section('title', 'Payment Details')
@section('page', 'billing')

@section('content')
  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <div class="payroll-rates-page">
    <div class="payroll-rates-page__head">
      <div>
        <h1 class="payroll-rates-page__title">Payment Details</h1>
        <p class="payroll-rates-page__subtitle">Bank account and WhatsApp contact shown when customers top up SMS packages.</p>
      </div>
      <div class="payroll-rates-page__tip" role="note">
        <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
        <span>These details appear in the Top up popup on the SMS Packages page.</span>
      </div>
    </div>

    <form method="post" action="{{ route('billing.payment-details.update') }}" class="payroll-rates-form">
      @csrf
      @method('PUT')

      <article class="rate-card rate-card--violet">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-bank"></i></span>
            <div>
              <h2 class="rate-card__title">Bank transfer</h2>
              <p class="rate-card__desc">Account details for SMS top-up payments.</p>
            </div>
          </div>
        </div>
        <div class="rate-card__body rate-card__body--2">
          <div class="rate-field">
            <label class="rate-field__label" for="billing_bank_name">Bank name</label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="billing_bank_name" name="billing_bank_name"
                value="{{ old('billing_bank_name', $payment['bank_name']) }}"
                @disabled(! ($canManage ?? false)) required>
            </div>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="billing_bank_branch">Branch</label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="billing_bank_branch" name="billing_bank_branch"
                value="{{ old('billing_bank_branch', $payment['bank_branch']) }}"
                @disabled(! ($canManage ?? false))>
            </div>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="billing_account_name">Account name</label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="billing_account_name" name="billing_account_name"
                value="{{ old('billing_account_name', $payment['account_name']) }}"
                @disabled(! ($canManage ?? false)) required>
            </div>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="billing_account_number">Account number</label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="billing_account_number" name="billing_account_number"
                value="{{ old('billing_account_number', $payment['account_number']) }}"
                @disabled(! ($canManage ?? false)) required>
            </div>
          </div>
        </div>
      </article>

      <article class="rate-card rate-card--orange">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-whatsapp"></i></span>
            <div>
              <h2 class="rate-card__title">WhatsApp contact</h2>
              <p class="rate-card__desc">Number where payment slips should be sent.</p>
            </div>
          </div>
        </div>
        <div class="rate-card__body rate-card__body--2">
          <div class="rate-field">
            <label class="rate-field__label" for="billing_contact_phone">Contact / WhatsApp number</label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="billing_contact_phone" name="billing_contact_phone"
                value="{{ old('billing_contact_phone', $payment['contact_phone']) }}"
                placeholder="0771234567"
                @disabled(! ($canManage ?? false)) required>
            </div>
          </div>
          <div class="rate-field" style="grid-column: 1 / -1;">
            <label class="rate-field__label" for="billing_whatsapp_note">Slip instruction</label>
            <div class="rate-field__control rate-field__control--plain">
              <textarea id="billing_whatsapp_note" name="billing_whatsapp_note" rows="3"
                @disabled(! ($canManage ?? false))>{{ old('billing_whatsapp_note', $payment['whatsapp_note']) }}</textarea>
            </div>
          </div>
        </div>
      </article>

      @if ($canManage ?? false)
        <div class="payroll-rates-form__actions">
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-lg" aria-hidden="true"></i> Save payment details
          </button>
        </div>
      @endif
    </form>
  </div>
@endsection

@push('styles')
  <link rel="stylesheet" href="{{ asset('assets/css/pages/payroll-rates.css') }}">
@endpush