@extends('layouts.sales.sales')
@section('title', 'Assign Team')
@section('content')
    <div class="container-fluid py-4 px-0">
        <div class="asign-back d-flex justify-content-between align-items-center">
            <div class="d-flex">
                <a href="{{ route('sales.quote') }}?tab={{ request('return_tab', 'pending') }}"
                    class="text-primary me-2 fs-4">
                    <i class="bi bi-arrow-left-circle-fill"></i>
                </a>
                <h5 class="mb-0">Assign Project</h5>
            </div>
            <button id="finishProject" class="btn btn-primary">Project Executed</button>
        </div>

        <div class="assign py-0 card-new-pro ps-0">



            {{-- Hidden Radio Tabs --}}
            @foreach(range(1, 9) as $i)
                <input type="radio" name="tabs" id="tab{{ $i }}" class="tab-radio" {{ $i === 1 ? 'checked' : '' }}>
            @endforeach

            {{-- Tab Navigation --}}
            <nav class="mb-3 d-flex gap-3 flex-wrap">
                <label for="tab1">Project Details</label>
                <!-- <label for="tab2">Job Documents</label> -->
                <label for="tab3">QRF Details</label>
                <label for="tab4">Description</label>
                <label for="tab5">Billings</label>
                <label for="tab6">Signed Offer</label>
                <label for="tab7">Designs</label>
                <label for="tab8">Site Survey Images</label>
                <label for="tab9">Sales Forcast</label>
            </nav>

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

                {{-- ============================= TAB 1: Project Details ============================= --}}
                <div id="content1" class="tab-content">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label>Quote No</label>
                            <input type="hidden" id="quoteIdHidden" value="{{ $leads->id ?? '' }}">
                            <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>Quote Date</label>
                            <input type="date" id="quoteDate" class="form-control"
                                value="{{ $leads->created_at->format('Y-m-d') ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label>Final Quote Value</label>
                            <input type="text" id="projectCost" class="form-control"
                                value="{{ $project->project_cost ?? '' }}">
                        </div>
                    </div>
                    <label for="tab3" class="btn btn-primary mt-4 next-btn">Next</label>
                </div>

                {{-- ============================= TAB 2: Job Documents ============================= --}}
                <!-- <div id="content2" class="tab-content">
                           <div class="container-fluid">
                              @php
                                 $docTypeMap = [1 => 'techno_commercial', 2 => 'agreement_po', 4 => 'order_acceptance', 7 => 'dbr', 8 => 'customer_approval_drawings'];
                                 $fileDocs = [1, 2, 4, 7, 8];
                                 $initialDocs = [1 => 'Techno - Commercial Offer', 2 => 'Agreement / PO (From Client to Meking)', 3 => 'CIF Form', 4 => 'Order Acceptance Form'];
                                 $colourDocs = [5 => 'Structure Colour Confirmation Sheet', 6 => 'Sheeting Colour Confirmation Sheet'];
                                 $designDocs = [7 => 'DBR', 8 => 'Customer Approval Drawings'];
                                @endphp

                              {{-- Initial Documents --}}
                              <div class="card mb-4">
                                 <div class="card-header fw-bold">Initial Documents</div>
                                 <div class="card-body p-0">
                                    @foreach($initialDocs as $id => $name)
                                       @php $col = $docTypeMap[$id] ?? null;
                                       $filePath = ($col && $projectDocs) ? $projectDocs->$col : null; @endphp<div class="row align-items-center border-bottom p-3">
                                                      <div class="col-md-6 d-flex align-items-center">
                                                          <span class="badge bg-dark me-2">{{ $id }}</span>
                                                          <span>{{ $name }}</span>
                                                      </div>
                                                      <div class="col-md-6 text-end">
                                                          @if(in_array($id, $fileDocs))
                                                              <form id="uploadForm_design_{{ $id }}" action="{{ route('upload.ProjectDocs') }}" method="POST" enctype="multipart/form-data" class="d-inline">
                                                                  @csrf
                                                                  <input type="hidden" name="project_id" value="{{ $project->id }}">
                                                                  <input type="hidden" name="doc_type" value="{{ $id }}">
                                                                  <input type="file" name="file" id="fileInput_design_{{ $id }}" style="display:none" onchange="submitUploadFormDesign({{ $id }})">
                                                                  <button type="button" class="btn btn-light btn-sm" onclick="document.getElementById('fileInput_design_{{ $id }}').click()">
                                                                      <i class="bi bi-upload"></i>
                                                                  </button>
                                                              </form>
                                                          @endif
                                                          @if($id == 3)
                                                              <a href="{{ route('project.cif', $project->id) }}" class="btn btn-light btn-sm"><i class="bi bi-eye"></i></a>
                                                          @elseif($filePath)
                                                              <a href="{{ asset($filePath) }}" class="btn btn-light btn-sm" target="_blank"><i class="bi bi-eye"></i></a>
                                                          @else
                                                              <button class="btn btn-light btn-sm" disabled style="opacity:0.4;"><i class="bi bi-eye"></i></button>
                                                          @endif
                                                          @if(in_array($id, $fileDocs) && $filePath)
                                                              <a href="{{ route('project.doc.download', [$project->id, $id]) }}" class="btn btn-light btn-sm"><i class="bi bi-download"></i></a>
                                                          @else
                                                              <button class="btn btn-light btn-sm" disabled style="opacity:0.4;"><i class="bi bi-download"></i></button>
                                                          @endif
                                                          <button class="btn btn-light btn-sm"><i class="bi bi-envelope"></i></button>
                                                      </div>
                                                  </div>
                                     @endforeach
                                       </div>
                                   </div>

                                   {{-- Colour Confirmation --}}
                                   <div class="card mb-4">
                                       <div class="card-header fw-bold">Colour Confirmation</div>
                                       <div class="card-body p-0">
                                           @foreach($colourDocs as $id => $name)
                                               <div class="row align-items-center border-bottom p-3">
                                                   <div class="col-md-6 d-flex align-items-center">
                                                       <span class="badge bg-dark me-2">{{ $id }}</span>
                                                       <span>{{ $name }}</span>
                                                   </div>
                                                   <div class="col-md-6 text-end">
                                                       @if($id == 5)
                                                           <a href="{{ route('structure.colorConfirm', $project->id) }}" class="btn btn-light btn-sm"><i class="bi bi-eye"></i></a>
                                                       @elseif($id == 6)
                                                           <a href="{{ route('sheeting.colorConfirm', $project->id) }}" class="btn btn-light btn-sm"><i class="bi bi-eye"></i></a>
                                                       @endif
                                                       <button class="btn btn-light btn-sm" disabled style="opacity:0.4;"><i class="bi bi-download"></i></button>
                                                       <button class="btn btn-light btn-sm"><i class="bi bi-envelope"></i></button>
                                                   </div>
                                               </div>
                                           @endforeach
                                       </div>
                                   </div>

                                   {{-- Design --}}
                                   <div class="card">
                                       <div class="card-header fw-bold">Design</div>
                                       <div class="card-body p-0">
                                           @foreach($designDocs as $id => $name)
                                               @php $col = $docTypeMap[$id] ?? null;
                                             $filePath = ($col && $projectDocs) ? $projectDocs->$col : null; @endphp
                                               <div class="row align-items-center border-bottom p-3">
                                                   <div class="col-md-6 d-flex align-items-center">
                                                       <span class="badge bg-dark me-2">{{ $id }}</span>
                                                       <span>{{ $name }}</span>
                                                   </div>
                                                   <div class="col-md-6 text-end">
                                                       <form id="uploadForm_design_{{ $id }}" action="{{ route('upload.ProjectDocs') }}" method="POST" enctype="multipart/form-data" class="d-inline">
                                                           @csrf
                                                           <input type="hidden" name="project_id" value="{{ $project->id }}">
                                                           <input type="hidden" name="doc_type" value="{{ $id }}">
                                                           <input type="file" name="file" id="fileInput_design_{{ $id }}" style="display:none" onchange="submitUploadFormDesign({{ $id }})">
                                                           <button type="button" class="btn btn-light btn-sm" onclick="document.getElementById('fileInput_design_{{ $id }}').click()"><i class="bi bi-upload"></i></button>
                                                       </form>
                                                       @if($filePath)
                                                           <a href="{{ asset($filePath) }}" class="btn btn-light btn-sm" target="_blank"><i class="bi bi-eye"></i></a>
                                                           <a href="{{ route('project.doc.download', [$project->id, $id]) }}" class="btn btn-light btn-sm"><i class="bi bi-download"></i></a>
                                                       @else
                                                           <button class="btn btn-light btn-sm" disabled style="opacity:0.4;"><i class="bi bi-eye"></i></button>
                                                           <button class="btn btn-light btn-sm" disabled style="opacity:0.4;"><i class="bi bi-download"></i></button>
                                                       @endif
                                                       <button class="btn btn-light btn-sm"><i class="bi bi-envelope"></i></button>
                                                   </div>
                                               </div>
                                           @endforeach
                                       </div>
                                   </div>
                               </div>
                               <label for="tab3" class="btn btn-primary mt-4 next-btn">Next</label>
                           </div> -->

                {{-- ============================= TAB 3: QRF Details (PEB Specs) ============================= --}}
                <div id="content3" 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">
                                    <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" 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>
                                                @foreach(['AS_PER_DESIGN' => 'As per design', 'II' => 'Zone II', 'III' => 'Zone III', 'IV' => 'Zone IV', 'V' => 'Zone V'] as $val => $label)
                                                    <option value="{{ $val }}" {{ ($spec->seismic_zone ?? '') == $val ? 'selected' : '' }}>{{ $label }}</option>
                                                @endforeach
                                            </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>
                            </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">
                                        <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" 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>
                                        <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>
                                        <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" 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>
                                        <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>
                                        <div class="col-lg-3 position-relative">
                                            <label>Clear Height <span id="ht_unit">(m)</span></label>
                                            <input type="text" name="clear_height" id="clear_height" class="form-control"
                                                value="{{ $geometry->clear_height_input ?? $geometry->clear_height ?? '' }}">
                                            <select id="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>
                                        <div class="col-lg-3">
                                            <label>Roof Slope</label>
                                            <input type="text" id="roof_slope" class="form-control"
                                                value="{{ $geometry->roof_slope ?? '' }}">
                                        </div>
                                        <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>
                                        <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 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" id="ffl_gl_gap" class="form-control"
                                                value="{{ $geometry->ffl_gl_gap ?? '' }}">
                                        </div>
                                    </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>
                            </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">
                                    {{-- Roof Sheeting --}}
                                    <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>
                                    {{-- Wall Sheeting --}}
                                    <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>
                                    {{-- Gable Sheeting --}}
                                    <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">
                                                <h6 class="mb-0 fw-semibold">Openings + Brick Wall</h6>
                                                <div class="row g-3 mt-1">
                                                    <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</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</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</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>No.</th>
                                                                <th>Size (HxW)</th>
                                                                <th>Location</th>
                                                                <th>Usage</th>
                                                                <th 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">&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">&times;</button>
                                                                    </td>
                                                                </tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </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</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>No.</th>
                                                                <th>Wall</th>
                                                                <th>Length (m)</th>
                                                                <th>Width (m)</th>
                                                                <th>Clr. Ht (m)</th>
                                                                <th>Soffit</th>
                                                                <th>Downspouts</th>
                                                                <th>Return</th>
                                                                <th>Kickouts</th>
                                                                <th 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">&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">&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>
                                        </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">
                                                <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</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</label><input id="fascia_int_cladding"
                                                            class="form-control"
                                                            value="{{ $extensions->fascia_int_cladding ?? '' }}"></div>
                                                </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">
                                                <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>No.</th>
                                                                <th>Type</th>
                                                                <th>Qty</th>
                                                                <th>Capacity (MT)</th>
                                                                <th>Span (m)</th>
                                                                <th>Hook Ht (m)</th>
                                                                <th>Run (m)</th>
                                                                <th>BM & BKT By</th>
                                                                <th>Rails & CRN By</th>
                                                                <th></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">✕</button>
                                                                    </td>
                                                                </tr>
                                                            @empty
                                                                <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">
                                                @foreach([1, 2] as $mno)
                                                    <h6 class="mb-3 fw-semibold">Mezzanine {{ $mno }}</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="mezz{{ $mno }}_ll"
                                                                value="{{ $mezzanines[$mno]->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="mezz{{ $mno }}_dl"
                                                                value="{{ $mezzanines[$mno]->dead_load ?? '' }}"></div>
                                                        <div class="col-lg-3"><label
                                                                class="form-label">{{ $mno == 1 ? 'Bottom' : '' }} Clear Height
                                                                (m)</label><input type="number" step="0.001"
                                                                class="form-control num-dec" id="mezz{{ $mno }}_clr"
                                                                value="{{ $mezzanines[$mno]->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="mezz{{ $mno }}_area"
                                                                value="{{ $mezzanines[$mno]->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="mezz{{ $mno }}_fo"
                                                                value="{{ $mezzanines[$mno]->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="mezz{{ $mno }}_stairs"
                                                                value="{{ $mezzanines[$mno]->no_of_stairs ?? '' }}"></div>
                                                    </div>
                                                    @if($mno == 1)
                                                    <hr class="my-4">@endif
                                                @endforeach
                                            </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</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>Length (m)</th>
                                                                <th>Height (m)</th>
                                                                <th>Type</th>
                                                                <th>Thickness</th>
                                                                <th>GA</th>
                                                                <th>Colour</th>
                                                                <th></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">✕</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</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>Length (m)</th>
                                                                <th>Height (m)</th>
                                                                <th>Type</th>
                                                                <th>Thickness</th>
                                                                <th>GA</th>
                                                                <th>Colour</th>
                                                                <th></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">✕</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</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>Orientation</th>
                                                                <th>Length (m)</th>
                                                                <th>Height (m)</th>
                                                                <th>Sheeted</th>
                                                                <th>Type</th>
                                                                <th>Thickness</th>
                                                                <th>Color</th>
                                                                <th></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">✕</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">
                                                <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>
                                        </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">Accessories + Insulation + Statutory</button>
                                </h2>
                                <div id="c10" 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="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">
                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                    <h6 class="mb-0 fw-semibold">Slide Doors</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>Single/Double</th>
                                                                <th>Width (m)</th>
                                                                <th>Height (m)</th>
                                                                <th>Qty</th>
                                                                <th></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">
                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                    <h6 class="mb-0 fw-semibold">Roll Up Doors</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>Manual/Electric</th>
                                                                <th>Width (m)</th>
                                                                <th>Height (m)</th>
                                                                <th>Qty</th>
                                                                <th></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">
                                                <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">
                                                <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">
                                                <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>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>{{-- end accordion --}}
                    </div>
                    <div class="d-flex justify-content-between mt-4">
                        <label for="tab1" class="btn btn-secondary">&lt; Back</label>
                        <button id="saveStep2" class="btn btn-primary">Next &gt;</button>
                    </div>
                </div>

                {{-- ============================= TAB 4: Description ============================= --}}
                <div id="content4" class="tab-content">
                    <textarea id="description" rows="5" class="form-control"
                        placeholder="Enter description">{{ $project->project_desc ?? '' }}</textarea>
                    <hr>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="quoteValue" class="form-label">Quote Value</label>
                            <input type="number" id="quoteValue" name="estimate_cost" class="form-control" placeholder="Enter Final Quote Value"
                                value="{{ $leads->estimate_cost ?? '' }}">
                            <small id="formattedCostDisplay" class="text-primary font-weight-bold mt-1 d-block"></small>
                        </div>
                        <div class="col-md-6">
                            <label for="expectedClosure" class="form-label">Expected Closure Date</label>
                            <input type="date" id="expectedClosure" class="form-control"
                                value="{{ $project->expected_closure ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label for="tonnage" class="form-label">Tonnage</label>
                            <input type="text" id="tonnage" class="form-control" placeholder="Enter Tonnage Value"
                                value="{{ $project->tonnage ?? '' }}">
                        </div>
                    </div>
                    <div class="d-flex gap-2 mt-4 asign-back">
                        <label for="tab3" class="btn btn-secondary">Back</label>
                        <button id="saveStep3" class="btn btn-primary">Next</button>
                    </div>
                </div>

                {{-- ============================= TAB 5: Billings ============================= --}}
                <div id="content5" class="tab-content">
                    <div class="card shadow-sm mb-4">
                        <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">
                            <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>
                            <div id="stagesWrapper">
                                @if(isset($project) && $project->costStages->count())
                                    @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"
                                                            placeholder="Enter stage name" value="{{ $stage->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" value="{{ $stage->cost }}">
                                                    </div>
                                                    <div class="col-lg-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-lg-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">+ Add More Stage</button>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between gap-2 mt-4 asign-back">
                        <label for="tab4" class="btn btn-outline-secondary">&lt; Back</label>
                        <button id="saveStep4" class="btn btn-primary">Next &gt;</button>
                    </div>
                </div>

                {{-- ============================= TAB 6: Signed Offer ============================= --}}
                <div id="content6" class="tab-content">
                    <div class="row">
                        <div class="col-md-6 mb-3"><label>Quote ID</label><input type="text" id="signedQuoteId"
                                class="form-control" value="{{ $leads->id ?? '' }}"></div>
                        <div class="col-md-6 mb-3"><label>Project Name</label><input type="text" id="signedProjectName"
                                class="form-control" value="{{ $leads->title ?? '' }}"></div>
                        <div class="col-md-6 mb-3"><label>Project Location</label><input type="text"
                                id="signedProjectLocation" class="form-control" value="{{ $leads->location ?? '' }}"></div>
                        <div class="col-md-6 mb-3"><label>Project Type</label><input type="text" id="projectType"
                                class="form-control" value="{{ $leads->projectType->name ?? '' }}"></div>
                        <div class="col-md-6 mb-3"><label>Quote Date</label><input type="date" id="signedQuoteDate"
                                class="form-control" value="{{ $leads->created_at->format('Y-m-d') ?? '' }}"></div>
                        <div class="col-md-6 mb-3"><label>Estimate Cost</label><input type="text" id="estimateCost"
                                class="form-control" value="{{ $leads->estimate_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 asign-back">
                        <label for="tab5" class="btn btn-secondary">Back</label>
                        <button id="step5Next" class="btn btn-primary">Next</button>
                    </div>
                </div>

                {{-- ============================= TAB 7: Designs ============================= --}}
                <div id="content7" class="tab-content">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card mb-4">
                                <div
                                    class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">Design Files</h6>
                                    <form action="{{ route('design.files.upload') }}" method="POST"
                                        enctype="multipart/form-data" class="d-flex">
                                        @csrf
                                        <input type="hidden" name="project_id" value="{{ $project->id }}">
                                        <input type="file" name="files[]" multiple accept=".dwg,.pdf,.jpg,.jpeg,.png"
                                            class="form-control form-control-sm me-2">
                                        <button type="submit" class="btn btn-success btn-sm">Upload</button>
                                    </form>
                                </div>
                                <div class="card-body p-0">
                                    <table class="table table-bordered table-striped mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>ID</th>
                                                <th>File Name</th>
                                                <th>Download</th>
                                                <th>Remove</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if(isset($design_files) && $design_files->count() > 0)
                                                @foreach($design_files as $index => $file)
                                                    <tr>
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>{{ $file->file_name }}</td>
                                                        <td class="text-center"><a
                                                                href="{{ asset('uploads/projects/drawings_img/' . $file->file_name) }}"
                                                                download class="text-primary fs-5"><i
                                                                    class="bi bi-download"></i></a></td>
                                                        <td class="text-center"><button
                                                                class="btn p-0 text-danger fs-5 removeDesign"
                                                                data-id="{{ $file->id }}"><i class="bi bi-trash"></i></button></td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td colspan="4" class="text-center">No design files uploaded.</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card mb-4">
                                <div class="card-header bg-secondary text-white">
                                    <h6 class="mb-0">Factory Designs</h6>
                                </div>
                                <div class="card-body d-flex justify-content-center align-items-center">
                                    @if($project->designs->count())
                                        <a href="{{ route('view.designs', $project->id) }}"
                                            class="btn btn-primary btn-block">View Designs
                                            ({{ $project->designs->count() }})</a>
                                    @else
                                        <span class="text-muted">No Design</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-2 mt-4 asign-back">
                        <label for="tab6" class="btn btn-secondary">Back</label>
                        <label for="tab8" class="btn btn-primary">Next</label>
                    </div>
                </div>

                {{-- ============================= TAB 8: Site Images ============================= --}}
                <div id="content8" class="tab-content">
                    <h6 class="fw-bold mb-3">Add Site Gallery Images</h6>
                    <label>Caption (Optional)</label>
                    <input type="text" id="siteCaption" class="form-control" placeholder="Enter caption...">
                    <label class="mt-3">Upload Site Images</label>
                    <input type="file" id="siteImages" class="form-control" multiple accept="image/*">
                    <small class="text-muted">You can upload multiple images.</small>
                    <div class="mt-4 d-flex gap-2">
                        <label for="tab7" class="btn btn-secondary">Back</label>
                        <label for="tab9" class="btn btn-primary">Next</label>
                        <button id="saveSiteImages" class="btn btn-dark"><i class="bi bi-upload"></i> Save Images</button>
                        <form action="{{ route('add.siteGallery', $project->id) }}" method="POST"
                            enctype="multipart/form-data" id="siteForm" style="display:none;">
                            @csrf
                            <input type="hidden" name="caption" id="hiddenCaption">
                            <input type="file" name="site_img[]" id="hiddenImages" multiple>
                        </form>
                    </div>
                    @if(!empty($siteImages) && $siteImages->count() > 0)
                        <h6 class="fw-bold mt-4 mb-2">Existing Site Images</h6>
                        <div class="row g-3">
                            @foreach($siteImages as $img)
                                <div class="col-6 col-md-3">
                                    <div class="card shadow-sm">
                                        <img src="{{ asset('uploads/projects/site_gallery/' . $img->site_img) }}"
                                            class="card-img-top" style="height:140px; object-fit:cover; border-radius:6px;">
                                        <div class="card-body p-2 text-center">
                                            <p class="small text-muted mb-1">{{ $img->caption ?? 'No caption' }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- ============================= TAB 9: Sales Forecast ============================= --}}
                <div id="content9" class="tab-content">
                    <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">
                        <label for="tab8" class="btn btn-secondary">Back</label>
                        <button id="saveProject" class="btn btn-success">
                            <i class="bi bi-floppy"></i> Save
                        </button>
                        <button id="executeProject" class="btn btn-primary">
                            <i class="bi bi-send"></i> Project Executed
                        </button>
                    </div>
                </div>

            </div>{{-- .content --}}
        </div>{{-- .assign --}}
    </div>{{-- .container-fluid --}}

    {{-- Success Modal --}}
    <div class="modal fade" id="successModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Success</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">File uploaded successfully!</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                        onclick="reloadToTab()">OK</button>
                </div>
            </div>
        </div>
    </div>

    {{-- JS: pass server-side variables to JS --}}
    <script>
        window.APP = {
            projectId:   {{ $project->id ?? 'null' }},
            userRole: {!! json_encode(session('user.role')) !!},
            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') }}",
                uploadDocs: "{{ route('upload.ProjectDocs') }}",
                salesQuote: "{{ route('sales.quote') }}",
            },
            csrfToken: "{{ csrf_token() }}",
            signature: "{{ $project->digital_signature ?? '' }}"
        };
    </script>

    {{-- External JS --}}
    <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 src="{{ asset('assets/js/assign.js') }}"></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"></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>
@endsection