@php($title = 'Договор')
@extends('layouts.app')
@section('content')
    <div class="row">
        <div class="col-12 col-lg-8">
            <!--Имя и контакты-->
            <div class="row py-5">
                <div class="col">
                    <div class="fs-6 text-secondary">ФИО</div>
                    <div class="fw-bold fs-5 text-truncate">{{ $contract->deal->user->name }}</div>
                </div>
                <div class="col">
                    <div class="fs-6 text-secondary">Телефон</div>
                    <div class="fw-bold fs-5 text-truncate">{{ $contract->deal->user->phone }}</div>
                </div>
                @if ($contract->deal->user->email)
                    <div class="col">
                        <div class="fs-6 text-secondary">Email</div>
                        <div class="fw-bold fs-5 text-truncate">{{ $contract->deal->user->email }}</div>
                    </div>
                @endif
                <div class="d-none col text-end">
                    <a href="" class="btn border-1 border-secondary-subtle text-secondary rounded-4 p-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                            class="bi bi-arrow-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" />
                        </svg>
                    </a>
                </div>
            </div>
            <!--Город-->
            <div class="row bg-white py-3">
                <div class="col-9">
                    <div class="fs-5 fw-bold my-2">{{ $contract->deal->complex->city->name }}</div>
                    <div class="fs-5 fw-bold text-secondary my-2">{{ $contract->deal->complex->name }}</div>
                </div>
                <div class="col-3 text-end">
                </div>
            </div>
            <!--Основная часть-->
            <div class="row">
                <div class="col col-lg-8">
                    <div class="row my-4">
                        <div class="col col-md-6">
                            <div class="fs-6 text-secondary">Статус</div>
                            <div class="fw-bold fs-5 text-truncate text-dark-emphasis">
                                {{ __('contracts.status_' . $contract->status) }}
                            </div>
                        </div>
                        <div class="col col-md-6">
                            <div class="fs-6 text-secondary">Дата обновления</div>
                            <div class="fw-bold fs-5 text-truncate text-dark-emphasis">
                                {{ $contract->updated_at->format('d.m.y H:i') }}</div>
                        </div>
                    </div>
                    <div class="row my-4">
                        @if ($contract->square)
                            <div class="col col-md-4">
                                <div class="fs-6 text-secondary">Площадь объекта</div>
                                <div class="fw-bold fs-5 text-truncate text-dark-emphasis">{{ $contract->square }}</div>
                            </div>
                        @endif
                        @if ($contract->floor)
                            <div class="col col-md-4">
                                <div class="fs-6 text-secondary">Этаж</div>
                                <div class="fw-bold fs-5 text-truncate text-dark-emphasis">{{ $contract->floor }}</div>
                            </div>
                        @endif
                        @if ($contract->room)
                            <div class="col col-md-4">
                                <div class="fs-6 text-secondary">Помещение</div>
                                <div class="fw-bold fs-5 text-truncate text-dark-emphasis">{{ $contract->room }}</div>
                            </div>
                        @endif
                    </div>
                    <div class="row my-4">
                        <div class="col col-md-6">
                            <div class="fs-6 text-secondary">Стоимость</div>
                            <div class="fw-bold fs-5 text-truncate text-dark-emphasis">
                                {{ number_format($contract->price, 2, ',', ' ') }}
                                <div class="fs-6">
                                    <span class="badge bg-secondary">{{ $contract->payment_type }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col col-md-6">
                            <div class="fs-6 text-secondary">Вознаграждение</div>
                            <div class="fw-bold fs-5 text-truncate text-dark-emphasis">
                                {{ number_format(GetAgentPaymentForContract($contract), 2, ',', ' ') }}</div>
                        </div>
                    </div>

                </div>
                <div class="col col-lg-4 p-3">
                    <div class="rounded-4  ratio ratio-1x1 rounded overflow-hidden" style="background-color:#ebeef5"
                        data-base64="">
                        @if ($contract->base64_image)
                            <div class="w-100 h-100 d-flex align-items-center overflow-hidden zoomable-container"
                                style='background-image:url("data:image/jpeg;base64, {{ $contract->base64_image }}");'>
                                <div class="text-center mx-auto zoom-button">
                                    <svg class="text-white" xmlns="http://www.w3.org/2000/svg" width="70" height="70"
                                        fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0" />
                                        <path
                                            d="M10.344 11.742q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1 6.5 6.5 0 0 1-1.398 1.4z" />
                                        <path fill-rule="evenodd"
                                            d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5" />
                                    </svg>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="row pt-3 border-1 border-top">
                <div class="col">
                    <div class="fs-6 text-secondary hstack gap-2">
                        <span>Комментарий к договору</span>
                        @if ($contract->comment)
                            <a class="ms-auto" href="#" data-bs-toggle="modal" data-bs-target="#contractCommentModal">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-pen" viewBox="0 0 16 16">
                                    <path
                                        d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z" />
                                </svg>
                            </a>
                        @endif
                    </div>
                    @if ($contract->comment)
                        <div class="fw-bold fs-5 text-truncate text-dark-emphasis">{{ $contract->comment }}</div>
                    @else
                        <div><a href="#" data-bs-toggle="modal" data-bs-target="#contractCommentModal">Оставьте
                                комментарий</a>, он будет виден
                            только вам</div>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 py-3 text-dark" style="background-color:#eef5fb">
            <div class="fw-bold fs-5 mb-3">История договора</div>
            @if ($contract->deal->notifications->count() == 0)
                <div class="d-flex justify-content-center align-items-center">
                    <div class="d-grid gap-1 p-3">
                        <i class="bi bi-inbox display-5 text-center"></i>
                        <span class="fs-6 fw-semibold">{{ __('notifications.has no history') }}</span>
                    </div>
                </div>
            @else
                @foreach ($contract->deal->notifications as $notification)
                    <div class="d-flex flex-row mb-3">
                        <div class="pe-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                                class="bi bi-record-circle-fill align-middle" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-8 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
                            </svg>
                        </div>
                        <div class="">
                            <div class="text-secondary">{{ $notification->created_at }}</div>
                            <div class="fw-bold text-dark-emphasis">{{ $notification->data['text'] }}</div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>

        <!-- Modal -->
        <div class="modal fade" id="contractCommentModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <form class="modal-dialog" method="post"
                action="{{ route('contract.comment', ['contract' => $contract]) }}">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Комментарий к договору</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @csrf
                        <div class="mb-3">
                            <label for="contractComment" class="form-label">Ваш комментарий</label>
                            <textarea class="form-control" id="contractComment" name="comment" rows="3">{{ $contract->comment }}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                        <button type="submit" class="btn btn-primary">Сохранить</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <style>
        .zoomable-container {
            backdrop-filter: blur(10px);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }

        .zoomable-container:not(.zoomed):hover {
            transform: scale(1.5);
            background-color: rgb(33 33 33 / 60%);
            background-blend-mode: multiply;
            background-repeat: no-repeat;
            background-position: center;
        }

        .zoomable-container.zoomed {
            position: fixed;
            top: 0;
            left: 0;
            margin: 0 auto;
        }

        .zoomable-container.zoomed .zoom-button {
            display: none;
        }
    </style>

    <script>
        var images = document.querySelectorAll(".zoomable-container");
        Array.prototype.forEach.call(images, function(img) {
            // Do stuff here

            img.addEventListener('click', function() {
                console.log(img.classList.contains('zoomed'));
                if (!img.classList.contains('zoomed')) {
                    img.classList.add('zoomed');
                } else {
                    img.classList.remove('zoomed');
                }

            });
        });
    </script>
@endsection