@extends('layouts.master')

@section('title')
    @lang('translation.yajra-datatable')
@endsection

@section('css')
    <!--datatable css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
@endsection

@section('content')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
    <style>
    .invoice-header, .invoice-footer {
        /* text-align: center;
        margin-bottom: 20px; */
        height:auto;
        width:100%;
    }
    .invoice-header img, .invoice-footer img {
        max-width: 100%;
    }
    .invoice-details {
        margin-bottom: 20px;
    }
    .invoice-details, .invoice-items {
        width: 100%;
        border-collapse: collapse;
    }
    .invoice-details td, .invoice-items th, .invoice-items td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    .invoice-items th {
        background-color: #f4f4f4;
    }
    .text-right {
        text-align: right;
    }
    .total {
        font-weight: bold;
    }
    .invoice-body {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .invoice-body p {
        margin: 0;
        padding: 5px 0;
    }
    .invoice-itemss table{
        height:auto;
        width:100%;
    }
    .invoice-itemss thead{
        background: linear-gradient(to left, #9b64d9, #074bae);
        padding: 5px;
    }
</style>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">@lang('translation.invoice')</h1>
                    <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-circle-xmark"></i></button>
                </div>
                <div class="modal-body" id="contentToDownload">
                <div class="invoice-header">
                    <img src="{{ asset('images/BetterBots_header.jpg') }}" alt="Header Image">
                </div>

                <div class="invoice-body d-flex"style="justify-content: space-between">
                    <p><strong>INVOICE TO :</strong> Store Name</p>
                    <p><strong>Date:</strong> {{date('d-m-Y')}}</p>
                    <p><strong>TOTAL DUE :</strong></p>
                </div>

                <div class="invoice-itemss">
                    <table>
                        <thead>
                            <tr >
                                <th>#</th>
                                <th>Description</th>
                                <th class="text-right">Price</th>
                                <th class="text-right">Quantity </th>
                                <th class="text-right">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Item 1</td>
                                <td class="text-right">2</td>
                                <td class="text-right">$50.00</td>
                                <td class="text-right">$100.00</td>
                            </tr>
                            <!-- <tr>
                                <td>2</td>
                                <td>Item 2</td>
                                <td class="text-right">1</td>
                                <td class="text-right">$75.00</td>
                                <td class="text-right">$75.00</td>
                            </tr> -->
                            <!-- <tr>
                                <td>3</td>
                                <td>Item 3</td>
                                <td class="text-right">3</td>
                                <td class="text-right">$30.00</td>
                                <td class="text-right">$90.00</td>
                            </tr> -->
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4" class="text-right total">Subtotal</td>
                                <td class="text-right total">$265.00</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-right total">Tax (10%)</td>
                                <td class="text-right total">$26.50</td>
                            </tr>
                            <!-- <tr>
                                <td colspan="4" class="text-right total">Total</td>
                                <td class="text-right total">$291.50</td>
                            </tr> -->
                        </tfoot>
                    </table>
                </div>
                <div class="invoice-footer">
                    <img src="{{ asset('images/BetterBots_footer.jpg') }}" alt="Footer Image">
                    <p>Thank you for your business!</p>
                </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" id="downloadBtn"
                        style="background:#52050A;color:#ffffff">@lang('translation.download')</button>
                    <button type="button" class="btn" data-bs-dismiss="modal"
                        style="background:#fff6f7;color:#af777e">@lang('translation.cancel')</button>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white px-3">
        <div class="d-flex justify-content-between align-items-center">
            <h4 class="py-3 pt-4">@lang('translation.transaction_list')</h4>
        </div>
        <div class="row mb-5">
            <div class="col-md-4 mb-5">
                <form action="post" id="datefilter">
                    <label for="form-date" class="form-label">@lang('translation.from_date')</label>
                    <input type="date" class="form-control" name="from_date" id="from_date" value="{{ date('Y-m-d') }}">
            </div>
            <div class="col-md-4 mb-5">
                <label for="to-date" class="form-label">@lang('translation.to_date')</label>
                <input type="date" class="form-control" name="to_date" id="to_date" value="{{ date('Y-m-d') }}">
                </form>
            </div>
            <div class="col-md-4 mb-5">
                <button type="button" onclick="searchdate()" class="btn btn-secondary mt-4"><i
                        class="fas fa-search"></i></button>
            </div>
        </div>
        <div class="row mb-5" id="tab-date"></div>
    </div>

    <script>
        document.getElementById('downloadBtn').addEventListener('click', function() {
            var element = document.getElementById('contentToDownload');
            var opt = {
                margin: 0.5,
                filename: 'invoice.pdf',
                image: {
                    type: 'jpeg',
                    quality: 0.98
                },
                html2canvas: {
                    scale: 2
                },
                jsPDF: {
                    unit: 'in',
                    format: 'letter',
                    orientation: 'portrait'
                }
            };

            // Use html2pdf to generate the PDF and trigger the download
            html2pdf().set(opt).from(element).save();
        });
    </script>

    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $('.yajra-datatable').DataTable();
    </script>
    <script>
        function searchdate() {
            var url = "{{ env('APP_URL') }}/api/location_history";
            var data = $('#datefilter').serialize();
            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 500,
                            showCloseButton: true
                        });
                        $("#tab-date").html('');
                        $("#tab-date").html(response.table);
                    } else {
                        $.each(response.errors, function(key, value) {
                            Swal.fire({
                                position: 'center',
                                icon: 'error',
                                title: value,
                                showConfirmButton: false,
                                timer: 3500,
                                showCloseButton: true
                            });
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('An error occurred while submitting the form');
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
    <script>
        $(document).ready(searchdate());
    </script>
@endsection