@extends('layouts.app')

@section('content')
<div class="content">
    <x-content.header title="{{ __('title.sign_contract') }}">
        <x-slot:headerRight>
            <a href="{{ route('users.contracts.show', ['user' => $signature->contract->user_id, 'contract' => $signature->contract_id]) }}" class="btn-tertiary-base">
                {{ trans('forms.lbl_back_to_contract') }}
            </a>
        </x-slot:headerRight>
    </x-content.header>

    <div class="mt-8">
        <div class="bg-base-white rounded-lg shadow-sm">
            <!-- Contract Details -->
            <div class="p-6 border-b border-gray-200">
                <h2 class="text-xl font-semibold mb-4">{{ __('forms.lbl_contract_details') }}</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm text-gray-600">{{ __('forms.lbl_contract_type') }}</p>
                        <p class="font-medium">{{ $signature->contract->contract_type->name }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">{{ __('forms.lbl_employee') }}</p>
                        <p class="font-medium">{{ $signature->contract->user->name }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">{{ __('forms.lbl_start_date') }}</p>
                        <p class="font-medium">{{ $signature->contract->start_date }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">{{ __('forms.lbl_end_date') }}</p>
                        <p class="font-medium">{{ $signature->contract->isPermanent() ?? __('forms.lbl_permanent') }}</p>
                    </div>
                </div>
            </div>

            <!-- Signature Component -->
            <div class="p-6">
                <contract-signature
                    :signature-id="{{ $signature->id }}"
                    verification-token="{{ $signature->verification_token }}"
                    verification-method="{{ $signature->verification_method }}"
                    :security-questions="{{ json_encode($securityQuestions ?? []) }}"
                    @signature-complete="handleSignatureComplete"
                ></contract-signature>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function handleSignatureComplete(data) {
        if (data.certificate) {
            // Show success message
            Swal.fire({
                title: '{{ __("messages.success") }}',
                text: '{{ __("messages.contract_signed_successfully") }}',
                icon: 'success',
                confirmButtonText: '{{ __("forms.lbl_ok") }}'
            }).then((result) => {
                // Redirect to contract view
                window.location.href = '{{ route("users.contracts.show", ["user" => $signature->contract->user_id, "contract" => $signature->contract_id]) }}';
            });
        }
    }
</script>
@endpush