@extends('layout.app')

@section('title', 'Project detail')

@section('content')
    <style>
        .product-block {
            padding: 4px 8px;
            border-radius: 2px;
            font-size: 12px;
            color: white;
        }
    </style>
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12 my-2">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb mb-4">
                            <li class="breadcrumb-item"><a href="{{ url('/' . request()->segment(1)) }}">Projects</a>
                            </li>
                            <li class="breadcrumb-item active">Project {{ request()->segment(2) }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row">
            <!-- begin project detail block -->
            <div class="col-12">
                <div class="block">
                    <div>
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="page-title mb-0">Basic Information</h4>
                            <button class="btn btn-primary">Edit</button>
                        </div>
                        <div class="row mt-4">
                            <div class="col-8 d-flex flex-column gap-2 mt-4">
                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Project name:</div>
                                    <div>{{ $project->name }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Project owner 1:</div>
                                    <div>{{ isset(json_decode($project->owners)[0]->name) ? json_decode($project->owners)[0]->name : '' }}
                                        (Invested: {{ isset(json_decode($project->owners)[0]->Invested) ? json_decode($project->owners)[0]->Invested : '' }}%)</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Project owner 2:</div>
                                    <div>{{ isset(json_decode($project->owners)[1]->name) ? json_decode($project->owners)[1]->name : '' }}
                                        (Invested: {{ isset(json_decode($project->owners)[1]->Invested) ? json_decode($project->owners)[1]->Invested : '' }}%)</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Address:</div>
                                    <div>{{ $project->address }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Campus area (m<sup>2</sup>):</div>
                                    <div>{{ $project->area }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Construction Density (%):</div>
                                    <div>{{ $project->construction_intensity }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Number of units (Apartment/Townhouse):</div>
                                    <div>{{ $project->number_of_units }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Project status:</div>
                                    <div>{{ $project->status }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Project classification:</div>
                                    <div>{{ $project->classification }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Project start date:</div>
                                    <div>{{ $project->started_date }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Project end date:</div>
                                    <div>{{ $project->ended_date }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Project est end date:</div>
                                    <div>{{ $project->estimated_date }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">License No:</div>
                                    <div>{{ $project->license_no }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Date of issue:</div>
                                    <div>{{ $project->date_of_issue }}</div>
                                </div>

                                <div class="d-flex gap-2">
                                    <div style="width: 310px" class="fw-semibold text-gray-700">Place of issue:</div>
                                    <div>{{ $project->place_of_issue }}</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="mb-3 d-flex justify-content-end">
                                    <div style="width: min-content">
                                        <img style="width: 300px" src="{{ asset('images/project-swanpay.png') }}"/>
                                        <div class="text-center fst-italic">
                                            <label for="inputPassword6" class="col-form-label">Image</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3 d-flex justify-content-end">
                                    <div style="width: min-content">
                                        <img style="width: 300px" src="{{ asset('images/location.png') }}"/>
                                        <div class="text-center fst-italic">
                                            <label for="inputPassword6" class="col-form-label">Location on
                                                map</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end row-->
                    </div>
                </div> <!-- end card-->
            </div> <!-- end col-->
            <!-- end product detail block -->

            <!-- begin project document block -->
            <div class="col-12 mt-12">
                <div class="block">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="page-title mb-0">Legal Documents</h4>
                        <button class="btn btn-primary">Upload</button>
                    </div>
                    <div class="mt-4">
                        <div class="d-flex justify-content-between align-items-center my-2">
                            <div class="flex-auto">
                                <a href="path_to_file"
                                   download="proposed_file_name">Business License.pdf</a>
                            </div>
                            <div class="">
                                <button class="btn btn-secondary btn-sm">View</button>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center my-2">
                            <div class="flex-auto">
                                <a href="path_to_file"
                                   download="proposed_file_name">Construction License.pdf</a>
                            </div>
                            <div class="">
                                <button class="btn btn-secondary btn-sm">View</button>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center my-2">
                            <div class="flex-auto">
                                <a href="path_to_file"
                                   download="proposed_file_name">Construction Map.pdf</a>
                            </div>
                            <div class="">
                                <button class="btn btn-secondary btn-sm">View</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end col-->
            <!-- end product document block -->

            <!-- begin project payment block -->
            <div class="col-12 mt-12">
                <div class="block">
                    <h4 class="page-title">Payment Methods</h4>
                    <table class="table mt-4">
                        <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Content</th>
                            <th scope="col">Application date</th>
                            <th scope="col">File</th>
                        </tr>
                        </thead>
                        <tbody>