<?= $this->extend('App\Views\website\index') ?>
<?= $this->section('content') ?>
<style>
    .tab {display: none;}
    .tab.active {display: block;}
</style>
<div class="alert alert-success fade-up mb-3">
    <h1 class="display-5 fw-bold"><?= esc($post->title) ?></h1>
    <p class="lead"><?= esc($post->excerpt) ?></p>
    <p>
        <?php if (!empty($blocks['text'][0]['content'])): ?>
          <p class="text-dark small"><?= esc($blocks['text'][0]['content']) ?></p>
      <?php endif; ?>
    </p>
</div>
<div class="row mb-2">
    <div class="col">
        <!-- print success message !-->
        <?php if(session()->getTempdata('success')): ?>
            <div class="alert alert-success" role="alert"><?= session()->getTempdata('success');?></div>
        <?php endif;?>
        <!-- print failure message !-->
        <?php if(session()->getTempdata('error')): ?>
            <div class="alert alert-danger" role="alert"><?= session()->getTempdata('error');?></div>
        <?php endif;?>
        <?php if(isset($validation)): ?>
            <div class="alert alert-danger"><?= $validation->listErrors()?></div>
        <?php endif;?>
    </div>
</div> 
<!-- END print success message !-->
<form id="multiStepForm" method="POST" action="<?= base_url('save-registration') ?>"  enctype="multipart/form-data">
        <?= csrf_field() ?>
    <div id="tab-company" class="tab active">
         <div class="card mb-3 fade-up">
            <div class="card-header alert-primary"><h5 class="card-title">Company Details</h4></div>
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-lg-3 mb-3"><label class="form-label fw-bold">Name / Organization*</label></div>
                    <div class="col-lg-9">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                              <div class="form-floating">
                                <input type="text" class="form-control" name="fname" id="floatingInputGroup1" placeholder="First Name" required>
                                <label for="floatingInputGroup1">First Name</label>
                              </div>
                            </div>
                            <div class="col-md-6 mb-3">
                              <div class="form-floating">
                                <input type="text" class="form-control" name="lname" id="floatingInputGroup1" placeholder="Last Name" required>
                                <label for="floatingInputGroup1">Last Name</label>
                              </div>
                            </div>
                        </div>
                    </div><!-- End Names !-->
                    <div class="col-lg-3 mb-3"><label class="form-label fw-bold">Email Address*</label></div>
                    <div class="col-lg-9 mb-3">
                        <div class="form-floating">
                            <input type="email" class="form-control" name="email" id="floatingInputGroup1" placeholder="Email Address" required>
                            <label for="floatingInputGroup1">Email Address</label>
                        </div>
                    </div><!-- End Email Address !-->
                    <div class="col-lg-3 mb-3"><label class="form-label fw-bold">Phone Number*</label></div>
                    <div class="col-lg-9 mb-3">
                        <div class="form-floating">
                            <input type="tel" class="form-control" name="phone" id="floatingInputGroup1" placeholder="Telephone" required>
                            <label for="floatingInputGroup1">Telephone</label>
                        </div>
                    </div><!-- End Phone No. !-->
                    <div class="col-lg-3 mb-3"><label class="form-label fw-bold">What type of Business?*</label></div>
                    <div class="col-lg-9 mb-3">
                        <div class="form-floating">
                          <select class="form-select" name="entity_type_id" id="floatingSelect" aria-label="business entity">
                            <option value="">-- --</option>
                            <?php foreach($entity_types as $et): ?>
                                <option value="<?= $et->id ?>"><?= esc($et->name) ?></option>
                            <?php endforeach; ?>
                          </select>
                          <label for="floatingSelect">Select Business Type</label>
                        </div>
                    </div><!-- End Business Type !-->
                    <div class="col-lg-3 mb-3"><label class="form-label fw-bold">Business Address*</label></div>
                    <div class="col-lg-9">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                              <div class="form-floating">
                                <input type="text" class="form-control" name="address" id="floatingInputGroup-add" placeholder="Address" required>
                                <label for="floatingInputGroup-add">Enter Office Address</label>
                              </div>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <div class="form-floating">
                                  <select class="form-select" name="country_id" id="country_id" aria-label="Country" required>
                                    <option value="">-- --</option>
                                    <?php foreach($countries as $c):?>
                                        <option value="<?= $c->id; ?>"><?= $c->name;?></option>
                                    <?php endforeach;?>
                                  </select>
                                  <label for="floatingSelect">Select Country</label>
                                </div>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <div class="form-floating">
                                  <select class="form-select" name="state_id" id="state_id" aria-label="State">
                                    <option value="">-- --</option>
                                  </select>
                                  <label for="floatingSelect">Select State</label>
                                </div>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <div class="form-floating">
                                  <select class="form-select" name="city_id" id="city_id" aria-label="City" required>
                                    <option value="">-- --</option>
                                  </select>
                                  <label for="floatingSelect">Select City</label>
                                </div>
                            </div>
                            
                        </div>
                    </div><!-- Location !-->
                </div><!-- Company Details ROW !-->
            </div>
        </div><!-- END Co. Card !-->
    </div><!-- TAB 1 !-->
    <div id="tab-project" class="tab">
        <div class="card mb-3">
            <div class="card-header alert-warning">
                <h5 class="card-title">Project Information</h5> 
                <small class="d-flex">Enter full and accurate details for your REDD+ Project to easily be evaluated and approved.</small>
            </div>
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-lg-3 mb-3"><label class="form-label fw-bold">Project Name*</label></div>
                    <div class="col-lg-9 mb-3">
                        <div class="form-floating">
                            <input type="text" class="form-control" name="project_name" id="floatingInputGroup1" placeholder="Enter Full Project Name" required>
                            <label for="floatingInputGroup1">Enter Full Project Name</label>
                        </div>
                    </div><!-- End Project Name !-->
                    <div class="col-lg-3 mb-3"><label class="form-label fw-bold">Project Area (Ha)*</label></div>
                    <div class="col-lg-9 mb-3">
                        <div class="form-floating">
                            <input type="number" class="form-control"  name="size" step="any" id="floatingInputGroup1" placeholder="Enter Size" required>
                            <label for="floatingInputGroup1">Enter Land Size in Hectares</label>
                        </div>
                    </div><!-- End Project Size !-->
                    <div class="col-lg-3 mb-3"><label class="form-label fw-bold">Program / Project Type*</label></div>
                    <div class="col-lg-9 mb-3">
                        <div class="row">
                            <?php foreach($types as $pt): ?>
                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input 
                                            class="form-check-input" 
                                            type="checkbox" 
                                            name="project_type_id[]" 
                                            id="type_<?= $pt->id ?>" 
                                            value="<?= $pt->id ?>">
                                        <label class="form-check-label" for="type_<?= $pt->id ?>">
                                            <small><?= esc($pt->name) ?></small>
                                        </label>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div><!-- End Project Type !-->
                    <div class="col-lg-3 mb-3"><label class="form-label fw-bold">Project Location*<br/><small style="font-size:10px;color:#d00000">(Ensure you select upto village level and provide the Longitude and Latitude for accurancy of REDD+ Team to visit the project site)</small></label></div>
                    <div class="col-lg-9 mb-3">
                        <div class="row">
                            <div class="col-md-12 mb-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control" name="location_description" id="floatingInputGroup1" placeholder="Project Address" required>
                                    <label for="floatingInputGroup1">Enter Project Location / Address</label>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <div class="form-floating">
                                  <select class="form-select" name="district_id" id="district_id" aria-label="District" required>
                                    <option value="">-- --</option>
                                    <?php foreach($districts as $c):?>
                                        <option value="<?= $c['district_id']; ?>"><?= $c['district_name'];?></option>
                                    <?php endforeach;?>
                                  </select>
                                  <label for="floatingSelect">Select District</label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="form-floating">
                                  <select class="form-select" name="county_id" id="county_id" aria-label="County">
                                    <option value="">-- --</option>
                                  </select>
                                  <label for="floatingSelect">Select County</label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="form-floating">
                                  <select class="form-select" name="subcounty_id" id="subcounty_id" aria-label="Sub County">
                                    <option value="">-- --</option>
                                  </select>
                                  <label for="floatingSelect">Select SubCounty</label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="form-floating">
                                  <select class="form-select" name="parish_id" id="parish_id" aria-label="Parish">
                                    <option value="">-- --</option>
                                  </select>
                                  <label for="floatingSelect">Select Parish</label>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 mb-2">
                                <div class="form-floating">
                                  <select class="form-select" name="village_id" id="village_id" aria-label="Village">
                                    <option value="">-- --</option>
                                  </select>
                                  <label for="floatingSelect">Select Village</label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="form-floating">
                                    <input type="number" class="form-control" name="geo_lat" step="any" id="floatingInputGroupL" placeholder="Enter Latitude" required>
                                    <label for="floatingInputGrouL">Latitude</label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="form-floating">
                                    <input type="number" class="form-control"  name="geo_long" step="any" id="floatingInputGroupLo" placeholder="Enter Longitude" required>
                                    <label for="floatingInputGrouLo">Longitude</label>
                                </div>
                            </div>
                        </div>
                    </div><!-- End Project location !-->
                    
                </div><!-- Row !-->
            </div>
        </div><!-- END Project 1 Card !-->
    </div><!-- TAB 2 !-->
    <div id="tab-final" class="tab">
      <div class="card mb-3">
            <div class="card-header alert-info">
                <h5 class="card-title">Final Project Information</h5> 
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label class="form-label fw-bold">AFOLU Activity*</label>
                        <div class="row">
                            <?php foreach($activities as $at): ?>
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input 
                                            class="form-check-input" 
                                            type="checkbox" 
                                            name="activity_id[]" 
                                            id="activity_<?= $at->id ?>" 
                                            value="<?= $at->id ?>">
                                        <label class="form-check-label" for="activity_<?= $at->id ?>">
                                            <small><?= esc($at->name) ?></small>
                                        </label>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <div class="col-md-12 mb-3">
                        <label class="form-label fw-bold">Methodology</label>
                        <div class="row">
                            <?php foreach($methodologies as $metho): ?>
                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input 
                                            class="form-check-input" 
                                            type="checkbox" 
                                            name="methodology_id[]" 
                                            id="metho_<?= $metho->id ?>" 
                                            value="<?= $metho->id ?>">
                                        <label class="form-check-label" for="metho_<?= $metho->id ?>">
                                            <small><?= esc($metho->name) ?></small>
                                        </label>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
        
                    <div class="col-md-12 mb-3">
                        <label class="form-label fw-bold">Carbon Pool</label>
                        <div class="row">
                            <?php foreach($carbon_pools as $pool): ?>
                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input 
                                            class="form-check-input" 
                                            type="checkbox" 
                                            name="carbon_pool_id[]" 
                                            id="pool_<?= $pool->id ?>" 
                                            value="<?= $pool->id ?>">
                                        <label class="form-check-label" for="pool_<?= $pool->id ?>">
                                            <small><?= esc($pool->name) ?></small>
                                        </label>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    
                    <div class="col-md-12 mb-3">
                        <label class="form-label fw-bold">Gases</label>
                        <div class="row">
                            <?php foreach($gases as $gas): ?>
                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input 
                                            class="form-check-input" 
                                            type="checkbox" 
                                            name="gas_id[]" 
                                            id="gas_<?= $gas->id ?>" 
                                            value="<?= $gas->id ?>">
                                        <label class="form-check-label" for="gas_<?= $gas->id ?>">
                                            <small><?= esc($gas->name) ?></small>
                                        </label>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <hr style="background-color:#fff;border-color:#fff"/>
        
                    <div class="col-md-12 mb-3">
                        <label class="form-label  fw-bold mb-0">Description</label>
                        <textarea name="project_description" rows="3" class="form-control"></textarea>
                    </div>
                </div><!-- row !-->
            </div>
        </div><!-- END Project 2 Card !-->
    </div><!-- TAB 3 !-->

    <input type="hidden" id="passwordgen" name="password">
    <input type="hidden" name="project_status_id" value="2">
    <div class="mt-4">
        <div class="btn-group d-block">
            <button type="button" id="prevBtn" class="btn btn-outline-secondary w-25 rounded me-2" onclick="nextPrev(-1)">Previous</button>
            <button type="button" id="nextBtn" class="btn btn-outline-primary rounded w-50" onclick="nextPrev(1)">Next</button>
            <button type="submit" id="submitBtn" class="btn btn-success rounded w-50" style="display:none;">Submit</button>
        </div>
    </div>
