@extends('layouts.app')
@section('content')

<style>
    .text_profile {
        font-size: .9rem;
        margin-bottom: 1rem;
    }

    a {
        color: #f96332;
    }

    a:hover,
    a:focus {
        color: #f96332;
    }

    p {
        line-height: 1.61em;
        font-weight: 300;
        font-size: 1.2em;
    }

    .category {
        text-transform: capitalize;
        font-weight: 700;
        color: #9A9A9A;
    }

    .nav-item .nav-link,
    .nav-tabs .nav-link {
        -webkit-transition: all 300ms ease 0s;
        -moz-transition: all 300ms ease 0s;
        -o-transition: all 300ms ease 0s;
        -ms-transition: all 300ms ease 0s;
        transition: all 300ms ease 0s;
    }

    .card a {
        -webkit-transition: all 150ms ease 0s;
        -moz-transition: all 150ms ease 0s;
        -o-transition: all 150ms ease 0s;
        -ms-transition: all 150ms ease 0s;
        transition: all 150ms ease 0s;
    }


    .nav-tabs {
        border: 0;
        margin: 15px 0.7rem;
    }

    .nav-tabs:not(.nav-tabs-neutral)>.nav-item>.nav-link.active {
        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3);
    }

    .card .nav-tabs {
        border-top-right-radius: 0.1875rem;
        border-top-left-radius: 0.1875rem;
    }

    .nav-tabs>.nav-item>.nav-link {
        color: #888888;
        margin: 0;
        margin-right: 5px;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 30px;
        font-size: 14px;
        padding: 10px 20px;
        line-height: 1.5;
    }

    .nav-tabs>.nav-item>.nav-link:hover {
        background-color: transparent;
    }

    .nav-tabs>.nav-item>.nav-link.active {
        /* background-color: #444; */
        background: linear-gradient(to bottom right, #9e88f5 0%, #6259ca 100%);
        border-radius: 30px;
        color: #FFF;
    }

    .nav-tabs>.nav-item>.nav-link i.now-ui-icons {
        font-size: 14px;
        position: relative;
        top: 1px;
        margin-right: 3px;
    }

    .nav-tabs.nav-tabs-neutral>.nav-item>.nav-link {
        color: #FFFFFF;
    }

    .nav-tabs.nav-tabs-neutral>.nav-item>.nav-link.active {
        background-color: rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
    }

    .card {
        border: 0;
        border-radius: 0.1875rem;
        display: inline-block;
        position: relative;
        width: 100%;
        /* margin-bottom: 30px; */
        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
    }

    .card .card-header {
        background-color: transparent;
        border-bottom: 0;
        background-color: transparent;
        border-radius: 0;
        padding: 0;
    }

    .card[data-background-color="orange"] {
        background-color: #f96332;
    }

    .card[data-background-color="red"] {
        background-color: #FF3636;
    }

    .card[data-background-color="yellow"] {
        background-color: #FFB236;
    }

    .card[data-background-color="blue"] {
        background-color: #2CA8FF;
    }

    .card[data-background-color="green"] {
        background-color: #15b60d;
    }

    [data-background-color="orange"] {
        background-color: #e95e38;
    }

    [data-background-color="black"] {
        background-color: #2c2c2c;
    }

    [data-background-color]:not([data-background-color="gray"]) {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) p {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) .nav-tabs>.nav-item>.nav-link i.now-ui-icons {
        color: #FFFFFF;
    }

    @media screen and (max-width: 768px) {

        .nav-tabs {
            display: inline-block;
            width: 100%;
            padding-left: 100px;
            padding-right: 100px;
            text-align: center;
        }

        .nav-tabs .nav-item>.nav-link {
            margin-bottom: 5px;
        }
    }

    p {
        margin-bottom: 7px;
    }

    .green {
        color: green;
        font-size: 14px;
    }
</style>

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Payments <small>Receive</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>

    <div class="float-end">
        <a class="btn btn-primary float-right" href="{{ url('payments') }}" id="createNewProduct">
            <i class="fa fa-arrow-left"></i> Payments List
        </a>
    </div>
</div>
<!-- PAGE-HEADER END -->


<!-- PAGE-HEADER END -->

@php
$payment_modes = ['cash' => 'Cash', 'cheque' => 'Cheque', 'netbanking' => 'Net Banking', 'upi' => 'UPI'];
@endphp

<div class="content mt-3">
    <div class="card shadow mb-4">
        <div class="card">

        {{ Form::open(['url' => url('payment/store'), 'method' => 'POST', 'id' => 'dataForm']) }}
        {{ Form::hidden('invoice_id', '', ['id' => 'invoice_id']) }}
        {{ Form::hidden('invoice_remaining_hidden', '', ['id' => 'invoice_remaining_hidden']) }}


        <div class="card-body">
            <div class="row">

                <div class="col-md-12">
                    <!-- Select Account -->
                    <div class="form-group mb-3">
                        <label for="account_id">Select Account</label>
                        <select name="account_id" id="account_id" class="form-control">
                            <option value="">-- Select Account --</option>
                            @foreach($accounts as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger" id="account_id-error"></span>
                    </div>

                    <!-- Select Site -->
                    <div class="form-group mb-3">
                        <label for="lead_id">Select Site</label>
                        <select name="lead_id" id="lead_id" class="form-control">
                            <option value="">-- Select Site --</option>
                        </select>
                        <span class="text-danger" id="lead_id-error"></span>
                    </div>

                    <!-- Project and Site Payment Details -->
                    <div class="text-center mb-3">
                        <h4 id="project"></h4>
                        <p class="lead" id="project_address"></p>
                        <span class="badge bg-primary" id="property_type"></span>
                        <h6 id="property"></h6>
                    </div>

                    <!-- Invoice DataTable -->
                    <div class="mb-3">
                        <table class="table table-bordered data-table">
                            <thead>
                                <tr>
                                    <th>Select invoice</th>
                                    <th>Invoice</th>
                                    <th>Due Date</th>
                                    <th>Invoice Amount</th>
                                    <th>Amount Paid</th>
                                    <th>Remaining Balance</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

                <!-- Payment Details -->
                <div class="row">
                    <div class="col-md-4">
                        <label for="total_amount">Total Invoice Amount</label>
                        {{ Form::text('total_amount', '', ['class'=>'form-control', 'id'=>'total_amount', 'readonly']) }}
                    </div>

                    <div class="col-md-4">
                        <label for="amount_paid">Amount to be Paid <span class="text-danger">*</span></label>
                        {{ Form::number('amount_paid', '', ['class'=>'form-control', 'id'=>'amount_paid', 'step'=>'0.01', 'min'=>'0.01', 'required']) }}
                        <span class="text-danger" id="amount_paid-error"></span>
                    </div>

                    <div class="col-md-4">
                        <label for="remaining_amount">Remaining Amount</label>
                        {{ Form::text('remaining_amount', '', ['class'=>'form-control', 'id'=>'remaining_amount', 'readonly']) }}
                    </div>

                    <div class="col-md-4 mt-3">
                        <label for="payment_mode">Mode of Payment <span class="text-danger">*</span></label>
                        {{ Form::select('payment_mode', $payment_modes, null, ['class'=>'form-control', 'id'=>'payment_mode', 'required']) }}
                        <span class="text-danger" id="payment_mode-error"></span>
                    </div>

                    <div class="col-md-4 mt-3">
                        <label for="payment_date">Date of Payment <span class="text-danger">*</span></label>
                        {{ Form::date('payment_date', \Carbon\Carbon::now()->format('Y-m-d'), ['class'=>'form-control', 'id'=>'payment_date', 'required']) }}
                        <span class="text-danger" id="payment_date-error"></span>
                    </div>

                    <div class="col-md-4 mt-3">
                        <label for="remarks">Remarks</label>
                        {{ Form::text('remarks', '', ['class'=>'form-control', 'id'=>'remarks']) }}
                        <span class="text-danger" id="remarks-error"></span>
                    </div>
                </div>

                <div class="mt-4">
                    {{ Form::submit('Make Payment', ['class' => 'btn btn-primary float-end', 'id' => 'saveBtn']) }}
                </div>
            </div>
        </div>
    </div>
    {{ Form::close() }}
</div>
</div>

@stop

@section('scripting')
<script type="text/javascript">
    $(document).ready(function() {
        // Fetch leads based on selected account
        $('#account_id').on('change', function() {
            const accountId = $(this).val();
            resetInvoiceTableAndFields();

            $('#lead_id').empty().append('<option value="">-- Select Lead --</option>');


            if (accountId) {
                // Fetch Leads
                $.ajax({
                    url: '/ajax/leads-by-account/' + accountId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, value) {
                            $('#lead_id').append('<option value="' + key + '">' + value + '</option>');
                        });
                    }
                });
            }
        });

        // Fetch and render invoices for selected lead
        $('#lead_id').on('change', function() {
            const lead_id = $(this).val();
            resetInvoiceTableAndFields();

            if (!lead_id) return;

            if ($.fn.DataTable.isDataTable('.data-table')) {
                $('.data-table').DataTable().clear().destroy();
            }

            $.ajax({
                url: "{{ url('/get-invoices-by-lead') }}/" + lead_id,
                type: 'GET',
                success: function(response) {
                    $('.data-table').DataTable({
                        data: response,
                        columns: [{
                                data: 'id',
                                title: 'Select',
                                render: function(data) {
                                    return `<input type="radio" class="invoice-checkbox" data-id="${data}" />`;
                                },
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'id',
                                title: 'Invoice'
                            },
                            {
                                data: 'amount_date',
                                title: 'Due Date'
                            },
                            {
                                data: 'invoice_amount',
                                title: 'Invoice Amount',
                                render: data => parseFloat(data).toFixed(2)
                            },
                            {
                                data: 'amount_paid',
                                title: 'Amount Paid',
                                render: data => parseFloat(data).toFixed(2)
                            },
                            {
                                data: 'remaining_amount',
                                title: 'Remaining Balance',
                                render: data => parseFloat(data).toFixed(2)
                            }
                        ],
                        paging: false, // disable pagination
                        searching: false, // disable search
                        info: false, // disable "Showing X of Y"
                        lengthChange: false,
                    });

                    // Invoice checkbox logic
                    $('.data-table tbody').on('change', '.invoice-checkbox', function() {
                        $('.invoice-checkbox').not(this).prop('checked', false);
                        const isChecked = $(this).is(':checked');
                        const row = $(this).closest('tr');
                        const rowData = $('.data-table').DataTable().row(row).data();

                        if (isChecked) {
                            $('#invoice_id').val(rowData.id);
                            $('#total_amount').val(parseFloat(rowData.invoice_amount).toFixed(2));
                            $('#amount_paid').val('');
                            $('#remaining_amount').val(parseFloat(rowData.remaining_amount).toFixed(2));
                            $('#payment_mode').val('cash');
                            $('#payment_date').val(new Date().toISOString().split('T')[0]);
                            $('#remarks').val('Payment against invoice #' + rowData.id);
                            $('#invoice_remaining_hidden').val(parseFloat(rowData.remaining_amount).toFixed(2));
                            $('#saveBtn').prop('disabled', false);
                        } else {
                            resetInvoiceTableAndFields();
                        }
                    });
                }
            });
        });

        // Handle amount paid input
        $('#amount_paid').on('input', function() {
            const maxRemaining = parseFloat($('#invoice_remaining_hidden').val()) || 0;
            const paid = parseFloat($(this).val()) || 0;

            if (paid > maxRemaining) {
                swal("Invalid Payment", `You can only pay up to ₹${maxRemaining.toFixed(2)}.`, "warning");
                $(this).val('');
                $('#remaining_amount').val(maxRemaining.toFixed(2));
                return;
            }

            const updatedRemaining = maxRemaining - paid;
            $('#remaining_amount').val(updatedRemaining.toFixed(2));
        });

        // Handle form submission
        $('#dataForm').submit(function(e) {
            e.preventDefault();

            const totalAmount = parseFloat($('#total_amount').val()) || 0;
            const amountPaid = parseFloat($('#amount_paid').val()) || 0;

            if (amountPaid > totalAmount) {
                swal("Overpayment Error", `Amount paid (₹${amountPaid}) cannot exceed invoice amount (₹${totalAmount}).`, "error");
                return;
            }

            $('#saveBtn').prop('disabled', true).text('Processing...');
            $('.text-danger').text('');
            $('.form-control').removeClass('is-invalid');

            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    swal("Success!", response.message || "Payment received successfully.", "success")
                        .then(() => {
                            resetInvoiceTableAndFields();
                            location.reload();
                        });
                },

                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors || {};
                        $.each(errors, function(key, messages) {
                            $('#' + key).addClass('is-invalid');
                            $('#' + key + '-error').text(messages[0]);
                        });
                    } else {
                        swal("Error", xhr.responseJSON?.message || "An unexpected error occurred.", "error");
                    }
                },
                complete: function() {
                    $('#saveBtn').prop('disabled', false).text('Make Payment');
                }
            });
        });

        // Reset form + invoice fields
        function resetInvoiceTableAndFields() {
            $('#invoice_id').val('');
            $('#total_amount').val('');
            $('#amount_paid').val('');
            $('#remaining_amount').val('');
            $('#remarks').val('');
            $('#invoice_remaining_hidden').val('');
            $('#saveBtn').prop('disabled', true);
        }

    });
</script>


@stop