@extends('layouts.admin')

@section('title', $channel->exists ? __('admin.channels.edit') : __('admin.channels.create'))

@php
    $editing = $channel->exists;
    $action = $editing ? lroute('admin.channels.update', $channel) : lroute('admin.channels.store');
    $field = 'w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20';
    $label = 'mb-1 block text-sm font-semibold text-ink';
@endphp

@section('content')
    <div class="flex items-center justify-between gap-4">
        <h1 class="text-2xl font-bold text-brand-deep">{{ $editing ? __('admin.channels.edit') : __('admin.channels.create') }}</h1>
        <a href="{{ lroute('admin.channels.index') }}" class="text-sm font-medium text-ink-soft transition hover:text-brand">{{ __('admin.actions.back') }}</a>
    </div>

    <form method="POST" action="{{ $action }}" class="mt-6 max-w-3xl space-y-5 rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
        @csrf
        @if ($editing)
            @method('PUT')
        @endif

        <div class="grid gap-5 sm:grid-cols-3">
            <div>
                <label for="type" class="{{ $label }}">{{ __('admin.channels.type') }}</label>
                <select id="type" name="type" class="{{ $field }}" required>
                    @foreach (\App\Models\ContactChannel::TYPES as $type)
                        <option value="{{ $type }}" @selected(old('type', $channel->type ?? 'whatsapp') === $type)>{{ __("admin.channels.types.{$type}") }}</option>
                    @endforeach
                </select>
                @error('type')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="label_ar" class="{{ $label }}">{{ __('admin.channels.label_ar') }}</label>
                <input type="text" id="label_ar" name="label_ar" value="{{ old('label_ar', $channel->label_ar) }}" class="{{ $field }}" dir="rtl" required>
                @error('label_ar')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="label_en" class="{{ $label }}">{{ __('admin.channels.label_en') }}</label>
                <input type="text" id="label_en" name="label_en" value="{{ old('label_en', $channel->label_en) }}" class="{{ $field }}" dir="ltr" required>
                @error('label_en')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>

        <div>
            <label for="value" class="{{ $label }}">{{ __('admin.channels.value') }}</label>
            <input type="text" id="value" name="value" value="{{ old('value', $channel->value) }}" class="{{ $field }}" dir="ltr" required>
            <p class="mt-1 text-xs text-ink-soft">{{ __('admin.channels.value_hint') }}</p>
            @error('value')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>

        <div class="grid gap-5 sm:grid-cols-2">
            <div>
                <label for="message_ar" class="{{ $label }}">{{ __('admin.channels.message_ar') }}</label>
                <input type="text" id="message_ar" name="message_ar" value="{{ old('message_ar', $channel->message_ar) }}" class="{{ $field }}" dir="rtl">
                @error('message_ar')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="message_en" class="{{ $label }}">{{ __('admin.channels.message_en') }}</label>
                <input type="text" id="message_en" name="message_en" value="{{ old('message_en', $channel->message_en) }}" class="{{ $field }}" dir="ltr">
                @error('message_en')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>
        <p class="-mt-3 text-xs text-ink-soft">{{ __('admin.channels.message_hint') }}</p>

        <div class="grid gap-5 sm:grid-cols-3">
            <div>
                <label for="sort_order" class="{{ $label }}">{{ __('admin.channels.sort_order') }}</label>
                <input type="number" id="sort_order" name="sort_order" value="{{ old('sort_order', $channel->sort_order ?? 0) }}" class="{{ $field }}" min="0" dir="ltr">
                @error('sort_order')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div class="flex items-end pb-1">
                <label class="flex items-center gap-2 text-sm font-medium text-ink">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $channel->exists ? $channel->is_active : true)) class="h-4 w-4 rounded border-black/20 text-brand focus:ring-brand/30">
                    {{ __('admin.channels.is_active') }}
                </label>
            </div>
            <div class="flex items-end pb-1">
                <label class="flex items-center gap-2 text-sm font-medium text-ink">
                    <input type="hidden" name="is_floating" value="0">
                    <input type="checkbox" name="is_floating" value="1" @checked(old('is_floating', $channel->is_floating)) class="h-4 w-4 rounded border-black/20 text-brand focus:ring-brand/30">
                    {{ __('admin.channels.is_floating') }}
                </label>
            </div>
        </div>
        <p class="-mt-3 text-xs text-ink-soft">{{ __('admin.channels.floating_hint') }}</p>

        <div class="flex items-center gap-3 pt-2">
            <button type="submit" class="rounded-full bg-brand px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-brand-deep">{{ __('admin.actions.save') }}</button>
            <a href="{{ lroute('admin.channels.index') }}" class="rounded-full px-6 py-2.5 text-sm font-medium text-ink-soft transition hover:text-brand">{{ __('admin.actions.cancel') }}</a>
        </div>
    </form>
@endsection