@extends('layouts.app')

@section('title', __('ui.create').' '.__('ui.sessions'))

@section('content')
<div class="card-soft p-4" style="max-width:760px">
    <h1 class="h4 mb-3">{{ __('ui.create') }}</h1>
    <form method="POST" action="{{ route('tenant.sessions.store') }}" id="sessionForm">
        @csrf
        <div class="row g-3">
            <div class="col-md-6"><label class="form-label">{{ __('ui.name') }}</label><input name="name" class="form-control" value="{{ old('name') }}" required></div>
            <div class="col-md-6">
                <label class="form-label">{{ __('ui.provider') }}</label>
                <select name="provider" id="provider" class="form-select" required>
                    <option value="meta">Meta Cloud API</option>
                    <option value="evolution">Evolution API</option>
                </select>
            </div>
            <div class="col-md-6"><label class="form-label">{{ __('ui.phone') }}</label><input name="phone_number" class="form-control" value="{{ old('phone_number') }}" placeholder="2010..."></div>
            <div class="col-md-6 d-flex align-items-end">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="is_default" value="1" id="is_default">
                    <label class="form-check-label" for="is_default">Default session</label>
                </div>
            </div>

            <div class="col-12 meta-fields">
                <hr>
                <h2 class="h6">Meta credentials</h2>
            </div>
            <div class="col-md-6 meta-fields"><label class="form-label">Access Token</label><textarea name="access_token" class="form-control" rows="2">{{ old('access_token') }}</textarea></div>
            <div class="col-md-6 meta-fields"><label class="form-label">Phone Number ID</label><input name="phone_number_id" class="form-control" value="{{ old('phone_number_id') }}"></div>
            <div class="col-md-6 meta-fields"><label class="form-label">Business Account ID</label><input name="business_account_id" class="form-control" value="{{ old('business_account_id') }}"></div>

            <div class="col-12 evo-fields d-none">
                <hr>
                <h2 class="h6">Evolution</h2>
            </div>
            <div class="col-md-6 evo-fields d-none"><label class="form-label">Instance name (optional)</label><input name="instance_name" class="form-control" value="{{ old('instance_name') }}"></div>
        </div>
        <div class="mt-4 d-flex gap-2">
            <button class="btn btn-wap">{{ __('ui.save') }}</button>
            <a href="{{ route('tenant.sessions.index') }}" class="btn btn-outline-secondary">{{ __('ui.back') }}</a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
const provider = document.getElementById('provider');
function sync() {
    const isMeta = provider.value === 'meta';
    document.querySelectorAll('.meta-fields').forEach(el => el.classList.toggle('d-none', !isMeta));
    document.querySelectorAll('.evo-fields').forEach(el => el.classList.toggle('d-none', isMeta));
}
provider.addEventListener('change', sync);
sync();
</script>
@endpush