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

<style>
    .tabs .nav-link {
        border: none;
        padding: 12px 20px;
        font-weight: 500;
        color: #6c757d;
    }

    .tabs .nav-link.active {
        color: #0d6efd;
        /*border-bottom: 3px solid #0d6efd;*/
    }
</style>
<style>
    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;
    }

    /* 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.active {
        background: linear-gradient(135deg, #4f46e5, #6366f1);
        color: #fff;
        box-shadow: 0 10px 25px rgba(79, 70, 229, .25);
    }

    /* LABEL */
    .form-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;
        height: auto;
        resize: none;
    }

    /* 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);
    }

    /* 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;
    }

    /* 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;
    }

    /* 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;
    }

    /* SMALL TOGGLE */
    .custom-toggle-wrap {
        position: relative;
        width: 42px;
        height: 22px;
    }

    .custom-toggle-input {
        display: none;
    }

    .custom-toggle-label {
        position: absolute;
        inset: 0;
        cursor: pointer;
        background: #cbd5e1;
        border-radius: 999px;
        transition: .3s;
    }

    .custom-toggle-label::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: .3s;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    }

    .custom-toggle-input:checked+.custom-toggle-label {
        background: #6366f1;
    }

    .custom-toggle-input:checked+.custom-toggle-label::before {
        transform: translateX(20px);
    }

    .toggle-status-text {
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
    }

    /* 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;
        display: flex !important;
        align-items: center !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px !important;
        padding-left: 14px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
    }

    /* RESPONSIVE */
    @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-control,
        .form-select {
            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">Add Track Owner</h6>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button" href="track_owner.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="#residentTab">
                    Flat Details
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " data-bs-toggle="tab" href="#visitorTab">
                    Owner Info
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#ownershipTab">
                    Ownership Details
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#parkingTab">
                    Parking Details
                </a>
            </li>

        </ul>

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

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

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

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

                                <div class="row gy-3 mt-4">

                                    <!-- Block / Wing -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Block / Wing <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-buildings-fill icon-blue"></i>

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

                                    <!-- Flat Number -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            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="flat_no" class="form-control"
                                                placeholder="Enter Flat Number">
                                        </div>
                                    </div>

                                    <!-- Floor -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            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="floor" class="form-control"
                                                placeholder="Enter Floor">
                                        </div>
                                    </div>

                                    <!-- Flat Type -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Flat Type
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-house-fill icon-purple"></i>

                                            <select name="occupancy_status" class="form-select searchSelect">

                                                <option value="">-- Select --</option>
                                                <option>1 BHK</option>
                                                <option>2 BHK</option>
                                                <option>3 BHK</option>

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

                                </div>

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

                            </div>
                        </form>

                    </div>
                </div>
            </div>
            <!-------------------- Owner Tab------------------>
            <div class="tab-pane fade show active" id="visitorTab">
                <div class="card">
                    <div class="card-body">

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

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

                                <div class="row gy-3 mt-4">

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

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-person-fill icon-blue"></i>

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

                                    <!-- Mobile -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Mobile No. <span class="text-danger">*</span>
                                        </label>

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

                                            <input type="text" name="mobile" class="form-control"
                                                placeholder="Enter Mobile No" maxlength="10" pattern="^\d{10}$"
                                                inputmode="numeric"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                        </div>
                                    </div>

                                    <!-- Email -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Email
                                        </label>

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

                                            <input type="email" name="email" class="form-control"
                                                placeholder="Enter Email"
                                                pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Za-z]{2,}$">
                                        </div>
                                    </div>

                                    <!-- Address -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Address (If living outside society)
                                            <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap textarea-icon-wrap">
                                            <i class="bi bi-geo-alt-fill icon-orange"></i>

                                            <textarea name="address" class="form-control textarea-with-icon"
                                                placeholder="Enter Address" rows="1" required></textarea>
                                        </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>

                            </div>
                        </form>

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


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

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

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

                                <div class="row gy-3 mt-4">

                                    <!-- Ownership Type -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Ownership Type
                                        </label>

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

                                            <select name="occupancy_status" class="form-select searchSelect">

                                                <option value="">-- Select --</option>
                                                <option>Single Owner</option>
                                                <option>Joint Ownership</option>

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

                                    <!-- Purchase Date -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Purchase Date
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-calendar-event-fill icon-pink"></i>

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

                                    <!-- Ownership Document -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Ownership Document
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-file-earmark-arrow-up-fill icon-blue"></i>

                                            <input type="file" name="ownership_doc" class="form-control">
                                        </div>
                                    </div>

                                    <!-- Occupancy Status -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Occupancy Status
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-house-check-fill icon-green"></i>

                                            <select name="occupancy_status" class="form-select searchSelect">

                                                <option value="">-- Select --</option>
                                                <option>Occupied</option>
                                                <option>Vacant</option>
                                                <option>Rented</option>

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

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

                            </div>
                        </form>

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

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

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

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

                                <div class="row gy-3 mt-4">

                                    <!-- Parking Slot Number -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Parking Slot Number
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-p-square-fill icon-orange"></i>

                                            <input type="text" name="parking_slot" class="form-control"
                                                placeholder="Enter Slot Number">
                                        </div>
                                    </div>

                                    <!-- Vehicle Number -->
                                    <div class="col-sm-4">
                                        <label class="form-label">
                                            Vehicle Number
                                        </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"
                                                placeholder="Enter Vehicle Number">
                                        </div>
                                    </div>

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

                            </div>
                        </form>

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

        </div>


    </div>

</div>

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