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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

<style>

/* =====================================================
   PAGE BACKGROUND
===================================================== */

body{
    background:#f5f7fb;
}

/* =====================================================
   MAIN BODY
===================================================== */

.dashboard-main-body{
    padding:18px;
}

/* =====================================================
   CARD
===================================================== */

.card{
    border:none;
    border-radius:22px;
    overflow:hidden;
    background:rgba(255,255,255,.92);
    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.card-body{
    padding:22px;
}

/* =====================================================
   PAGE TITLE
===================================================== */

.dashboard-main-body h6{
    color:#0f172a;
    font-weight:700;
}

/* =====================================================
   TABS
===================================================== */

.tabs{
    border:none;
    gap:10px;
    flex-wrap:nowrap;
    overflow:auto;
    padding-bottom:4px;
}

.tabs::-webkit-scrollbar{
    display:none;
}

.tabs .nav-link{
    border:none;
    border-radius:12px;
    padding:10px 18px;
    background:#fff;
    font-size:14px;
    font-weight:600;
    color:#64748b;
    transition:.3s;
    white-space:nowrap;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
}

.tabs .nav-link:hover{
    color:#4f46e5;
}

.tabs .nav-link.active{
    background:linear-gradient(135deg,#4f46e5,#6366f1);
    color:#fff;
    box-shadow:0 10px 25px rgba(79,70,229,.25);
}

/* =====================================================
   FORM LABEL
===================================================== */

.form-label,
label{
    font-size:13px;
    font-weight:600;
    color:#475569;
    margin-bottom:7px;
}

/* =====================================================
   INPUTS
===================================================== */

.form-control,
.form-select{
    height:46px;
    border-radius:14px;
    border:1.5px solid #e2e8f0;
    background:#fff;
    padding:10px 14px;
    font-size:14px;
    transition:.25s ease;
    box-shadow:none;
}

textarea.form-control{
    min-height:110px;
    height:auto;
    resize:none;
}

.form-control:focus,
.form-select:focus{
    border-color:#6366f1;
    box-shadow:0 0 0 4px rgba(99,102,241,.12);
    background:#fff;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn-primary-600{
    border:none;
    border-radius:14px;
    padding:11px 24px;
    background:linear-gradient(135deg,#4f46e5,#6366f1);
    color:#fff;
    font-size:14px;
    font-weight:600;
    transition:.3s;
    box-shadow:0 10px 20px rgba(79,70,229,.18);
}

.btn-primary-600:hover{
    transform:translateY(-2px);
}

/* =====================================================
   INPUT ICON STYLE
===================================================== */

.input-icon-wrap{
    position:relative;
}

.input-icon-wrap i{
    position:absolute;
    top:50%;
    left:16px;
    transform:translateY(-50%);
    font-size:16px;
    z-index:5;
}

.input-icon-wrap .form-control,
.input-icon-wrap .form-select{
    padding-left:48px!important;
}

/* =====================================================
   TEXTAREA ICON
===================================================== */

.textarea-icon-wrap i{
    top:18px!important;
    transform:none!important;
}

.textarea-with-icon{
    padding-left:48px!important;
    padding-top:14px!important;
}

/* =====================================================
   ICON COLORS
===================================================== */

.icon-purple{ color:#6366f1; }
.icon-green{  color:#22c55e; }
.icon-orange{ color:#f97316; }
.icon-blue{   color:#3b82f6; }
.icon-red{    color:#ef4444; }
.icon-cyan{   color:#06b6d4; }
.icon-pink{   color:#ec4899; }

/* =====================================================
   FILE INPUT
===================================================== */

input[type="file"]{
    padding-top:10px!important;
}

/* =====================================================
   IMAGE PREVIEW
===================================================== */

#imagePreview{
    border-radius:14px!important;
    border:1px solid #e2e8f0!important;
    padding:4px!important;
    background:#fff;
}

/* =====================================================
   BACK BUTTON
===================================================== */

.bg-primary-600{
    background:linear-gradient(135deg,#4f46e5,#6366f1)!important;
    border:none!important;
    transition:.3s;
    box-shadow:0 10px 20px rgba(79,70,229,.18);
}

.bg-primary-600:hover{
    transform:translateY(-2px);
}

/* =====================================================
   SWEET ALERT
===================================================== */

.swal2-popup{         border-radius:18px!important; }
.swal2-title{         font-size:20px!important; }
.swal2-html-container{ font-size:14px!important; }
.swal2-confirm{       border-radius:10px!important; padding:8px 18px!important; }

/* =====================================================
   DATE PICKER
===================================================== */

.litepicker .container__months{
    border-radius:18px!important;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(15,23,42,.12)!important;
}

/* =====================================================
   TOM SELECT — FLAT DROPDOWN
===================================================== */

/* Hide the original select */
#flat { display: none !important; }

/* Reset wrapper — fight the global .form-select styles */
.ts-wrapper.form-select {
    padding: 0 !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* The visible control box */
.ts-wrapper .ts-control {
    height: 46px !important;
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    padding: 0 14px 0 48px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    flex-wrap: nowrap !important;
}

/* Hide the text cursor when not actively searching */
.ts-wrapper:not(.focus) .ts-control input {
    width: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
}

/* Show input only on focus */
.ts-wrapper.focus .ts-control input {
    width: auto !important;
    opacity: 1 !important;
    position: relative !important;
    font-size: 14px !important;
    color: #0f172a !important;
}

/* Focus ring */
.ts-wrapper.focus .ts-control {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12) !important;
}

/* Selected item text */
.ts-control .item {
    font-size: 14px !important;
    color: #0f172a !important;
}

/* Dropdown */
.ts-dropdown {
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.10) !important;
    font-size: 14px !important;
    overflow: hidden !important;
    margin-top: 4px !important;
}

.ts-dropdown .option {
    padding: 10px 16px !important;
    color: #475569 !important;
    transition: .2s !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: #f1f5f9 !important;
    color: #4f46e5 !important;
}

.ts-dropdown .option.selected {
    background: linear-gradient(135deg,#4f46e5,#6366f1) !important;
    color: #fff !important;
}

/* Responsive */
@media(max-width:576px) {
    .ts-wrapper .ts-control {
        height: 42px !important;
        border-radius: 12px !important;
    }
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:992px){
    .card-body{ padding:18px; }
    .form-control,.form-select{ height:44px; font-size:13px; }
    .btn-primary-600{ padding:10px 20px; }
}

@media(max-width:576px){
    .dashboard-main-body{ padding:12px; }
    .card{ border-radius:18px; }
    .card-body{ padding:16px; }
    .tabs .nav-link{ padding:9px 14px; font-size:13px; }
    .form-label{ font-size:12px; }
    .form-control,.form-select{ height:auto; min-height:42px; border-radius:12px; font-size:13px; }
    textarea.form-control{ min-height:90px; }
    .btn-primary-600{ width:100%; }
    .ts-control{ height:42px !important; border-radius:12px !important; }
}
/* TomSelect icon fix */
#flat-ts-wrapper .ts-control {
    padding-left: 48px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    font-size: 14px !important;
    align-items: center !important;
    box-shadow: none !important;
}

#flat-ts-wrapper.focus .ts-control {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12) !important;
}

#flat-ts-wrapper .ts-dropdown {
    border-radius: 14px !important;
    font-size: 14px !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.10) !important;
}

#flat-ts-wrapper .ts-dropdown .option.active,
#flat-ts-wrapper .ts-dropdown .option:hover {
    background: #f1f5f9 !important;
    color: #4f46e5 !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 Maintenance Bill</h6>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button" href="maintenance_bill.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">

        <ul class="nav nav-tabs tabs mb-4">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#maintenanceTab">
                    Maintenance Bill
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#paymentTab">
                    Payment Info
                </a>
            </li>
        </ul>

        <div class="tab-content mt-4">

            <!-------------------- Maintenance Bill Tab -------------------->
            <div class="tab-pane fade show active" id="maintenanceTab">
                <div class="card">
                    <div class="card-body">

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

                        <form method="post" id="billForm">
                            <div class="row gy-3 mt-4">

                                <!-- Bill Date -->
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">
                                        Bill Date <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-calendar-event-fill icon-pink"></i>
                                        <input type="text"
                                            id="singleDate"
                                            name="billDate"
                                            class="form-control"
                                            placeholder="dd-mm-yyyy"
                                            autocomplete="off"
                                            readonly>
                                    </div>
                                </div>

                                <!-- Due Date -->
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">
                                        Due Date <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-calendar2-week-fill icon-purple"></i>
                                        <input type="text"
                                            id="dueDate"
                                            name="dueDate"
                                            class="form-control"
                                            placeholder="dd-mm-yyyy"
                                            autocomplete="off"
                                            readonly>
                                    </div>
                                </div>

                                <!-- Flat / Unit No -->
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">
                                        Flat / Unit No <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-door-open-fill icon-green" style="z-index:10;"></i>
                                        <select name="flat"
                                                id="flat"
                                                class="form-select"
                                                required>
                                            <option value="Select Flat No." readonly>Select Flat No.</option>
                                            <option value="A-101">A-101</option>
                                            <option value="A-102">A-102</option>
                                            <option value="A-103">A-103</option>
                                            <option value="B-101">B-101</option>
                                            <option value="B-102">B-102</option>
                                            <option value="C-101">C-101</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Resident Name -->
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">
                                        Resident Name <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-person-fill icon-blue"></i>
                                        <input type="text"
                                            name="residentName"
                                            class="form-control"
                                            placeholder="Enter Resident Name"
                                            autocomplete="off">
                                    </div>
                                </div>

                                <!-- Bill Amount -->
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">
                                        Bill Amount <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-cash-coin icon-orange"></i>
                                        <input type="text"
                                            name="billAmount"
                                            class="form-control"
                                            placeholder="Enter Bill Amount"
                                            autocomplete="off">
                                    </div>
                                </div>

                                <!-- Bill Type -->
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">
                                        Bill Type <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-receipt-cutoff icon-purple"></i>
                                        <select name="billType"
                                            id="billType"
                                            class="form-select">
                                            <option value="">Select Bill Type</option>
                                            <option value="Maintenance">Maintenance</option>
                                            <option value="Water Bill">Water Bill</option>
                                            <option value="Parking">Parking</option>
                                            <option value="Electricity">Electricity</option>
                                            <option value="Penalty">Penalty</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Remark -->
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Remark</label>
                                    <div class="input-icon-wrap textarea-icon-wrap">
                                        <i class="bi bi-chat-left-text-fill icon-cyan"></i>
                                        <textarea name="remark"
                                            id="remark"
                                            class="form-control textarea-with-icon"
                                            rows="3"
                                            placeholder="Enter Remark"></textarea>
                                    </div>
                                </div>

                                <!-- Upload -->
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Upload Bill Image</label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-image-fill icon-pink"></i>
                                        <input type="file"
                                            name="billImage"
                                            id="billImage"
                                            class="form-control"
                                            accept="image/*">
                                    </div>
                                </div>

                                <!-- Preview -->
                                <div class="col-sm-6 mb-3 d-none" id="previewContainer">
                                    <label class="form-label d-block">Image Preview</label>
                                    <img id="imagePreview"
                                        src=""
                                        alt="Preview"
                                        style="width:200px;height:150px;object-fit:cover;border-radius:14px;border:1px solid #e2e8f0;padding:4px;background:#fff;">
                                </div>

                                <!-- Save -->
                                <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>

            <!-------------------- Payment Tab -------------------->
            <div class="tab-pane fade show" id="paymentTab">
                <div class="card">
                    <div class="card-body">

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

                        <form method="post" id="paymentForm">
                            <div class="row gy-3 mt-4">

                                <div class="col-md-4">
                                    <label class="form-label">
                                        Previous Due <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-wallet2 icon-red"></i>
                                        <input type="number"
                                            name="previousDue"
                                            class="form-control"
                                            placeholder="Enter Previous Due">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">
                                        Late Fee <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-exclamation-circle-fill icon-orange"></i>
                                        <input type="number"
                                            name="lateFee"
                                            class="form-control"
                                            placeholder="Enter Late Fee">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Total Amount</label>
                                    <div class="input-icon-wrap">
                                        <i class="bi bi-currency-rupee icon-purple"></i>
                                        <input type="text"
                                            name="totalAmount"
                                            id="totalamount"
                                            class="form-control"
                                            readonly>
                                    </div>
                                </div>

                                <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>

    </div>
</div>

<!-- Litepicker -->
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/bundle.js"></script>
<script>
    new Litepicker({
        element: document.getElementById('singleDate'),
        singleMode: true,
        format: 'DD-MM-YYYY',
        dropdowns: { months: true, years: true }
    });
    new Litepicker({
        element: document.getElementById('dueDate'),
        singleMode: true,
        format: 'DD-MM-YYYY',
        dropdowns: { months: true, years: true }
    });
</script>

<!-- TomSelect — Flat/Unit No -->
<!-- TomSelect — Flat/Unit No -->
<script>
new TomSelect('#flat', {
    allowEmptyOption: true,
    create: false,
    sortField: { field: 'text', direction: 'asc' },
    placeholder: 'Select Flat / Unit No',
    onInitialize: function() {
        // Remove cursor when not focused
        this.control_input.setAttribute('readonly', true);
        this.on('focus', () => {
            this.control_input.removeAttribute('readonly');
        });
        this.on('blur', () => {
            this.control_input.setAttribute('readonly', true);
        });
    }
});
</script>

<!-- Form Validation -->
<script>
document.getElementById("billForm").addEventListener("submit", function(e) {

    e.preventDefault();

    const swalConfig = {
        customClass: {
            popup:          'swal-modern',
            title:          'swal-title',
            htmlContainer:  'swal-text',
            confirmButton:  'swal-confirm',
            cancelButton:   'swal-cancel',
        },
        width: '350px'
    };

    let billDate    = document.querySelector("[name='billDate']").value.trim();
    let dueDate     = document.querySelector("[name='dueDate']").value.trim();
    let flat        = document.querySelector("[name='flat']").value.trim();
    let residentName = document.querySelector("[name='residentName']").value.trim();
    let billAmount  = document.querySelector("[name='billAmount']").value.trim();
    let billType    = document.querySelector("[name='billType']").value.trim();
    let billImage   = document.getElementById("billImage").files[0];

    if (!billDate) {
        Swal.fire({ ...swalConfig, icon: 'warning', title: 'Bill Date Required' });
        return;
    }
    if (!dueDate) {
        Swal.fire({ ...swalConfig, icon: 'warning', title: 'Due Date Required' });
        return;
    }
    if (!flat) {
        Swal.fire({ ...swalConfig, icon: 'warning', title: 'Flat / Unit No Required' });
        return;
    }
    if (!residentName) {
        Swal.fire({ ...swalConfig, icon: 'warning', title: 'Resident Name Required' });
        return;
    }
    if (!billAmount) {
        Swal.fire({ ...swalConfig, icon: 'warning', title: 'Bill Amount Required' });
        return;
    }
    if (isNaN(billAmount) || Number(billAmount) <= 0) {
        Swal.fire({ ...swalConfig, icon: 'error', title: 'Invalid Bill Amount', text: 'Enter valid amount greater than 0' });
        return;
    }
    if (!billType) {
        Swal.fire({ ...swalConfig, icon: 'warning', title: 'Please Select Bill Type' });
        return;
    }

    if (billImage) {
        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
        if (!allowedTypes.includes(billImage.type)) {
            Swal.fire({ ...swalConfig, icon: 'error', title: 'Invalid Image Format', text: 'Only JPG, JPEG & PNG allowed' });
            return;
        }
        if (billImage.size > 2 * 1024 * 1024) {
            Swal.fire({ ...swalConfig, icon: 'error', title: 'Image Too Large', text: 'Maximum image size is 2MB' });
            return;
        }
    }

    Swal.fire({
        ...swalConfig,
        icon: 'success',
        title: 'Validated Successfully',
        text: 'Maintenance bill is ready to submit',
        confirmButtonColor: '#4a63ff'
    }).then(() => {
        e.target.submit();
    });

});
</script>

<!-- Image Preview -->
<script>
document.getElementById("billImage").addEventListener("change", function(e) {

    const file             = e.target.files[0];
    const preview          = document.getElementById("imagePreview");
    const previewContainer = document.getElementById("previewContainer");

    if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
            preview.src = event.target.result;
            previewContainer.classList.remove("d-none");
        };
        reader.readAsDataURL(file);
    } else {
        previewContainer.classList.add("d-none");
        preview.src = "";
    }

});
</script>

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