main-backend/php_code/resources/views/permits/partials/site-inspection.blade.php

<div class="modal fade" id="inspectionReportModal" tabindex="-1" aria-labelledby="inspectionReportModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      
      <div class="modal-header bg-light border-bottom">
        <h5 class="modal-title fw-bold" id="inspectionReportModalLabel">Site Inspection Report</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body p-4" id="report-pdf-content">
        <h6 class="text-primary fw-bold border-bottom pb-2 mb-3">1. Project Information</h6>
        <div class="row g-3 mb-4">
          <div class="col-md-6">
            <label class="form-label text-muted small mb-1">Applicant Name</label> <input type="text" class="form-control form-control-sm" value="Jedidiah Madjanor">
          </div>
          <div class="col-md-6">
            <label class="form-label text-muted small mb-1">Site Location</label> <input type="text" class="form-control form-control-sm" value="2nd 3rdlink Fertilizer Road, Accra">
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Plot/House Number (Ghana Post GPS)</label> <input type="text" class="form-control form-control-sm">
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Proposed Development</label> <input type="text" class="form-control form-control-sm" value="Development Permit">
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Date of Inspection</label> <input type="date" class="form-control form-control-sm">
          </div>
        </div>

        <h6 class="text-primary fw-bold border-bottom pb-2 mb-3">2. Site Identification & Boundaries</h6>
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Boundary Verification (Clear/Match Plan?)</label> <select class="form-select form-select-sm"><option>Yes</option><option>No</option></select>
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Beacon Check (Fixed and visible?)</label> <select class="form-select form-select-sm"><option>Yes</option><option>No</option></select>
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Land Ownership Document Verified?</label> <select class="form-select form-select-sm"><option>Yes</option><option>No</option></select>
          </div>
        </div>

        <h6 class="text-primary fw-bold border-bottom pb-2 mb-3">3. Zoning & Planning Compliance</h6>
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Zoning Status Conformity</label> <input type="text" class="form-control form-control-sm" placeholder="e.g., residential, commercial">
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Setbacks Met?</label> <input type="text" class="form-control form-control-sm" placeholder="Distance from roads, etc.">
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Access to Site (Right of way)</label> <input type="text" class="form-control form-control-sm" placeholder="Is there an accessible road?">
          </div>
        </div>
        
        <h6 class="text-primary fw-bold border-bottom pb-2 mb-3">4. Site Suitability & Environmental Factors</h6>
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Topography (Flooding/Erosion)</label> <input type="text" class="form-control form-control-sm">
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Proximity to Hazards</label> <input type="text" class="form-control form-control-sm" placeholder="Distance to high-tension, gutters">
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Drainage/Waste Management</label> <input type="text" class="form-control form-control-sm" placeholder="Stormwater plan">
          </div>
        </div>
        <div class="html2pdf__page-break"></div>
        <h6 class="text-primary fw-bold border-bottom pb-2 mb-3">5. Technical & Structural Observations</h6>
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Foundation Status</label> <input type="text" class="form-control form-control-sm" placeholder="Suitability of soil capacity">
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Structural Integrity</label> <input type="text" class="form-control form-control-sm" placeholder="Quality of materials">
          </div>
          <div class="col-md-4">
            <label class="form-label text-muted small mb-1">Workmanship Supervised?</label> <select class="form-select form-select-sm"><option>N/A</option><option>Yes</option><option>No</option></select>
          </div>
        </div>

        <h6 class="text-primary fw-bold border-bottom pb-2 mb-3">6. Official Recommendations & Sign-Off</h6>
        <div class="row g-3 mb-4">
          <div class="col-12">
            <label class="form-label text-muted small mb-1">Inspector's Findings</label> <textarea class="form-control form-control-sm" rows="2" placeholder="e.g., Site boundaries are correct..."></textarea>
          </div>
          <div class="col-12">
            <label class="form-label text-muted small mb-1">Recommendations</label> <select class="form-select form-select-sm w-50">
              <option>Approve</option>
              <option>Query</option>
              <option>Reject</option>
            </select>
          </div>
          <div class="col-md-6 mt-4">
            <label class="form-label text-muted small mb-1">Physical Planning Officer</label> <input type="text" class="form-control form-control-sm mb-2" placeholder="Name">
            <input type="text" class="form-control form-control-sm" placeholder="Signature (Digital)">
          </div>
          <div class="col-md-6 mt-4">
            <label class="form-label text-muted small mb-1">Works Department Engineer</label> <input type="text" class="form-control form-control-sm mb-2" placeholder="Name">
            <input type="text" class="form-control form-control-sm" placeholder="Signature (Digital)">
          </div>
        </div>
      </div>

      <div class="modal-footer bg-light border-top">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-success" id="downloadPdfBtn"><i class="bi bi-download"></i> Download PDF
        </button> -->
        <button type="button" class="btn btn-success" onclick="generateReportPDF()">
          <i class="bi bi-download"></i> Download PDF
        </button>
        <button type="button" class="btn btn-primary">Save Report</button>
      </div>

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