@extends('mainlayout.layout')

@php

use App\Models\{Property,PropertyOwner,Customer,PropertyPlotPricing,LandUse,User,PropertyPlot};
@endphp
@section('title')
{{env('APP_NAME')}} | {{$title}}
@endsection





@push('css')
<link href="{{ asset('/web/assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}" rel="stylesheet"
    type="text/css">
<link rel="stylesheet" href="{{ asset('/web/assets/libs/@chenfengyuan/datepicker/datepicker.min.css')}}">

<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">

<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" id="app-style" rel="stylesheet"
    type="text/css" />

<link href="https://cdn.datatables.net/buttons/2.3.4/css/buttons.dataTables.min.css" id="app-style" rel="stylesheet"
    type="text/css" />

@endpush


@section('content')

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <div class="col-lg-4 col-md-4">
                    <form class="form-horizontal" action="/property/list/orders" method="get">
                        <label>Search Order</label>
                        <input type="text" class="form-control" placeholder="Search by reference id or order id"
                            name="search" />
                        <br>
                        <button type="submit" class="btn btn-success btn-md"> Search </button>
                    </form>
                </div>

            </div>
        </div>

    </div>
</div>



<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <label><b>{{$title}}</b></label>

                <p class="text-muted"><b>{{count($orders)}}</b> Results found</p>

                <div class="table-responsive">

                    <table id="orders" class="table table-striped table-bordered dt-responsive nowrap"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">

                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Reference ID</th>
                                <th>Customer</th>
                                <th>Amount</th>
                                <th>Plot Number</th>
                                <th>Order Type</th>
                                <th>Completion Percentage</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th>Updated At</th>


                                <th>Action</th>
                                <!-- <th></th> -->
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($orders as $index => $order)
                            <tr>
                                <th scope="row">{{++$index}}</th>
                                <td><a href="/property/orders/view/@encrypt($order->id)"
                                        class="text-coffee  p-1">{{$order->referenceid}}</a></td>
                                <td>{{User::find($order->userid)->first_name}} </td>
                                <td>{{number_format($order->amount,0,'.',',')}}</td>
                                <td>{{PropertyPlot::find($order->plotid)->plotnumber}}</td>
                                <td>{{$order->order_type}}</td>
                                <td>{{calculate_percentage_completion($order)}} %</td>
                                <td>{{$order->status_description}}</td>

                                <td>{{$order->created_at}}</td>
                                <td>{{$order->updated_at}}</td>




                                <td><a href="/property/orders/view/@encrypt($order->id)" class="text-coffee  p-1">View
                                        More</a>
                                </td>


                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
{{-- <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> --}}
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer>
</script>

<script type="text/javascript" charset="utf8"
    src="https://cdn.datatables.net/buttons/2.3.4/js/dataTables.buttons.min.js" defer>
</script>


<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.html5.min.js"
    defer>
</script>

<script type="text/javascript">
    $(document).ready(function () {

        

        $('#orders').DataTable({
    paging: true,
    ordering: false,
    info: false,
    dom: 'Bfrtip',
buttons: [
    'copyHtml5',
    'excelHtml5',
    'csvHtml5',
    'pdfHtml5'
]
});

});

</script>

@endsection