@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>
            </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>
        {{-- <a href="{{ route('user.create') }}" class="btn btn-outline-info px-4">@lang('translation.add')</a> --}}
    </div>

    <div class="table-responsive ">
        {{-- <table class="table table-bordered yajra-datatable "> --}}
        <table class="table table-bordered ">
            <thead>
                <tr>
                    <th>@lang('translation.no')</th>
                    <th>@lang('translation.first_name')</th>
                    <th>@lang('translation.email')</th>
                    <th>@lang('translation.company')</th>
                    <th>@lang('translation.mobile')</th>
                    <th>@lang('translation.plans')</th>
                    <th>@lang('translation.price')</th>
                    <th>@lang('translation.payment_date')</th>
                    <th>@lang('translation.activation_date')</th>
                    <th>@lang('translation.end_date')</th>
                    <th>@lang('translation.action')</th>
                </tr>
            </thead>
            <tbody>
                @php
                    use Carbon\Carbon;
                    $i=1;
                @endphp
                @foreach($billings as $bill)
                <tr>
                    <td>{{$i}}</td>
                    @foreach($user as $users)
                    @if($bill->uid==$users->id)
                        <td>{{$users->fname}}</td>
                        <td>{{$users->email}}</td>
                        <td>{{$users->company}}</td>
                        <td>{{$users->mobile}}</td>
                    @endif
                    @endforeach

                    @foreach($price as $plansnam)
                    @if($bill->scheme==$plansnam->id)
                        <td>{{$plansnam->name}}</td>
                        <td>{{$plansnam->price}}</td>
                    @endif
                    @endforeach

                    <td>{{ Carbon::parse($bill->billing_date)->format('d-m-Y') }}</td>
                    <td>{{ Carbon::parse($bill->plans_start_at)->format('d-m-Y') }}</td>
                    <td>{{ Carbon::parse($bill->plans_end_at)->format('d-m-Y') }}</td>
                    @if($bill->scheme==1)
                    <td> <button class="btn m-2" style="background:#52050A;color:#ffffff"><i class="fas fa-ban p-0 px-1 m-0"></i></button></td>
                    @else
                    <td>
                        <a href="{{ route('invoice',$bill->id) }}" class="btn btn-info px-3 mx-2">
                            <i class="fas fa-file-invoice p-0 px-1 m-0"></i>
                        </a>
                    </td>
                    {{-- <td> <button data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-warning" ><i class="fas fa-list p-0 px-1 m-0"></i></button></td> --}}
                    @endif
                </tr>
                @php
                    $i++;
                @endphp
                @endforeach
            </tbody>
        </table>
    </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>
@endsection