@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>

    <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.add_visitor')</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">
                    <div class="container my-5 px-5 py-5" id="contentToDownload">
                        <div class="row">
                            <div class="col-2 contact-details">
                                <h5>{{ auth()->user()->fname }}</h5>
                                <h6><em>{{ auth()->user()->email }} , {{ auth()->user()->mobile }}</em></h6>
                                <p>{{ auth()->user()->country }}</p>
                            </div>
                            <div class="invoice-details col-2 offset-3 text-right">
                                <h6>@lang('translation.invoice_no') #1</h6>
                                <h6>@lang('translation.issued_at'): {{ auth()->user()->plans_start_at }}</h6>
                            </div>
                        </div>
                        <div class="container-fluid invoice-letter mt-3">
                            <div class="row">
                                <div class="col-3 text-white pl-5 py-2 letter-title">
                                    <h5>@lang('translation.summary_notes')</h5>
                                </div>
                                <div class="col-9 text-white pr-5 py-2 letter-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat erat
                                        mauris, a scelerisque est pellentesque vel. Proin tempus felis purus, vel molestie
                                        nisl condimentum nec. Sed at lorem maximus, venenatis nulla ut, laoreet eros. Etiam
                                        et lectus sem. Aenean tempus ante nec lacus aliquet consectetur. Vestibulum sem
                                        felis, tempus sit amet libero non, vehicula pellentesque turpis. Suspendisse
                                        potenti.</p>
                                </div>
                            </div>
                        </div>
                        <div class="row table mt-5">
                            <table class="invoice table table-hover">
                                <thead class="thead">
                                    <tr>
                                        <th scope="col">NO.</th>
                                        <th scope="col">Item</th>
                                        <th scope="col">Qty.</th>
                                        <th scope="col">Price</th>
                                        <th scope="col">Discount</th>
                                        <th scope="col">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td class="item">What about if we have a long-item title</td>
                                        <td>1</td>
                                        <td>25 <span class="currency">@lang('translation.currency')</span></td>
                                        <td>5 %</td>
                                        <td>28,75 <span class="currency">@lang('translation.currency')</span></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td class="item">What about if we have a really, really, really long item title
                                        </td>
                                        <td>1</td>
                                        <td>25 <span class="currency">@lang('translation.currency')</span></td>
                                        <td></td>
                                        <td>28,75 <span class="currency">@lang('translation.currency')</span></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td class="item">Bootstrap will just take care of this long title. Lorem ipsum
                                            dolor sit amet, consectetur adipiscing elit. Ut sit amet tellus lectus. Quisque
                                            tincidunt lacus sed turpis blandit rutrum.</td>
                                        <td>1</td>
                                        <td>25 <span class="currency">@lang('translation.currency')</span></td>
                                        <td>13 %</td>
                                        <td>28,75 <span class="currency">@lang('translation.currency')</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <div class="offset-2 col-4">
                                <div class="to text-right">
                                    <h5 class="effect-color pt-4">@lang('translation.invoiced_to'):</h5>
                                    <h4 class="theme-color"><strong>Company Name</strong></h4>
                                    <h6>Address of issuer</h6>
                                    <p>Contact details Spanning on multiple rows cuz bootstrap is awesome.</p>
                                    <h5>@lang('translation.due_date'): 02/02/20 20</h5>
                                </div>
                            </div>
                            <div class="col-6 pr-5">
                                <table class="table table-borderless text-right">
                                    <tbody>
                                        <tr>
                                            <th scope="row">@lang('translation.subtotal')</th>
                                            <td>75 <span class="currency">@lang('translation.currency')</span></td>
                                        </tr>
                                        <tr>
                                            <th scope="row">@lang('translation.taxes')*</th>
                                            <td>11,25 <span class="currency">@lang('translation.currency')</span></td>
                                        </tr>
                                        <tr>
                                            <th scope="row">@lang('translation.discounts')</th>
                                            <td>7,5 <span class="currency">@lang('translation.currency')</span></td>
                                        </tr>
                                        <tr>
                                            <th scope="row">@lang('translation.shipping')</th>
                                            <td><span class="currency">@lang('translation.currency')</span> 10,25</td>
                                        </tr>
                                        <tr class="last-row">
                                            <th scope="row">
                                                <h4>@lang('translation.total')</h4>
                                            </th>
                                            <td>
                                                <h4><span class="currency">@lang('translation.currency')</span> 90,25</h4>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <p class="text-center mt-3"><em>* @lang('translation.taxes') will be calculated in @lang('translation.currency') using
                                the default % value for your region</em></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,
                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