@php $driver = old('driver', $channel->driver ?? 'meta'); @endphp
<div class="box-body">
    <div class="form-group">
        <label>{{ __('whatsapp::lang.channel_label') }} *</label>
        <input type="text" name="label" class="form-control" required
               value="{{ old('label', $channel->label ?? '') }}" placeholder="e.g. Main Branch number">
    </div>

    <div class="row">
        <div class="col-xs-6 form-group">
            <label>{{ __('whatsapp::lang.location') }}</label>
            <select name="location_id" class="form-control">
                <option value="">— All / business-wide —</option>
                @foreach($locations as $id => $name)
                    <option value="{{ $id }}" {{ (string)old('location_id', $channel->location_id ?? '') === (string)$id ? 'selected' : '' }}>{{ $name }}</option>
                @endforeach
            </select>
            <small class="text-muted">Each location can have its own number.</small>
        </div>
        <div class="col-xs-6 form-group">
            <label>{{ __('whatsapp::lang.display_number') }}</label>
            <input type="text" name="display_number" class="form-control"
                   value="{{ old('display_number', $channel->display_number ?? '') }}" placeholder="+20100...">
        </div>
    </div>

    <div class="form-group">
        <label>{{ __('whatsapp::lang.driver') }} *</label>
        <select name="driver" class="form-control wa-driver-select" data-target="{{ isset($channel) ? $channel->id : 'new' }}">
            <option value="meta" {{ $driver === 'meta' ? 'selected' : '' }}>{{ __('whatsapp::lang.driver_meta') }}</option>
            <option value="web"  {{ $driver === 'web' ? 'selected' : '' }}>{{ __('whatsapp::lang.driver_web') }}</option>
        </select>
    </div>

    {{-- Meta Cloud API fields --}}
    <div class="wa-meta-fields" data-target="{{ isset($channel) ? $channel->id : 'new' }}" style="{{ $driver === 'meta' ? '' : 'display:none;' }}">
        <div class="form-group">
            <label>{{ __('whatsapp::lang.meta_phone_number_id') }}</label>
            <input type="text" name="meta_phone_number_id" class="form-control"
                   value="{{ old('meta_phone_number_id', $channel->meta_phone_number_id ?? '') }}">
        </div>
        <div class="form-group">
            <label>{{ __('whatsapp::lang.meta_waba_id') }}</label>
            <input type="text" name="meta_waba_id" class="form-control"
                   value="{{ old('meta_waba_id', $channel->meta_waba_id ?? '') }}">
        </div>
        <div class="form-group">
            <label>{{ __('whatsapp::lang.meta_access_token') }}</label>
            <input type="password" name="meta_access_token" class="form-control" autocomplete="new-password"
                   placeholder="{{ isset($channel) && $channel->meta_access_token ? '•••••• (leave blank to keep)' : '' }}">
        </div>
        <div class="form-group">
            <label>{{ __('whatsapp::lang.meta_verify_token') }}</label>
            <input type="text" name="meta_verify_token" class="form-control"
                   value="{{ old('meta_verify_token', $channel->meta_verify_token ?? '') }}"
                   placeholder="Any string; set the same in the Meta webhook config">
        </div>
    </div>

    {{-- WhatsApp-Web (QR) note --}}
    <div class="wa-web-fields" data-target="{{ isset($channel) ? $channel->id : 'new' }}" style="{{ $driver === 'web' ? '' : 'display:none;' }}">
        <div class="callout callout-warning">
            <h4><i class="fa fa-exclamation-triangle"></i> {{ __('whatsapp::lang.qr_warning_title') }}</h4>
            <p style="margin-bottom:0;">{!! __('whatsapp::lang.qr_warning_body') !!}</p>
        </div>
        <div class="callout callout-info" style="margin-bottom:0;">
            <p>A per-channel bridge token is generated on save. Run the Node bridge with it, then use
               <i class="fa fa-qrcode"></i> <strong>{{ __('whatsapp::lang.connect') }}</strong> to scan the QR code.</p>
            @if(isset($channel) && $channel->api_token)
                <p style="margin:0;"><strong>Bridge token:</strong> <code>{{ $channel->getRawOriginal('api_token') }}</code></p>
            @endif
        </div>
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox" name="is_default" value="1" {{ old('is_default', $channel->is_default ?? false) ? 'checked' : '' }}>
            {{ __('whatsapp::lang.default_channel') }}
        </label>
    </div>
</div>

@push('css')@endpush
<script>
(function(){
    document.querySelectorAll('.wa-driver-select').forEach(function(sel){
        if (sel.dataset.bound) return;
        sel.dataset.bound = '1';
        sel.addEventListener('change', function(){
            var t = sel.dataset.target;
            var meta = document.querySelector('.wa-meta-fields[data-target="'+t+'"]');
            var web  = document.querySelector('.wa-web-fields[data-target="'+t+'"]');
            if (meta) meta.style.display = (sel.value === 'meta') ? '' : 'none';
            if (web)  web.style.display  = (sel.value === 'web')  ? '' : 'none';
        });
    });
})();
</script>
