@extends('admin.partials.layout')
@section('css')
<style>
    .invalid-feedback{
      display: block;
   }

   .duties_label{
    width: 117px;

   }
</style>
@endsection

@section('content')


<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h4 class="text-themecolor">Consignment & Bill Creation </h4>
    </div>
    <div class="col-md-7 align-self-center text-end">
        <div class="d-flex justify-content-end align-items-center">
            <ol class="breadcrumb justify-content-end">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                <li class="breadcrumb-item active">Consignment & Job Creation
                </li>
            </ol>
        </div>
    </div>
</div>

<form method="post" action="{{URL::to('admin/bill')}}/{{Crypt::encryptString($model->id)}}" >
    @csrf
    @method('PUT')

    <div class="row">
        <div class="col-lg-12">
            @include('admin.bill.consigmentInfo')
        </div>
                
            <div class="accounts col-lg-12">
               <section class="card">
    <header class="card-header bg-info d-flex justify-content-between align-items-center">
        <h4 class="mb-0 text-white">Bill Info</h4>
        <button type="button" id="addField" class="btn btn-light text-info"><i class="fas fa-plus"></i> Add</button>
    </header>
    <div class="card-body">
        
      <div id="billFields">
    </div>

    </div>
</section>
            </div>
            
                  
            <div class="accounts col-lg-12 mt-4">
                <section class="card border border-dark">
                    <header class="card-header bg-light text-dark border-bottom border-dark">
                        <h4 class="mb-0 text-white">Total Values</h4>
                    </header>
                    <div class="card-body">
                        <div class="row">
                            <!-- Left Side: Paid By You & Expenses -->
                            <div class="col-md-6">
                                <div class="d-flex justify-content-start align-items-center mb-2 mr-20">
                                    <label class="form-control text-center border border-dark w-50 ">Paid By You</label>
                                    
                                </div>
                                <div class="d-flex justify-content-start align-items-center">
                                    <!--<input type="text" class="form-control text-center border border-dark" Placeholder="Expenses" disabled style="max-width: 150px;">-->
                                        <label class="form-control text-center border border-dark w-80 " style="width: 140px;">Expenses</label>
                                    <input type="text" id="paidByInput" name="expenses" class="form-control border border-dark ms-2 text-end" value="0" style="max-width: 150px;" disabled>
                                </div>
                            </div>
            
                            <!-- Right Side: Other Amounts -->
                            <div class="col-md-6">
                                <div class="d-flex gap-3 align-items-center mb-2">
                                    <label class="form-control text-center border border-dark w-50 ">Paid By Us</label>
                                    <input type="text" id="payByInput" name="totalpayby" class="form-control border border-dark text-end" value="0" style="max-width: 150px;" disabled>
                                </div>
                                <div class="d-flex gap-3 align-items-center mb-2">
                                    <label class="form-control text-center border border-dark w-50">Service Charges</label>
                                    <input type="text" id="servicecharges" name="servicecharge" class="form-control border border-dark text-end"
                                        value="{{ $model->servicecharge ? $model->servicecharge : 0 }}" style="max-width: 150px;">
                                </div>

                                <div class="d-flex gap-3 align-items-center mb-2">
                                    <label class="form-control text-center border border-dark w-50 ">Sales Tax @ {{$salesTaxPersunt}} %</label>
                                    <input type="text" id="saletex" name="salestax" class="form-control border border-dark text-end" value="00" style="max-width: 150px;" readonly>
                                </div>
                                <div class="d-flex gap-3 align-items-center">
                                    <label class="form-control text-center border border-dark w-50 ">Amount Due To Us</label>
                                    <input type="text" id="overallTotal" name="totalamount" class="form-control border border-dark text-end" value="0" style="max-width: 150px;" disabled>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <div class="accounts col-lg-12 mt-4">
               <section class="card">
                <header class="card-header bg-warning text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Other Values</h4>
                    <button type="button" id="addOtherField" class="btn btn-light text-dark"><i class="fas fa-plus"></i> Add</button>
                </header>
                <div class="card-body">
                    <div id="otherFields">
                                            </div>
                </div>
            </section>
            </div>

        <div class="pb-5 pt-3 col-md-12 text-center">
            <button type="submit" class="btn btn-info">Submit</button>
        </div>
    </div>
</form>


@endsection
@section('js')
    
