<?php include 'header.php'; ?>

<style>

.small-swal{
    width:320px !important;
    border-radius:14px !important;
    padding:1rem !important;
}

.small-swal-title{
    font-size:18px !important;
    margin-top:5px !important;
}

.small-swal-text{
    font-size:14px !important;
}

.small-swal-button{
    font-size:13px !important;
    padding:8px 18px !important;
    border-radius:8px !important;
}

.small-swal-icon{
    transform:scale(0.75);
    margin:10px auto !important;
}

</style>

<div class="dashboard-main-body">

    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Add Income</h6>
    </div>

    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a href="income_manage.php"
           class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center"
           data-bs-toggle="tooltip"
           data-bs-placement="top"
           data-bs-html="true"
           data-bs-custom-class="tooltip-primary"
           title="Listing">

            <iconify-icon icon="ic:baseline-arrow-back"
                          class="icon text-xl line-height-1">
            </iconify-icon>

        </a>
    </div>

    <div class="container-fluid mt-3">

        <div class="card">

            <div class="card-body">

                <h6 class="mb-4 text-xl">Add Income</h6>

                <form method="post" id="incomeForm">

                    <div class="row gy-3">

                        <!-- Income Head -->
                        <div class="col-sm-3">
                            <label class="form-label">
                                Collection Type
                                <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="income_head"
                                   class="form-control"
                                   placeholder="Enter Collection Type">
                        </div>

                        <!-- Received From -->
                        <div class="col-sm-3">
                            <label class="form-label">
                                Received From
                            </label>

                            <input type="text"
                                   name="received_from"
                                   class="form-control"
                                   placeholder="Enter Name">
                        </div>

                        <!-- Amount -->
                        <div class="col-sm-3">
                            <label class="form-label">
                                Amount
                                <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="amount"
                                   class="form-control"
                                   placeholder="Enter Amount"
                                   inputmode="numeric"
                                   oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                        </div>

                        <!-- Reference No -->
                        <div class="col-sm-3">
                            <label class="form-label">
                                Reference No.
                            </label>

                            <input type="text"
                                   name="reference_no"
                                   class="form-control"
                                   placeholder="Enter Reference No.">
                        </div>

                        <!-- Date -->
                        <div class="col-sm-3">
                            <label class="form-label">
                                Date
                                <span class="text-danger">*</span>
                            </label>

                            <input type="date"
                                   name="income_date"
                                   class="form-control">
                        </div>

                        <!-- Payment Mode -->
                        <div class="col-sm-3">
                            <label class="form-label">
                                Payment Mode
                            </label>

                            <select name="payment_mode" class="form-select">

                                <option value="">
                                    Select Mode
                                </option>

                                <option value="Cash">
                                    Cash
                                </option>

                                <option value="UPI">
                                    UPI
                                </option>

                                <option value="Bank Transfer">
                                    Bank Transfer
                                </option>

                                <option value="Cheque">
                                    Cheque
                                </option>

                            </select>
                        </div>

                        <!-- Notes -->
                        <div class="col-sm-12">

                            <label class="form-label">
                                Notes
                            </label>

                            <textarea name="notes"
                                      class="form-control"
                                      rows="4"
                                      placeholder="Enter Notes"></textarea>

                        </div>

                        <!-- Submit Button -->
                        <div class="text-end mt-4">

                            <button type="submit"
                                    class="btn btn-primary-600">

                                <i class="bi bi-floppy"></i>
                                Save

                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

<script>

function showError(message){

    Swal.fire({

        icon: 'error',
        title: 'Validation Error',
        text: message,
        confirmButtonColor: '#0d6efd',
        confirmButtonText: 'OK',

        customClass:{
            popup:'small-swal',
            title:'small-swal-title',
            htmlContainer:'small-swal-text',
            confirmButton:'small-swal-button',
            icon:'small-swal-icon'
        }

    });

}

function showSuccess(form){

    Swal.fire({

        icon: 'success',
        title: 'Success',
        text: 'Form submitted successfully!',
        confirmButtonColor: '#0d6efd',
        confirmButtonText: 'OK',

        customClass:{
            popup:'small-swal',
            title:'small-swal-title',
            htmlContainer:'small-swal-text',
            confirmButton:'small-swal-button',
            icon:'small-swal-icon'
        }

    }).then(() => {

        form.submit();

    });

}

</script>

<script>

document.getElementById('incomeForm').addEventListener('submit', function(e){

    e.preventDefault();

    let incomeHead = this.income_head.value.trim();

    let amount = this.amount.value.trim();

    let date = this.income_date.value;

    if(incomeHead === ''){

        return showError('Income Head is required');

    }

    if(amount === ''){

        return showError('Amount is required');

    }

    if(date === ''){

        return showError('Please select date');

    }

    showSuccess(this);

});

</script>

<?php include 'footer.php'; ?>