@extends('layouts.admin')


@push('styles')
<link rel="stylesheet" href="{{ asset('plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

<link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">

<style>
    div.form-group {
        margin-bottom: 3px;
    }

    #unitname {
        position: relative;
        top: 11px;
    }

    #btn_looding {
        display: none;
    }
</style>
@endpush

@section('content')
<!-- Main content -->
<section class="content">
    <div class="container-fluid mt-4">
        <div class="row">
            <!-- left column -->
            <div class="col-md-12">
                <!-- jquery validation -->
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">Supplier Bill Payment</h3>

                        <a href="{{ route('supplierbill.billlist') }}" style="float: right;padding: 3px 26px;"
                            class="btn btn-outline-dark btn-flat">Bill List</a>

                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->



                    <form id="userform" class="form-horizontal" method="POST"
                        action="{{ route('supplierbill.suppayment') }}">

                        @csrf

                        <div class="card-body">

                            <div class="row">

                                <div class="col-sm-5">

                                    <div class="form-group row">
                                        <label for="payment_date" class="col-sm-4 col-form-label">Payment Date <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">

                                            <div class="input-group date" id="payment_date" data-target-input="nearest">
                                                <input type="text"
                                                    class="form-control form-control-sm datetimepicker-input"
                                                    data-target="#payment_date" name="payment_date" id="payment_date"
                                                    value="" placeholder="Enter From Date" required />
                                                <div class="input-group-append" data-target="#payment_date"
                                                    data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                </div>
                                            </div>

                                            @error('payment_date')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="supplier_id" class="col-sm-4 col-form-label">Supplier <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">

                                            <select id="supplier_id" name="supplier_id"
                                                class="form-control form-control-sm select2"
                                                data-placeholder="Select a Supplier" value=""
                                                style="width: 100%;">
                                                <option value="">Select Suppliers</option>
                                                @foreach ($suppliers as $v)
                                                <option value="{{ $v->id }}"
                                                    data-adv="{{ $v->adv_balance }}">{{ $v->supplier_name }}
                                                </option>
                                                @endforeach

                                            </select>

                                            @error('supplier_id')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="method_id" class="col-sm-4 col-form-label">Pay. Method <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">

                                            <select id="method_id" name="method_id"
                                                class="form-control form-control-sm select2"
                                                data-placeholder="Select a Payment Method" value=""
                                                style="width: 100%;" required>
                                                <option value="">Select Payment Method</option>
                                                @foreach ($paymentmethods as $v)
                                                <option value="{{ $v->id }}">{{ $v->pmode_name }}</option>
                                                @endforeach

                                            </select>

                                            @error('method_id')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="sup_advance" class="col-sm-4 col-form-label">Advance Amt.</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control form-control-sm"
                                                name="sup_advance" id="sup_advance" value=""
                                                placeholder="Advance Amount" readonly>

                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="phoneNumber" class="col-sm-4 col-form-label">Phone Number<span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">

                                            <input type="text" class="form-control form-control-sm"
                                                name="phoneNumber" id="phoneNumber" value="{{ old('phoneNumber') }}"
                                                placeholder="phoneNumber" required>

                                            @error('phoneNumber')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="receivedBy" class="col-sm-4 col-form-label">Received By<span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">

                                            <input type="text" class="form-control form-control-sm"
                                                name="receivedBy" id="receivedBy" value="{{ old('receivedBy') }}"
                                                placeholder="receivedBy" required>

                                            @error('receivedBy')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="referance_no" class="col-sm-4 col-form-label">Referance No <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control form-control-sm"
                                                name="referance_no" id="referance_no" value="{{ old('referance_no') }}"
                                                placeholder="Referance No" required>

                                            @error('referance_no')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="remarks" class="col-sm-4 col-form-label">Description</label>
                                        <div class="col-sm-8">

                                            <textarea class="form-control form-control-sm" id="remarks" rows="1" name="remarks" style="height:120px;" placeholder="Remarks"></textarea>

                                            @error('remarks')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-7">

                                    <table class="table table-striped table-sm">
                                        <tbody id="due_payment_list">

                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th>Payment Amt. <span class="text-danger"> * </span></th>
                                                <th>:</th>
                                                <th><input type="number" style="width: 200px;text-align:center;"
                                                        value=""
                                                        class="form-control form-control-sm payment_amount"
                                                        name="pay_amt" id="pay_amt" required></th>
                                            </tr>
                                            <tr>
                                                <th>After Payment </th>
                                                <th>:</th>
                                                <th><span class="aft_pay" style="margin-left:80px"></span>
                                                    <input type="hidden" value=""
                                                        class="after_pay form-control form-control-sm"
                                                        name="after_pay">
                                                </th>
                                            </tr>
                                            <tr>
                                                <th>Discount Amt. </th>
                                                <th>:</th>
                                                <th><input type="number" style="width: 200px;text-align:center;"
                                                        value="" id="discount_amt"
                                                        class="discount_amt form-control form-control-sm"
                                                        name="discount_amt"></th>
                                            </tr>

                                            <tr>
                                                <th>Total Due </th>
                                                <th>:</th>
                                                <th><input type="hidden" id="totalDueVal" value=""
                                                        name="total_due" />
                                                    <span class="total_due" style="margin-left:80px"></span>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>

                            </div>

                            <!-- /.card-body -->
                            <div class="card-footer">

                                <button type="submit" class="btn btn-primary">Submit</button>

                            </div>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>
            <!--/.col (left) -->
            <!-- right column -->
            <div class="col-md-6">

            </div>
            <!--/.col (right) -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->

