@section('title')
    Transactions
@parent
@stop
<div>
    <section class="content-header">
        <h1>@lang('transactions.transactions')</h1>
        <ol class="breadcrumb">
            <li><a href="{{ route('mof.transaction.list') }}"> @lang('transactions.transactions') </a></li>
            <li class="active">@lang('transactions.transactions_list')</li>
        </ol>
    </section>
    <div wire:loading><div class="loading-modal" style="display: block;"><span class="loading_text">Loading Please Wait...</span></div></div>
    <section class="content paddingleft_right15">
        <div class="panel panel-success">
            <div class="panel-body">
                <div class="row" style="margin-top: 10px;">
                    <div class="form-group col-sm-4">
                        <label>@lang('transactions.service_type')</label>
                        <select class="form-control" wire:model.live="service">
                           <option value="">@lang('general.select_value')</option>
                            @foreach($service_types as $key => $service_type)
                                <option value="{{$service_type->id}}">{{$service_type->name}} - {{$service_type->sub_category}} </option>
                            @endforeach
                        </select>
                    </div>  
                    <div class="form-group col-sm-4">
                        <label>@lang('transactions.status')</label>
                        <select class="form-control" wire:model.live="status">
                            <option value="">@lang('general.select_value')</option>     
                            <option value="DRAFT">DRAFT</option>
                            <option value="UNPAID">UNPAID</option>
                            <option value="PAID">PAID</option>
                        </select>
                    </div>
                    <div class="form-group col-sm-4">
                        <label>@lang('transactions.seller_name')</label>
                        <input type="text" class="form-control" wire:model.live="seller">   
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-4">
                        <label>@lang('transactions.application_date')</label>
                        <input type="text" class="form-control" id="application_date" wire:model.defer="applicationDate" onclick="initApplicationDateRangePicker()">
                    </div>
                    <div class="form-group col-sm-4">
                        <label>@lang('Status Date')</label>
                        <input type="text" class="form-control" wire:model.defer="statusDate" id="status_date" onclick="initStatusDateRangePicker()">
                    </div>
                    <div class="form-group col-sm-4">
                        <label>@lang('transactions.buyer_name')</label>
                        <input type="text" class="form-control" wire:model.live="buyer">         
                    </div>
                </div> 
                <br>
                <div style="display:flex; justify-content:space-between;" class="col-md-12">
                    <div class="page_count">
                        Show
                        <select wire:model.live="pageCount" style="border-color: #bbc1c9; border-radius: 3px; text-align: center; height: 34px; width: 60px;">
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        Entries
                    </div>
                    <div class="search">
                        <input type="text" wire:model.live="search" class="form-control" placeholder="Search">
                    </div>
                </div>
                <div class="col-md-12">
                    <table class="table table-responsive table-striped table-bordered" id="transactions-table" width="100%">
                        <thead>
                            <tr>
                                <th>@lang('transactions.ref_no')</th>
                                <th>@lang('transactions.service')</th>
                                <th>@lang('transactions.application_date')</th>
                                <th>@lang('transactions.seller_name')</th>
                                <th>@lang('transactions.buyer_name')</th>
                                <th>@lang('transactions.status')</th>
                                <th>@lang('transactions.last_updated')</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($transactions as $transaction)
                                <tr>
                                    <td><a href="{{ route('mof.transaction.show',$transaction->id) }}" target="_blank">TX-{{$transaction->id}}</a></td>
                                    <td>{{$transaction->service->name . "-" .  $transaction->service->sub_category}}</td>
                                    <td>{{date('d-m-Y',strtotime($transaction->application_date))}}</td>
                                    <td><a href="{{ route('admin.customers.show',$transaction->seller_id) }}" target="_blank">{{strtoupper($transaction->seller->first_name)}} {{strtoupper($transaction->seller->second_name)}} {{strtoupper($transaction->seller->third_name)}} {{strtoupper($transaction->seller->fourth_name)}}</a></td>
                                    <td><a href="{{ route('admin.customers.show',$transaction->buyer_id) }}" target="_blank">{{strtoupper($transaction->buyer->first_name)}} {{strtoupper($transaction->buyer->second_name)}} {{strtoupper($transaction->buyer->third_name)}} {{strtoupper($transaction->buyer->fourth_name)}}</a></td>
                                    <td>{{$transaction->status}}</td>
                                    <td>
                                        <div title="{{date('d-m-Y',strtotime($transaction->updated_at))}}">
                                            {{Carbon\Carbon::parse($transaction->updated_at)->diffForHumans()}}
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-danger">No Records Found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="livewire_pagination col-md-12" style="margin-bottom: 10px;">
                    {{$transactions->links()}}
                </div>
            </div>
        </div>
    </section>
</div>
@section('footer_scripts')
<script>
    function initApplicationDateRangePicker() 
    {
        $('#application_date').daterangepicker({
            autoUpdateInput: false,
            locale: {
            format: 'DD-MM-YYYY',
            cancelLabel: 'Clear'
            }, 
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        });
        $('#application_date').focus();
        $('#application_date').on('apply.daterangepicker', function(ev, picker) {
            @this.set('applicationDate',picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format('DD-MM-YYYY'))
        });
        $('#application_date').on('cancel.daterangepicker', function(ev, picker) {
            @this.set('applicationDate',"")
        });  
    }
    function initStatusDateRangePicker() 
    {
        $('#status_date').daterangepicker({
            autoUpdateInput: false,
            locale: {
            format: 'DD-MM-YYYY',
            cancelLabel: 'Clear'
            }, 
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        });
        $('#status_date').focus();
        $('#status_date').on('apply.daterangepicker', function(ev, picker) {
            @this.set('statusDate',picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format('DD-MM-YYYY'))
        });
        $('#status_date').on('cancel.daterangepicker', function(ev, picker) {
            @this.set('statusDate',"")
        });  
    }
</script>
@stop