@extends('portal.ninja2020.layout.app')
@section('meta_title', ctrans('texts.invoices'))

@push('head')
    <link rel="stylesheet" href="{{ asset('js/vendor/datatables/datatables.min.css') }}">
@endpush

@section('header')
    {{ Breadcrumbs::render('invoices') }}

@if($errors->any())
    <div class="alert alert-failure mb-4">
        @foreach($errors->all() as $error)
        <p>{{ $error }}</p>
        @endforeach
    </div>
@endif

    <div class="bg-white shadow rounded mb-4" translate>
        <div class="px-4 py-5 sm:p-6">
            <div class="sm:flex sm:items-start sm:justify-between">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        {{ ctrans('texts.invoices') }}
                    </h3>
                    <div class="mt-2 max-w-xl text-sm leading-5 text-gray-500">
                        <p translate>
                            {{ ctrans('texts.list_of_invoices') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('body')
    <div class="flex justify-between items-center">
        <span>{{ ctrans('texts.with_selected') }}</span>
        <form action="{{ route('client.invoices.bulk') }}" method="post" id="bulkActions">
            @csrf
            <button type="submit" class="button button-primary" name="action" value="download">{{ ctrans('texts.download') }}</button>
            <button type="submit" class="button button-primary" name="action" value="payment">{{ ctrans('texts.pay_now') }}</button>
        </form>
    </div>
    <div class="flex flex-col mt-4">
        <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
            <div class="align-middle inline-block min-w-full shadow overflow-hidden rounded border-b border-gray-200">
                <table class="min-w-full">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                <label>
                                    <input type="checkbox" class="form-check form-check-parent">
                                </label>
                            </th>
                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                {{ ctrans('texts.invoice_number') }}
                            </th>
                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                {{ ctrans('texts.invoice_date') }}
                            </th>
                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                {{ ctrans('texts.balance') }}
                            </th>
                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                {{ ctrans('texts.due_date') }}
                            </th>
                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                {{ ctrans('texts.status') }}
                            </th>
                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoices as $invoice)
                            <tr class="bg-white group hover:bg-gray-100">
                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
                                    <label>
                                        <input type="checkbox" class="form-check form-check-child ml-2" data-value="{{ $invoice->hashed_id }}">
                                    </label>
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
                                    {{ $invoice->number }}
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
                                    {{ $invoice->due_date  }} <!-- $invoice->formatDate($invoice->date, $invoice->client->date_format())-->
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
                                    {{ App\Utils\Number::formatMoney($invoice->balance, $invoice->client) }}
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
                                    {{ $invoice->formatDate($invoice->due_date, $invoice->client->date_format()) }}
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
                                    {!! App\Models\Invoice::badgeForStatus($invoice->status) !!}
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap flex items-center justify-end text-sm leading-5 font-medium">
                                    @if($invoice->isPayable())
                                        <button class="button button-primary py-1 px-2 text-xs uppercase mr-3 pay-now-button" data-value="{{ $invoice->hashed_id }}">
                                            @lang('texts.pay_now')
                                        </button>
                                    @endif
                                    <a href="{{ route('client.invoice.show', $invoice->hashed_id) }}" class="button-link">
                                        @lang('texts.view')
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="my-6">
            {{ $invoices->links('portal.ninja2020.vendor.pagination') }}
        </div>
    </div>
@endsection

@push('footer')
    <script src="{{ asset('js/vendor/jquery-3.3.1/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ asset('js/vendor/datatables/datatables.min.js') }}"></script>
    <script src="{{ asset('js/clients/invoices/action-selectors.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('table').DataTable();
        });
    </script>
@endpush