@extends('tenant.layouts.master')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.rentals') => '/rentals',
            __('breadcrumb.buildings') => '/buildings',
            __('breadcrumb.view_building') => '#',
        ],
    ])
@endsection
@section('style')
    <style>
        .Edit-btn {
            color: black;
            font-size: 12.5px;
            padding: 6px 8px;
        }

        .floors-count {
            text-decoration: none;
            color: black;
            padding: 0 0 0 8px;
            font-size: 14px;
        }
    </style>
@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'rentals.buildings'])
@endsection

@section('content')
    <section class="position-relative">
        <x-tenant.shared.backward-component :direct-to="__('breadcrumb.buildings')" link="/rentals/buildings" />

        <div class="py-2 d-flex align-items-end">
            <h4> @lang('rentals/buildings/show.building_details') </h4>
            <a href="{{ route('tenant.rentals.buildings.edit', ['building' => $building->id]) }}"
                class="backward-to-button text-decoration-none mx-1 d-flex align-items-center Edit-btn" title="تعديل">
                @lang('general.edit')<i class="fas fa-edit"></i></a>
        </div>

        <div class="row">
            <div class="col-md-7">
                <div class="rounded-3" style="border: 1px solid #e7e7e7;">
                    <h5 class="w-auto rounded-3 px-2 py-2" style="background: #EBEBEC;"> @lang('rentals/buildings/show.details')
                        {{ $building->title }} </h5>
                    <table class="table table-hover without-herotable mb-0">
                        <tr>
                            <th>@lang('rentals/buildings/show.building_name')</th>
                            <td> {{ $building->title }} </td>
                        </tr>
                        <tr>
                            <th>@lang('rentals/buildings/show.building_land')</th>
                            <td> {{ $building->earth_place }} </td>
                        </tr>
                        <tr>
                            <th>@lang('rentals/buildings/show.building_area')</th>
                            <td> {{ $building->area }} </td>
                        </tr>
                        <tr>
                            <th>@lang('rentals/buildings/show.shops_area_in_building')</th>
                            <td> {{ $building->shops_area }} </td>
                        </tr>
                        <tr>
                            <th>@lang('rentals/buildings/show.deterioration_or_corridors_area')</th>
                            <td>{{ $building->booths_area }}</td>
                        </tr>
                        <tr>
                            <th>@lang('rentals/buildings/show.starting_work_permit_date')</th>
                            <td>{{ $building->starting_work_permit_date }}</td>
                        </tr>
                        <tr>
                            <th>@lang('rentals/buildings/show.expire_work_permit_date')</th>
                            <td>{{ $building->expire_work_permit_date }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-md-5">
                <div class="rounded-3" style="border: 1px solid #e7e7e7;">
                    <h5 class="w-auto rounded-3 px-2 py-2" style="background: #EBEBEC;">@lang('rentals/buildings/show.floor_information')</h5>
                    <table class="table table-hover without-herotable mb-0">
                        <tr>
                            <th> @lang('rentals/buildings/show.number_of_floors')</th>
                            <td>
                                <a href="{{ route('tenant.rentals.floors.index') . '?building_id=' . $building->id }}"
                                    class="floors-count">
                                    {{ $building->floors_count }}
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
    </section>
@endsection
@push('script')
    <script src="https://threejs.org/build/three.js"></script>

    <script>
        // write 3d code here
    </script>
@endpush