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

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

/* BLUE box on inactive links */
.nav-tabs > .nav-item > .nav-link:not(.active) {
    background: linear-gradient(to bottom right, #9e88f5 0%, #6259ca 100%);
    color: #fff !important;
    border: 1px solid #5b4fcf;
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.3);
}

/* active tab is plain */
.nav-tabs > .nav-item > .nav-link.active {
    background: transparent !important;
    color: #888888 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

/* Hover stays same for inactive */
.nav-tabs > .nav-item > .nav-link:not(.active):hover {
    background: linear-gradient(to bottom right, #8a77e1 0%, #5549b1 100%);
    color: #fff !important;
}

</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">
    <div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs justify-content-center" role="tablist">
            <li class="nav-item">
                <a class="nav-link {{ request()->is('receive_payments*') ? 'active' : '' }}" href="{{ url('receive_payments') }}">
                    By Account / Lead
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link active {{ request()->is('service_request*') ? 'active' : '' }}" href="{{ url('service_request') }}">
                    Service Request
                </a>
            </li>
        </ul>
    </div>
</div>





            {{ 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 id="accountInfo" class="col-md-4">
                        <div class="card text-center p-3 shadow-sm">
                            <img class="mx-auto mb-3 rounded-circle" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png" alt="Profile Picture" width="120" />

                            <h5 class="fw-bold mb-1" id="customer_name">Customer Name</h5>

                            <div class="d-flex align-items-center justify-content-center mb-2">
                                <i class="fa fa-phone me-2 text-secondary"></i>
                                <span id="customer_phone">Phone</span>
                            </div>

                            <div class="d-flex align-items-center justify-content-center mb-2">
                                <i class="fa fa-envelope me-2 text-secondary"></i>

                                <span id="customer_email">Email</span>
                            </div>

                            <div class="d-flex align-items-center justify-content-center">
                                <i class="fa fa-home me-2 text-secondary"></i>
                                <span id="customer_address">Address</span>
                            </div>
                        </div>
                    </div>




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

                        <!-- Invoices Table -->
                        <table class="table table-bordered data-table">
                            <thead>
                                <tr>
                                    <th>Select</th>
                                    <th>Invoice</th>
                                    <th>Due Date</th>
                                    <th>Invoice Amount</th>
                                    <th>Amount Paid</th>
                                    <th>Remaining</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-8 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>
$(document).ready(function () {
    $('#customer_id').change(function () {
        const customerId = $(this).val();
        resetInvoiceFields();

        if (!customerId) return;

        if ($.fn.DataTable.isDataTable('.data-table')) {
            $('.data-table').DataTable().clear().destroy();
        }
          $.ajax({
                    url: '/get-customer-info/' + customerId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        $('#accountInfo').show();
                        $('#customer_name').text(response.full_name);
                        $('#customer_phone').text(response.phone);
                        $('#customer_email').text(response.email);
                        $('#customer_address').text(response.address || '-');
                    },
                    error: function() {
                        alert('Unable to fetch account info');
                    }
                });
            

        $.ajax({
            url: `/get-invoices-by-customer/${customerId}`,
            method: 'GET',
            success: function (data) {
                if (!data.length) {
                    swal("No Invoices", "No pending invoices found for this customer.", "info");
                }

                $('.data-table').DataTable({
                    data: data,
                    columns: [
                        {
                            data: 'id',
                            render: function (data) {
                                return `<input type="radio" class="invoice-checkbox" data-id="${data}">`;
                            }
                        },
                        { data: 'id' },
                        { data: 'amount_date' },
                        {
                            data: 'invoice_amount',
                            render: val => parseFloat(val).toFixed(2)
                        },
                        {
                            data: 'amount_paid',
                            render: val => parseFloat(val).toFixed(2)
                        },
                        {
                            data: 'remaining_amount',
                            render: val => parseFloat(val).toFixed(2)
                        },
                    ],
                    paging: false,
                    searching: false,
                    info: false
                });

                $('.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 data = $('.data-table').DataTable().row(row).data();

                    if (isChecked) {
                        $('#invoice_id').val(data.id);
                        $('#total_amount').val(data.invoice_amount.toFixed(2));
                        $('#amount_paid').val('');
                        $('#remaining_amount').val(data.remaining_amount.toFixed(2));
                        $('#invoice_remaining_hidden').val(data.remaining_amount.toFixed(2));
                    } else {
                        resetInvoiceFields();
                    }
                });
            },
            error: function () {
                swal("Error", "Failed to fetch invoices. Try again.", "error");
            }
        });
    });

      $('#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");
                    resetInvoiceTableAndFields();
                    reloadInvoiceTable();
                },
                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');
                }
            });
        });



    function resetInvoiceFields() {
        $('#invoice_id').val('');
        $('#total_amount').val('');
        $('#amount_paid').val('');
        $('#remaining_amount').val('');
        $('#invoice_remaining_hidden').val('');
    }

     function reloadInvoiceTable() {
            const customer_id = $('#customer_id').val();
            if (!customer_id) return;

            $.ajax({
                url: "{{ url('/get-invoices-by-customer') }}/" + customer_id,
                type: 'GET',
                success: function(response) {
                    if ($.fn.DataTable.isDataTable('.data-table')) {
                        const table = $('.data-table').DataTable();
                        table.clear().rows.add(response).draw();
                    } else {
                        $('.data-table').DataTable({
                            data: response,
                            columns: [{
                                    data: 'id',
                                    title: 'Select',
                                    render: function(data) {
                                        return `<input type="checkbox" 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)
                                }
                            ],
                            searching: true,
                            paging: false,
                            info: false
                        });
                    }
                }
            });
        }
});
function resetInvoiceTableAndFields() {
    // Reset form fields
    $('#invoice_id').val('');
    $('#total_amount').val('');
    $('#amount_paid').val('');
    $('#remaining_amount').val('');
    $('#remarks').val('');
    $('#invoice_remaining_hidden').val('');
    
    // Uncheck any selected checkboxes in the table
    $('.invoice-checkbox').prop('checked', false);

    // Disable the submit button if needed
    $('#saveBtn').prop('disabled', true);
}

</script>



@stop