@extends('adminlte::page')
@section('title', 'Clear Box')
@section('content_header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Admin</a></li>
                    <li class="breadcrumb-item active">Clear Boxes</li>
                </ol>
            </div>
        </div>
    </div>
</div>
@endsection
@section('content')

    <section class="content">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">ClearBox Details</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-7 order-2 order-md-1">
                        <div class="row">
                            <div class="col-12 col-sm-12">
                                <div class="info-box bg-light">
                                    <div class="info-box-content text-left">
                                        <div class="row">
                                            <div class="col-sm-2">Invoice No:</div>
                                            <div class="col-sm-2">
                                                <span class="badge badge-primary">{{ $data->invoice_no }}</span>
                                            </div>
                                            <div class="col-sm-2">Date:</div>
                                            <div class="col-sm-2">{{ date('d-M-Y',strtotime($data->created_at)) }}</div>
                                            <div class="col-sm-2">Payment Status:</div>
                                            <div class="col-sm-2">
                                                @if ($data->payment_status == 'partial')
                                                    <span class="badge badge-warning">{{ __('auth.partial') }}</span>
                                                @elseif($data->payment_status == 'paid')
                                                    <span class="badge badge-success">{{ __('auth.paid') }}</span>
                                                @elseif($data->payment_status == 'due')
                                                    <span class="badge badge-danger">{{ __('auth.due') }}</span>
                                                @endif
                                            </div>
                                            <div class="col-sm-2">Note:</div>
                                            <div class="col-sm-4">{{ $data->remark }}</div>
                                            <div class="col-sm-2">Receive Address:</div>
                                            <div class="col-sm-4">{{ $data->address }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-sm-4">
                                <div class="info-box bg-light">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-center text-muted">Total Amount</span>
                                        <span class="info-box-number text-center text-muted mb-0">{{ '$'.number_format($data->grand_total_usd,2) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-4">
                                <div class="info-box bg-light">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-center text-muted">Total Paid</span>
                                        <span class="info-box-number text-center text-muted mb-0">{{ '$'.number_format($data->paid,2) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-4">
                                <div class="info-box bg-light">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-center text-muted">Total Reamining
                                            </span>
                                        <span class="info-box-number text-center text-muted mb-0">{{ '$'.number_format($data->total_remaining,2) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-12 col-sm-12">
                                <div class="wrapper-table">
                                    <table id="data-table" width="100%" class="table table-striped">
                                        <thead class="thead-style">
                                            <tr>
                                                <th class="text-center">#</th>
                                                <th>{{__('auth.tracking_no')}}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-md-12 col-lg-5 order-2 order-md-1">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Payments</h3>
                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse"
                                        title="Collapse">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-striped projects">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Amount</th>
                                            <th>Payment Method</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($payment as $key=>$item )
                                            <tr>
                                                <td class="text-center">{{ $key+1 }}</td>
                                                <td>{{ date('d-M-Y',strtotime($item->created_at)) }}</td>
                                                <td>{{ '$'.number_format($item->amount,2) }}</td>
                                                <td>
                                                    {{ $item->bank_name }}<br>
                                                    <small class="text-primary">{{ $item->bank_account.' - '.$item->bank_number }}</small>
                                                </td>
                                            </tr>
                                        @endforeach
                                        @if($payment->count() == 0)
                                            <tr>
                                                <td colspan="4" class="text-center">No Record</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
<script type="text/javascript">
	$(document).ready(function(){
		$('#data-table').DataTable({
            "bDestroy": true,
            ordering: false,
            serverSide: true,
            lengthMenu: [[20, 50, 100,200,500,1000,-1], [20, 50, 100,200,500,1000,'All']],
            ajax: "{{ route('clear_box.details',$id) }}",
            columns:
            [
                {data: 'DT_RowIndex','searchable': false,'class' :'text-center'},
                {data: 'item_code','class': 'text-left'},
            ],
            "initComplete": function(settings, json) {}
        });
	});
</script>
@endsection