<script>
 document.addEventListener("DOMContentLoaded", function () {
let addFieldBtn = document.getElementById("addField");
    let billFields = document.getElementById("billFields");

    let addOtherFieldBtn = document.getElementById("addOtherField");
    let otherFields = document.getElementById("otherFields");

    function updateTotals() {
        let paidByTotal = 0;
        let payByTotal = 0;

        document.querySelectorAll(".bill-entry").forEach(entry => {
            let selector = entry.querySelector(".selector").value;
            let amount = parseFloat(entry.querySelector(".amount").value) || 0;

            if (selector === "paid_by") {
                paidByTotal += amount;
            } else if (selector === "pay_by") {
                payByTotal += amount;
            }
        });

        let salesTaxPercent = parseFloat("{{ $salesTaxPersunt }}") || 0;

        let serviceCharges = parseFloat(document.getElementById("servicecharges").value) || 0;
        let salesTax = serviceCharges * (salesTaxPercent / 100);

        let overallTotal = payByTotal + salesTax + serviceCharges;

        document.getElementById("paidByInput").value = paidByTotal.toFixed(2);
        document.getElementById("payByInput").value = payByTotal.toFixed(2);
        document.getElementById("saletex").value = salesTax.toFixed(2);
        document.getElementById("overallTotal").value = overallTotal.toFixed(2);
    }

    // Update totals on input change
    document.getElementById("servicecharges").addEventListener("input", updateTotals);

    // Run script when switching tabs
    document.addEventListener("visibilitychange", function () {
        if (!document.hidden) {
            updateTotals();
        }
    });

    // Initial call to ensure correct totals on page load
    updateTotals();



function addBillEntry() {
    let newField = document.createElement("div");
    newField.classList.add("row", "bill-entry", "mb-3");

    newField.innerHTML = `
        <div class="col-md-4">
             <select class="form-control billinfo" name="title[]"></select>
        </div>
        <div class="col-md-4">
            <select name="selector[]" class="form-control selector">
                <option value="paid_by">Paid By You</option>
                <option value="pay_by">Paid By Us</option>
            </select>
        </div>
        <div class="col-md-3">
            <input type="number" name="amount[]" class="form-control amount" placeholder="Amount" required>
        </div>
        <div class="col-md-1 text-center">
            <button type="button" class="btn btn-danger removeField"><i class="fas fa-trash"></i></button>
        </div>
    `;

    billFields.appendChild(newField);

    // Initialize select2 on newly added .billinfo select
    $(newField).find('.billinfo').select2({
        placeholder: 'Search..',
        allowClear: true,
        ajax: {
            url: "{{ URL::to('/admin/dashboard/billinfo') }}",
            dataType: 'json',
            delay: 250,
            processResults: function (data) {
                return { results: data };
            },
            cache: true
        }
    });

    newField.querySelector(".amount").addEventListener("input", updateTotals);
    newField.querySelector(".selector").addEventListener("change", updateTotals);
    newField.querySelector(".removeField").addEventListener("click", function () {
        newField.remove();
        updateTotals();
    });

    updateTotals();
}


   
    function addOtherFieldEntry() {
        let newField = document.createElement("div");
        newField.classList.add("row", "other-entry", "mb-3");

        newField.innerHTML = `
            <div class="col-md-5">
                <input type="text" name="other_title[]" class="form-control" placeholder="Title" required>
            </div>
            <div class="col-md-5">
                <input type="text" name="other_value[]" class="form-control" placeholder="Value" required>
            </div>
            <div class="col-md-2 text-center">
                <button type="button" class="btn btn-danger removeOtherField"><i class="fas fa-trash"></i></button>
            </div>
        `;

        otherFields.appendChild(newField);

   
        newField.querySelector(".removeOtherField").addEventListener("click", function () {
            newField.remove();
        });
    }


    addFieldBtn.addEventListener("click", addBillEntry);
    addOtherFieldBtn.addEventListener("click", addOtherFieldEntry);


    billFields.addEventListener("click", function (e) {
        if (e.target.closest(".removeField")) {
            e.target.closest(".bill-entry").remove();
            updateTotals();
        }
    });

  
    otherFields.addEventListener("click", function (e) {
        if (e.target.closest(".removeOtherField")) {
            e.target.closest(".other-entry").remove();
        }
    });

   
    billFields.addEventListener("input", updateTotals);
    billFields.addEventListener("change", updateTotals);


    updateTotals();
});





$(document).ready(function () {
    $('.billinfo').each(function () {
        const selectElement = $(this);
        const selectedValue = selectElement.data('selected');

        selectElement.select2({
            placeholder: 'Search..',
            allowClear: true,
            ajax: {
                url: "{{ URL::to('/admin/dashboard/billinfo') }}",
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return { results: data };
                },
                cache: true
            }
        });

        // Pre-select the option if value exists
        if (selectedValue) {
            // Manually add the option and trigger change
            const newOption = new Option(selectedValue, selectedValue, true, true);
            selectElement.append(newOption).trigger('change');
        }
    });

    // Attach remove button logic to existing fields
    $('.removeField').on('click', function () {
        $(this).closest('.bill-entry').remove();
        updateTotals();
    });

    updateTotals();
});

</script>

@endsection