@extends('layout.app')

@section('title', 'Products')

@section('content')
    <style>
        .span-status-upcoming {
            background: gray !important;
        }

        .span-status-deposited {
            background: #fd620b !important;
        }

        .span-status-blocked {
            background: #ef3052 !important;
        }

        .span-status-opening {
            background: #f2994a !important;
        }

        .span-status-completed {
            background: #00cf8d !important;
        }

        .span-status-sold {
            background: #0956a4 !important;
        }

        .span-status-mortgaged {
            background: #2696ef !important;
        }

        .span-status-reserved {
            background: #994af2 !important;
        }
    </style>
    <div class="container-fluid mt-5">
        <div class="row my-2">
            <div class="col-12 mb-4">
                <div class="block">
                    <div>
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="page-title mb-0">Products</h4>
                            <div>
                                <button class="btn btn-primary">Import</button>
                                <button class="btn btn-primary">Create</button>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-4">
                            <div class="input-group mx-1" style="width: 200px;">
                                <input type="text" class="form-control" placeholder="Search by name">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                            </div>
                            <div class="input-group mx-1" style="width: 200px;">
                                <input type="text" class="form-control" placeholder="Project name">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                            </div>
                            <select class="form-select mx-1"
                                    style="width: 150px;">
                                <option>Product type</option>
                                <option>Ground</option>
                                <option>Apartment building</option>
                                <option>Shop house</option>
                            </select>
                            <select class="form-select mx-1" style="width: 150px;">
                                <option>Block</option>
                                <option>Block 1</option>
                                <option>Block 2</option>
                            </select>
                            <select class="form-select mx-1" style="width: 150px;">
                                <option>Direction</option>
                                <option value="">South</option>
                                <option value="">West</option>
                            </select>
                            <select class="form-select mx-1" style="width: 150px;">
                                <option>Zone</option>
                                <option value="">Zone A</option>
                                <option value="">Zone B</option>
                            </select>
                        </div>

                        <div class="overflow-x-auto">
                            <table class="table table-hover mt-5" id="table-data">
                                <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Code</th>
                                    <th scope="col">Project name</th>
                                    <th scope="col">Type</th>
                                    <th scope="col">Block</th>
                                    <th scope="col">Floor</th>
                                    <th scope="col">Commercial floor</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Usage area (m<sup>2</sup>)</th>
                                    <th scope="col">Price (VND)</th>
                                    <th scope="col">Purposes</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($products as $product)
                                    <tr class="cursor-pointer"
                                        data-url-click="{{ url('/products/' . $product->id) }}">
                                        <td>{{ $product->id }}</td>
                                        <td>{{ $product->apartment_code }}</td>
                                        <td>{{ $product->block->project->name ?? '' }}</td>
                                        <td>{{ $product->class->name ?? '' }}</td>
                                        <td>{{ $product->block->name ?? '' }}</td>
                                        <td>{{ $product->class->number_of_floor ?? '' }}</td>
                                        <td>{{ $product->class->number_of_floor ?? '' }}</td>
                                        <td><span
                                                class="badge span-status-{{strtolower($product->status)}} text-bg-primary"
                                                style="text-transform: capitalize">{{ $product->status }}</span></td>
                                        <td>{{ $product->class->using_area ?? '' }}</td>
                                        <td>{{ number_format($product->class->average_price ?? 0, 0, ',', '.') }}</td>
                                        <td>@if($product->is_for_sell)
                                                <span style="font-size: 11px"
                                                      class="mx-1 px-2 py-1 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-4 ">For Sell</span>
                                            @endif
                                            @if($product->is_for_lease)
                                                <span style="font-size: 11px"
                                                      class="mx-1 px-2 py-1 text-info-emphasis bg-info-subtle border border-info-subtle rounded-4 ">For Lease</span>
                                            @endif</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                        <nav aria-label="Page navigation example" class="d-flex justify-content-end">
                            <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>
        <!-- end row-->

    </div> <!-- container -->

@endsection

@section('script')
    {{--    <script type="text/javascript">--}}
    {{--        $(function() {--}}
    {{--            $('#datepicker').datepicker();--}}
    {{--        });--}}
    {{--    </script>--}}
@endsection