@extends('layouts.master')
@section('title', 'Invoices')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>
    <script src="{{ asset('assets/js/plugins/jquery-1.9.1.min.js') }}"></script>
@endpush
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-md-2">
                                <h6 class="mb-0">Invoices Table</h6>
                            </div>
                            <div class="col-md-10 d-flex flex-wrap justify-content-end align-items-center">
                                @can('invoices.download.zip')
                                <button class="btn btn-secondary download-invoice-btn" data-route="{{ route('invoices.download.zip', 'pdf') }}" disabled><i class="fa-solid fa-file-pdf me-2"></i>Export PDF</button>
                                <button class="btn btn-warning download-invoice-btn ms-2" data-route="{{ route('invoices.download.zip', 'csv') }}" disabled><i class="fa-solid fa-file-csv me-2"></i>Export CSV</button>
                                <a class="btn btn-success invoice-inport mx-2" href="#" data-bs-toggle="modal" data-bs-target="#invoiceImportModal"><i class="fa-solid fa-file-export me-2"></i>Import</a>
                                @endcan
                                @can('invoice-access')
                                  <a class="btn btn-primary ms-1" href="{{ route('invoices.create') }}"><i class="fa-solid fa-plus me-2"></i>Add New Invoice</a>
                                @endcan
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-3 pt-4 pb-2">
                        <div class="table-responsive p-0">
                            <table id="datatable" class="table invoices-datatable mb-0" style="width:100%">
                                <thead>
                                    <tr>
                                        @can(['invoices.email', 'invoices.show', 'invoices.edit', 'invoices.destroy'])
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"><input type="checkbox" class="check_all_checkbox ms-3"></th>
                                        @endcan
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Invoice Number</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Invoice Date</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Company</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Customer</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Items</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Paid</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">VAT</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Total</th>
                                        @can(['invoices.email', 'invoices.show', 'invoices.edit', 'invoices.destroy'])
                                         <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Action</th>
                                        @endcan
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('invoices.import')
    @include('invoices.email')
    @include('invoices.payment')
@endsection
@push('scripts')
    <script src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        $(function() {
            var x = {{$invoiceIds}};
            var download_invoices = [];

            $(document).on('change', '.invoice-chkbox', function(e) {
                var $this = $(this),
                value = $this.val();
                if ($this.prop('checked')) {
                    download_invoices.push(value);
                } else {
                    download_invoices.splice(download_invoices.indexOf(value), 1);
                }
                $(".download-invoice-btn").prop('disabled', download_invoices.length == 0);
                $(".check_all_checkbox").prop('checked', download_invoices.length === x.length);
            });

            $(document).on('change', '.check_all_checkbox', function() {
                if ($(this).prop('checked')) {
                    $('.invoice-chkbox').prop('checked', true);
                    download_invoices = JSON.parse(JSON.stringify(x));
                    $(".download-invoice-btn").prop('disabled', false);
                } else {
                    download_invoices = [];
                    $('.invoice-chkbox').prop('checked', false);
                    $(".download-invoice-btn").prop('disabled', true);
                }
            });

            $(".download-invoice-btn").click(function(e) {
                $.ajax({
                    url: $(this).data('route'),
                    type: "GET",
                    contentType: 'application/zip',
                    dataType: 'text',
                    data: {
                        id: download_invoices.join(",")
                    },
                    success: function success(response) {
                        var a = document.createElement('a');
                        var res = JSON.parse(response);
                        var url = res.url;
                        a.href = url;
                        a.download = res.type + "_invoice_" + res.date + ".zip";
                        document.body.append(a);
                        a.click();
                        a.remove();
                        toastr.success("Download invoices successfully.");
                    },
                    error: function error() {
                        toastr.error("Something went wrong.");
                    },
                });
            });

            var table = $('.invoices-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('invoices.index') }}",
                "lengthChange": false,
                info: false,
                "language": {
                    "paginate": {
                        "previous": "Prev"
                    }
                },
                @can(['invoices.email', 'invoices.show', 'invoices.edit', 'invoices.destroy'])
                columnDefs: [
                    {
                    'targets': 0,
                    'width' : '3%',
                    'searchable': false,
                    'orderable': false,
                    'className': 'dt-body-center',
                    'render': function(data, type, full, meta) {
                        return '<input type="checkbox" class="invoice-chkbox" name="id[]" value="' +
                            $('<div/>').text(data).html() + '">';
                    }
                }],
                drawCallback: function(settings) {
                    $(".invoice-chkbox").each(function(x, y) {
                        if (download_invoices.indexOf(parseInt($(y).val())) >= 0 || download_invoices.indexOf($(y).val()) >= 0) {
                            $(y).prop("checked", true);
                        }
                    });
                },
                @endcan
                columns: [
                @can(['invoices.email', 'invoices.show', 'invoices.edit', 'invoices.destroy'])
                    {data: 'id', name: 'id'},
                @endcan
                    {data: 'invoice_no', name: 'invoice_no'},
                    {data: 'invoice_date', name: 'invoice_date'},
                    {data: 'company', name: 'company.name'},
                    {data: 'customer', name: 'customer.name'},
                    {data: 'items', name: 'items', searchable: false, orderable: false},
                    {data: 'paid', name: 'paid', searchable: false, orderable: false},
                    {data: 'vat', name: 'vat'},
                    {data: 'total', name: 'total'},
                @can(['invoices.email', 'invoices.show', 'invoices.edit', 'invoices.destroy'])
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                @endcan
                ]
            });
            @if(session('import_failures'))
                $("#invoiceImportModal").modal('show');
            @endif
        });
        $(document.body).on('click', '.invoice-email', function() {
            let invoice = $(this).data('invoice');
            $("#emailModal input[name='id']").val(invoice.id);
            $("#emailModal input[name='email']").val(invoice.customer.email);
        });

        $(document.body).on('click', '.invoice-payment', function() {
            let imgSrc = $(this).data('src');
            let paymentUrl = $(this).data('url');
            let modal = $("#invoicePaymentModal");
            let invoice = $(this).data('invoice');
            modal.find("#paymentImg").attr('src', imgSrc);
            modal.find("input[name='id']").val(invoice.id);
            modal.find(".btn-success").attr('href', imgSrc);
            modal.find("#invoicePaymentUrl").val(paymentUrl);
            modal.find("#payerEmail").val(invoice.customer.email);
            modal.find(".btn-success").attr('download', invoice.qr_code);
        });
    </script>
@endpush