</form>

<script>
    const tabIds = ["tab-company", "tab-project", "tab-final"];
    let currentTab = 0;

    showTab(currentTab);
    function showTab(n) {
        tabIds.forEach((id, index) => {
            const tab = document.getElementById(id);
            if (index === n) {
                tab.style.display = "block";
                tab.classList.add("active");
            } else {
                tab.style.display = "none";
                tab.classList.remove("active");
            }
        });
    
        document.getElementById("prevBtn").style.display = n === 0 ? "none" : "inline";
        document.getElementById("nextBtn").style.display = n === tabIds.length - 1 ? "none" : "inline";
        document.getElementById("submitBtn").style.display = n === tabIds.length - 1 ? "inline" : "none";
    }
    
    function nextPrev(n) {
        if (n === 1 && !validateForm()) return false;
        currentTab += n;
        if (currentTab >= tabIds.length) {
            document.getElementById("multiStepForm").submit();
            return false;
        }
        showTab(currentTab);
    }

    function validateForm() {
        const currentTabEl = document.querySelectorAll(".tab")[currentTab];
        const inputs = currentTabEl.querySelectorAll("input, select, textarea");
        let valid = true;
    
        // Validate standard required fields
        inputs.forEach(input => {
            if (!input.checkValidity()) {
                valid = false;
                input.classList.add('is-invalid');
            } else {
                input.classList.remove('is-invalid');
            }
        });
    
        //extra check: at least one checkbox in a group must be selected
        const checkboxGroups = [
            "project_type_id[]",
            "activity_id[]",
            "methodology_id[]",
            "carbon_pool_id[]",
            "gas_id[]"
        ];
    
        checkboxGroups.forEach(name => {
            const checkboxes = currentTabEl.querySelectorAll(`input[name="${name}"]`);
            if (checkboxes.length > 0) {
                let checked = false;
                checkboxes.forEach(cb => { if (cb.checked) checked = true; });
    
                if (!checked) {
                    valid = false;
                    checkboxes.forEach(cb => cb.classList.add('is-invalid'));
                } else {
                    checkboxes.forEach(cb => cb.classList.remove('is-invalid'));
                }
            }
        });
    
        return valid;
    }

    // Prevent submit if no checkbox selected on last tab
    document.getElementById('multiStepForm').addEventListener('submit', function(e) {
        const finalTab = document.getElementById('tab-final');
        if (!finalTab.classList.contains('active')) {
            // If not on final tab, let submission proceed (defensive)
            return;
        }
        const groups = [
            'activity_id[]',
            'methodology_id[]',
            'carbon_pool_id[]',
            'gas_id[]'
        ];
        let ok = true;
        groups.forEach(name => {
            const checkboxes = finalTab.querySelectorAll(`input[name="${name}"]`);
            if (checkboxes.length > 0) {
                const hasChecked = Array.from(checkboxes).some(cb => cb.checked);
                if (!hasChecked) {
                    ok = false;
                    checkboxes.forEach(cb => cb.classList.add('is-invalid'));
                } else {
                    checkboxes.forEach(cb => cb.classList.remove('is-invalid'));
                }
            }
        });
        if (!ok) {
            e.preventDefault();
            e.stopPropagation();
            alert('Please select at least one option in each required section of the final step.');
        }
    });
</script>
<script src="<?= base_url();?>assets/js/districtselection.js"></script>
<script src="<?= base_url();?>assets/js/countryselection.js"></script>
<script>
function onPwd() {
    const length = 15; 
    const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; 
    let password = "";
    for (let i = 0; i < length; i++) {
        password += charset.charAt(Math.floor(Math.random() * charset.length));
    }
    document.getElementById("passwordgen").value = password;
}
window.onload = onPwd;  // This will call onPwd when the window loads
</script>
<script src="<?= base_url();?>/assets/js/checkemail.js"></script>
<script>
    var base_url = "<?= base_url(); ?>";
    var csrfTokenName = '<?= csrf_token() ?>';
    var csrfToken     = '<?= csrf_hash() ?>';  
</script>

<?= $this->endSection() ?>
