@extends('layouts.sales.sales')

@section('title', 'Assign Team')

@section('content')

                  <div class="container-fluid py-4">


                     <div class="assign mx-3 py-0 card-new-pro">
                        <div  class="d-flex">
                           <a href="{{ route('sales.quote') }}?tab={{ request('return_tab', 'active') }}" class="text-primary me-2 fs-4">
                              <i class="bi bi-arrow-left-circle-fill"></i>
                           </a>
                           <h5 class="mb-3">Assign Team to New Project</h5>
                        </div>


                        <!-- Hidden Tabs -->
                        <input type="radio" name="tabs" id="tab1" class="tab-radio" checked>
                        <input type="radio" name="tabs" id="tab2" class="tab-radio">
                        <input type="radio" name="tabs" id="tab3" class="tab-radio">
                        <input type="radio" name="tabs" id="tab4" class="tab-radio">
                        <input type="radio" name="tabs" id="tab5" class="tab-radio">
                        <input type="radio" name="tabs" id="tab6" class="tab-radio">

                        <!-- Tab Navigation -->
                        <nav class="mb-3 d-flex gap-3 flex-wrap">
                           <label for="tab1">Project Details</label>
                           <label for="tab2">QRF Details</label>
                           <label for="tab3">Description</label>
                           <label for="tab4">Billings</label>
                           <label for="tab5">Signed Offer</label>
                           <label for="tab6">Sales Forcast</label>
                        </nav>

                        <div class="content border rounded p-4 bg-light" style="min-height:350px">

                           {{-- TAB 1 --}}
                           <div id="content1" class="tab-content">
                              <div class="row g-3">
                                 <div class="col-md-6">
                                    <label>Quote No</label>
                                    <input type="hidden" id="quoteId" class="form-control" value="{{ $leads->id ?? '' }}" readonly>
                                    <!-- <input type="text" id="quoteId" class="form-control" value="{{ strtoupper(substr($leads->state_code, 0, 2)) . '-' . date('y') . '-' . str_pad($leads->id, 3, '0', STR_PAD_LEFT) }}" readonly> -->
                                     <input type="text" id="quoteId" class="form-control"
                                       value="{{ 
                                          $leads
   ? strtoupper(substr($leads->state_code ?? '', 0, 2)) . '-' . \Carbon\Carbon::parse($leads->created_at)->format('y') . '-' . str_pad($leads->id ?? 0, 3, '0', STR_PAD_LEFT)
   : ''
                                       }}" 
                                       readonly>
                                 </div>
                                 <div class="col-md-6">
                                    <label>Client Name</label>
                                    <input type="text" id="clientName" class="form-control" value="{{ $leads->name ?? ''}}">
                                 </div>
                                 <div class="col-md-6">
                                    <label>Factory Name</label>
                                    <input type="text" id="projectName" class="form-control" value="{{  $leads->title ?? ''}}">
                                 </div>
                                 <div class="col-md-6">
                                    <label>Factory Location</label>
                                    <input type="text" id="projectLocation" class="form-control" value="{{ $leads->location ?? ''}}">
                                 </div>
                                 <div class="col-md-6">
                                    <label>Project Type</label>
                                    <input type="text" id="projectLocation" class="form-control" value="{{ $leads->projectType->name ?? ''}}" readonly>
                                 </div>

                                 <div class="col-md-6">
                                    <label>Quote Date</label>
                                    <input type="date" id="quoteDate" class="form-control"
                                       value="{{ $leads->created_at->format('Y-m-d') ?? ''}}" readonly>
                                 </div>


                                 <hr>
                                 <span>Customer Quote Details</span>
                                 <div class="col-md-6">
                                    <label>Length</label>
                                    <input type="text" class="form-control" value="{{ $enquiryStructure->length_m ?? '' }}" readonly>
                                 </div>

                                 <div class="col-md-6">
                                    <label>Width</label>
                                    <input type="text" class="form-control" value="{{ $enquiryStructure->width_m ?? '' }}" readonly>
                                 </div>

                                 <div class="col-md-6">
                                    <label>Clear Height</label>
                                    <input type="text" class="form-control" value="{{ $enquiryStructure->clear_height_m ?? '' }}" readonly>
                                 </div>

                                 <div class="col-md-6">
                                    <label>Wind Speed</label>
                                    <input type="text" class="form-control" value="{{ $enquiryStructure->wind_speed ?? '' }}" readonly>
                                 </div>

                                 <div class="col-md-6">
                                    <label>Roofing Type</label>
                                    <input type="text" class="form-control" value="{{ $enquiryStructure->roofing_type ?? '' }}" readonly>
                                 </div>

                                 <div class="col-md-6">
                                    <label>Crane Required</label>
                                    <input type="text" class="form-control"
                                       value="{{ $enquiryStructure?->crane_required === null ? '' : ($enquiryStructure->crane_required ? 'Yes' : 'No') }}"
                                       readonly>
                                 </div>


                                 <div class="col-md-6">
                                    <label>Estimate Cost</label>

                                    <input type="text" id="estimateCost" class="form-control" value="{{ $leads->estimate_cost ?? ''}}" readonly>
                                 </div>

                              </div>

                              <label for="tab2" class="btn btn-primary mt-4 next-btn">Next ></label>
                           </div>




                           {{-- TAB 2: Material Details (FULL PEB SPECS) --}}
                           <div id="content2" class="tab-content">

                              <div class="accordion" id="pebAccordion">

                                       {{-- SECTION 1: Header + Loads --}}
                                       <div class="accordion-item">
                                          <h2 class="accordion-header" id="h1">
                                             <button class="accordion-button collapsed" type="button"  data-bs-target="#c1">
                                                Header + Loads
                                             </button>
                                          </h2>
                                          <div id="c1" class="accordion-collapse collapse" data-bs-parent="#pebAccordion">
                                             <div class="accordion-body">
                                                {{-- TAB 1: Header + Loads --}}

                                                <h6 class="mb-3">Project Header</h6>
                                                <div class="row g-3">
                                                   <div class="col-lg-3">
                                                      <label>Building Of / Type</label>
                                                      <select id="building_type" name="building_type" class="form-control">
                                                         <option value="">Select Frame Type</option>
                                                         @foreach($frameTypes as $frame)
                                                            <option value="{{ $frame->id }}" {{ ($spec->building_type ?? '') == $frame->id ? 'selected' : '' }}>
                                                               {{ $frame->name }}
                                                            </option>
                                                         @endforeach
                                                      </select>

                                                   </div>

                                                   <div class="col-md-3">
                                                      <label>Quantity Type</label>
                                                      <select name="quantity_type" id="quantity_type" class="form-control">
                                                         <option value="">Select</option>
                                                         <option value="IDENTICAL" {{ ($spec->quantity_type ?? '') == 'IDENTICAL' ? 'selected' : '' }}>Identical Building
                                                         </option>
                                                         <option value="NON_IDENTICAL" {{ ($spec->quantity_type ?? '') == 'NON_IDENTICAL' ? 'selected' : '' }}>Non
                                                            Identical Building</option>
                                                      </select>
                                                   </div>

                                                   <div class="col-lg-3">
                                                      <label>Quantity</label>
                                                      <input type="number" id="quantity" class="form-control"
                                                         value="{{ $spec->quantity ?? '' }}">
                                                   </div>
                                                   <div class="col-lg-3">
                                                      <label>Revision / Change Order No.</label>
                                                      <input type="text" id="revision_no" class="form-control"
                                                         value="{{ $spec->revision_no ?? '' }}">
                                                   </div>
                                                   <div class="col-lg-3">
                                                      <label>DT. Released</label>
                                                      <input type="date" id="date_released" class="form-control"
                                                         value="{{ $spec->date_released ?? '' }}">
                                                   </div>

                                                   <div class="col-md-6">
                                                      <label>Job Site</label>
                                                      <input type="text" id="job_site" class="form-control" value="{{ $spec->job_site ?? '' }}">
                                                   </div>
                                                   <div class="col-lg-3">
                                                      <label>Status</label>
                                                      <select id="status" class="form-select">
                                                         <option value="">Select</option>
                                                         @foreach(['New', 'Revision', 'Approved', 'Hold'] as $opt)
                                                            <option value="{{ $opt }}" {{ ($spec->peb_status ?? '') == $opt ? 'selected' : '' }}>
                                                               {{ $opt }}</option>
                                                         @endforeach
                                                      </select>
                                                   </div>
                                                   <div class="col-lg-3">
                                                      <label>Design Code</label>
                                                      <select id="design_code" name="design_code" class="form-control">
                                                         <option value="">Select Design Code</option>
                                                         <option value="AMERICAN" {{ ($spec->design_code ?? '') == 'AMERICAN' ? 'selected' : '' }}>American Design</option>
                                                         <option value="IS" {{ ($spec->design_code ?? '') == 'IS' ? 'selected' : '' }}>IS Design
                                                         </option>
                                                         <option value="OTHER" {{ ($spec->design_code ?? '') == 'OTHER' ? 'selected' : '' }}>
                                                            Others</option>
                                                      </select>
                                                   </div>
                                                   <div class="col-lg-3" id="other_design_wrap"
                                                      style="{{ ($spec->design_code ?? '') == 'OTHER' ? '' : 'display:none;' }}">

                                                      <label>Specify Design Code</label>
                                                      <input type="text" name="design_code_other" id="design_code_other" class="form-control"
                                                         value="{{ $spec->design_code_other ?? '' }}" placeholder="Enter design code">
                                                   </div>
                                                </div>

                                                <hr class="my-4">

                                                <h6 class="mb-3">Loads</h6>
                                                <div class="row g-3">
                                                   <div class="col-lg-3">
                                                      <label>Roof Live Load (kN/m²)</label>
                                                      <input type="text" step="0.01" id="roof_live_load" class="form-control"
                                                         placeholder="As Per Standard" value="{{ $spec->roof_live_load ?? 'As Per Standard' }}">
                                                   </div>
                                                   <div class="col-lg-3">
                                                      <label>Wind Speed (kmph)</label>
                                                      <input type="text" id="wind_speed" class="form-control" placeholder="As Per Standard"
                                                         value="{{ $spec->wind_speed ?? 'As Per Standard' }}">
                                                   </div>
                                                   <div class="col-lg-3">
                                                      <label>Wind Note (e.g., K4-1.15)</label>
                                                      <input type="text" id="wind_note" class="form-control" placeholder="As Per Standard"
                                                         value="{{ $spec->wind_note ?? 'As Per Standard' }}">
                                                   </div>
                                                   <div class="col-lg-3">
                                                      <label>Collateral Roof Load (kN/m²)</label>
                                                      <input type="text" id="collateral_roof_load" class="form-control"
                                                         placeholder="As Per Standard"
                                                         value="{{ $spec->collateral_roof_load ?? 'As Per Standard' }}">
                                                   </div>

                                                   <div class="col-md-6">
                                                      <label>Wind Load Coefficient Standard</label>
                                                      <input type="text" id="wind_standard" class="form-control" placeholder="As Per Standard"
                                                         value="{{ $spec->wind_standard ?? 'As Per Standard' }}">
                                                   </div>
                                                   <div class="col-md-6">
                                                      <label>Seismic Zone</label>
                                                      <select name="seismic_zone" id="seismic_zone" class="form-control">
                                                         <option value="">Select / AS PER DESIGN</option>
                                                         <option value="AS_PER_DESIGN" {{ ($spec->seismic_zone ?? '') == 'AS_PER_DESIGN' ? 'selected' : '' }}>As per design
                                                         </option>
                                                         <option value="II" {{ ($spec->seismic_zone ?? '') == 'II' ? 'selected' : '' }}>Zone II
                                                         </option>
                                                         <option value="III" {{ ($spec->seismic_zone ?? '') == 'III' ? 'selected' : '' }}>Zone III
                                                         </option>
                                                         <option value="IV" {{ ($spec->seismic_zone ?? '') == 'IV' ? 'selected' : '' }}>Zone IV
                                                         </option>
                                                         <option value="V" {{ ($spec->seismic_zone ?? '') == 'V' ? 'selected' : '' }}>Zone V
                                                         </option>
                                                      </select>
                                                   </div>

                                                   <div class="col-md-6">
                                                      <label>Notes</label>
                                                      <input type="text" id="general_notes" class="form-control"
                                                         value="{{ $spec->general_notes ?? '' }}">
                                                   </div>
                                                </div>

                                                <div class="d-flex justify-content-end mt-4">
                                                   <!-- <button type="button" class="btn btn-primary"
                                                      onclick="document.getElementById('tab2').checked=true">Save & Next</button>
                                                </div> -->
                                             </div>
                                          </div>
                                       </div>


                                       {{-- SECTION 2: Geometry --}}
                                       <div class="accordion-item">
                                          <h2 class="accordion-header" id="h2">
                                             <button class="accordion-button collapsed" type="button"  data-bs-target="#c2">
                                                Geometry
                                             </button>
                                          </h2>

                                          <div id="c2" class="accordion-collapse collapse" data-bs-parent="#pebAccordion">
                                             <div class="accordion-body">

                                                <h6 class="mb-3">Main Building Geometry</h6>

                                                <div class="row g-3">

                                                   {{-- Length --}}
                                                   <div class="col-lg-3 position-relative">
                                                      <label>Length <span id="len_unit">(m)</span> o/o</label>

                                                      <input type="text" id="length" name="length" class="form-control"
                                                         value="{{ $geometry->length_input ?? $geometry->length ?? '' }}">

                                                      <select id="length_unit" name="length_unit" class="form-select select_unit">

                                                         <option value="M" {{ ($geometry->length_unit ?? 'M') == 'M' ? 'selected' : '' }}>m</option>
                                                         <option value="MM" {{ ($geometry->length_unit ?? '') == 'MM' ? 'selected' : '' }}>mm</option>
                                                         <option value="FT_IN" {{ ($geometry->length_unit ?? '') == 'FT_IN' ? 'selected' : '' }}>ft-in</option>

                                                      </select>
                                                   </div>

                                                   {{-- Length Reference --}}
                                                   <div class="col-md-3">
                                                      <label>Length Reference</label>
                                                      <select name="length_ref" class="form-control">
                                                         <option value="OUT_TO_OUT_STEEL" {{ ($geometry->length_ref ?? '') == 'OUT_TO_OUT_STEEL' ? 'selected' : '' }}>
                                                            Out to Out of Steel
                                                         </option>

                                                         <option value="OUT_TO_OUT_WALL" {{ ($geometry->length_ref ?? '') == 'OUT_TO_OUT_WALL' ? 'selected' : '' }}>
                                                            Out to Out of Wall
                                                         </option>

                                                         <option value="CENTER_TO_CENTER_COLUMNS" {{ ($geometry->length_ref ?? '') == 'CENTER_TO_CENTER_COLUMNS' ? 'selected' : '' }}>
                                                            Center to Center Steel Columns
                                                         </option>
                                                      </select>
                                                   </div>

                                                   {{-- Width --}}
                                                   <div class="col-lg-3 position-relative">
                                                      <label>Width <span id="wid_unit">(m)</span> o/o</label>

                                                      <input type="text" id="width" name="width" class="form-control"
                                                         value="{{ $geometry->width_input ?? $geometry->width ?? '' }}">

                                                      <select id="width_unit" name="width_unit" class="form-select select_unit">

                                                         <option value="M" {{ ($geometry->width_unit ?? 'M') == 'M' ? 'selected' : '' }}>m</option>
                                                         <option value="MM" {{ ($geometry->width_unit ?? '') == 'MM' ? 'selected' : '' }}>mm</option>
                                                         <option value="FT_IN" {{ ($geometry->width_unit ?? '') == 'FT_IN' ? 'selected' : '' }}>ft-in</option>

                                                      </select>
                                                   </div>

                                                   {{-- Width Reference --}}
                                                   <div class="col-md-3">
                                                      <label>Width Reference</label>

                                                      <select name="width_ref" class="form-control">

                                                         <option value="OUT_TO_OUT_STEEL" {{ ($geometry->width_ref ?? '') == 'OUT_TO_OUT_STEEL' ? 'selected' : '' }}>
                                                            Out to Out of Steel
                                                         </option>

                                                         <option value="OUT_TO_OUT_WALL" {{ ($geometry->width_ref ?? '') == 'OUT_TO_OUT_WALL' ? 'selected' : '' }}>
                                                            Out to Out of Wall
                                                         </option>

                                                         <option value="CENTER_TO_CENTER_COLUMNS" {{ ($geometry->width_ref ?? '') == 'CENTER_TO_CENTER_COLUMNS' ? 'selected' : '' }}>
                                                            Center to Center Steel Columns
                                                         </option>

                                                      </select>
                                                   </div>

                                                   {{-- Clear Height --}}
                                                   <div class="col-lg-3 position-relative">

                                                      <label>Clear Height <span id="ht_unit">(m)</span></label>

                                                      <input type="text" id="clear_height" name="clear_height" class="form-control"
                                                         value="{{ $geometry->clear_height_input ?? $geometry->clear_height ?? '' }}">

                                                      <select id="height_unit" name="height_unit" class="form-select select_unit">

                                                         <option value="M" {{ ($geometry->height_unit ?? 'M') == 'M' ? 'selected' : '' }}>m</option>
                                                         <option value="MM" {{ ($geometry->height_unit ?? '') == 'MM' ? 'selected' : '' }}>mm</option>
                                                         <option value="FT_IN" {{ ($geometry->height_unit ?? '') == 'FT_IN' ? 'selected' : '' }}>ft-in</option>

                                                      </select>

                                                   </div>

                                                   {{-- Roof Slope --}}
                                                   <div class="col-lg-3">
                                                      <label>Roof Slope</label>
                                                      <input type="text" name="roof_slope" id="roof_slope" class="form-control"
                                                         value="{{ $geometry->roof_slope ?? '' }}">
                                                   </div>

                                                   {{-- Bay Spacing Mode --}}
                                                   <div class="col-md-3">
                                                      <label>Bay Spacing Option</label>

                                                      <select id="bay_spacing_mode" name="bay_spacing_mode" class="form-control">

                                                         <option value="AS_PER_DESIGN" {{ ($geometry->bay_spacing_mode ?? 'AS_PER_DESIGN') == 'AS_PER_DESIGN' ? 'selected' : '' }}>
                                                            As per design
                                                         </option>

                                                         <option value="MANUAL" {{ ($geometry->bay_spacing_mode ?? '') == 'MANUAL' ? 'selected' : '' }}>
                                                            Manual
                                                         </option>

                                                      </select>
                                                   </div>

                                                   {{-- Bay Spacing --}}
                                                   <div class="col-md-3" id="bay_spacing_wrap"
                                                      style="{{ ($geometry->bay_spacing_mode ?? 'AS_PER_DESIGN') == 'MANUAL' ? '' : 'display:none;' }}">

                                                      <label>Bay Spacing</label>

                                                      <input type="text" id="bay_spacing" name="bay_spacing" class="form-control"
                                                         value="{{ $geometry->bay_spacing ?? '' }}" placeholder="e.g. 5@7.3152 m">

                                                   </div>

                                                </div>

                                                <hr class="my-4">

                                                <h6 class="mb-3">Levels</h6>

                                                <div class="row g-3">

                                                   <div class="col-md-6">
                                                      <label>All PEB columns from FFL only?</label>

                                                      <select name="columns_from_ffl" id="columns_from_ffl" class="form-select">

                                                         <option value="">Select</option>

                                                         <option value="YES" {{ ($geometry->columns_from_ffl ?? '') == 'YES' ? 'selected' : '' }}>
                                                            Yes
                                                         </option>

                                                         <option value="NO" {{ ($geometry->columns_from_ffl ?? '') == 'NO' ? 'selected' : '' }}>
                                                            No
                                                         </option>

                                                      </select>
                                                   </div>

                                                   <div class="col-md-6">
                                                      <label>Gap between FFL & GL (m)</label>

                                                      <input type="number" step="0.01" name="ffl_gl_gap" id="ffl_gl_gap" class="form-control"
                                                         value="{{ $geometry->ffl_gl_gap ?? '' }}">
                                                   </div>

                                                </div>

                                                <!-- <div class="d-flex justify-content-between mt-4">
                                                   <button type="button" class="btn btn-secondary" onclick="document.getElementById('tab1').checked=true">
                                                      Back
                                                   </button>

                                                   <button type="button" class="btn btn-primary" onclick="document.getElementById('tab3').checked=true">
                                                      Save & Next
                                                   </button>
                                                </div> -->

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

                                       {{-- SECTION 3: Frames + Bracing --}}
                                       <div class="accordion-item">
                                          <h2 class="accordion-header" id="h3">
                                             <button class="accordion-button collapsed" type="button" 
                                                data-bs-target="#c3">
                                                Frames + Bracing
                                             </button>
                                          </h2>
                                          <div id="c3" class="accordion-collapse collapse" data-bs-parent="#pebAccordion">
                                             <div class="accordion-body">
                                                <h6 class="mb-3">Frames / Columns</h6>
                                                <div class="row g-3">
                                                   <div class="col-md-4">
                                                      <label>No. of Interior Main Frame Support Columns</label>
                                                      <input type="number" id="interior_main_cols" class="form-control"
                                                         value="{{ $frames->interior_main_cols ?? '' }}">
                                                   </div>
                                                   <div class="col-md-4">
                                                      <label>Spacing of Interior Main Frame Columns</label>
                                                      <input type="text" id="interior_main_cols_spacing" class="form-control"
                                                         value="{{ $frames->interior_main_cols_spacing ?? '' }}">
                                                   </div>
                                                   <div class="col-md-4">
                                                      <label>No. Main Ends</label>
                                                      <input type="number" id="no_main_ends" class="form-control"
                                                         value="{{ $frames->no_main_ends ?? '' }}">
                                                   </div>

                                                   <div class="col-md-6">
                                                      <label>First End Wall Columns Spacing (m)</label>
                                                      <input type="text" id="first_endwall_cols_spacing" class="form-control"
                                                         value="{{ $frames->first_endwall_cols_spacing ?? '' }}">
                                                   </div>
                                                   <div class="col-md-6">
                                                      <label>Second End Wall Columns Spacing (m)</label>
                                                      <input type="text" id="second_endwall_cols_spacing" class="form-control"
                                                         value="{{ $frames->second_endwall_cols_spacing ?? '' }}">
                                                   </div>
                                                </div>

                                                <hr class="my-4">

                                                <h6 class="mb-3">Bracing</h6>
                                                <div class="row g-3">
                                                   <div class="col-md-6">
                                                      <label>Diagonal X Bracing Allowed</label>
                                                      <select id="diag_x_bracing" class="form-select">
                                                         <option value="">Select</option>
                                                         <option value="YES" {{ ($frames->diag_x_bracing ?? '') == 'YES' ? 'selected' : '' }}>Yes
                                                         </option>
                                                         <option value="NO" {{ ($frames->diag_x_bracing ?? '') == 'NO' ? 'selected' : '' }}>No
                                                         </option>
                                                      </select>
                                                   </div>
                                                   <div class="col-md-6">
                                                      <label>Cross Bracings Allowed</label>
                                                      <select id="cross_bracing" class="form-select">
                                                         <option value="">Select</option>
                                                         <option value="YES" {{ ($frames->cross_bracing ?? '') == 'YES' ? 'selected' : '' }}>Yes
                                                         </option>
                                                         <option value="NO" {{ ($frames->cross_bracing ?? '') == 'NO' ? 'selected' : '' }}>No
                                                         </option>
                                                      </select>
                                                   </div>
                                                </div>

                                                <!-- <div class="d-flex justify-content-between mt-4">
                                                   <button type="button" class="btn btn-secondary"
                                                      onclick="document.getElementById('tab2').checked=true">Back</button>
                                                   <button type="button" class="btn btn-primary"
                                                      onclick="document.getElementById('tab4').checked=true">Save & Next</button>
                                                </div> -->
                                             </div>
                                          </div>
                                       </div>

                                       {{-- SECTION 4: Sheeting --}}
                                       <div class="accordion-item">
                                          <h2 class="accordion-header" id="h4">
                                             <button class="accordion-button collapsed" type="button" 
                                                data-bs-target="#c4">
                                                Sheeting
                                             </button>
                                          </h2>
                                          <div id="c4" class="accordion-collapse collapse" data-bs-parent="#pebAccordion">
                                             <div class="accordion-body">

                                                <h6 class="mb-3">Roof / Wall / Gable Sheeting</h6>

                                                <div class="card mb-3">
                                                   <div class="card-body">
                                                      <h6 class="mb-3">Roof Sheeting</h6>
                                                      <div class="row g-3">
                                                         <div class="col-lg-3">
                                                            <label>Supplier</label>
                                                            <select id="roof_supplier" class="form-select">
                                                               <option value="">Select</option>
                                                               <option value="MEKING" {{ ($roof->supplier ?? '') == 'MEKING' ? 'selected' : '' }}>
                                                                  By MEKING STEEL</option>
                                                               <option value="OTHERS" {{ ($roof->supplier ?? '') == 'OTHERS' ? 'selected' : '' }}>
                                                                  By Others</option>
                                                            </select>
                                                         </div>
                                                         <div class="col-lg-3">
                                                            <label>Type</label>
                                                            <input id="roof_sheet_type" class="form-control"
                                                               value="{{ $roof->sheet_type ?? '' }}">
                                                         </div>
                                                         <div class="col-md-2">
                                                            <label>Thickness (mm)</label>
                                                            <input id="roof_sheet_thk" class="form-control" value="{{ $roof->thk_mm ?? '' }}">
                                                         </div>
                                                         <div class="col-md-2">
                                                            <label>GA</label>
                                                            <input id="roof_sheet_ga" class="form-control" value="{{ $roof->ga ?? '' }}">
                                                         </div>
                                                         <div class="col-md-2">
                                                            <label>Finish</label>
                                                            <select id="roof_finish" class="form-select">
                                                               <option value="">Select</option>
                                                               <option value="PLAIN" {{ ($roof->finish ?? '') == 'PLAIN' ? 'selected' : '' }}>
                                                                  Plain</option>
                                                               <option value="COLOUR" {{ ($roof->finish ?? '') == 'COLOUR' ? 'selected' : '' }}>
                                                                  Colour</option>
                                                            </select>
                                                         </div>
                                                      </div>
                                                      <div class="mt-3">
                                                         <label>Roof Sheeting Notes</label>
                                                         <input id="roof_sheet_notes" class="form-control" value="{{ $roof->notes ?? '' }}">
                                                      </div>
                                                   </div>
                                                </div>

                                                <div class="card mb-3">
                                                   <div class="card-body">
                                                      <h6 class="mb-3">Wall Sheeting</h6>
                                                      <div class="row g-3">
                                                         <div class="col-lg-3">
                                                            <label>Supplier</label>
                                                            <select id="wall_supplier" class="form-select">
                                                               <option value="">Select</option>
                                                               <option value="MEKING" {{ ($wall->supplier ?? '') == 'MEKING' ? 'selected' : '' }}>
                                                                  By MEKING STEEL</option>
                                                               <option value="OTHERS" {{ ($wall->supplier ?? '') == 'OTHERS' ? 'selected' : '' }}>
                                                                  By Others</option>
                                                            </select>
                                                         </div>
                                                         <div class="col-lg-3">
                                                            <label>Type</label>
                                                            <input id="wall_sheet_type" class="form-control"
                                                               value="{{ $wall->sheet_type ?? '' }}">
                                                         </div>
                                                         <div class="col-md-2">
                                                            <label>Thickness (mm)</label>
                                                            <input id="wall_sheet_thk" class="form-control" value="{{ $wall->thk_mm ?? '' }}">
                                                         </div>
                                                         <div class="col-md-2">
                                                            <label>GA</label>
                                                            <input id="wall_sheet_ga" class="form-control" value="{{ $wall->ga ?? '' }}">
                                                         </div>
                                                         <div class="col-md-2">
                                                            <label>Colour</label>
                                                            <input id="wall_colour" class="form-control" value="{{ $wall->colour ?? '' }}">
                                                         </div>
                                                      </div>
                                                      <div class="mt-3">
                                                         <label>Wall Sheeting Notes</label>
                                                         <input id="wall_sheet_notes" class="form-control" value="{{ $wall->notes ?? '' }}">
                                                      </div>
                                                   </div>
                                                </div>

                                                <div class="card">
                                                   <div class="card-body">
                                                      <h6 class="mb-3">Gable Sheeting</h6>
                                                      <div class="row g-3">
                                                         <div class="col-lg-3">
                                                            <label>Supplier</label>
                                                            <select id="gable_supplier" class="form-select">
                                                               <option value="">Select</option>
                                                               <option value="MEKING" {{ ($gable->supplier ?? '') == 'MEKING' ? 'selected' : '' }}>By MEKING STEEL</option>
                                                               <option value="OTHERS" {{ ($gable->supplier ?? '') == 'OTHERS' ? 'selected' : '' }}>By Others</option>
                                                            </select>
                                                         </div>
                                                         <div class="col-lg-3">
                                                            <label>Type</label>
                                                            <input id="gable_sheet_type" class="form-control"
                                                               value="{{ $gable->sheet_type ?? '' }}">
                                                         </div>
                                                         <div class="col-md-2">
                                                            <label>Thickness (mm)</label>
                                                            <input id="gable_sheet_thk" class="form-control" value="{{ $gable->thk_mm ?? '' }}">
                                                         </div>
                                                         <div class="col-md-2">
                                                            <label>GA</label>
                                                            <input id="gable_sheet_ga" class="form-control" value="{{ $gable->ga ?? '' }}">
                                                         </div>
                                                         <div class="col-md-2">
                                                            <label>Colour</label>
                                                            <input id="gable_colour" class="form-control" value="{{ $gable->colour ?? '' }}">
                                                         </div>
                                                      </div>
                                                      <div class="mt-3">
                                                         <label>Gable Sheeting Notes</label>
                                                         <input id="gable_sheet_notes" class="form-control" value="{{ $gable->notes ?? '' }}">
                                                      </div>
                                                   </div>

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

                                          {{-- SECTION 5: Openings --}}
                                          <div class="accordion-item">
                                             <h2 class="accordion-header" id="h5">
                                                <button class="accordion-button collapsed" type="button" 
                                                   data-bs-target="#c5">
                                                   Openings
                                                </button>
                                             </h2>

                                             <div id="c5" class="accordion-collapse collapse" data-bs-parent="#pebAccordion">
                                                <div class="accordion-body">

                                                   <div class="card shadow-sm border-0">
                                                      <div class="card-body">

                                                         <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <h6 class="mb-0 fw-semibold">Openings + Brick Wall</h6>
                                                         </div>

                                                         <div class="row g-3">
                                                            <div class="col-md-4">
                                                               <label class="form-label">Brick Wall Height (m)</label>
                                                               <input id="brick_wall_height" class="form-control"
                                                                  value="{{ $spec->brick_wall_height ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         <h6 class="mb-2 fw-semibold">Sidewall Openings (2 rows)</h6>
                                                         <div class="row g-3">
                                                            <div class="col-md-6">
                                                               <label class="form-label">Sidewall Open #1 - Length (m)</label>
                                                               <input id="side_open_1_len" class="form-control"
                                                                  value="{{ $side1->length_m ?? '' }}">
                                                            </div>
                                                            <div class="col-md-6">
                                                               <label class="form-label">Sidewall Open #1 Notes</label>
                                                               <input id="side_open_1_note" class="form-control"
                                                                  value="{{ $side1->notes ?? '' }}">
                                                            </div>

                                                            <div class="col-md-6">
                                                               <label class="form-label">Sidewall Open #2 - Length (m)</label>
                                                               <input id="side_open_2_len" class="form-control"
                                                                  value="{{ $side2->length_m ?? '' }}">
                                                            </div>
                                                            <div class="col-md-6">
                                                               <label class="form-label">Sidewall Open #2 Notes</label>
                                                               <input id="side_open_2_note" class="form-control"
                                                                  value="{{ $side2->notes ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         <h6 class="mb-2 fw-semibold">Endwall Openings (2 rows)</h6>
                                                         <div class="row g-3">
                                                            <div class="col-md-4">
                                                               <label class="form-label">Endwall Open #1 - Length (m)</label>
                                                               <input id="end_open_1_len" class="form-control"
                                                                  value="{{ $end1->length_m ?? '' }}">
                                                            </div>
                                                            <div class="col-md-4">
                                                               <label class="form-label">Endwall Open #1 Gable</label>
                                                               <select id="end_open_1_gable" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="SHEETED" {{ ($end1->gable ?? '') == 'SHEETED' ? 'selected' : '' }}>Sheeted</option>
                                                                  <option value="OPEN" {{ ($end1->gable ?? '') == 'OPEN' ? 'selected' : '' }}>Open
                                                                  </option>
                                                               </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                               <label class="form-label">Endwall Open #1 Notes</label>
                                                               <input id="end_open_1_note" class="form-control"
                                                                  value="{{ $end1->notes ?? '' }}">
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Endwall Open #2 - Length (m)</label>
                                                               <input id="end_open_2_len" class="form-control"
                                                                  value="{{ $end2->length_m ?? '' }}">
                                                            </div>
                                                            <div class="col-md-4">
                                                               <label class="form-label">Endwall Open #2 Gable</label>
                                                               <select id="end_open_2_gable" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="SHEETED" {{ ($end2->gable ?? '') == 'SHEETED' ? 'selected' : '' }}>Sheeted</option>
                                                                  <option value="OPEN" {{ ($end2->gable ?? '') == 'OPEN' ? 'selected' : '' }}>Open
                                                                  </option>
                                                               </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                               <label class="form-label">Endwall Open #2 Notes</label>
                                                               <input id="end_open_2_note" class="form-control"
                                                                  value="{{ $end2->notes ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <h6 class="mb-0 fw-semibold">Framed Openings (Table)</h6>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" id="addFO">+ Add
                                                               Opening</button>
                                                         </div>

                                                         <div class="table-responsive">
                                                            <table class="table table-bordered table-hover align-middle mb-0"
                                                               id="framedOpeningsTable">
                                                               <thead class="table-light">
                                                                  <tr>
                                                                     <th style="width:90px;">No.</th>
                                                                     <th>Size (HxW)</th>
                                                                     <th>Location</th>
                                                                     <th>Usage</th>
                                                                     <th style="width:60px;" class="text-center">Action</th>
                                                                  </tr>
                                                               </thead>
                                                               <tbody>
                                                                  @forelse($framedRows as $row)
                                                                     <tr>
                                                                        <td><input class="form-control fo_no" value="{{ $row->sr_no ?? '' }}"></td>
                                                                        <td><input class="form-control fo_size" value="{{ $row->size_hw ?? '' }}">
                                                                        </td>
                                                                        <td><input class="form-control fo_location"
                                                                              value="{{ $row->location ?? '' }}"></td>
                                                                        <td><input class="form-control fo_usage"
                                                                              value="{{ $row->opening_usage ?? '' }}"></td>
                                                                        <td class="text-center">
                                                                           <button type="button" class="btn btn-outline-danger btn-sm removeRow"
                                                                              title="Remove">&times;</button>
                                                                        </td>
                                                                     </tr>
                                                                  @empty
                                                                     <tr>
                                                                        <td><input class="form-control fo_no" value="1"></td>
                                                                        <td><input class="form-control fo_size"></td>
                                                                        <td><input class="form-control fo_location"></td>
                                                                        <td><input class="form-control fo_usage"></td>
                                                                        <td class="text-center">
                                                                           <button type="button" class="btn btn-outline-danger btn-sm removeRow"
                                                                              title="Remove">&times;</button>
                                                                        </td>
                                                                     </tr>
                                                                  @endforelse
                                                               </tbody>
                                                            </table>
                                                         </div>

                                                         <!-- <div class="d-flex justify-content-between mt-4">
                                                            <button type="button" class="btn btn-outline-secondary"
                                                               onclick="document.getElementById('tab4').checked=true">Back</button>
                                                            <button type="button" class="btn btn-primary"
                                                               onclick="document.getElementById('tab6').checked=true">Save & Next</button>
                                                         </div> -->

                                                      </div>
                                                   </div>

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





                                          {{-- SECTION 6: Additions + Canopy --}}

                                          <div class="accordion-item">
                                             <h2 class="accordion-header" id="h6">
                                                <button class="accordion-button collapsed" type="button" 
                                                   data-bs-target="#c6">
                                                   Additions + Canopy
                                                </button>
                                             </h2>

                                             <div id="c6" class="accordion-collapse collapse" data-bs-parent="#pebAccordion">
                                                <div class="accordion-body">

                                                   <div class="card shadow-sm border-0">
                                                      <div class="card-body">

                                                         <h6 class="mb-3 fw-semibold">Trims / Gutters / Eave</h6>

                                                         <div class="row g-3">
                                                            <div class="col-md-6">
                                                               <label class="form-label">Rake Trim & Corner Trim</label>
                                                               <input id="rake_corner_trim" class="form-control"
                                                                  value="{{ $additions->rake_corner_trim ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Eave Gutters & Downspouts</label>
                                                               <select id="eave_gutters_downspouts" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="YES" {{ ($additions->eave_gutters_downspouts ?? '') == 'YES' ? 'selected' : '' }}>Yes</option>
                                                                  <option value="NO" {{ ($additions->eave_gutters_downspouts ?? '') == 'NO' ? 'selected' : '' }}>No</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Eave Trims</label>
                                                               <select id="eave_trims" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="STANDARD" {{ ($additions->eave_trims ?? '') == 'STANDARD' ? 'selected' : '' }}>Standard</option>
                                                                  <option value="CURVED_EAVE" {{ ($additions->eave_trims ?? '') == 'CURVED_EAVE' ? 'selected' : '' }}>Curved Eave</option>
                                                               </select>
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <h6 class="mb-0 fw-semibold">Canopies (Repeatable)</h6>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" id="addCanopy">+ Add
                                                               Canopy</button>
                                                         </div>

                                                         <div class="table-responsive">
                                                            <table class="table table-bordered table-hover align-middle mb-0" id="canopyTable">
                                                               <thead class="table-light">
                                                                  <tr>
                                                                     <th style="width:90px;">No.</th>
                                                                     <th style="min-width:140px;">Wall</th>
                                                                     <th>Length (m)</th>
                                                                     <th>Width (m)</th>
                                                                     <th>Clr. Ht (m)</th>
                                                                     <th style="min-width:120px;">Soffit</th>
                                                                     <th style="min-width:140px;">Downspouts</th>
                                                                     <th>Return</th>
                                                                     <th>Kickouts</th>
                                                                     <th style="width:60px;" class="text-center">Action</th>
                                                                  </tr>
                                                               </thead>

                                                               <tbody>
                                                                  @forelse($canopies as $c)
                                                                     <tr>
                                                                        <td><input class="form-control canopy_no" value="{{ $c->canopy_no }}"></td>
                                                                        <td>
                                                                           <select class="form-select canopy_wall">
                                                                              <option value="">Select</option>
                                                                              <option value="SIDEWALL" {{ $c->wall == 'SIDEWALL' ? 'selected' : '' }}>Sidewall</option>
                                                                              <option value="ENDWALL" {{ $c->wall == 'ENDWALL' ? 'selected' : '' }}>
                                                                                 Endwall</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input class="form-control canopy_len" value="{{ $c->length_m }}"></td>
                                                                        <td><input class="form-control canopy_w" value="{{ $c->width_m }}"></td>
                                                                        <td><input class="form-control canopy_ht" value="{{ $c->clear_height_m }}">
                                                                        </td>
                                                                        <td>
                                                                           <select class="form-select canopy_soffit">
                                                                              <option value="">Select</option>
                                                                              <option value="YES" {{ $c->soffit == 'YES' ? 'selected' : '' }}>Yes
                                                                              </option>
                                                                              <option value="NO" {{ $c->soffit == 'NO' ? 'selected' : '' }}>No
                                                                              </option>
                                                                           </select>
                                                                        </td>
                                                                        <td>
                                                                           <select class="form-select canopy_downspouts">
                                                                              <option value="">Select</option>
                                                                              <option value="YES" {{ $c->downspouts == 'YES' ? 'selected' : '' }}>Yes
                                                                              </option>
                                                                              <option value="NO" {{ $c->downspouts == 'NO' ? 'selected' : '' }}>No
                                                                              </option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input class="form-control canopy_return"
                                                                              value="{{ $c->return_text }}"></td>
                                                                        <td><input class="form-control canopy_kickouts"
                                                                              value="{{ $c->kickouts_text }}"></td>
                                                                        <td class="text-center">
                                                                           <button type="button" class="btn btn-outline-danger btn-sm removeCanopy"
                                                                              title="Remove">&times;</button>
                                                                        </td>
                                                                     </tr>
                                                                  @empty
                                                                     <tr>
                                                                        <td><input class="form-control canopy_no" value="1"></td>
                                                                        <td>
                                                                           <select class="form-select canopy_wall">
                                                                              <option value="">Select</option>
                                                                              <option value="SIDEWALL">Sidewall</option>
                                                                              <option value="ENDWALL">Endwall</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input class="form-control canopy_len"></td>
                                                                        <td><input class="form-control canopy_w"></td>
                                                                        <td><input class="form-control canopy_ht"></td>
                                                                        <td>
                                                                           <select class="form-select canopy_soffit">
                                                                              <option value="">Select</option>
                                                                              <option value="YES">Yes</option>
                                                                              <option value="NO">No</option>
                                                                           </select>
                                                                        </td>
                                                                        <td>
                                                                           <select class="form-select canopy_downspouts">
                                                                              <option value="">Select</option>
                                                                              <option value="YES">Yes</option>
                                                                              <option value="NO">No</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input class="form-control canopy_return"></td>
                                                                        <td><input class="form-control canopy_kickouts"></td>
                                                                        <td class="text-center">
                                                                           <button type="button" class="btn btn-outline-danger btn-sm removeCanopy"
                                                                              title="Remove">&times;</button>
                                                                        </td>
                                                                     </tr>
                                                                  @endforelse
                                                               </tbody>
                                                            </table>
                                                         </div>

                                                         <div class="mt-3">
                                                            <label class="form-label">Canopy Notes</label>
                                                            <textarea id="canopy_notes" class="form-control"
                                                               rows="3">{{ $additions->canopy_notes ?? '' }}</textarea>
                                                         </div>

                                                         <!-- <div class="d-flex justify-content-between mt-4">
                                                            <button type="button" class="btn btn-outline-secondary"
                                                               onclick="document.getElementById('tab5').checked=true">Back</button>
                                                            <button type="button" class="btn btn-primary"
                                                               onclick="document.getElementById('tab7').checked=true">Save & Next</button>
                                                         </div> -->

                                                      </div>
                                                   </div>

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





                                          {{-- SECTION 7: Extensions + Fascia --}}
                                          <div class="accordion-item">
                                             <h2 class="accordion-header" id="h7">
                                                <button class="accordion-button collapsed" type="button" 
                                                   data-bs-target="#c7">
                                                   Extensions + Fascia
                                                </button>
                                             </h2>

                                             <div id="c7" class="accordion-collapse collapse" data-bs-parent="#pebAccordion">
                                                <div class="accordion-body">

                                                   <div class="card shadow-sm border-0">
                                                      <div class="card-body">

                                                         <div class="d-flex align-items-center justify-content-between mb-3">
                                                            <h6 class="mb-0 fw-semibold">Roof Extensions</h6>

                                                            <div class="d-flex gap-2 flex-wrap">
                                                               <button type="button" class="btn btn-outline-secondary btn-sm"
                                                                  id="clearEave">Clear Eave</button>
                                                               <button type="button" class="btn btn-outline-secondary btn-sm"
                                                                  id="clearRake">Clear Rake</button>
                                                               <button type="button" class="btn btn-outline-danger btn-sm"
                                                                  id="clearAllExt">Clear All</button>
                                                            </div>
                                                         </div>

                                                         {{-- EAVE --}}
                                                         <div class="border rounded-3 p-3 mb-3">
                                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                               <div class="fw-semibold">Roof Extension at Eave</div>

                                                               <div class="d-flex gap-2 flex-wrap">
                                                                  <button type="button" class="btn btn-outline-primary btn-sm"
                                                                     id="copyEaveToOther">
                                                                     Same as One End
                                                                  </button>
                                                                  <span class="badge text-bg-light">
                                                                     Total Length: <span id="eaveTotalLen">0</span> m
                                                                  </span>
                                                                  <span class="badge text-bg-light">
                                                                     Total Width: <span id="eaveTotalWid">0</span> m
                                                                  </span>
                                                               </div>
                                                            </div>

                                                            <div class="row g-3">
                                                               <div class="col-lg-3">
                                                                  <label class="form-label">One End Width (m)</label>
                                                                  <input type="number" step="0.001" id="eave_ext_one_w"
                                                                     class="form-control ext-num"
                                                                     value="{{ $extensions->eave_ext_one_w ?? '' }}">
                                                               </div>
                                                               <div class="col-lg-3">
                                                                  <label class="form-label">One End Length (m)</label>
                                                                  <input type="number" step="0.001" id="eave_ext_one_l"
                                                                     class="form-control ext-num"
                                                                     value="{{ $extensions->eave_ext_one_l ?? '' }}">
                                                               </div>
                                                               <div class="col-lg-3">
                                                                  <label class="form-label">Other End Width (m)</label>
                                                                  <input type="number" step="0.001" id="eave_ext_other_w"
                                                                     class="form-control ext-num"
                                                                     value="{{ $extensions->eave_ext_other_w ?? '' }}">
                                                               </div>
                                                               <div class="col-lg-3">
                                                                  <label class="form-label">Other End Length (m)</label>
                                                                  <input type="number" step="0.001" id="eave_ext_other_l"
                                                                     class="form-control ext-num"
                                                                     value="{{ $extensions->eave_ext_other_l ?? '' }}">
                                                               </div>
                                                            </div>
                                                         </div>

                                                         {{-- RAKE --}}
                                                         <div class="border rounded-3 p-3">
                                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                               <div class="fw-semibold">Roof Extension at Rake</div>

                                                               <div class="d-flex gap-2 flex-wrap">
                                                                  <button type="button" class="btn btn-outline-primary btn-sm"
                                                                     id="copyRakeToOther">
                                                                     Same as One End
                                                                  </button>
                                                                  <span class="badge text-bg-light">
                                                                     Total Length: <span id="rakeTotalLen">0</span> m
                                                                  </span>
                                                                  <span class="badge text-bg-light">
                                                                     Total Width: <span id="rakeTotalWid">0</span> m
                                                                  </span>
                                                               </div>
                                                            </div>

                                                            <div class="row g-3">
                                                               <div class="col-lg-3">
                                                                  <label class="form-label">One End Width (m)</label>
                                                                  <input type="number" step="0.001" id="rake_ext_one_w"
                                                                     class="form-control ext-num"
                                                                     value="{{ $extensions->rake_ext_one_w ?? '' }}">
                                                               </div>
                                                               <div class="col-lg-3">
                                                                  <label class="form-label">One End Length (m)</label>
                                                                  <input type="number" step="0.001" id="rake_ext_one_l"
                                                                     class="form-control ext-num"
                                                                     value="{{ $extensions->rake_ext_one_l ?? '' }}">
                                                               </div>
                                                               <div class="col-lg-3">
                                                                  <label class="form-label">Other End Width (m)</label>
                                                                  <input type="number" step="0.001" id="rake_ext_other_w"
                                                                     class="form-control ext-num"
                                                                     value="{{ $extensions->rake_ext_other_w ?? '' }}">
                                                               </div>
                                                               <div class="col-lg-3">
                                                                  <label class="form-label">Other End Length (m)</label>
                                                                  <input type="number" step="0.001" id="rake_ext_other_l"
                                                                     class="form-control ext-num"
                                                                     value="{{ $extensions->rake_ext_other_l ?? '' }}">
                                                               </div>
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- FASCIA --}}
                                                         <h6 class="mb-3 fw-semibold">Fascia</h6>

                                                         <div class="row g-3">
                                                            <div class="col-md-4">
                                                               <label class="form-label">Eave to Peak Distance (m)</label>
                                                               <input type="number" step="0.001" id="fascia_eave_to_peak"
                                                                  class="form-control ext-num"
                                                                  value="{{ $extensions->fascia_eave_to_peak ?? '' }}">
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Bottom Fascia to Top Eave Strut (m)</label>
                                                               <input type="number" step="0.001" id="fascia_bottom_to_eave_strut"
                                                                  class="form-control ext-num"
                                                                  value="{{ $extensions->fascia_bottom_to_eave_strut ?? '' }}">
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Fascia Height (m)</label>
                                                               <input type="number" step="0.001" id="fascia_height" class="form-control ext-num"
                                                                  value="{{ $extensions->fascia_height ?? '' }}">
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Fascia Cantilever (m)</label>
                                                               <input type="number" step="0.001" id="fascia_cantilever"
                                                                  class="form-control ext-num"
                                                                  value="{{ $extensions->fascia_cantilever ?? '' }}">
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Fascia Length (m)</label>
                                                               <input type="number" step="0.001" id="fascia_length" class="form-control ext-num"
                                                                  value="{{ $extensions->fascia_length ?? '' }}">
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Soffit (Type/Thickness/Colour)</label>
                                                               <input id="fascia_soffit_spec" class="form-control"
                                                                  value="{{ $extensions->fascia_soffit_spec ?? '' }}">
                                                            </div>

                                                            <div class="col-md-6">
                                                               <label class="form-label">Fascia Exterior Cladding
                                                                  (Type/Thickness/Colour)</label>
                                                               <input id="fascia_ext_cladding" class="form-control"
                                                                  value="{{ $extensions->fascia_ext_cladding ?? '' }}">
                                                            </div>

                                                            <div class="col-md-6">
                                                               <label class="form-label">Fascia Interior Cladding
                                                                  (Type/Thickness/Colour)</label>
                                                               <input id="fascia_int_cladding" class="form-control"
                                                                  value="{{ $extensions->fascia_int_cladding ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <!-- <div class="d-flex justify-content-between mt-4">
                                                            <button type="button" class="btn btn-outline-secondary"
                                                               onclick="document.getElementById('tab6').checked=true">
                                                               Back
                                                            </button>
                                                            <button type="button" class="btn btn-primary"
                                                               onclick="document.getElementById('tab8').checked=true">
                                                               Save & Next
                                                            </button>
                                                         </div> -->

                                                      </div>
                                                   </div>

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





                                          {{-- SECTION 8: Cranes + Mezz --}}

                                          <div class="accordion-item">
                                             <h2 class="accordion-header" id="h8">
                                                <button class="accordion-button collapsed" type="button" 
                                                   data-bs-target="#c8">
                                                   Cranes + Mezz
                                                </button>
                                             </h2>

                                             <div id="c8" class="accordion-collapse collapse" data-bs-parent="#pebAccordion">
                                                <div class="accordion-body">

                                                   <div class="card shadow-sm border-0">
                                                      <div class="card-body">

                                                         {{-- CRANES --}}
                                                         <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <h6 class="mb-0 fw-semibold">Cranes (Up to 3)</h6>
                                                            <div class="d-flex align-items-center gap-2">
                                                               <span class="badge text-bg-light">
                                                                  Rows: <span id="craneCount">0</span>/3
                                                               </span>
                                                               <button type="button" class="btn btn-outline-primary btn-sm" id="addCrane">
                                                                  + Add Crane
                                                               </button>
                                                            </div>
                                                         </div>

                                                         <div class="table-responsive">
                                                            <table class="table table-bordered table-sm align-middle mb-0" id="craneTable">
                                                               <thead class="table-light">
                                                                  <tr>
                                                                     <th style="width:70px;">No.</th>
                                                                     <th style="min-width:160px;">Type</th>
                                                                     <th style="width:80px;">Qty</th>
                                                                     <th style="width:130px;">Capacity (MT)</th>
                                                                     <th style="width:110px;">Span (m)</th>
                                                                     <th style="width:120px;">Hook Ht (m)</th>
                                                                     <th style="width:110px;">Run (m)</th>
                                                                     <th style="min-width:140px;">BM & BKT By</th>
                                                                     <th style="min-width:140px;">Rails & CRN By</th>
                                                                     <th style="width:60px;"></th>
                                                                  </tr>
                                                               </thead>

                                                               <tbody>
                                                                  @forelse($cranes as $c)
                                                                     <tr>
                                                                        <td>
                                                                           <input class="form-control form-control-sm crane_no"
                                                                              value="{{ $c->crane_no }}" readonly>
                                                                        </td>
                                                                        <td><input class="form-control form-control-sm crane_type"
                                                                              value="{{ $c->crane_type }}"></td>
                                                                        <td><input class="form-control form-control-sm crane_qty num-int"
                                                                              value="{{ $c->crane_qty }}"></td>
                                                                        <td><input class="form-control form-control-sm crane_cap num-dec"
                                                                              value="{{ $c->capacity_mt }}"></td>
                                                                        <td><input class="form-control form-control-sm crane_span num-dec"
                                                                              value="{{ $c->span_m }}"></td>
                                                                        <td><input class="form-control form-control-sm crane_hook num-dec"
                                                                              value="{{ $c->hook_ht_m }}"></td>
                                                                        <td><input class="form-control form-control-sm crane_run num-dec"
                                                                              value="{{ $c->run_m }}"></td>

                                                                        <td>
                                                                           <select class="form-select form-select-sm crane_bmby">
                                                                              <option value="">Select</option>
                                                                              <option value="KIRBY" {{ $c->bm_bkt_by == 'KIRBY' ? 'selected' : '' }}>
                                                                                 KIRBY</option>
                                                                              <option value="OTHERS" {{ $c->bm_bkt_by == 'OTHERS' ? 'selected' : '' }}>OTHERS</option>
                                                                           </select>
                                                                        </td>

                                                                        <td>
                                                                           <select class="form-select form-select-sm crane_railby">
                                                                              <option value="">Select</option>
                                                                              <option value="KIRBY" {{ $c->rails_crn_by == 'KIRBY' ? 'selected' : '' }}>KIRBY</option>
                                                                              <option value="OTHERS" {{ $c->rails_crn_by == 'OTHERS' ? 'selected' : '' }}>OTHERS</option>
                                                                           </select>
                                                                        </td>

                                                                        <td class="text-center">
                                                                           <button type="button" class="btn btn-outline-danger btn-sm removeRow"
                                                                              title="Remove">
                                                                              ✕
                                                                           </button>
                                                                        </td>
                                                                     </tr>
                                                                  @empty
                                                                     {{-- Start with 1 empty row --}}
                                                                     <tr>
                                                                        <td><input class="form-control form-control-sm crane_no" value="1"
                                                                              readonly></td>
                                                                        <td><input class="form-control form-control-sm crane_type"
                                                                              placeholder="e.g. EOT Crane"></td>
                                                                        <td><input class="form-control form-control-sm crane_qty num-int"
                                                                              placeholder="0"></td>
                                                                        <td><input class="form-control form-control-sm crane_cap num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td><input class="form-control form-control-sm crane_span num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td><input class="form-control form-control-sm crane_hook num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td><input class="form-control form-control-sm crane_run num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td>
                                                                           <select class="form-select form-select-sm crane_bmby">
                                                                              <option value="">Select</option>
                                                                              <option value="KIRBY">KIRBY</option>
                                                                              <option value="OTHERS">OTHERS</option>
                                                                           </select>
                                                                        </td>
                                                                        <td>
                                                                           <select class="form-select form-select-sm crane_railby">
                                                                              <option value="">Select</option>
                                                                              <option value="KIRBY">KIRBY</option>
                                                                              <option value="OTHERS">OTHERS</option>
                                                                           </select>
                                                                        </td>
                                                                        <td class="text-center">
                                                                           <button type="button"
                                                                              class="btn btn-outline-danger btn-sm removeRow">✕</button>
                                                                        </td>
                                                                     </tr>
                                                                  @endforelse
                                                               </tbody>
                                                            </table>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- MEZZ 1 --}}
                                                         <h6 class="mb-3 fw-semibold">Mezzanine 1</h6>
                                                         <div class="row g-3">
                                                            <div class="col-lg-3">
                                                               <label class="form-label">L.L (kN/m²)</label>
                                                               <input type="number" step="0.001" class="form-control num-dec" id="mezz1_ll"
                                                                  value="{{ $mezzanines[1]->live_load ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">D.L (kN/m²)</label>
                                                               <input type="number" step="0.001" class="form-control num-dec" id="mezz1_dl"
                                                                  value="{{ $mezzanines[1]->dead_load ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Bottom Clear Height (m)</label>
                                                               <input type="number" step="0.001" class="form-control num-dec" id="mezz1_clr"
                                                                  value="{{ $mezzanines[1]->clear_height ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Area (m²)</label>
                                                               <input type="number" step="0.001" class="form-control num-dec" id="mezz1_area"
                                                                  value="{{ $mezzanines[1]->area_m2 ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">No. of F.O.</label>
                                                               <input type="number" class="form-control num-int" id="mezz1_fo"
                                                                  value="{{ $mezzanines[1]->no_of_openings ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">No. of Staircases</label>
                                                               <input type="number" class="form-control num-int" id="mezz1_stairs"
                                                                  value="{{ $mezzanines[1]->no_of_stairs ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- MEZZ 2 --}}
                                                         <h6 class="mb-3 fw-semibold">Mezzanine 2</h6>
                                                         <div class="row g-3">
                                                            <div class="col-lg-3">
                                                               <label class="form-label">L.L (kN/m²)</label>
                                                               <input type="number" step="0.001" class="form-control num-dec" id="mezz2_ll"
                                                                  value="{{ $mezzanines[2]->live_load ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">D.L (kN/m²)</label>
                                                               <input type="number" step="0.001" class="form-control num-dec" id="mezz2_dl"
                                                                  value="{{ $mezzanines[2]->dead_load ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Clear Height (m)</label>
                                                               <input type="number" step="0.001" class="form-control num-dec" id="mezz2_clr"
                                                                  value="{{ $mezzanines[2]->clear_height ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Area (m²)</label>
                                                               <input type="number" step="0.001" class="form-control num-dec" id="mezz2_area"
                                                                  value="{{ $mezzanines[2]->area_m2 ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">No. of F.O.</label>
                                                               <input type="number" class="form-control num-int" id="mezz2_fo"
                                                                  value="{{ $mezzanines[2]->no_of_openings ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">No. of Staircases</label>
                                                               <input type="number" class="form-control num-int" id="mezz2_stairs"
                                                                  value="{{ $mezzanines[2]->no_of_stairs ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- Stair / Handrail / Deck --}}
                                                         <h6 class="mb-3 fw-semibold">Staircases / Handrails / Deck Sheet</h6>
                                                         <div class="row g-3">
                                                            <div class="col-md-4">
                                                               <label class="form-label">Staircases By</label>
                                                               <select id="stair_by" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="OTHERS">OTHERS</option>
                                                                  <option value="KIRBY">KIRBY</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Handrails By</label>
                                                               <select id="handrail_by" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="OTHERS">OTHERS</option>
                                                                  <option value="KIRBY">KIRBY</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Deck Sheet Thickness</label>
                                                               <input type="number" step="0.001" id="deck_sheet_thk"
                                                                  class="form-control num-dec">
                                                            </div>
                                                         </div>

                                                         <!-- <div class="d-flex justify-content-between mt-4">
                                                            <button type="button" class="btn btn-outline-secondary"
                                                               onclick="document.getElementById('tab7').checked=true">
                                                               Back
                                                            </button>
                                                            <button type="button" class="btn btn-primary"
                                                               onclick="document.getElementById('tab9').checked=true">
                                                               Save & Next
                                                            </button>
                                                         </div> -->

                                                      </div>
                                                   </div>

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







                                          {{-- SECTION 9: Liners + Anchor/Gutters --}}
                                          <div class="accordion-item">
                                             <h2 class="accordion-header" id="h9">
                                                <button class="accordion-button collapsed" type="button" 
                                                   data-bs-target="#c9">
                                                   Liners + Anchor/Gutters
                                                </button>
                                             </h2>

                                             <div id="c9" class="accordion-collapse collapse" data-bs-parent="#pebAccordion">
                                                <div class="accordion-body">

                                                   <div class="card shadow-sm border-0">
                                                      <div class="card-body">

                                                         {{-- WALL LINER --}}
                                                         <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <h6 class="mb-0 fw-semibold">Interior Wall Liner (Repeatable)</h6>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" id="addWallLiner">+ Add
                                                               Row</button>
                                                         </div>

                                                         <div class="table-responsive">
                                                            <table class="table table-bordered table-sm align-middle mb-0" id="wallLinerTable">
                                                               <thead class="table-light">
                                                                  <tr>
                                                                     <th style="width:120px;">Length (m)</th>
                                                                     <th style="width:120px;">Height (m)</th>
                                                                     <th style="min-width:160px;">Type</th>
                                                                     <th style="width:120px;">Thickness</th>
                                                                     <th style="width:90px;">GA</th>
                                                                     <th style="min-width:140px;">Colour</th>
                                                                     <th style="width:60px;"></th>
                                                                  </tr>
                                                               </thead>
                                                               <tbody>
                                                                  @forelse($wallLiners as $w)
                                                                     <tr>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm wl_len num-dec"
                                                                              value="{{ $w->length_m }}"></td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm wl_ht num-dec"
                                                                              value="{{ $w->height_m }}"></td>
                                                                        <td><input class="form-control form-control-sm wl_type"
                                                                              value="{{ $w->liner_type }}"></td>
                                                                        <td><input class="form-control form-control-sm wl_thk"
                                                                              value="{{ $w->thickness }}"></td>
                                                                        <td><input class="form-control form-control-sm wl_ga" value="{{ $w->ga }}">
                                                                        </td>
                                                                        <td><input class="form-control form-control-sm wl_col"
                                                                              value="{{ $w->colour }}"></td>
                                                                        <td class="text-center">
                                                                           <button type="button" class="btn btn-outline-danger btn-sm removeRow"
                                                                              title="Remove">✕</button>
                                                                        </td>
                                                                     </tr>
                                                                  @empty
                                                                     <tr>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm wl_len num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm wl_ht num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td><input class="form-control form-control-sm wl_type" placeholder="Type">
                                                                        </td>
                                                                        <td><input class="form-control form-control-sm wl_thk"
                                                                              placeholder="Thickness"></td>
                                                                        <td><input class="form-control form-control-sm wl_ga" placeholder="GA">
                                                                        </td>
                                                                        <td><input class="form-control form-control-sm wl_col"
                                                                              placeholder="Colour"></td>
                                                                        <td class="text-center"><button type="button"
                                                                              class="btn btn-outline-danger btn-sm removeRow">✕</button></td>
                                                                     </tr>
                                                                  @endforelse
                                                               </tbody>
                                                            </table>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- ROOF LINER --}}
                                                         <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <h6 class="mb-0 fw-semibold">Interior Roof Liner (Repeatable)</h6>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" id="addRoofLiner">+ Add
                                                               Row</button>
                                                         </div>

                                                         <div class="table-responsive">
                                                            <table class="table table-bordered table-sm align-middle mb-0" id="roofLinerTable">
                                                               <thead class="table-light">
                                                                  <tr>
                                                                     <th style="width:120px;">Length (m)</th>
                                                                     <th style="width:120px;">Height (m)</th>
                                                                     <th style="min-width:160px;">Type</th>
                                                                     <th style="width:120px;">Thickness</th>
                                                                     <th style="width:90px;">GA</th>
                                                                     <th style="min-width:140px;">Colour</th>
                                                                     <th style="width:60px;"></th>
                                                                  </tr>
                                                               </thead>
                                                               <tbody>
                                                                  @forelse($roofLiners as $r)
                                                                     <tr>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm rl_len num-dec"
                                                                              value="{{ $r->length_m }}"></td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm rl_ht num-dec"
                                                                              value="{{ $r->height_m }}"></td>
                                                                        <td><input class="form-control form-control-sm rl_type"
                                                                              value="{{ $r->liner_type }}"></td>
                                                                        <td><input class="form-control form-control-sm rl_thk"
                                                                              value="{{ $r->thickness }}"></td>
                                                                        <td><input class="form-control form-control-sm rl_ga" value="{{ $r->ga }}">
                                                                        </td>
                                                                        <td><input class="form-control form-control-sm rl_col"
                                                                              value="{{ $r->colour }}"></td>
                                                                        <td class="text-center">
                                                                           <button type="button" class="btn btn-outline-danger btn-sm removeRow"
                                                                              title="Remove">✕</button>
                                                                        </td>
                                                                     </tr>
                                                                  @empty
                                                                     <tr>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm rl_len num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm rl_ht num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td><input class="form-control form-control-sm rl_type" placeholder="Type">
                                                                        </td>
                                                                        <td><input class="form-control form-control-sm rl_thk"
                                                                              placeholder="Thickness"></td>
                                                                        <td><input class="form-control form-control-sm rl_ga" placeholder="GA">
                                                                        </td>
                                                                        <td><input class="form-control form-control-sm rl_col"
                                                                              placeholder="Colour"></td>
                                                                        <td class="text-center"><button type="button"
                                                                              class="btn btn-outline-danger btn-sm removeRow">✕</button></td>
                                                                     </tr>
                                                                  @endforelse
                                                               </tbody>
                                                            </table>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- PARTITIONS --}}
                                                         <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <h6 class="mb-0 fw-semibold">Partitions (Longitudinal / Transverse)</h6>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" id="addPartition">+ Add
                                                               Partition</button>
                                                         </div>

                                                         <div class="table-responsive">
                                                            <table class="table table-bordered table-sm align-middle mb-0" id="partitionTable">
                                                               <thead class="table-light">
                                                                  <tr>
                                                                     <th style="min-width:170px;">Orientation</th>
                                                                     <th style="width:120px;">Length (m)</th>
                                                                     <th style="width:120px;">Height (m)</th>
                                                                     <th style="min-width:140px;">Sheeted</th>
                                                                     <th style="min-width:140px;">Type</th>
                                                                     <th style="width:120px;">Thickness</th>
                                                                     <th style="min-width:140px;">Color</th>
                                                                     <th style="width:60px;"></th>
                                                                  </tr>
                                                               </thead>
                                                               <tbody>
                                                                  @forelse($partitions as $p)
                                                                     <tr>
                                                                        <td>
                                                                           <select class="form-select form-select-sm part_orient">
                                                                              <option value="">Select</option>
                                                                              <option value="LONGITUDINAL" {{ $p->orientation == 'LONGITUDINAL' ? 'selected' : '' }}>Longitudinal</option>
                                                                              <option value="TRANSVERSE" {{ $p->orientation == 'TRANSVERSE' ? 'selected' : '' }}>Transverse</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm part_len num-dec"
                                                                              value="{{ $p->length_m }}"></td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm part_ht num-dec"
                                                                              value="{{ $p->height_m }}"></td>
                                                                        <td>
                                                                           <select class="form-select form-select-sm part_sheeted">
                                                                              <option value="">Select</option>
                                                                              <option value="ONE_SIDE" {{ $p->sheeted == 'ONE_SIDE' ? 'selected' : '' }}>One Side</option>
                                                                              <option value="TWO_SIDES" {{ $p->sheeted == 'TWO_SIDES' ? 'selected' : '' }}>Two Sides</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input class="form-control form-control-sm part_type"
                                                                              value="{{ $p->part_type }}"></td>
                                                                        <td><input class="form-control form-control-sm part_thk"
                                                                              value="{{ $p->thickness }}"></td>
                                                                        <td><input class="form-control form-control-sm part_col"
                                                                              value="{{ $p->colour }}"></td>
                                                                        <td class="text-center">
                                                                           <button type="button" class="btn btn-outline-danger btn-sm removeRow"
                                                                              title="Remove">✕</button>
                                                                        </td>
                                                                     </tr>
                                                                  @empty
                                                                     <tr>
                                                                        <td>
                                                                           <select class="form-select form-select-sm part_orient">
                                                                              <option value="">Select</option>
                                                                              <option value="LONGITUDINAL">Longitudinal</option>
                                                                              <option value="TRANSVERSE">Transverse</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm part_len num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm part_ht num-dec"
                                                                              placeholder="0.000"></td>
                                                                        <td>
                                                                           <select class="form-select form-select-sm part_sheeted">
                                                                              <option value="">Select</option>
                                                                              <option value="ONE_SIDE">One Side</option>
                                                                              <option value="TWO_SIDES">Two Sides</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input class="form-control form-control-sm part_type"
                                                                              placeholder="Type"></td>
                                                                        <td><input class="form-control form-control-sm part_thk"
                                                                              placeholder="Thickness"></td>
                                                                        <td><input class="form-control form-control-sm part_col"
                                                                              placeholder="Color"></td>
                                                                        <td class="text-center"><button type="button"
                                                                              class="btn btn-outline-danger btn-sm removeRow">✕</button></td>
                                                                     </tr>
                                                                  @endforelse
                                                               </tbody>
                                                            </table>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- ANCHOR + VALLEY --}}
                                                         <h6 class="mb-3 fw-semibold">Anchor Bolts / Valley Gutters</h6>

                                                         <div class="row g-3">
                                                            <div class="col-md-4">
                                                               <label class="form-label">Anchor Bolts By</label>
                                                               <select id="anchor_bolts_by" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="OTHERS" {{ ($linerHeader->anchor_bolts_by ?? '') == 'OTHERS' ? 'selected' : '' }}>By Others</option>
                                                                  <option value="MEKING" {{ ($linerHeader->anchor_bolts_by ?? '') == 'MEKING' ? 'selected' : '' }}>By MEKING STEEL</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-md-8">
                                                               <label class="form-label">If By MEKING, Supply</label>
                                                               <select id="anchor_supply" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="FROM_STOCK" {{ ($linerHeader->anchor_supply ?? '') == 'FROM_STOCK' ? 'selected' : '' }}>From Stock</option>
                                                                  <option value="SHIP_WITH_BUILDING" {{ ($linerHeader->anchor_supply ?? '') == 'SHIP_WITH_BUILDING' ? 'selected' : '' }}>Ship With Building</option>
                                                                  <option value="SHIP_SEPARATE" {{ ($linerHeader->anchor_supply ?? '') == 'SHIP_SEPARATE' ? 'selected' : '' }}>Ship Separate</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-md-6">
                                                               <label class="form-label">Valley Gutters By</label>
                                                               <select id="valley_gutters_by" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="OTHERS" {{ ($linerHeader->valley_gutters_by ?? '') == 'OTHERS' ? 'selected' : '' }}>By Others</option>
                                                                  <option value="KIRBY" {{ ($linerHeader->valley_gutters_by ?? '') == 'KIRBY' ? 'selected' : '' }}>By KIRBY</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-md-6">
                                                               <label class="form-label">Valley Gutters Specification</label>
                                                               <input id="valley_gutters_spec" class="form-control"
                                                                  value="{{ $linerHeader->valley_gutters_spec ?? '' }}">
                                                            </div>

                                                            <div class="col-md-6">
                                                               <label class="form-label">Valley Gutter Downspouts By</label>
                                                               <select id="valley_downspouts_by" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="OTHERS" {{ ($linerHeader->valley_downspouts_by ?? '') == 'OTHERS' ? 'selected' : '' }}>By Others</option>
                                                                  <option value="KIRBY" {{ ($linerHeader->valley_downspouts_by ?? '') == 'KIRBY' ? 'selected' : '' }}>By KIRBY</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-md-6">
                                                               <label class="form-label">Valley Downspouts Specification</label>
                                                               <input id="valley_downspouts_spec" class="form-control"
                                                                  value="{{ $linerHeader->valley_downspouts_spec ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <!-- <div class="d-flex justify-content-between mt-4">
                                                            <button type="button" class="btn btn-outline-secondary"
                                                               onclick="document.getElementById('tab8').checked=true">
                                                               Back
                                                            </button>
                                                            <button type="button" class="btn btn-primary"
                                                               onclick="document.getElementById('tab10').checked=true">
                                                               Save & Next
                                                            </button>
                                                         </div> -->

                                                      </div>
                                                   </div>

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


                                          {{-- SECTION 10: Accessories + Insulation + Statutory --}}
                                          <div class="accordion-item">
                                             <h2 class="accordion-header" id="h10">
                                                <button class="accordion-button collapsed" type="button" 
                                                   data-bs-target="#c10" aria-expanded="false" aria-controls="c10">
                                                   Accessories + Insulation + Statutory
                                                </button>
                                             </h2>

                                             <div id="c10" class="accordion-collapse collapse" aria-labelledby="h10"
                                                data-bs-parent="#pebAccordion">
                                                <div class="accordion-body">

                                                   <div class="card shadow-sm border-0">
                                                      <div class="card-body">

                                                         {{-- STANDARD ACCESSORIES --}}
                                                         <h6 class="fw-semibold mb-3">Standard Accessories</h6>

                                                         <div class="row g-3">
                                                            <div class="col-lg-3">
                                                               <label class="form-label">Aluminium Windows 1m x 1m (Qty)</label>
                                                               <input type="number" class="form-control" id="alm_win"
                                                                  value="{{ $accessoryHeader->alm_win ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Fixed Louvers 1m x 1m (Qty)</label>
                                                               <input type="number" class="form-control" id="fxd_louver_qty"
                                                                  value="{{ $accessoryHeader->fxd_louver_qty ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Wall Lights 1m x 4m (Qty)</label>
                                                               <input type="number" class="form-control" id="wall_light_qty"
                                                                  value="{{ $accessoryHeader->wall_light_qty ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Turbo Vent (Qty)</label>
                                                               <input type="number" class="form-control" id="turbo_vent"
                                                                  value="{{ $accessoryHeader->turbo_vent ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Single Walk Door (30 70M) Qty</label>
                                                               <input type="number" class="form-control" id="sw_3070m_qty"
                                                                  value="{{ $accessoryHeader->sw_3070m_qty ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Single Walk Door (30 70G) Qty</label>
                                                               <input type="number" class="form-control" id="sw_3070g_qty"
                                                                  value="{{ $accessoryHeader->sw_3070g_qty ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Double Walk Door (60 70M) Qty</label>
                                                               <input type="number" class="form-control" id="dw_6070m_qty"
                                                                  value="{{ $accessoryHeader->dw_6070m_qty ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Double Walk Door (60 70G) Qty</label>
                                                               <input type="number" class="form-control" id="dw_6070g_qty"
                                                                  value="{{ $accessoryHeader->dw_6070g_qty ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- SLIDE DOORS --}}
                                                         <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <h6 class="mb-0 fw-semibold">Slide Doors (Repeatable)</h6>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" id="addSlideDoor">
                                                               + Add Slide Door
                                                            </button>
                                                         </div>

                                                         <div class="table-responsive">
                                                            <table class="table table-bordered table-sm align-middle mb-0" id="slideDoorTable">
                                                               <thead class="table-light">
                                                                  <tr>
                                                                     <th style="min-width:160px;">Single/Double</th>
                                                                     <th style="width:140px;">Width (m)</th>
                                                                     <th style="width:140px;">Height (m)</th>
                                                                     <th style="width:110px;">Qty</th>
                                                                     <th style="width:60px;"></th>
                                                                  </tr>
                                                               </thead>
                                                               <tbody>
                                                                  @forelse($slideDoors as $d)
                                                                     <tr>
                                                                        <td>
                                                                           <select class="form-select form-select-sm sd_type">
                                                                              <option value="">Select</option>
                                                                              <option value="SINGLE" {{ $d->door_type == 'SINGLE' ? 'selected' : '' }}>Single</option>
                                                                              <option value="DOUBLE" {{ $d->door_type == 'DOUBLE' ? 'selected' : '' }}>Double</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm sd_w" value="{{ $d->width_m }}">
                                                                        </td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm sd_h" value="{{ $d->height_m }}">
                                                                        </td>
                                                                        <td><input type="number" class="form-control form-control-sm sd_qty"
                                                                              value="{{ $d->qty }}"></td>
                                                                        <td class="text-center"><button type="button"
                                                                              class="btn btn-outline-danger btn-sm removeRow">✕</button></td>
                                                                     </tr>
                                                                  @empty
                                                                     <tr>
                                                                        <td>
                                                                           <select class="form-select form-select-sm sd_type">
                                                                              <option value="">Select</option>
                                                                              <option value="SINGLE">Single</option>
                                                                              <option value="DOUBLE">Double</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm sd_w" placeholder="0.000"></td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm sd_h" placeholder="0.000"></td>
                                                                        <td><input type="number" class="form-control form-control-sm sd_qty"
                                                                              placeholder="0"></td>
                                                                        <td class="text-center"><button type="button"
                                                                              class="btn btn-outline-danger btn-sm removeRow">✕</button></td>
                                                                     </tr>
                                                                  @endforelse
                                                               </tbody>
                                                            </table>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- ROLL UP DOORS --}}
                                                         <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <h6 class="mb-0 fw-semibold">Roll Up Doors (Repeatable)</h6>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" id="addRollDoor">
                                                               + Add Roll Door
                                                            </button>
                                                         </div>

                                                         <div class="table-responsive">
                                                            <table class="table table-bordered table-sm align-middle mb-0" id="rollDoorTable">
                                                               <thead class="table-light">
                                                                  <tr>
                                                                     <th style="min-width:170px;">Manual/Electric</th>
                                                                     <th style="width:140px;">Width (m)</th>
                                                                     <th style="width:140px;">Height (m)</th>
                                                                     <th style="width:110px;">Qty</th>
                                                                     <th style="width:60px;"></th>
                                                                  </tr>
                                                               </thead>
                                                               <tbody>
                                                                  @forelse($rollDoors ?? [] as $r)
                                                                     <tr>
                                                                        <td>
                                                                           <select class="form-select form-select-sm rd_type">
                                                                              <option value="">Select</option>
                                                                              <option value="MANUAL" {{ $r->door_type == 'MANUAL' ? 'selected' : '' }}>Manual</option>
                                                                              <option value="ELECTRIC" {{ $r->door_type == 'ELECTRIC' ? 'selected' : '' }}>Electric</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm rd_w" value="{{ $r->width_m }}">
                                                                        </td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm rd_h" value="{{ $r->height_m }}">
                                                                        </td>
                                                                        <td><input type="number" class="form-control form-control-sm rd_qty"
                                                                              value="{{ $r->qty }}"></td>
                                                                        <td class="text-center"><button type="button"
                                                                              class="btn btn-outline-danger btn-sm removeRow">✕</button></td>
                                                                     </tr>
                                                                  @empty
                                                                     <tr>
                                                                        <td>
                                                                           <select class="form-select form-select-sm rd_type">
                                                                              <option value="">Select</option>
                                                                              <option value="MANUAL">Manual</option>
                                                                              <option value="ELECTRIC">Electric</option>
                                                                           </select>
                                                                        </td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm rd_w" placeholder="0.000"></td>
                                                                        <td><input type="number" step="0.001"
                                                                              class="form-control form-control-sm rd_h" placeholder="0.000"></td>
                                                                        <td><input type="number" class="form-control form-control-sm rd_qty"
                                                                              placeholder="0"></td>
                                                                        <td class="text-center"><button type="button"
                                                                              class="btn btn-outline-danger btn-sm removeRow">✕</button></td>
                                                                     </tr>
                                                                  @endforelse
                                                               </tbody>
                                                            </table>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- SKYLIGHTS / RIDGE / CURBS / JACKS --}}
                                                         <h6 class="fw-semibold mb-3">Skylights / Ridge Vent / Roof Curbs / Roof Jacks</h6>

                                                         <div class="row g-3">
                                                            <div class="col-md-6">
                                                               <label class="form-label">Skylights Spec</label>
                                                               <input class="form-control" id="skylights_spec"
                                                                  value="{{ $accessoryHeader->skylights_spec ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Skylight Supporting Mesh</label>
                                                               <select id="skylight_mesh" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="YES" {{ ($accessoryHeader->skylight_mesh ?? '') == 'YES' ? 'selected' : '' }}>Yes</option>
                                                                  <option value="NO" {{ ($accessoryHeader->skylight_mesh ?? '') == 'NO' ? 'selected' : '' }}>No</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Ridge Vent Spec</label>
                                                               <input class="form-control" id="ridge_vent_spec"
                                                                  value="{{ $accessoryHeader->ridge_vent_spec ?? '' }}">
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Roof Curbs 1.2x1.2 (Qty)</label>
                                                               <input type="number" class="form-control" id="curb_12_qty"
                                                                  value="{{ $accessoryHeader->curb_12_qty ?? '' }}">
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Roof Curbs 0.9x0.9 (Qty)</label>
                                                               <input type="number" class="form-control" id="curb_09_qty"
                                                                  value="{{ $accessoryHeader->curb_09_qty ?? '' }}">
                                                            </div>

                                                            <div class="col-md-4">
                                                               <label class="form-label">Roof Curbs 0.6x0.6 (Qty)</label>
                                                               <input type="number" class="form-control" id="curb_06_qty"
                                                                  value="{{ $accessoryHeader->curb_06_qty ?? '' }}">
                                                            </div>

                                                            <div class="col-md-6">
                                                               <label class="form-label">Roof Jacks 0.15x0.30 (Qty)</label>
                                                               <input type="number" class="form-control" id="jack_015_qty"
                                                                  value="{{ $accessoryHeader->jack_015_qty ?? '' }}">
                                                            </div>

                                                            <div class="col-md-6">
                                                               <label class="form-label">Roof Jacks 0.05x0.10 (Qty)</label>
                                                               <input type="number" class="form-control" id="jack_005_qty"
                                                                  value="{{ $accessoryHeader->jack_005_qty ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- INSULATION --}}
                                                         <h6 class="fw-semibold mb-3">Insulation</h6>

                                                         <div class="row g-3">
                                                            <div class="col-lg-3">
                                                               <label class="form-label">Insulation</label>
                                                               <select id="insulation_required" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="REQUIRED" {{ ($accessoryHeader->insulation_required ?? '') == 'REQUIRED' ? 'selected' : '' }}>Required</option>
                                                                  <option value="NOT_REQUIRED" {{ ($accessoryHeader->insulation_required ?? '') == 'NOT_REQUIRED' ? 'selected' : '' }}>Not Required</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">By</label>
                                                               <select id="insulation_by" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="KIRBY" {{ ($accessoryHeader->insulation_by ?? '') == 'KIRBY' ? 'selected' : '' }}>By Kirby</option>
                                                                  <option value="OTHERS" {{ ($accessoryHeader->insulation_by ?? '') == 'OTHERS' ? 'selected' : '' }}>By Others</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Roof Area (m²)</label>
                                                               <input class="form-control" id="roof_area_m2"
                                                                  value="{{ $accessoryHeader->roof_area_m2 ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Walls Area (m²)</label>
                                                               <input class="form-control" id="walls_area_m2"
                                                                  value="{{ $accessoryHeader->walls_area_m2 ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Walls Thickness (mm)</label>
                                                               <input class="form-control" id="walls_ins_thk"
                                                                  value="{{ $accessoryHeader->walls_ins_thk ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Parts Area (m²)</label>
                                                               <input class="form-control" id="parts_area_m2"
                                                                  value="{{ $accessoryHeader->parts_area_m2 ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Parts Thickness (mm)</label>
                                                               <input class="form-control" id="parts_ins_thk"
                                                                  value="{{ $accessoryHeader->parts_ins_thk ?? '' }}">
                                                            </div>

                                                            <div class="col-lg-3">
                                                               <label class="form-label">Facing</label>
                                                               <select id="ins_facing" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="MB2001" {{ ($accessoryHeader->ins_facing ?? '') == 'MB2001' ? 'selected' : '' }}>MB2001</option>
                                                                  <option value="VINYL" {{ ($accessoryHeader->ins_facing ?? '') == 'VINYL' ? 'selected' : '' }}>VINYL</option>
                                                                  <option value="FSK" {{ ($accessoryHeader->ins_facing ?? '') == 'FSK' ? 'selected' : '' }}>FSK</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-12">
                                                               <label class="form-label">Insulation Note</label>
                                                               <textarea id="ins_note" class="form-control"
                                                                  rows="3">{{ $accessoryHeader->ins_note ?? '' }}</textarea>
                                                            </div>
                                                         </div>

                                                         <hr class="my-4">

                                                         {{-- STATUTORY --}}
                                                         <h6 class="fw-semibold mb-3">Statutory Requirements</h6>

                                                         <div class="row g-3">
                                                            <div class="col-lg-3">
                                                               <label class="form-label">Statutory Requirements?</label>
                                                               <select id="stat_req" class="form-select">
                                                                  <option value="">Select</option>
                                                                  <option value="YES" {{ ($accessoryHeader->stat_req ?? '') == 'YES' ? 'selected' : '' }}>Yes</option>
                                                                  <option value="NO" {{ ($accessoryHeader->stat_req ?? '') == 'NO' ? 'selected' : '' }}>No</option>
                                                               </select>
                                                            </div>

                                                            <div class="col-md-9">
                                                               <label class="form-label">If Yes, Specify</label>
                                                               <input id="stat_req_note" class="form-control"
                                                                  value="{{ $accessoryHeader->stat_req_note ?? '' }}">
                                                            </div>
                                                         </div>

                                                         <!-- <div class="d-flex justify-content-between mt-4">
                                                            <button type="button" class="btn btn-outline-secondary"
                                                               onclick="document.getElementById('tab9').checked=true">
                                                               Back
                                                            </button>
                                                            <button type="button" class="btn btn-success">
                                                               Save
                                                            </button>
                                                         </div> -->

                                                      </div>
                                                   </div>

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







                                       </div>

                                       </div>

                                    <div class="d-flex justify-content-between mt-4">
                                       <button type="button" class="btn btn-secondary" onclick="document.getElementById('tab1').checked=true">
                                          < Back</button>
                                             <button id="saveStep2" class="btn btn-primary">
                                                Next &gt;
                                             </button>
                                    </div>

                              </div>
                           </div>




                           {{-- TAB 3 --}}
                         <div id="content3" class="tab-content">
                           <!-- Description -->
                           <div class="mb-4">
                              <label for="description" class="form-label">Project Description</label>
                              <textarea id="description" rows="5" class="form-control" placeholder="Enter description">{{ $project->project_desc ?? '' }}</textarea>
                           </div>

                           <hr>

                           <div class="row g-3">
                              <!-- Final Quote Value -->
                              <div class="col-md-6">
                                    <label for="quoteValue" class="form-label">Quote Value</label>
                                    <input type="number" id="quoteValue" name="estimate_cost" placeholder="Enter Final Quote Value" class="form-control"
                                       value="{{ $leads->estimate_cost ?? '' }}" >

                                    <small id="formattedCostDisplay" class="text-primary font-weight-bold mt-1 d-block"></small>
                              </div>

                              <!-- Expected Closure Date -->
                              <div class="col-md-6">
                                    <label for="expectedClosure" class="form-label">Expected Closure Date</label>
                                    <input type="date" id="expectedClosure" name="expectedClosure" placeholder="Enter Expected Closure Date" class="form-control" value="{{ $project->expected_closure ?? '' }}">
                              </div>

                              <!-- Tonnage -->
                              <div class="col-md-6">
                                    <label for="tonnage" class="form-label">Tonnage</label>
                                    <input type="text" id="tonnage" placeholder="Enter Tonnage Value" class="form-control" value="{{ $project->tonnage ?? '' }}">
                              </div>
                           </div>

                           <div class="d-flex justify-content-between gap-2 mt-4">
                              <label for="tab2" class="btn btn-secondary">&lt; Back</label>
                              <button id="saveStep3" class="btn btn-primary">Next &gt;</button>
                           </div>
                        </div>

                           {{-- TAB 4 --}}

                           <div id="content4" class="tab-content">
                              <div class="card shadow-sm mb-4">
                                 <!-- Card Header -->
                                 <div class="card-header bg-primary project-brk text-white">
                                    <h5 class="mb-0 text-white">Project Cost Breakdown</h5>
                                 </div>

                                 <div class="card-body">
                                    <!-- Final Quote Value & Total Cost -->
                                    <div class="d-flex justify-content-between align-items-center mb-4 p-3 bg-light border rounded">
                                       <div>
                                          <h6 class="mb-0 fw-semibold">Final Quote Value</h6>
                                          <span class="text-primary fs-5">Rs {{ $project->project_cost ?? '0.00' }}</span>
                                       </div>
                                       <div>
                                          <h6 class="mb-0 fw-semibold">Total Cost</h6>
                                          <span class="text-success fs-5">Rs {{ $totalCost ?? '0.00' }}</span>
                                       </div>
                                    </div>

                                    <!-- Cost Stages -->
                                    <div id="stagesWrapper">
                                       @if(isset($project) && $project->costStages->count() > 0)
                                          @foreach($project->costStages as $stage)
                                             <div class="stageRow card mb-3 border" data-index="{{ $loop->index }}">
                                                <div class="card-body">
                                                   <div class="row g-3 align-items-end">
                                                      <div class="col-md-5">
                                                         <label class="form-label fw-semibold small text-muted">Stage Title</label>
                                                         <input type="text" class="form-control stageTitle" value="{{ $stage->stage_name }}"
                                                            placeholder="Enter stage name">
                                                      </div>
                                                      <div class="col-md-4">
                                                         <label class="form-label fw-semibold small text-muted">Stage Cost (Rs)</label>
                                                         <input type="number" class="form-control stageCost" value="{{ $stage->cost }}" step="0.01"
                                                            placeholder="0.00">
                                                      </div>
                                                      <div class="col-md-3">
                                                         <button type="button" class="btn btn-outline-danger removeStage w-100">Remove</button>
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                          @endforeach
                                       @else
                                          <div class="stageRow card mb-3 border" data-index="0">
                                             <div class="card-body">
                                                <div class="row g-3 align-items-end">
                                                   <div class="col-md-5">
                                                      <label class="form-label fw-semibold small text-muted">Stage Title</label>
                                                      <input type="text" class="form-control stageTitle" placeholder="Enter stage name">
                                                   </div>
                                                   <div class="col-md-4">
                                                      <label class="form-label fw-semibold small text-muted">Stage Cost (Rs)</label>
                                                      <input type="number" class="form-control stageCost" placeholder="0.00" step="0.01">
                                                   </div>
                                                   <div class="col-md-3">
                                                      <button type="button" class="btn btn-outline-danger removeStage w-100">Remove</button>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       @endif
                                    </div>

                                    <button type="button" id="addStage" class="btn btn-outline-primary mt-3">
                                       + Add More Stage
                                    </button>
                                 </div>
                              </div>

                              <!-- Navigation Buttons -->
                              <div class="d-flex justify-content-between gap-2 mt-4">
                                 <label for="tab3" class="btn btn-outline-secondary">&lt; Back</label>
                                 <button id="saveStep4" class="btn btn-primary">Next &gt;</button>
                              </div>
                           </div>





                           {{-- TAB 5 --}}
                           <div id="content5" class="tab-content">
                              <div class="row">
                                 <div class="col-md-6 mb-3">
                                    <label>Quote ID</label>
                                    <input type="text" id="quoteId" class="form-control" value="{{ $leads->id ?? ''}}" readonly>
                                 </div>
                                 <div class="col-md-6 mb-3">
                                    <label>Factory Name</label>
                                    <input type="text" id="projectName" class="form-control" value="{{ $leads->title ?? '' }}" readonly>
                                 </div>
                                 <div class="col-md-6 mb-3">
                                    <label>Factory Location</label>
                                    <input type="text" id="projectLocation" class="form-control" value="{{ $leads->location ?? ''}}" readonly>
                                 </div>
                                 <div class="col-md-6 mb-3">
                                    <label>Project Type</label>
                                    <input type="text" id="projectType" class="form-control" value="{{ $leads->projectType->name ?? ''}}" readonly>
                                 </div>
                                 <div class="col-md-6 mb-3">
                                    <label>Quote Date</label>
                                    <input type="date" id="quoteDate" class="form-control"
                                       value="{{ $leads->created_at->format('Y-m-d') ?? ''}}" readonly>
                                 </div>
                                 <div class="col-md-6 mb-3">
                                    <label>Estimate Cost</label>
                                    <input type="text" id="estimateCost" class="form-control" value="{{ $leads->estimate_cost ?? ''}}" readonly>
                                 </div>
                                 <div class="col-md-6 mb-3">
                                    <label>Final Quote Value</label>
                                 <input type="text" id="tab5_quoteValue" name="projectCost" class="form-control"
                                    value="{{ $leads->project->project_cost ?? ''}}">
                                 </div>
                              </div>

                              <!-- <label>E-Signature</label><br> -->

                              <!-- @if($project && $project->digital_signature)
                                 <img src="{{ $project->digital_signature }}" alt="Signature" class="border"
                                    style="width:400px; height:150px;">
                              @else
                                 <p class="text-muted">No signature available.</p>
                              @endif -->

                              <div class="d-flex gap-2 mt-4">
                                 <label for="tab4" class="btn btn-secondary">
                                    < Back</label>
                                       <label for="tab6" id="step5Next" class="btn btn-primary">Next ></label>
                              </div>

                           </div>



                           {{-- TAB 6 --}}
                           <div id="content6" class="tab-content">
                              <!-- <button id="finishProject" class="btn btn-success sbt-quote">Submit Quote</button> -->
                              <label>Designer</label>
                              <select id="designer" class="form-control">
                                 <option value="">Select Designer</option>
                                 @foreach($designers as $staff)
                                    <option value="{{ $staff->id }}" {{ (isset($project) && $project->staff_id == $staff->id) ? 'selected' : '' }}>
                                       {{ $staff->name }}
                                    </option>
                                 @endforeach
                              </select>


                              <label class="mt-3">Expected Design Date</label>
                              <input type="date" id="expectedDate" class="form-control"
                                 value="{{ $project->expected_design_date ?? '' }}">

                              <label class="mt-3">Special Notes</label>
                              <textarea id="specialNote" rows="4" class="form-control">{{ $project->special_note ?? '' }}</textarea>

                              <div class="mt-4 d-flex gap-2">
                                 <button id="saveProject" class="btn btn-secondary">Save</button>
                                 <form action="{{ route('submit.designer') }}" method="POST" style="display:inline;">
                                    @csrf
                                    <input type="hidden" name="project_id" value="{{ $project->id ?? 0 }}">
                                    <button type="submit" class="btn btn-primary">Submit to Designer</button>
                                 </form>


                              </div>
                           </div>


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

                  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                  <script src="/assets/js/owl.carousel.min.js"></script>


                  <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.0/dist/signature_pad.umd.min.js"></script>

                  <script>
                     window.AssignTeam = {
                        projectId:         {{ $project->id ?? 'null' }},
                        userRole: {!! json_encode(session('user.role')) !!},
                        existingSignature: "{{ addslashes($project->digital_signature ?? '') }}",
                        routes: {
                           step1: "{{ route('project.store.step1') }}",
                           step2: "{{ route('project.store.step2') }}",
                           step3: "{{ route('project.store.step3') }}",
                           step4: "{{ route('project.store.step4') }}",
                           step5: "{{ route('project.store.step5') }}",
                           step6: "{{ route('project.store.step6') }}",
                           salesQuote: "{{ route('sales.quote') }}"
                        }
                     };
                  </script>
                  <script src="/assets/js/active_assign.js"></script>

                  <script>
                     document.addEventListener("DOMContentLoaded", function () {
                        const costInput = document.getElementById('quoteValue');
                        const costDisplay = document.getElementById('formattedCostDisplay');

                        function formatIndianCurrency(num) {
                           if (!num || isNaN(num)) return '';

                           let val = parseFloat(num);
                           if (val >= 10000000) {
                              return '₹ ' + (val / 10000000).toFixed(2) + ' Cr';
                           } else if (val >= 100000) {
                              return '₹ ' + (val / 100000).toFixed(2) + ' Lakh';
                           } else if (val >= 1000) {
                              return '₹ ' + (val / 1000).toFixed(2) + ' K';
                           }

                           return '₹ ' + val.toString();
                        }

                        // Update the text whenever the user types
                        costInput.addEventListener('input', function () {
                           costDisplay.textContent = formatIndianCurrency(this.value);
                        });

                        // Run once on page load to format the existing database value
                        costDisplay.textContent = formatIndianCurrency(costInput.value);
                     });
                  </script>


         <div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1055;">
            <div id="saveToast" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive"
               aria-atomic="true">
               <div class="d-flex">
                  <div class="toast-body fw-bold" id="toastMessage">
                     <!-- Message will be injected here via JS -->
                  </div>
                  <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                     aria-label="Close"></button>
               </div>
            </div>
         </div>
   <!-- ========================================== -->
   <!-- AUTO-SAVE & KEEP-ALIVE JAVASCRIPT          -->
   <!-- ========================================== -->
   <script>
      document.addEventListener("DOMContentLoaded", function () {
         const toastElement = document.getElementById('saveToast');
         let saveToast = toastElement ? new bootstrap.Toast(toastElement, { delay: 2000 }) : null;
         const toastMessage = document.getElementById('toastMessage');

         const quoteId = document.getElementById('quoteId').value || 'new';
         const draftKey = 'qrf_draft_' + quoteId;
         const backupKey = 'qrf_draft_backup_' + quoteId;

         // ==========================================
         // ANTI-419 DATA RECOVERY SYSTEM
         // If a user hits "Back" from a Session Expired error, restore the backup!
         // ==========================================
         if (!localStorage.getItem(draftKey) && localStorage.getItem(backupKey)) {
            localStorage.setItem(draftKey, localStorage.getItem(backupKey));
         }
         localStorage.removeItem(backupKey); // Always clean up old backups

         // 1. AUTO-NAMING FIX
         function assignMissingNames() {
            let fields = document.querySelectorAll('.tab-content input, .tab-content select, .tab-content textarea');

            fields.forEach((field, index) => {
               if (!field.name) {
                  if (field.id) {
                     field.name = field.id;
                  } else {
                     let tr = field.closest('tr');
                     let table = field.closest('table');
                     let stageRow = field.closest('.stageRow');

                     if (tr && table && tr.parentNode.tagName === 'TBODY') {
                        let rowIndex = Array.from(tr.parentNode.children).indexOf(tr);
                        let specificClass = Array.from(field.classList).find(c =>
                           !['form-control', 'form-select', 'form-control-sm', 'form-select-sm', 'num-dec', 'num-int'].includes(c)
                        );
                        let identifier = specificClass ? specificClass : 'col_' + index;
                        field.name = `${table.id}[${rowIndex}][${identifier}]`;
                     }
                     else if (stageRow) {
                        let wrapper = document.getElementById('stagesWrapper');
                        let rowIndex = Array.from(wrapper.children).indexOf(stageRow);
                        let specificClass = Array.from(field.classList).find(c => c.startsWith('stage'));
                        let identifier = specificClass ? specificClass : 'col_' + index;
                        field.name = `costStages[${rowIndex}][${identifier}]`;
                     }
                     else {
                        field.name = 'auto_field_' + index;
                     }
                  }
               }
            });
         }

         // 2. The Upgraded SILENT Save Function
         function silentlySaveData(showNotification = false) {
            assignMissingNames();

            let draftData = {};
            let fields = document.querySelectorAll('.tab-content input, .tab-content select, .tab-content textarea');

            fields.forEach((field) => {
               if (field.type !== 'button' && field.type !== 'submit' && field.name) {
                  draftData[field.name] = field.value;
               }
            });

            localStorage.setItem(draftKey, JSON.stringify(draftData));

            if (showNotification && saveToast && toastMessage) {
               toastMessage.innerText = `Draft Auto-Saved!`;
               saveToast.show();
            }
         }

         // 3. The Upgraded Restore Function
         function restoreDraft() {
            assignMissingNames();

            let savedData = localStorage.getItem(draftKey);
            if (savedData) {
               let draftData = JSON.parse(savedData);
               let fields = document.querySelectorAll('.tab-content input, .tab-content select, .tab-content textarea');

               fields.forEach((field) => {
                  if (field.name && draftData[field.name] !== undefined) {
                     field.value = draftData[field.name];
                     field.dispatchEvent(new Event('change'));
                  }
               });
            }
         }

         setTimeout(restoreDraft, 500);

         // 4. REAL-TIME AUTO-SAVE TRIGGERS
         document.addEventListener('change', function (e) {
            if (e.target.closest('.tab-content') && (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || e.target.tagName === 'TEXTAREA')) {
               silentlySaveData(false);
            }
         });

         document.addEventListener('click', function (e) {
            if (e.target.matches('button, .btn, .next-btn, label[for^="tab"]')) {
               let isExplicitSave = e.target.classList.contains('save-section-btn');
               silentlySaveData(isExplicitSave);

               if (isExplicitSave) {
                  let btn = e.target;
                  let originalText = btn.innerHTML;
                  btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving...';
                  btn.disabled = true;
                  setTimeout(() => { btn.innerHTML = originalText; btn.disabled = false; }, 500);
               }
            }
         });

         // 5. BULLETPROOF Session Keep-Alive Ping
        function pingSession() {
            fetch("{{ url('/session-keep-alive') }}", {
               method: "GET",
               credentials: "same-origin",
               cache: "no-store",
               headers: {
                  "X-Requested-With": "XMLHttpRequest",
                  "Accept": "application/json"
               }
            })
               .then(response => {
                  if (!response.ok) {
                     console.error("Session keep-alive failed:", response.status);
                  }
                  return response;
               })
               .catch(error => {
                  console.error("Session keep-alive error:", error);
               });
         }

         // Keep session alive every 2 minutes
         setInterval(pingSession, 2 * 60 * 1000);

         // Ping immediately when page loads
         pingSession();

         // Ping when user comes back to this tab
         document.addEventListener("visibilitychange", function () {
            if (document.visibilityState === "visible") {
               pingSession();
            }
         });

         // Also ping when browser window gets focus
         window.addEventListener("focus", function () {
            pingSession();
         });

         // 6. Clear draft permanently on final submission (WITH BACKUP)
         const submitForm = document.querySelector('form[action*="submit"]');
         if (submitForm) {
            submitForm.addEventListener('submit', function () {
               // Make a temporary backup before deleting!
               let currentDraft = localStorage.getItem(draftKey);
               if (currentDraft) {
                  localStorage.setItem(backupKey, currentDraft);
               }

               // Remove main draft so it doesn't linger on success
               localStorage.removeItem(draftKey);
            });
         }
      });
   </script>
   <!-- END AUTO-SAVE SCRIPT -->

@endsection