@extends('layouts.master')
@section('title')
@lang('translation.Invoice_List')
@endsection
@section('css')
<!-- DataTables -->
<link href="{{ URL::asset('/assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@component('common-components.breadcrumb')
@slot('pagetitle') Invoices @endslot
@slot('title') Invoice List @endslot
@endcomponent

<div class="row">
    <div class="col-md-4">
        <div>
            <button type="button" class="btn btn-success waves-effect waves-light mb-3"><i class="mdi mdi-plus me-1"></i> POS V2</button>
        </div>
    </div>
    <div class="col-md-8">
        <div class="float-end">
            <div class=" mb-3">
                <div class="input-daterange input-group" id="datepicker6" data-date-format="dd M, yyyy" data-date-autoclose="true" data-provide="datepicker" data-date-container='#datepicker6'>
                    <input type="text" class="form-control text-start" placeholder="From" name="From" />
                    <input type="text" class="form-control text-start" placeholder="To" name="To" />

                    <button type="button" class="btn btn-primary"><i class="mdi mdi-filter-variant"></i></button>
                </div>
            </div>

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

<div class="row">
    <div class="col-lg-12">

        <div class="table-responsive mb-4">
            <table class="table table-centered datatable dt-responsive nowrap table-card-list" style="border-collapse: collapse; border-spacing: 0 12px; width: 100%;">
                <thead>
                    <tr class="bg-transparent">
                        <th style="width: 24px;">
                            <div class="form-check text-center font-size-16">
                                <input type="checkbox" class="form-check-input" id="invoicecheck">
                                <label class="form-check-label" for="invoicecheck"></label>
                            </div>
                        </th>
                        <th>Invoice ID</th>
                        <th>Date</th>
                        <th>Billing Name</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Download Pdf</th>
                        <th style="width: 120px;">Action</th>
                    </tr>
                </thead>
                <tbody>

                    @foreach ($data as  $or)
                    <tr>
                        <td>
                            <div class="form-check text-center font-size-16">
                                <input type="checkbox" class="form-check-input" id="invoicecheck1">
                                <label class="form-check-label" for="invoicecheck1"></label>
                            </div>
                        </td>

                        <td><a href="{{ route('invoices.order.id' ,  $or['id'] ) }}" class="text-dark fw-bold">#{{ $or['id'] }}</a> </td>
                        <td>{{ $or['created_at'] }}</td>
                        <td>{{ $or['user']['name'] }}</td>
                        <td>${{ $or['total_price'] }}</td>
                        <td><div class="badge bg-soft-success font-size-12">{{ $or['status_id'] }}</div></td>
                        <td>
                            <div>
                                <button class="btn btn-light btn-sm w-xs">Pdf <i class="uil uil-download-alt ms-2"></i></button>
                            </div>
                        </td>

                        <td>
                            <a href="{{ route('invoices.order.id' ,  $or['id'] ) }}" class="px-3 text-primary"><i class="uil uil-pen font-size-18"></i></a>
                            <a href="javascript:void(0);" class="px-3 text-danger"><i class="uil uil-trash-alt font-size-18"></i></a>
                        </td>
                    </tr>
                    @endforeach

                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
<script src="{{ URL::asset('/assets/libs/datatables/datatables.min.js') }}"></script>
<script src="{{ URL::asset('/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/pages/ecommerce-datatables.init.js') }}"></script>
@endsection