@extends('layouts.master')
@section('style')
    <style>
        @media print {

            .header,
            .footer,
            .aside,
            .select2-dropdown,
            .select2-dropdown--below,
            #invoice-section {
                visibility: hidden;
            }
        }

        .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__placeholder {
            color: white !important;
        }

        .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__rendered {
            color: white !important;
        }
    </style>
@endsection
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class=" container-xxl ">
            <div class="card">
                <div class="card-body p-lg-20">
                    <div class="d-flex flex-column flex-xl-row">
                        <div class="flex-lg-row-fluid me-xl-18 mb-10 mb-xl-0">
                            <div class="mt-n1">
                                <div class="d-flex flex-stack pb-10">
                                    <a href="#">
                                        <img alt="Logo" width="300px" src="{{ asset('images/logo.png') }}">
                                    </a>
                                </div>

                                <div class="m-0">
                                    <div class="fw-bold fs-3 text-gray-800 mb-8">Invoice #{{ $invNo }}</div>
                                    <div class="fw-semibold fs-7 text-gray-600 mt-3 mb-5">
                                        8939 South Sepulveda Blvd<br>Los Angeles, CA 90045
                                    </div>
                                    <div class="row g-5 mb-11">
                                        <div class="col-sm-10">
                                            <div class="fw-semibold fs-7 text-gray-600 mb-1">Billed Date:</div>
                                            <div class="fw-bold fs-6 text-gray-800">
                                                {{ !empty($main_loop['bill_date']) ? date('m/d/Y', strtotime($main_loop['bill_date'])) : '' }}
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="fw-semibold fs-7 text-gray-600 mb-1">Due Date:</div>
                                            <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center flex-wrap">
                                                <span class="pe-2">{{ date('m/d/Y', strtotime('+1 day')) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row g-5 mb-12">
                                        <div class="col-sm-10">
                                            <div class="fw-semibold fs-7 text-gray-600 mb-1">Bill To:</div>
                                            <div class="fw-bold fs-6 text-gray-800">{{ $row_loop->NAME }} <br>
                                                {{ $row_loop->BILL_TO }} <br> Email : {{ $row_loop->EMAIL }}</div>

                                        </div>
                                        <div class="col-sm-2">
                                            <div class="fw-semibold fs-7 text-gray-600 mb-1">Policy #:</div>
                                            <div class="fw-bold fs-6 text-gray-800">{{ $row_loop->SUBFLEET }}</div>
                                        </div>
                                        <div class="col-sm-10">
                                            <div class="fw-semibold fs-7 text-gray-600 mb-1">Date Range:</div>
                                            <div class="fw-bold fs-6 text-gray-800">{{ $AM_REP }}</div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="fw-semibold fs-7 text-gray-600 mb-1">Terms:</div>
                                            <div class="fw-bold fs-6 text-gray-800">Bi-Weekly</div>
                                        </div>
                                    </div>

                                    <div class="flex-grow-1">
                                        <div class="table-responsive border-bottom mb-9">
                                            <table class="table mb-3">
                                                <thead>
                                                    <tr class="border-bottom fs-6 fw-bold text-muted">
                                                        <th class="min-w-100px pb-2">Trans Date</th>
                                                        <th class="min-w-100px pb-2">Description</th>
                                                        <th class="min-w-100px pb-2">Driver</th>
                                                        <th class="min-w-80px pb-2">Unit</th>
                                                        <th class="min-w-100px pb-2">Card</th>
                                                        <th class="min-w-80px pb-2">Qty</th>
                                                        <th class="min-w-80px pb-2">Retail</th>
                                                        <th class="min-w-100px pb-2">Amount</th>
                                                        <th class="min-w-70px pb-2">Fee</th>
                                                        <th class="min-w-100px pb-2">Location</th>
                                                        <th class="min-w-100px pb-2">Total Due</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                    @php
                                                        $fptotalTransactionFee = 0;
                                                        $fptotalQuantity = 0;
                                                        $fptotalAmount = 0;
                                                        $number = 0;
                                                        $total_gal = 0;
                                                        $totalFee = 0;
                                                        $total_ach_grand = 0;
                                                    @endphp
                                                    @foreach ($num_rows as $row)
                                                        @php
                                                            $fptotalTransactionFee += $row->{'Transaction Fee'};
                                                            $fptotalQuantity += $row->{'Quantity'};
                                                            $fptotalAmount += $row->{'Amount'};
                                                            $name = $row->NAME;
                                                        @endphp
                                                        <tr class="fw-bold text-gray-700 fs-5">
                                                            <td>{{ date('m/d/y', strtotime($row->{'Transaction Date'})) }}
                                                            </td>
                                                            <td>{{ $row->{'Product Code'} }}</td>
                                                            <td>{{ $row->{'Driver Name'} }}</td>
                                                            <td>{{ $row->{'Unit'} }}</td>
                                                            <td>{{ $row->{'Card Number'} }}</td>
                                                            <td>{{ $row->{'Quantity'} }}</td>
                                                            <td>$ {{ number_format($row->{'Retail_PPU'}, 2) }}</td>
                                                            <td>$ {{ number_format($row->{'Amount'}, 2) }}</td>
                                                            <td>$ {{ number_format($row->{'Transaction Fee'}, 2) }}</td>
                                                            <td>{{ $row->{'Location Name'} .
                                                                ' - ' .
                                                                $row->{'Location City'} .
                                                                '
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                - ' .
                                                                $row->{'Location State/Province'} }}
                                                            </td>
                                                            <td>$ {{ number_format($row->{'TotalAmount'}, 2) }}</td>
                                                        </tr>
                                                        @php
                                                            $total_ach_grand += number_format($row->{'TotalAmount'}, 2);
                                                            $total_gal += $row->{'Quantity'};
                                                            $totalFee += $row->{'Transaction Fee'};
                                                            $number++;
                                                        @endphp
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>

                                        <div class="d-flex justify-content-end">
                                            <div class="mw-300px">
                                                <div class="d-flex flex-stack mb-3">
                                                    <div class="fw-semibold pe-10 text-gray-600 fs-7">Total Qty:</div>
                                                    <div class="text-end fw-bold fs-6 text-gray-800">{{ $total_gal }}
                                                    </div>
                                                </div>

                                                <div class="d-flex flex-stack mb-3">
                                                    <div class="fw-semibold pe-10 text-gray-600 fs-7">Total Amount:</div>

                                                    <div class="text-end fw-bold fs-6 text-gray-800">$
                                                        {{ number_format($fptotalAmount, 2) }}</div>
                                                </div>

                                                <div class="d-flex flex-stack mb-3">
                                                    <div class="fw-semibold pe-10 text-gray-600 fs-7">Total Fee:</div>

                                                    <div class="text-end fw-bold fs-6 text-gray-800">$
                                                        {{ number_format($totalFee, 2) }}</div>
                                                </div>

                                                <div class="d-flex flex-stack">
                                                    <div class="fw-semibold pe-10 text-gray-600 fs-7">Total Due</div>

                                                    <div class="text-end fw-bold fs-6 text-gray-800">$
                                                        {{ $total_ach_grand }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h3 class="fw-bold mt-10"><span class="text-muted">All invoices are due by 1PM PST on their due
                                    date.
                                    A
                                    2% late fee will be applied per late payment. If payment is not received by next
                                    business
                                    day, the system will automatically turn off your fuel cards.</span>
                            </h3>
                        </div>
                        <div class="flex-lg-auto min-w-lg-300px" id="invoice-section">
                            <div class="card" data-kt-sticky="true" data-kt-sticky-name="invoice"
                                data-kt-sticky-offset="{default: false, lg: '200px'}"
                                data-kt-sticky-width="{lg: '250px', lg: '300px'}" data-kt-sticky-left="auto"
                                data-kt-sticky-top="150px" data-kt-sticky-animation="false" data-kt-sticky-zindex="95"
                                style="">
                                <div class="card-body p-10">
                                    <div class="float-end">
                                        <select name="downloadOptions"
                                            id="downloadOptions"class="form-select bg-primary form-select-solid form-select-sm"
                                            data-control="select2" data-hide-search="true" data-placeholder="Export">
                                            <option value="">Export</option>
                                            <option value="preview">Preview</option>
                                            <option value="download">Download</option>
                                        </select>
                                    </div>
                                    @if (!empty($cards))
                                        <label class="fw-bold pe-10 text-gray-900 fs-4 mt-20">Pay Amount <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-solid mt-2"
                                            placeholder="Pay Amount" name="amount" id="amount"
                                            value="{{ $main_loop->amount - $sum_of_paid_amounts }}"><br>
                                        <label class="fw-bold pe-10 text-gray-900 fs-4 mt-2">Total Amount : $ <span
                                                id="getTotal"></span></label>
                                        @foreach ($cards as $key => $card)
                                            <label
                                                class="form-check form-check-custom form-check-inline form-check-solid me-5 mt-5">
                                                <input class="form-check-input" name="card"
                                                    id="card{{ $key }}" value="{{ $card->id }}"
                                                    type="radio" {{ $key == 0 ? 'checked' : '' }}>
                                                <span class="fw-bold ps-2 fs-6">{{ $card->last4 }} </span>
                                                <span class="fw-bold ps-2 fs-6">{{ $card->brand }}</span>
                                            </label><br>
                                        @endforeach
                                        @if ($main_loop->is_paid == 'N')
                                            <div class="row col-md-12">
                                                <button type="button" class="btn btn-sm btn-success mt-5 mb-5 fs-3"
                                                    id="payNow">Preview Payment</button>
                                            </div>
                                        @endif
                                    @else
                                        <a href="#" id="addCardLink"
                                            class="btn btn-sm btn-success mt-20 mb-5 fs-3">Add Card</a>
                                    @endif

                                    <div class="separator separator-dashed mb-8"></div>

                                    <div class="mb-0">
                                        @if (!$paid_amounts->isEmpty())
                                            <label class="fw-bold pe-5 text-gray-900 fs-4 mb-5">Last Invoice Paid</label>
                                            @foreach ($paid_amounts as $paid_amount)
                                                <div class="d-flex">
                                                    <label class="fw-bold pe-2 text-gray-900 fs-6">$
                                                        {{ $paid_amount->amount }}</label>
                                                    <label
                                                        class="fw-bold pe-2 text-gray-900 fs-8">({{ !empty($paid_amount->created_date) ? date('m/d/Y H:i A', strtotime($paid_amount->created_date)) : '' }})</label>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    <script>
        $('#downloadOptions').on('change', function() {
            var downloadOptions = this.value;
            if (downloadOptions == 'preview') {
                window.print();
            }
            if (downloadOptions == 'download') {
                var invoiceId = '{{ $main_loop->id }}';
                var redirectUrl = "{{ route('invoices.download', '@') }}";
                redirectUrl = redirectUrl.replace('@', invoiceId);
                window.location.href = redirectUrl;
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            var initialAmount = parseFloat('{{ $main_loop->amount - $sum_of_paid_amounts }}');
            var totalAmount = initialAmount;
            $('#getTotal').text(totalAmount.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }));

            $('#amount').on('input', function() {
                var enteredAmount = parseFloat($(this).val());
                if (!isNaN(enteredAmount)) {
                    var totalWithExtra = enteredAmount;
                    $('#getTotal').text(totalWithExtra.toLocaleString(undefined, {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    }));
                }
            });
        });
    </script>
    <script>
        $('#payNow').on('click', function() {
            var cardId = $('input[name="card"]:checked').val();
            var amount = $('#amount').val();
            var invoiceId = '{{ md5($main_loop->id) }}';

                        if (cardId == undefined) {
                toastr.error('Please Add a Card First');
                return;
            }
            

            if (cardId == undefined) {
                toastr.error('Please Select a Card First');
                return;
            }

            if (amount.trim() === '') {
                toastr.error('Please Enter Amount');
                return;
            }

            if (!/^\d*\.?\d+$/.test(amount)) {
                toastr.error('Please Enter a Valid Amount');
                return;
            }

            if (parseFloat(amount) < 0) {
                toastr.error('Please Enter a Valid Amount');
                return;
            }

            var url = '{{ route('invoices.payNow', ['id' => ':id', 'amount' => ':amount', 'card' => ':card']) }}';
            url = url.replace(':id', invoiceId);
            url = url.replace(':card', cardId);
            url = url.replace(':amount', amount);

            window.location.href = url;
        });
    </script>
    <script>
        document.getElementById('addCardLink').addEventListener('click', function(event) {
            event.preventDefault();
            var url = "{{ route('myWallet.index') }}";
            window.location.href = url + '#CCDCModalLong';
        });
    </script>
@endsection