@extends('layouts.base')

@section('content')

<div class="content-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title">
                            <h4>Membership List</h4>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 mb-2">
                                <input type="text" id="searchInput" class="form-control" placeholder="Search...">
                            </div>
                            <div class="col-sm-6 mb-2">
                                <select id="membershipStatusFilter" class="form-control">
                                    <option value="">Select Membership Status</option>
                                    <option value="Active">Active</option>
                                    <option value="Expired">Expired</option>
                                </select>
                            </div>
                            <div class="col-sm-12 mb-2 text-right">
                            <button id="download-btn" class="btn btn-primary" onclick="downloadTable()">Download Excel</button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="membershipTable" class="table table-striped table-bordered zero-configuration">
                                <thead>
                                    <tr>
                                        <th>Membership ID</th>
                                        <th>Student ID</th>
                                        <th>Student Name</th>
                                        <th>Dates</th>
                                        <th>Duration</th>
                                        <th>Total Amount</th>
                                        <th>Amount Paid</th>
                                        <th>Balance</th>
                                        <th>Membership Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($memberships as $membership)
                                    <tr>
                                        <td>{{$membership->id}}</td>
                                        <td>{{$membership->student_id}}</td>
                                        <td>{{$membership->student_name}}</td>
                                        <td>{{$membership->start_date}} to {{$membership->end_date}}</td>
                                        <td>{{$membership->duration == 1 ? $membership->duration." Month" : $membership->duration." Months"}}
                                        </td>
                                        <td>&#8377 {{$membership->amount + $membership->balance}}</td>
                                        <td>&#8377 {{$membership->amount}}</td>
                                        <td>&#8377 {{$membership->balance}}</td>
                                        @if($membership->status == "1")
                                        <td>Active</td>
                                        @else($membership->status == "3")
                                        <td>Expired</td>
                                        @endif
                                        <td>
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <button class="btn btn-primary btn-xs" data-toggle="modal"
                                                        data-target="#detailsModal{{ $membership->id }}" onclick=""><i
                                                            class="fa fa-eye" aria-hidden="true"></i></button>
                                                    @if($membership->balance > "2")
                                                    <button type="button" class="btn btn-primary btn-xs"
                                                        data-toggle="modal" data-target="#basicModal"
                                                        onclick="fnSetMembership('{{ json_encode($membership) }}');"><i
                                                            class="fa fa-credit-card" aria-hidden="true"></i></button>
                                                    @else
                                                    <div></div>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>

                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @foreach($memberships as $membership)
    <div class="modal fade" id="detailsModal{{ $membership->id }}">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Capture Payment</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12">
                                <h5>Membership ID: {{$membership->id}}<h5>
                            </div>
                            <hr>
                            <div class="col-sm-6">
                                <strong>Student ID: </strong>{{ $membership->student_id }}
                            </div>
                            <div class="col-sm-6">
                                <strong>Student Name: </strong>{{ $membership->student_name }}
                            </div>
                            <div class="col-sm-6">
                                <strong>Start Date: </strong>{{ $membership->start_date }}
                            </div>
                            <div class="col-sm-6">
                                <strong>End Date: </strong>{{ $membership->end_date }}
                            </div>
                            <div class="col-sm-6">
                                <strong>Duration:
                                </strong>{{ $membership->duration == "1" ?  $membership->duration." Month" :  $membership->duration." Months" }}
                            </div>
                            <div class="col-sm-6">
                                <strong>Room Type: </strong>{{ $membership->room_type }}
                            </div>
                            <div class="col-sm-6">
                                <strong>Laptop: </strong>{{ $membership->laptop == "1" ? "Yes" : "No" }}
                            </div>
                            <div class="col-sm-6">
                                <strong>Locker: </strong>{{ $membership->locker == "1" ? "Yes" : "No" }}
                            </div>
                            <div class="col-sm-6">
                                <strong>Total Amount: </strong>{{$membership->amount + $membership->balance}}
                            </div>
                            <div class="col-sm-6">
                                <strong>Paid Amount: </strong>{{$membership->amount}}
                            </div>
                            <div class="col-sm-6">
                                <strong>Balance Amount: </strong>{{$membership->balance}}
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    @endforeach
    <!-- #/ container -->
    <div class="modal fade" id="basicModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Capture Payment</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id='capture-payment-form'>
                        <div class="row">
                            <input type="hidden" id="balance" name="balance" value="">
                            <input type="hidden" id="grandTotal" name="grandTotal" value="">
                            <input type="hidden" id="amount" name="amount" value="">
                            <input type="hidden" id="studentId" name="studentId" value="">
                            <input type="hidden" id="membershipId" name="membershipId" value="">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Payment Mode</label>
                                    <select class="form-control" id="paymentMode" name="paymentMode" required>
                                        <option value="">Select</option>
                                        <option value="1">Cash</option>
                                        <option value="2">NEFT</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="hidden" id="amount" name="amount" class="form-control" placeholder="1000"
                                    required>
                            </div>
                            <div class="col-lg-12" id="bank-form" style="display: none">
                                <div>
                                    <div class="form-group">
                                        <label>Transaction ID</label>
                                        <input type="text" id="bankTransactionId" name="bankTransactionId"
                                            class="form-control" placeholder="Transaction ID" required>
                                    </div>
                                </div>
                                <div>
                                    <div class="form-group">
                                        <label>Bank Name</label>
                                        <input type="text" id="bankName" name="bankName" class="form-control"
                                            placeholder="Bank Name" required>
                                    </div>
                                </div>
                                <div>
                                    <div class="form-group">
                                        <label>Account Number</label>
                                        <input type="text" id="bankAccountNumber" name="bankAccountNumber"
                                            class="form-control" placeholder="Account Number" required>
                                    </div>
                                </div>
                                <div>
                                    <div class="form-group">
                                        <label>Account Holder Name</label>
                                        <input type="text" id="bankAccountName" name="bankAccountName"
                                            class="form-control" placeholder="Holder Name" required>
                                    </div>
                                </div>
                                <div>
                                    <div class="form-group">
                                        <label>Bank IFSC</label>
                                        <input type="text" id="bankIFSC" name="bankIFSC" class="form-control"
                                            placeholder="IFSC code" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Discount</label>
                                    <input type="text" id="discount" name="discount" class="form-control"
                                        placeholder="1000" required>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Payment Status</label>
                                    <select class="form-control" id="paymentStatus" name="paymentStatus" required>
                                        <option value="">Select</option>
                                        <option value="1">Paid</option>
                                        <option value="2">Partial Paid</option>
                                        <option value="3">Pending</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12" id="partial" style="display: none;">
                                <div class="form-group">
                                    <label>Partial Amount</label>
                                    <input type="text" id="partialAmount" name="partialAmount" class="form-control"
                                        placeholder="1000" required>
                                </div>
                            </div>
                            <div class="col-lg-12 text-center" id="balanceDetails">
                                <div class="form-group">
                                    <h4 id="balanceAmount"></h4>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Proceed</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endsection

    @section('script')

    <script>
    $('#reportrange').hide();
    var table = $('#membershipTable').DataTable({
        order: [
            [0, 'desc']
        ],
        orderCellsTop: true,
        fixedHeader: true
    });

    $('#searchInput').on('keyup', function() {
        table.search(this.value).draw();
    });

    $('#membershipStatusFilter').on('change', function() {
        table.column(8).search(this.value).draw();
    });

    $('#transactionTable').removeAttr("style")
    var form = $('#capture-payment-form');
    $('#amount').val(0);
    $('#grandTotal').val(0);
    $('#discount').val(0);
    $('#studentId').val(0);
    $('#membershipId').val(0);
    $('#basicModal').hide()
    let membership = {};

    form.validate({
        rules: {
            discount: {
                required: true,
                digits: true
            },
            paymentStatus: {
                required: true
            }
        },
        submitHandler: function(form, e) {
            fnCapturePayment()
        }
    }).settings.ignore = ":disabled,:hidden";


    function fnSetMembership(params) {
        membership = JSON.parse(params);

        $('#amount').val(membership.balance);
        $('#grandTotal').val(membership.balance);
        $('#discount').val(0);
        $('#studentId').val(membership.student_id);
        $('#membershipId').val(membership.id);

        $('#balanceAmount').html("Payment for balance amount: " + $('#amount').val());
    }

    $('#paymentMode').change(function() {
        payment_mode = $('#paymentMode option:selected').val()

        if (payment_mode == "2") {
            document.getElementById('bank-form').style.display = "block";
        } else {
            document.getElementById('bank-form').style.display = "none";
        }

        $('#paymentStatus').change(function() {
            payment_status = $('#paymentStatus option:selected').val()

            if (payment_status == "2") {
                document.getElementById('partial').style.display = "block";
            } else {
                document.getElementById('partial').style.display = "none";
            }
        });
    });

    $('#partialAmount').change(function() {

        balance = $('#grandTotal').val() - $('#partialAmount').val()
        $('#balance').val(balance)

        $('#grandTotal').val($('#partialAmount').val())
    });

    $('#discount').change(function() {
        grand_total = $('#grandTotal').val() - $('#discount').val()
        $('#grandTotal').val(grand_total)
    });

    function fnCapturePayment() {

        if ($("#paymentStatus").val() == '3') {
            $("#grandTotal").val(0)
        }

        let url = "/api/auth/capturePayment";
        let data = {
            student_id: $("#studentId").val().split('-')[0],
            payment_mode: $("#paymentMode").val(),
            room_amount: 0,
            locker_amount: 0,
            laptop_amount: 0,
            discount: $("#discount").val(),
            grand_total: $("#amount").val(),
            balance: $("#balance").val(),
            amount_paid: $("#grandTotal").val(),
            transaction_id: $("#bankTransactionId").val(),
            membership_id: $("#membershipId").val(),
            bank_ac_name: $("#bankAccountName").val(),
            bank_name: $("#bankName").val(),
            bank_ac_number: $("#bankAccountNumber").val(),
            bank_ifsc: $("#bankIFSC").val(),
            status: $("#paymentStatus").val()
        };
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                "Authorization": "Bearer " + localStorage.getItem('user')
            },
            url: url,
            type: "POST",
            data: data,
            success: function(response) {
                swal("Thank you", "Payment captured successfully", "success");
                window.location.replace("/membership");
            },
            error: function(response) {
                sweetAlert("Oops...", "Something went wrong !!", "error");
            },
        });
    }

    function downloadTable() {
  // Get the HTML table element
  var table = document.getElementById("membershipTable");

  // Convert the table to a worksheet object
  var worksheet = XLSX.utils.table_to_sheet(table);

  // Create a new workbook object
  var workbook = XLSX.utils.book_new();

  // Add the worksheet to the workbook
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

  // Convert the workbook to an Excel file and download it
  XLSX.writeFile(workbook, "Trasactions.xlsx");
}
    </script>


    @endsection