@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-12 col-lg-8">
            <!--Имя и контакты-->
            <div class="row py-5">
                <div class="col-12 col-lg-4">
                    <div class="fs-6 text-secondary">ФИО</div>
                    <div class="fw-bold fs-5 text-truncate">{{ $contract->deal->user->name }}</div>
                </div>
                <div class="col-12 col-lg-3">
                    <div class="fs-6 text-secondary">Email</div>
                    <div class="fw-bold fs-5 text-truncate">{{ $contract->deal->user->email }}</div>
                </div>
                <div class="col-12 col-lg-3">
                    <div class="fs-6 text-secondary">Телефон</div>
                    <div class="fw-bold fs-5 text-truncate">{{ $contract->deal->user->phone }}</div>
                </div>
                <div class="d-none d-lg-block col-2 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">Не выбрано</div>
                </div>
                <div class="col-3 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-trash3" viewBox="0 0 16 16">
                            <path
                                d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
                        </svg>
                    </a>

                    <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-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>
                </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">
                                {{ __('contract status ' . strtolower($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->created_at->format('d.m.y H:i') }}</div>
                        </div>
                    </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">{{ $contract->square }}</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->floor }}</div>
                        </div>
                    </div>
                    <div class="row my-4">
                        <div class="col">
                            <div class="fs-6 text-secondary">Комментарий к договору</div>
                            <div class="fw-bold fs-5 text-truncate text-dark-emphasis">{{ $contract->comment }}</div>
                        </div>
                    </div>
                </div>
                <div class="col col-lg-4 p-3">
                    <div class="rounded-4 h-100 w-100" style="background-color:#ebeef5"></div>
                </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>
            @for ($i = 0; $i <= 4; $i++)
                <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">05.03.25</div>
                        <div class="fw-bold text-dark-emphasis">Запланирована встреча с клиентом</div>
                    </div>
                </div>
            @endfor
        </div>
    </div>
@endsection