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


<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<style>
    /* =====================================================
   PREMIUM UI
===================================================== */
    .aadhaar-preview {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .aadhaar-box {
        position: relative;
        display: inline-block;
    }

    .aadhaar-box img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid #ddd;
        background: #fff;
        padding: 3px;
    }

    .remove-aadhaar {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #dc3545;
        color: #fff;
        border: none;
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body {
        background: #f5f7fb;
    }

    .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;
    }

    /* TITLE */

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

    /* TABS */

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

    #loanTabs::-webkit-scrollbar {
        display: none;
    }

    #loanTabs .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);
    }

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

    /* LABEL */

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

    /* INPUT */

    .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;
    }

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

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

    /* ICON INPUT */

    .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;
    }

    /* BUTTON */

    .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);
    }

    /* TABLE */

    .table {
        margin: 0;
        background: #fff;
    }

    .table thead th {
        background: #ddeeff !important;
        color: #111827;
        font-weight: 700;
        font-size: 13px;
        border: none !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .table tbody td {
        background: #fff !important;
        padding: 15px;
        border-color: #eef2f7;
        font-size: 14px;
        color: #334155;
        vertical-align: middle;
    }

    /* SELECT2 */

    .select2-container {
        width: 100% !important;
    }

    .select2-container--default .select2-selection--single {
        height: 46px !important;
        border-radius: 14px !important;
        border: 1.5px solid #e2e8f0 !important;
        padding-left: 34px !important;
        display: flex !important;
        align-items: center !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px !important;
        color: #334155 !important;
        font-size: 14px;
    }

    .select2-dropdown {
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
        overflow: hidden;
    }

    /* RESPONSIVE */

    @media(max-width:576px) {

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

        .card {
            border-radius: 18px;
        }

        .card-body {
            padding: 16px;
        }

        .form-control,
        .form-select {
            min-height: 42px;
            border-radius: 12px;
            font-size: 13px;
        }

        .btn-primary-600 {
            width: 100%;
        }
    }
</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">Flat Management</h6>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button" href="resident.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">

        <!-- ===================== TABS ===================== -->
        <ul class="nav nav-tabs" id="loanTabs">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#bhkTab">
                    Flat Details
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " data-bs-toggle="tab" href="#societyTab">
                    Resident Details
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#flatTab">
                    No. of Parking
                </a>
            </li>
        </ul>

        <!-- ===================== TAB CONTENT ===================== -->
        <div class="tab-content mt-4">

            <!-- ========== BHK TAB ========== -->
            <div class="tab-pane fade show active" id="bhkTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-10 text-xl ">Add Flat Details</h6>

                        <form method="post">
                            <div class="row gy-3">
                                <div class="col-sm-3">

                                    <label class="form-label mb-2">
                                        Resident Type<span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">

                                        <i class="bi bi-person-badge-fill icon-purple"></i>

                                        <select name="gender[]" class="form-select searchSelect" required>

                                            <option value="">--Select--</option>
                                            <option>Owner</option>
                                            <option>Tenant</option>

                                        </select>

                                    </div>

                                </div>

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

                                    <label class="form-label mb-2">
                                        Block / Wing<span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">

                                        <i class="bi bi-building-fill icon-blue"></i>

                                        <input type="text" name="name[]" class="form-control py-2"
                                            placeholder="Enter Block/Wing" required>

                                    </div>

                                </div>

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

                                    <label class="form-label mb-2">
                                        Flat Number<span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">

                                        <i class="bi bi-door-open-fill icon-green"></i>

                                        <input type="text" name="name[]" class="form-control py-2"
                                            placeholder="Enter Flat Number" required>

                                    </div>

                                </div>

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

                                    <label class="form-label mb-2">
                                        Floor<span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">

                                        <i class="bi bi-layers-fill icon-orange"></i>

                                        <input type="text" name="name[]" class="form-control py-2"
                                            placeholder="Enter Floor" required>

                                    </div>

                                </div>
                            </div>

                            <div class="row gy-3 pt-3">
                                <div class="col-sm-3">

                                    <label class="form-label mb-2">
                                        Emergency Contact Name<span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">

                                        <i class="bi bi-person-lines-fill icon-red"></i>

                                        <input type="text" name="name[]" class="form-control py-2"
                                            placeholder="Enter Emergency Contact Name" required>

                                    </div>

                                </div>

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

                                    <label class="form-label mb-2">
                                        Emergency Contact Number<span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">

                                        <i class="bi bi-telephone-fill icon-green"></i>

                                        <input type="text" name="name[]" class="form-control py-2"
                                            placeholder="Enter Emergency Contact Number" maxlength="10"
                                            inputmode="numeric" oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                                            required>

                                    </div>

                                </div>

                                <div class="text-end mt-4">
                                    <button type="submit" class="btn btn-primary-600">
                                        <i class="bi bi-floppy"></i>
                                    </button>
                                </div>

                            </div>
                        </form>

                    </div>
                </div>
            </div>
            <!-- ========== Society TAB ========== -->
            <div class="tab-pane fade show " id="societyTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-4 text-xl">Add Resident Details</h6>
                        <form method="post">
                            <div id="residentRows">

                                <div class="resident-row mb-3">

                                    <!-- Resident Title -->
                                    <div class="resident-title fw-semibold text-primary mb-2">
                                        Resident 1
                                    </div>

                                    <!-- Resident Fields Row -->
                                    <div class="row gy-3 align-items-end">
                                        <div class="col-sm-3">

                                            <label class="form-label mb-2">
                                                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="name[]" class="form-control py-2"
                                                    placeholder="Enter Name" required>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Mobile Number<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-telephone-fill icon-green"></i>

                                                <input type="tel" name="mobile[]" class="form-control py-2"
                                                    placeholder="Enter Mobile Number" maxlength="10" pattern="\d{10}"
                                                    oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Gender<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-gender-ambiguous icon-orange"></i>

                                                <select name="gender[]" class="form-select searchSelect" required>

                                                    <option value="">Select Gender</option>
                                                    <option>Male</option>
                                                    <option>Female</option>

                                                </select>

                                            </div>

                                        </div>


                                        <div class="col-sm-2 d-flex gap-2 btn-col">
                                            <button type="button" class="btn btn-success btn-sm addRow">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                            <button type="button" class="btn btn-danger btn-sm removeRow">
                                                <i class="fa fa-minus"></i>
                                            </button>
                                        </div>

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

                                            <label class="form-label mb-2">
                                                Email<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-envelope-fill icon-red"></i>

                                                <input type="email" name="email[]" class="form-control py-2"
                                                    placeholder="Enter Email Address" required>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Aadhaar Card Number<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-person-vcard-fill icon-purple"></i>

                                                <input type="text" name="aadhaar[]" class="form-control py-2"
                                                    placeholder="Enter Aadhaar Number" maxlength="12" pattern="\d{12}"
                                                    oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Occupation<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-briefcase-fill icon-cyan"></i>

                                                <input type="text" name="occupation[]" class="form-control py-2"
                                                    placeholder="Enter Occupation" required>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Upload Aadhaar<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-card-image icon-pink"></i>

                                                <input type="file" name="aadhaar_file[]"
                                                    class="form-control py-2 aadhaarInput" accept="image/*">

                                            </div>

                                            <div class="aadhaar-preview mt-2"></div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-primary-600">
                                    <i class="bi bi-floppy"></i>
                                </button>
                            </div>
                        </form>

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


            <!-- ========== Flat TAB ========== -->
            <div class="tab-pane fade show" id="flatTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-10 text-xl">Add Number Of Parking</h6>

                        <form method="post">
                            <div id="parkingRows">

                                <div class="parking-row mb-3">

                                    <div class="parking-title fw-semibold text-primary mb-2">
                                        Parking 1
                                    </div>

                                    <div class="row gy-3 align-items-end">
                                        <div class="col-sm-3">

                                            <label class="form-label mb-2">
                                                Number Of Parking<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-p-square-fill icon-purple"></i>

                                                <input type="text" name="vehicle_number[]" class="form-control py-2"
                                                    placeholder="Enter Number Of Parking" required>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Vehicle Number<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-car-front-fill icon-blue"></i>

                                                <input type="text" name="vehicle_number[]" class="form-control py-2"
                                                    placeholder="Enter Vehicle Number" 
                                                    oninput="this.value=this.value.toUpperCase()" required>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Vehicle Type<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-car-front-fill icon-green"></i>

                                                <select name="vehicle_type[]" class="form-select" required>
                                                    <option value="">Select Vehicle Type</option>
                                                    <option>Two Wheeler</option>
                                                    <option>Four Wheeler</option>
                                                    <option>Electric Vehicle</option>
                                                </select>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Vehicle Name / Model<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-car-front icon-blue"></i>

                                                <input type="text" name="vehicle_model[]" class="form-control py-2"
                                                    placeholder="Enter Vehicle Name/Model" required>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Colour<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-palette-fill icon-orange"></i>

                                                <input type="text" name="vehicle_colour[]" class="form-control py-2"
                                                    placeholder="Enter Vehicle Colour" required>

                                            </div>

                                        </div>

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

                                            <label class="form-label mb-2">
                                                Parking Slot<span class="text-danger">*</span>
                                            </label>

                                            <div class="input-icon-wrap">

                                                <i class="bi bi-p-square-fill icon-purple"></i>

                                                <input type="text" name="parking_slot[]" class="form-control py-2"
                                                    placeholder="Enter Parking Slot" required>

                                            </div>

                                        </div>

                                        <div class="col-sm-2 d-flex gap-2 btn-col">
                                            <button type="button" class="btn btn-success btn-sm addParking">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                            <button type="button" class="btn btn-danger btn-sm removeParking">
                                                <i class="fa fa-minus"></i>
                                            </button>
                                        </div>
                                    </div>

                                </div>

                            </div>

                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-primary-600">
                                    <i class="bi bi-floppy"></i>
                                </button>
                            </div>
                        </form>

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


        </div>
    </div>
</div>
<script>
    $(document).ready(function () {

        // Add Row
        $(document).on('click', '.addRow', function () {
            let row = $('.resident-row:first').clone();
            row.find('input').val('');
            row.find('.aadhaar-preview').html('');
            row.find('select').val('');
            $('#residentRows').append(row);
            updateResidentNumbers();
        });

        // Remove Row (keep at least one)
        $(document).on('click', '.removeRow', function () {
            if ($('.resident-row').length > 1) {
                $(this).closest('.resident-row').remove();
            }
        });

    });

    function updateResidentNumbers() {
        $('.resident-row').each(function (index) {
            $(this).find('.resident-title').text('Resident ' + (index + 1));
        });
    }
</script>
<script>
    $(document).on('click', '.removeRow', function () {
        if ($('.resident-row').length > 1) {
            $(this).closest('.resident-row').remove();
            updateResidentNumbers();
        } else {
            Swal.fire({
                icon: 'warning',
                title: 'Oops!',
                text: 'At least one row is required.',
                confirmButtonColor: '#4a63ff'
            });
        }
    });
</script>
<script>
    $(document).on('click', '.addParking', function () {
        let row = $('.parking-row:first').clone();
        row.find('input').val('');
        row.find('select').val('');
        $('#parkingRows').append(row);
        updateParkingNumbers();
    });

    $(document).on('click', '.removeParking', function () {
        if ($('.parking-row').length > 1) {
            $(this).closest('.parking-row').remove();
            updateParkingNumbers();
        } else {
            Swal.fire({
                icon: 'warning',
                title: 'Oops!',
                text: 'At least one row is required.',
                confirmButtonColor: '#4a63ff'
            });
        }
    });

    function updateParkingNumbers() {
        $('.parking-row').each(function (index) {
            $(this).find('.parking-title').text('Parking ' + (index + 1));
        });
    }
</script>

<!--image upload script-->
<!--image upload script-->
<script>

    $(document).on('change', '.documentInput', function () {

        let files = this.files;

        // full row ma thi preview div find karse
        let previewBox = $(this)
            .closest('.row')
            .find('.selected-files');

        if (files.length > 0) {

            $.each(files, function (index, file) {

                let fileURL = URL.createObjectURL(file);

                // IMAGE PREVIEW
                if (file.type.startsWith('image/')) {

                    previewBox.append(`
                        <div class="file-preview">

                            <img src="${fileURL}" alt="image">

                            <div class="file-name">
                                ${file.name}
                            </div>

                        </div>
                    `);

                } else {

                    // OTHER FILES
                    previewBox.append(`
                        <div class="file-preview d-flex flex-column align-items-center justify-content-center">

                            <i class="fa fa-file text-primary fs-3 mb-2"></i>

                            <div class="file-name">
                                ${file.name}
                            </div>

                        </div>
                    `);

                }

            });

        }

    });
    $(document).on('change', '.aadhaarInput', function () {

        let input = this;
        let file = input.files[0];

        let previewBox = $(input)
            .closest('.col-sm-4')
            .find('.aadhaar-preview');

        previewBox.html('');

        if (file) {

            let reader = new FileReader();

            reader.onload = function (e) {

                previewBox.html(`
                <div class="aadhaar-box">
                    <img src="${e.target.result}">
                    <button type="button"
                            class="remove-aadhaar">&times;</button>
                </div>
            `);

            };

            reader.readAsDataURL(file);
        }

    });

    $(document).on('click', '.remove-aadhaar', function () {

        let parent = $(this).closest('.col-sm-4');

        parent.find('.aadhaarInput').val('');
        parent.find('.aadhaar-preview').html('');

    });
</script>

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