@extends('admin.layouts.app')

@section('content')
    <div class="main-content">
        <div id="contentDiv" class="">
            <div class="card">
                <div class="card-header">
                    <div class="title">Customer Shares</div>
                    <div class="action-center">
                        <div class="item">
                            <a href="{{ route('admin.cshare.create') }}"><i data-feather="plus-circle"></i></a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="" class="table wingsDataTable" data-initiate="dataTable" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Customer Name</th>
                                    <th>Share Number</th>
                                    <th>Share Amount</th>
                                    <th>Purchase Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($customer_shares as $customer_share)
                                    <tr>
                                        <td>{{ $customer_share->id }}</td>
                                        <td>{{ $customer_share->customer->first_name }}</td>
                                        <td>{{ $customer_share->share->share_number }}</td>
                                        <td>{{ $customer_share->share_price }}</td>
                                        <td>{{ $customer_share->purchase_date }}</td>
                                        <td>
                                            <a href="#" class="share_certificate text-danger"
                                                data-id="{{ $customer_share->id }}">Certificate</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id="interactionBar">
            <div class="inner-content">
                <div class="copyright-info">
                    <p>&#169; Copyright 2024 - Manarang. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="shareCertificateModal" tabindex="-1" aria-labelledby="shareCertificateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="shareCertificateModalLabel">ID Card</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <iframe id="pdfIframe" style="width:100%; height:500px;" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('inline-script')
    <script type="text/javascript">
        var shareCertificateModalObj = new bootstrap.Modal(document.getElementById('shareCertificateModal'), {
            keyboard: false
        })
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(".share_certificate").click(function(e) {
            e.preventDefault();
            var share_id = $(this).attr("data-id");
            console.log("in");
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: '{{ route('admin.customer.generateshareCertificate') }}',
                data: {
                    id: share_id
                },
                success: function(response) {
                    console.log(response);
                    var pdfData = 'data:application/pdf;base64,' + response.pdf;
                    $('#pdfIframe').attr('src', pdfData);

                    // Display the popup with the iframe
                    shareCertificateModalObj.show();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            })
        });
    </script>
@endpush