<!-- Hidden divs for print content -->
<div id="company_info" style="display:none;"></div>
<div id="bill_info" style="display:none;"></div>
<div id="receipt_info" style="display:none;"></div>
<div id="recipyInfo2" style="display:none;"></div>

@endsection

@push('scripts')
<script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('plugins/inputmask/jquery.inputmask.min.js') }}"></script>
<script type="text/javascript">
    function printSlip2() {
        const dataHtml =
            $("#bill_info").html() +
            $("#receipt_info").html() +
            $("#recipyInfo2").html();

        if (!dataHtml.trim()) {
            alert("No content found to print!");
            return;
        }

        // === Invoice Print ===
        const mywindow = window.open('', 'Invoice Print', 'height=842,width=595');

        if (!mywindow) {
            alert('Popup blocked! Please allow popups for this site and try again.');
            return;
        }

        mywindow.document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <title>Invoice</title>
                    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
                    <style>
                        @page { size: A4; margin: 15mm; }
                        body { font-family: Arial, sans-serif; font-size: 12px; color: #000; background: #fff; }
                        .print-container { width: 100%; max-width: 210mm; margin: 0 auto; }
                        table { width: 100%; border-collapse: collapse; }
                        th, td { border: 1px solid #ddd; padding: 5px; text-align: left; vertical-align: top; }
                        @media print {
                            html, body { width: 210mm; height: 297mm; }
                            .page-break { page-break-after: always; }

                            table.table-bordered tr th, table.table-bordered tr td { border: 1px solid #000 !important; padding: 10px !important; text-align: left; vertical-align: top; }
                            .taka{text-align:right;}

                        }
                    </style>
                </head>
                <body>
                    <div class="print-container">
                        ${dataHtml}
                    </div>
                </body>
                </html>
            `);

        mywindow.document.close();
        mywindow.focus();

        // === Workaround for reliable close after print ===
        mywindow.onload = function() {
            mywindow.print();

            // Some browsers fire `onafterprint` correctly, others don't.
            mywindow.onafterprint = function() {
                mywindow.close();
            };

            // Fallback: force-close after short delay (if print dialog not blocked)
            setTimeout(() => {
                try {
                    mywindow.close();
                } catch (e) {}
            }, 1000);
        };
    }
    $(function() {


        $('#payment_date').datetimepicker({
            format: 'DD-MM-YYYY'
        });

        $('#reservationdate2').datetimepicker({
            format: 'DD-MM-YYYY'
        });


        //Initialize Select2 Elements
        $('.select2').select2();
        $('.myselect2').select2();

        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })


        $(document).on('select2:open', () => {
            document.querySelector('.select2-search__field').focus();
        });


        $("#supplier_id").change(function() {

            if ($(this).val()) {

                $("#due_payment_list").html('');

                var sup_id = $(this).val();

                var avd = $(this).find(':selected').data('adv');

                if (avd) {

                    $("#sup_advance").val(avd);

                } else {
                    $("#sup_advance").val('');
                }


                var url = "{{ route('supplierbill.suppurbill', ':id') }}";
                url = url.replace(':id', sup_id);

                var jqxhr = $.get(url, function(data) {
                        if (!data) {
                            alert('No Due Purchase found!');
                        }
                    })
                    .done(function(data) {

                        $("#due_payment_list").html(data);

                    })
                    .fail(function() {

                    })
                    .always(function() {

                    });

                jqxhr.always(function() {

                });

            } else {
                $("#sup_advance").val('');
            }

        });

        $(".payment_amount").keyup(function() {

            var payment_amount = $(this).val();

            var due_amount = $(".due_amount").val();

            var after_pay = parseInt(due_amount) - parseInt(payment_amount);


            $(".aft_pay").html(after_pay);
            $(".after_pay").val(after_pay);
            $(".total_due").html(after_pay);
            $("#totalDueVal").val(after_pay);

            if ($("#discount_amt").val()) {

                var dis_amt = $("#discount_amt").val();
                // var payment_amount = $(".payment_amount").val();

                var after_dis_total = parseInt(dis_amt) + parseInt(payment_amount);
                var due_amount = $(".due_amount").val();

                var after_dis = parseInt(due_amount) - parseInt(after_dis_total);

                $(".total_due").html(after_dis);
                $("#totalDueVal").val(after_dis);

            }

            // $("#discount_amt").trigger("keyup");

        });

        $("#discount_amt").keyup(function() {

            var dis_amt = $(this).val();
            var payment_amount = $(".payment_amount").val();

            var after_dis_total = parseInt(dis_amt) + parseInt(payment_amount);
            var due_amount = $(".due_amount").val();

            var after_dis = parseInt(due_amount) - parseInt(after_dis_total);

            $(".total_due").html(after_dis);
            $("#totalDueVal").val(after_dis);

            // $(".payment_amount").trigger("keyup");

        });


    });
</script>




@endpush