@extends('layouts.front')
@section('page-css')
    <!-- JQuery DataTable Css -->
    <link rel="stylesheet" href="{{ asset('front') }}/assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css">
@endsection
@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="block-header">
                <div class="row clearfix">
                    <div class="col-lg-5 col-md-5 col-sm-12">
                        <h2>{{ $title }}</h2>
                        <ul class="breadcrumb padding-0">
                            <li class="breadcrumb-item"><a href="index.html"><i class="zmdi zmdi-home"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">{{ $title }}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Basic Examples -->
            <div class="row clearfix">
                <div class="col-lg-12">
                    <div class="card">
                    @if(session('success'))
                        <div class="alert alert-success" id="flash-message">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger" id="flash-message">
                            {{ session('error') }}
                        </div>
                    @endifv>
                    @endif

                        <div id="paypal-button"></div>
                        <div class="body">
                            <div class="table-responsive">
                                <table id="course-table"
                                    class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                    <thead>
                                        <tr>
                                            <th>S.no</th>
                                            <th>invoice Date</th>
                                            <th>invoice Number</th>
                                            <th>Number of students</th>
                                            <th>Price</th>
                                            <th>Payment Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($invoices as $invoice)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $invoice->created_at->format('d-m-Y') }}</td>
                                                <td>{{ $invoice->invoice_number }}</td>
                                                <td>{{ $invoice->students_count }}</td>
                                                <td>{{ get_price($invoice->invoice_price) }}</td>
         
                                                <td style="text-align: center">
                                                    @if ($invoice->payment_status === 'paid')
                                                        <span class="badge badge-success">Paid</span>
                                                    @else
                                                        <a href="{{ route('user.invoice.paid.paypal', $invoice->hashid) }}" style="display: block; width: 80%; margin-right: auto; margin-left: auto; font-size: 12px; padding: 8px;" class="btn btn-danger">Pay with Paypal</a>
                                                        <a href="{{ route('user.invoice.paid.stripe', $invoice->hashid) }}" style="display: block; width: 80%; margin-right: auto; margin-left: auto; font-size: 12px; padding: 8px;" class="btn btn-danger">Pay with Stripe</a>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($invoice->payment_status == 'paid')
                                                        <a href="{{ route('user.invoice.view', $invoice->hashid) }}"
                                                           class="button button-small view_partner_details" title="View">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                    @else
                                                       <span class="badge badge-danger">Unpaid</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('page-scripts')
    <!-- Jquery DataTable Plugin Js -->
    <script src="{{ asset('front') }}/assets/bundles/datatablescripts.bundle.js"></script>
    <script src="{{ asset('front') }}/assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js"></script>
    <script src="{{ asset('front') }}/assets/plugins/jquery-datatable/buttons/buttons.bootstrap4.min.js"></script>
    <script src="{{ asset('front') }}/assets/plugins/jquery-datatable/buttons/buttons.colVis.min.js"></script>
    <script src="{{ asset('front') }}/assets/plugins/jquery-datatable/buttons/buttons.html5.min.js"></script>
    <script src="{{ asset('front') }}/assets/plugins/jquery-datatable/buttons/buttons.print.min.js"></script>
    <script src="{{ asset('front') }}/assets/js/pages/tables/jquery-datatable.js"></script>
    <script>
        setTimeout(function() {
            var flashMessage = document.getElementById('flash-message');
            if (flashMessage) {
                flashMessage.style.transition = 'opacity 0.5s ease'; // Smooth transition
                flashMessage.style.opacity = '0'; // Hide the message
                setTimeout(function() {
                    flashMessage.remove(); // Remove the element from DOM after fading out
                }, 500); // Wait for the fade-out to finish
            }
        }, 5000); // Display for 3 seconds before hiding
    </script>
    <script>
        $('.ajaxForm').submit(function(e) {
            e.preventDefault();
            var url = $(this).attr('action');
            var param = new FormData(this);
            my_ajax(url, param, 'post', function(res) {}, true);
        });
    </script>
@endsection