@props([
    'export' => false,
    'loadScript' => false,
    'dataReplace' => [],
    'isReplace' => false
])
@extends('report.layout')
@section('title', $agreement->name)
@section('type', $agreement->name)

@push('style')
    <style>
        .agreement-input-text {
            width: auto;
            height: calc(1.5em + 0.75rem + 2px);
            padding: 0.175rem 2.25rem 0.175rem 0.75rem;
            font-size: 0.875rem;
            font-weight: 400;
            color: #a8afc7;
            background-color: #ffffff;
            background-clip: padding-box;
            border: 1px solid #e8e8f7;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            height: 38px;
        }

        .agreement-input-text[required] {
            border: 1px solid red;
        }

    </style>
@endpush

@if($agreement->isAccepted())
    @section('header_info')
        @lang('lang.date.date'): {{ DateHelper::format($agreement->accepted_at) }}<br/>
    @endsection
@endif


@section('client_info')
    @include('report.partial.client-info', ['client' => $client])
    <br>
@endsection

@section('project_info')
    @include('report.partial.project-info', ['project' => $project])
@endsection


@section('content')
    <hr>

    @php

        $content = $agreement->description;

        if ($isReplace) {
            $content = $agreement->replaceMatches($dataReplace);
        }

    @endphp

    @if($agreement->isPending() || $agreement->isTemplate())
        <form action="{{ route($agreement->isTemplate() ? 'administration.agreement.save.preview' : 'project.agreements.save', ['uuid' => $agreement->uuid]) }}"
              method="POST">
            @csrf
            @endif

            {!! $content !!}

            @if(($agreement->isPending() || $agreement->isTemplate()) && $isReplace)
                <hr>
                <div class="row g-3">
                    <div class="col-12">
                        <x-signature-pad/>
                    </div>

                    <div class="col-12 text-end">
                        <x-bootstrap.button-save/>
                    </div>
                </div>
        </form>
        @push('script')
            <script>
                window.addEventListener('DOMContentLoaded', (event) => {

                });
            </script>
        @endpush

    @elseif($agreement->isAccepted())
        <hr>
        <div class="row">
            <div class="col-12">
                <h4>{{ __('lang.signature.signature') }}</h4>
                <img src="{{ $agreement->signature_client }}" alt="signature" style="width: 100%">
            </div>
        </div>
    @endif

@endsection