@extends('admin.layouts.app')

@section('content')
    <div class="main-content">
        <div id="contentDiv" class="">
            <div class="card">
                <div class="card-header">
                    <div class="title">Customers</div>
                    <div class="action-center">
                        <div class="item">
                            <a href="{{ route('admin.customer.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>First Name</th>
                                    <th>Last Name</th>
                                    <th>Email</th>
                                    <th>Mobile</th>
                                    <th>Username</th>
                                    <th>Date of Birth</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($customers as $customer)
                                    <tr>
                                        <td>{{ $customer->membership_number }}</td>
                                        <td>{{ $customer->first_name }}</td>
                                        <td>{{ $customer->last_name }}</td>
                                        <td>{{ $customer->email }}</td>
                                        <td>{{ $customer->mobile }}</td>
                                        <td>{{ $customer->username }}</td>
                                        <td>{{ $customer->dob }}</td>
                                        <td>
                                            <a href="#" class="view_customer text-danger"
                                                data-id="{{ $customer->id }}">
                                                @if ($customer->is_verified)
                                                    View
                                                @else
                                                    Form 16 & 17
                                                @endif
                                            </a> |
                                            <a href="#" class="customer_id_card text-danger"
                                                data-id="{{ $customer->id }}">ID Card</a>
                                        </td>

                                        {{-- <td class="">
                                        <div class="d-flex text-center">
                                            <a href="{{ route('vehicles.edit', $vehicle->id) }}" class="btn btn-primary me-2">Edit</a>
                                            <form action="{{ route('vehicles.destroy', $vehicle->id) }}" method="POST">
                                                @method('DELETE')
                                                @csrf
                                                <button class="btn btn-danger">Delete</button>
                                            </form>
                                        </div>
                                    </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 class="modal fade" id="customerDetailModal" tabindex="-1" role="dialog"
            aria-labelledby="customerDetailModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="customerDetailModalLabel">Customer Details</h5>
                    </div>
                    <div class="modal-body">
                        <div class="customer-info">
                            <div class="h6">Personal Details</div>
                            <table class="table table-bordered customerModelTable">
                                <tbody>
                                    <tr>
                                        <th>ID</th>
                                        <td id="cust_id"></td>
                                        <th>Name</th>
                                        <td id="cust_name"></td>
                                    </tr>
                                    <tr>
                                        <th>Email</th>
                                        <td id="cust_email"></td>
                                        <th>Mobile</th>
                                        <td id="cust_mobile"></td>
                                    </tr>
                                    <tr>
                                        <th>Sex</th>
                                        <td id="cust_sex"></td>
                                        <th>Date of Birth</th>
                                        <td id="cust_dob"></td>
                                    </tr>
                                    <tr>
                                        <th>Father's Name</th>
                                        <td id="cust_father"></td>
                                        <th>Husband Name</th>
                                        <td id="cust_husband"></td>
                                    </tr>
                                    <tr>
                                        <th>Occupation</th>
                                        <td id="cust_occupation"></td>
                                        <th>Residental Address</th>
                                        <td id="cust_raddress"></td>
                                    </tr>
                                    <tr>
                                        <th>Annual Income</th>
                                        <td id="cust_annual_income"></td>
                                        <th>Is Belongs to caste tribe</th>
                                        <td id="cust_caste_tribe"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="h6 mt-3">Membership Info</div>
                            <table class="table table-bordered customerModelTable" style="font-size: 14px">
                                <tbody>
                                    <tr>
                                        <th>Is Ex-member</th>
                                        <td id="cust_ex_member"></td>
                                        <th>Member Class Name</th>
                                        <td id="cust_member_class_name"></td>
                                    </tr>
                                    <tr>
                                        <th>Is member of different class</th>
                                        <td id="cust_different_member_class"></td>
                                        <th>Reason for applying</th>
                                        <td id="cust_reason"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="h6 mt-3">Share Details</div>
                            <table class="table table-bordered customerModelTable" style="font-size: 14px">
                                <tbody>
                                    <tr>
                                        <th>Number of shares Required</th>
                                        <td id="cust_shares_required"></td>
                                        <th>Post Office Name</th>
                                        <td id="cust_post_office_name"></td>
                                    </tr>
                                    <tr>
                                        <th>Date of remittance</th>
                                        <td id="cust_date_of_remittance"></td>
                                        <th>Date of remittance</th>
                                        <td id="cust_mode_of_remittance"></td>
                                    </tr>
                                    <tr>
                                        <th>Amount Remitted</th>
                                        <td id="cust_amount_remitted"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="h6 mt-3">Form 17</div>
                            <table class="table table-bordered customerModelTable" style="font-size: 14px">
                                <tbody>
                                    <tr>
                                        <th>Name</th>
                                        <td id="form17_name"></td>
                                        <th>Father/Husband Name</th>
                                        <td id="form17_father_name"></td>
                                    </tr>
                                    <tr>
                                        <th>Member Number</th>
                                        <td id="form17_member_number"></td>
                                        <th>Place of registration</th>
                                        <td id="form17_place_of_registration"></td>
                                    </tr>
                                    <tr>
                                        <th>Name of the Nominee</th>
                                        <td id="form17_nominee_name"></td>
                                        <th>Relationship with member</th>
                                        <td id="form17_nominee_relationship"></td>
                                    </tr>
                                    <tr>
                                        <th>Contingencies on the happening of which nomination shall become invalid</th>
                                        <td id="form17_nomination_expiry"></td>
                                        <th>Name, address and relationship of the person if any to whom the right of the
                                            nominee shall pass in the event of his predecessing the member</th>
                                        <td id="form17_additional_info"></td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="mt-3 text-center" class="">
                                <a href="#" class="btn btn-success" id="acceptCustomer" data-id="">Accept</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="idCardModal" tabindex="-1" aria-labelledby="idCardModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="idCardModalLabel">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 idCardModalObj = new bootstrap.Modal(document.getElementById('idCardModal'), {
            keyboard: false
        })
        const customerDetailModal = new bootstrap.Modal('#customerDetailModal')
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(".view_customer").click(function(e) {
            e.preventDefault();
            var customer_id = $(this).attr("data-id");
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: '{{ route('fetchCustInfo') }}',
                data: {
                    id: customer_id
                },
                success: function(response) {
                    customerDetailModal.show();
                    console.log(response.nominees[0].nominee_registration);
                    if (response.customerDetails.is_verified) {
                        $("#acceptCustomer").hide();
                    } else {
                        $("#acceptCustomer").attr('data-id', response.customerDetails.id);
                    }
                    $("#cust_id").html(response.customerDetails.id);
                    $("#cust_name").html(response.customerDetails.first_name);
                    $("#cust_email").html(response.customerDetails.email);
                    $("#cust_mobile").html(response.customerDetails.mobile);
                    $("#cust_sex").html((response.customerPersonalDetail[0].sex == "none") ? '' :
                        response.customerPersonalDetail[0].sex);
                    $("#cust_dob").html(response.customerPersonalDetail[0].date_of_birth);
                    $("#cust_father").html(response.customerPersonalDetail[0].father_name);
                    $("#cust_husband").html(response.customerPersonalDetail[0].husband_name);
                    $("#cust_occupation").html(response.customerPersonalDetail[0].occupation);
                    $("#cust_raddress").html(response.customerPersonalDetail[0].residental_address);
                    $("#cust_annual_income").html(response.customerPersonalDetail[0].annual_income);
                    $("#cust_caste_tribe").html((response.customerPersonalDetail[0].caste_tribe == 0) ?
                        'No' : 'Yes');
                    $("#cust_ex_member").html((response.customerMembershipInfo[0].ex_member == 0) ?
                        'No' : 'Yes');
                    $("#cust_member_class_name").html(response.customerMembershipInfo[0]
                        .member_class_name);
                    $("#cust_different_member_class").html((response.customerMembershipInfo[0]
                            .member_of_different_class == 0) ?
                        'No' : 'Yes');
                    $("#cust_reason").html(response.customerMembershipInfo[0].reason_for_applying);
                    $("#cust_shares_required").html(response.customerShareDetails[0]
                        .number_of_shares_required);
                    $("#cust_post_office_name").html(response.customerShareDetails[0].post_office_name);
                    $("#cust_date_of_remittance").html(response.customerShareDetails[0]
                        .date_of_remittance);
                    $("#cust_mode_of_remittance").html(response.customerShareDetails[0]
                        .mode_of_remittance);
                    $("#cust_amount_remitted").html(response.customerShareDetails[0].amount_remitted);
                    $("#form17_name").html(response.nominees[0].nominee_registration.name);
                    $("#form17_father_name").html(response.nominees[0].nominee_registration
                        .son_wife_of + ' ' + response.nominees[0].nominee_registration
                        .father_husband_name);
                    $("#form17_member_number").html(response.nominees[0].nominee_registration
                        .member_no);
                    $("#form17_place_of_registration").html(response.nominees[0].nominee_registration
                        .location);
                    $("#form17_nominee_name").html(response.nominees[0].nominee_name);
                    $("#form17_nominee_relationship").html(response.nominees[0]
                        .relationship_with_member);
                    $("#form17_nomination_expiry").html(response.nominees[0].nomination_expiry);
                    $("#form17_additional_info").html(response.nominees[0].additional_info);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            })
        })
        $("#acceptCustomer").click(function() {
            var customer_id = $(this).attr('data-id');
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: '{{ route('acceptCustomerDtls') }}',
                data: {
                    id: customer_id
                },
                success: function(response) {
                    if (response.flag && response.status == "success") {
                        customerDetailModal.hide();
                        $(".view_customer[data-id='" + customer_id + "']").html(`View`);
                        alert("Customer Accepted");
                    }
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        })
        $(".customer_id_card").click(function(e) {
            e.preventDefault();
            var customer_id = $(this).attr("data-id");
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: '{{ route('admin.customer.generateIdCard') }}',
                data: {
                    id: customer_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
                    idCardModalObj.show();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            })
        });
    </script>
@endpush