@extends('daylight::layouts.app')

@section('title', $form->name)

@section('content')
    <div x-data="{ showConfirmDeleteModal: false }">
        <x-daylight::page-header :title="$form->name">
            @can('read:pages')
                <x-daylight::buttons.secondary href="{{ route('daylight.content.forms.submissions', $form) }}" element="a">
                    {{ __('daylight::forms.submissions') }} ({{ $form->submissions()->count() }})
                </x-daylight::buttons.secondary>
            @endcan

            @can('create:pages')
                <form method="post" action="{{ route('daylight.content.forms.duplicate', $form) }}" class="inline">
                    @csrf
                    <x-daylight::buttons.secondary type="submit">
                        {{ __('daylight::forms.duplicate') }}
                    </x-daylight::buttons.secondary>
                </form>
            @endcan

            @can('delete:pages')
                <x-daylight::buttons.danger @click.prevent="showConfirmDeleteModal = true">
                    {{ __('daylight::general.delete') }}
                </x-daylight::buttons.danger>
            @endcan
        </x-daylight::page-header>

        <x-daylight::session-messages/>

        <form
            method="post"
            action="{{ route('daylight.content.forms.update', $form) }}"
        >
            @csrf
            @method('PUT')

            <div x-data="{ activeTab: 'general' }" class="w-full">
                <div class="flex border-b">
                    <button @click.prevent="activeTab = 'general'"
                            :class="{ 'bg-gray-100 text-sky-600': activeTab === 'general', 'text-gray-600': activeTab !== 'general' }"
                            class="px-4 py-2 focus:outline-none font-semibold text-sm cursor-pointer rounded border-1 mb-4 border-blue-500">
                        {{ __('daylight::forms.tab_general') }}
                    </button>
                    <button @click.prevent="activeTab = 'fields'"
                            :class="{ 'bg-gray-100 text-sky-600': activeTab === 'fields', 'text-gray-600': activeTab !== 'fields' }"
                            class="px-4 py-2 focus:outline-none font-semibold text-sm cursor-pointer rounded border-1 mb-4 border-blue-500">
                        {{ __('daylight::forms.tab_fields') }}
                    </button>
                    <button @click.prevent="activeTab = 'confirmation'"
                            :class="{ 'bg-gray-100 text-sky-600': activeTab === 'confirmation', 'text-gray-600': activeTab !== 'confirmation' }"
                            class="px-4 py-2 focus:outline-none font-semibold text-sm cursor-pointer rounded border-1 mb-4 border-blue-500">
                        {{ __('daylight::forms.tab_confirmation') }}
                    </button>
                </div>

                {{-- Tab: Algemeen --}}
                <div x-show="activeTab === 'general'">
                    <x-daylight::input.group
                        :label="__('daylight::general.name')"
                        :error="$errors->first('name')"
                        for="name"
                    >
                        <x-daylight::input.text name="name" id="name" value="{{ old('name', $form->name) }}"/>
                    </x-daylight::input.group>

                    <div x-data="{ showCcBcc: {{ old('cc', $form->cc) || old('bcc', $form->bcc) ? 'true' : 'false' }} }">
                        <x-daylight::input.group
                            :label="__('daylight::forms.recipient_email')"
                            :error="$errors->first('recipient_email')"
                            for="recipient_email"
                        >
                            <x-daylight::input.text name="recipient_email" id="recipient_email" value="{{ old('recipient_email', $form->recipient_email) }}"/>
                            <div class="mt-1 flex items-center justify-between">
                                <p class="text-xs text-gray-500">{{ __('daylight::forms.multiple_emails_hint') }}</p>
                                <button type="button" x-show="!showCcBcc" x-on:click="showCcBcc = true" class="text-xs text-blue-600 hover:text-blue-800 whitespace-nowrap">
                                    + {{ __('daylight::forms.cc') }} / {{ __('daylight::forms.bcc') }}
                                </button>
                            </div>
                        </x-daylight::input.group>

                        <template x-if="showCcBcc">
                            <div>
                                <x-daylight::input.group
                                    :label="__('daylight::forms.cc')"
                                    :error="$errors->first('cc')"
                                    for="cc"
                                >
                                    <x-daylight::input.text name="cc" id="cc" value="{{ old('cc', $form->cc) }}"/>
                                </x-daylight::input.group>

                                <x-daylight::input.group
                                    :label="__('daylight::forms.bcc')"
                                    :error="$errors->first('bcc')"
                                    for="bcc"
                                >
                                    <x-daylight::input.text name="bcc" id="bcc" value="{{ old('bcc', $form->bcc) }}"/>
                                </x-daylight::input.group>
                            </div>
                        </template>
                    </div>

                    <x-daylight::input.group
                        :label="__('daylight::forms.is_active')"
                        :error="$errors->first('is_active')"
                        for="is_active"
                    >
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" id="is_active" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" {{ old('is_active', $form->is_active) ? 'checked' : '' }}>
                            <span class="text-sm text-gray-700">{{ __('daylight::forms.active_description') }}</span>
                        </label>
                    </x-daylight::input.group>

                </div>

                {{-- Tab: Velden --}}
                <div x-show="activeTab === 'fields'" x-cloak>
                    <x-daylight::input.group
                        :label="__('daylight::forms.form_fields')"
                        :error="$errors->first('fields_json')"
                        for="fields"
                    >
                        @php
                            $fieldsData = old('fields_json') ? (json_decode(old('fields_json'), true) ?: []) : ($form->fields ?: []);
                        @endphp
                        <livewire:daylight::form-builder :fields="$fieldsData"/>
                    </x-daylight::input.group>
                </div>

                {{-- Tab: Bevestiging --}}
                @php
                    $currentSuccessType = old('success_type', $form->success_type ?? 'message');
                @endphp
                <div x-show="activeTab === 'confirmation'" x-cloak x-data="{ successType: '{{ $currentSuccessType }}' }">
                    <x-daylight::input.group
                        :label="__('daylight::forms.success_type')"
                        :error="$errors->first('success_type')"
                        for="success_type"
                    >
                        <select name="success_type" id="success_type" x-model="successType" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                            <option value="message">{{ __('daylight::forms.success_type_message') }}</option>
                            <option value="redirect">{{ __('daylight::forms.success_type_redirect') }}</option>
                        </select>
                    </x-daylight::input.group>

                    <template x-if="successType === 'message'">
                        <x-daylight::input.group
                            :label="__('daylight::forms.success_message')"
                            :error="$errors->first('success_message')"
                            for="success_message"
                        >
                            <textarea name="success_message" id="success_message" rows="3" placeholder="{{ __('daylight::forms.success_message_placeholder') }}" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">{{ old('success_message', $form->success_message) }}</textarea>
                        </x-daylight::input.group>
                    </template>

                    <template x-if="successType === 'redirect'">
                        <x-daylight::input.group
                            :label="__('daylight::forms.success_redirect_url')"
                            :error="$errors->first('success_redirect_url')"
                            for="success_redirect_url"
                        >
                            <x-daylight::input.text name="success_redirect_url" id="success_redirect_url" type="url" placeholder="https://..." value="{{ old('success_redirect_url', $form->success_redirect_url) }}"/>
                        </x-daylight::input.group>
                    </template>

                    <div class="border-t border-gray-200 mt-6 pt-6" x-data="{ autoReply: {{ old('auto_reply_enabled', $form->auto_reply_enabled) ? 'true' : 'false' }} }">
                        <h3 class="text-sm font-semibold text-gray-900 mb-4">{{ __('daylight::forms.auto_reply') }}</h3>

                        <x-daylight::input.group
                            :label="__('daylight::forms.auto_reply_enabled')"
                            :error="$errors->first('auto_reply_enabled')"
                            for="auto_reply_enabled"
                        >
                            <label class="inline-flex items-center gap-2 cursor-pointer">
                                <input type="hidden" name="auto_reply_enabled" value="0">
                                <input type="checkbox" name="auto_reply_enabled" id="auto_reply_enabled" value="1" x-model="autoReply" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="text-sm text-gray-700">{{ __('daylight::forms.auto_reply_description') }}</span>
                            </label>
                        </x-daylight::input.group>

                        <template x-if="autoReply">
                            <div>
                                <x-daylight::input.group
                                    :label="__('daylight::forms.auto_reply_subject')"
                                    :error="$errors->first('auto_reply_subject')"
                                    for="auto_reply_subject"
                                >
                                    <x-daylight::input.text name="auto_reply_subject" id="auto_reply_subject" value="{{ old('auto_reply_subject', $form->auto_reply_subject) }}" placeholder="{{ __('daylight::forms.auto_reply_subject_placeholder') }}"/>
                                </x-daylight::input.group>

                                <x-daylight::input.group
                                    :label="__('daylight::forms.auto_reply_message')"
                                    :error="$errors->first('auto_reply_message')"
                                    for="auto_reply_message"
                                >
                                    <textarea name="auto_reply_message" id="auto_reply_message" rows="3" placeholder="{{ __('daylight::forms.auto_reply_message_placeholder') }}" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">{{ old('auto_reply_message', $form->auto_reply_message) }}</textarea>
                                </x-daylight::input.group>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <div class="mt-6 flex items-center justify-end gap-x-3">
                <x-daylight::buttons.secondary href="{{ route('daylight.content.forms.index') }}" element="a">
                    {{ __('daylight::general.cancel') }}
                </x-daylight::buttons.secondary>

                <x-daylight::buttons.primary type="submit">
                    {{ __('daylight::general.save') }}
                </x-daylight::buttons.primary>
            </div>
        </form>

        <x-daylight::modal.confirm-delete-modal>
            <x-slot name="content">
                <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">{{ __('daylight::forms.delete_form_title') }}</h3>
                <div class="mt-2">
                    <p class="text-sm text-gray-500">
                        {{ __('daylight::forms.delete_form_confirm') }}
                    </p>
                </div>
            </x-slot>

            <x-slot name="footer">
                <form method="post" action="{{ route('daylight.content.forms.destroy', $form) }}">
                    @csrf
                    @method('DELETE')

                    <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100 sm:mt-0 sm:w-auto" @click.prevent="showConfirmDeleteModal = false">
                        {{ __('daylight::general.cancel') }}
                    </button>

                    <button type="submit" class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-2 sm:w-auto">
                        {{ __('daylight::general.delete') }}
                    </button>
                </form>
            </x-slot>
        </x-daylight::modal.confirm-delete-modal>
    </div>
@endsection
