@php
    use App\Services\WhatsApp\WhatsAppBusinessAccountService;

    $phoneNumberId = $ownGateway
        ? app(WhatsAppBusinessAccountService::class)->phoneNumberId($ownGateway)
        : '';
    $wabaId = $ownGateway->c2 ?? '';
    $accountName = $ownGateway->name ?? '';
@endphp
<div class="card">
    <div class="card-header d-flex align-items-center flex-wrap">
        <div class="me-auto">
            <h4 class="card-title mb-25">{{ __('locale.whatsapp_templates.connect_title') }}</h4>
            <p class="text-muted mb-0">
                @if($hasOwnAccount)
                    {{ __('locale.whatsapp_templates.connect_own_help') }}
                @else
                    {{ __('locale.whatsapp_templates.connect_assigned_help') }}
                @endif
            </p>
        </div>
        @if($hasOwnAccount)
            <span class="badge bg-success">{{ __('locale.whatsapp_templates.connected') }}</span>
        @endif
    </div>
    <div class="card-body">
        <form action="{{ route('customer.whatsapp_templates.connect') }}" method="POST" class="row g-3">
            @csrf
            @if($hasOwnAccount)
            <div class="col-md-6">
                <label class="form-label" for="wa_account_name">{{ __('locale.labels.name') }}</label>
                <input type="text" id="wa_account_name" class="form-control" value="{{ $accountName }}" readonly disabled>
            </div>
            @endif
            <div class="col-md-6">
                <label class="form-label required" for="waba_id">{{ __('locale.whatsapp_templates.waba_id') }}</label>
                <input type="text" id="waba_id" name="waba_id" class="form-control @error('waba_id') is-invalid @enderror"
                       value="{{ old('waba_id', $wabaId) }}" required>
                <p class="text-muted font-small-2 mt-50 mb-0">{{ __('locale.whatsapp_templates.waba_id_help') }}</p>
                @error('waba_id')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-md-6">
                <label class="form-label required" for="phone_number_id">{{ __('locale.whatsapp_templates.phone_number_id') }}</label>
                <input type="text" id="phone_number_id" name="phone_number_id"
                       class="form-control @error('phone_number_id') is-invalid @enderror"
                       value="{{ old('phone_number_id', $phoneNumberId) }}" required>
                <p class="text-muted font-small-2 mt-50 mb-0">{{ __('locale.whatsapp_templates.phone_number_id_help') }}</p>
                @error('phone_number_id')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-md-6">
                <label class="form-label {{ $hasOwnAccount ? '' : 'required' }}" for="access_token">
                    {{ __('locale.whatsapp_templates.access_token') }}
                </label>
                <div class="input-group">
                    <input type="password" id="access_token" name="access_token"
                           class="form-control @error('access_token') is-invalid @enderror"
                           autocomplete="new-password"
                           placeholder="{{ $hasOwnAccount ? __('locale.whatsapp_templates.access_token_keep') : '' }}">
                    <button type="button" class="btn btn-outline-secondary" id="toggle-access-token" tabindex="-1">
                        <i data-feather="eye"></i>
                    </button>
                </div>
                <p class="text-muted font-small-2 mt-50 mb-0">{{ __('locale.whatsapp_templates.access_token_help') }}</p>
                @error('access_token')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-12 d-flex flex-wrap gap-1">
                <button type="submit" class="btn btn-primary">
                    <i data-feather="link" class="me-25"></i>
                    {{ $hasOwnAccount ? __('locale.whatsapp_templates.update_account') : __('locale.whatsapp_templates.connect_account') }}
                </button>
                @if($hasOwnAccount)
                    <button type="button" class="btn btn-outline-danger" id="disconnect-wa-account-btn"
                            data-confirm="{{ __('locale.whatsapp_templates.disconnect_confirm') }}">
                        <i data-feather="x-circle" class="me-25"></i>
                        {{ __('locale.whatsapp_templates.disconnect_account') }}
                    </button>
                @endif
            </div>
        </form>
        @if($hasOwnAccount)
            <form id="disconnect-wa-account" action="{{ route('customer.whatsapp_templates.disconnect') }}" method="POST" class="d-none">
                @csrf
            </form>
        @endif
    </div>
</div>