@extends('layouts.sales.sales')

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

@section('content')

<!-- <style>
    .tab-content {
        display: none;
    }

    /* Show content when tab active */
    #tab1:checked ~ .content #content1,
    #tab2:checked ~ .content #content2,
    #tab3:checked ~ .content #content3,
    #tab4:checked ~ .content #content4,
    #tab5:checked ~ .content #content5,
    #tab6:checked ~ .content #content6,
    #tab7:checked ~ .content #content7 {
        display: block;
    }

    nav label {
        cursor: pointer;
        padding: 8px 15px;
        border-radius: 4px;
        background: #ddd;
    }

    /* Active Tab Style */
    #tab1:checked ~ nav label[for="tab1"],
    #tab2:checked ~ nav label[for="tab2"],
    #tab3:checked ~ nav label[for="tab3"],
    #tab4:checked ~ nav label[for="tab4"],
    #tab5:checked ~ nav label[for="tab5"],
    #tab6:checked ~ nav label[for="tab6"],
    #tab7:checked ~ nav label[for="tab7"] {
        background: #007bff;
        color: white;
        font-weight: bold;
    }
</style> -->


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

    <div class="asign-back">
        <button class="btn btn-primary mb-4"><a href="{{route ('sales.quote') }}" class="text-white">Back</a></button>
         <button id="finishProject" class="btn  sbt-quote">Submit Quote</button>
    </div>
    <div class="assign  py-0 card-new-pro ps-0">
        <h5 class="mb-3">Assign Team to New Project</h5>

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


        <!-- Tab Navigation -->
        <nav class="mb-3 d-flex gap-3 flex-wrap">
            <label for="tab1">Project Details</label>
            <label for="tab2">Material Details</label>
            <label for="tab3">Description</label>
            <label for="tab4">Payment Details</label>
            <label for="tab5">Signed Offer</label>
            <label for="tab6">Designs</label>
            <label for="tab7">Assign Team</label>
        </nav>

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

            {{-- TAB 1 --}}
            <div id="content1" class="tab-content">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label>Quote ID</label>
                        <input type="text" id="quoteId" class="form-control" value="{{ $leads->id ?? ''}}">
                    </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>Project Name</label>
                        <input type="text" id="projectName" class="form-control" value="{{  $leads->title ?? ''}}">
                    </div>
                    <div class="col-md-6">
                        <label>Project 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>Estimate Cost</label>
                        <input type="text" id="estimateCost" class="form-control" value="{{ $leads->estimate_cost ?? ''}}">
                    </div>
                </div>

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

            {{-- TAB 2 --}}
            <div id="content2" class="tab-content">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label>Approx Area</label>
                        <input type="text" id="approxArea" value="{{ $leads->area ?? ''}}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label for="materialUsed">Material Used</label>

                        <!-- {{-- Debug output --}}
                        <pre>
                            Project Material Type ID: {{ $project->material_type_id ?? 'No project yet' }}
                            Leads Material Type ID: {{ $leads->materialType->id ?? 'No leads yet' }}
                            Leads Material Name: {{ $leads->materialType->name ?? 'No leads yet' }}
                        </pre> -->

                        <select id="materialUsed" name="material_type_id" class="form-select">
                            <option value="">Select Material</option>
                            @foreach($materialTypes as $material)
                                @php
                                    $selected = false;

                                    if(isset($project) && $project->material_type_id == $material->id){
                                        $selected = true;
                                    } elseif(!isset($project) && isset($leads)  && $leads->materialType_id == $material->id){
                                        $selected = true;
                                    }
                                @endphp

                                <option value="{{ $material->id }}" {{ $selected ? 'selected' : '' }}>
                                    {{ $material->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label>Colour / Finish</label>
                        <input type="text" id="colourFinish" value="{{ $leads->color ?? ''}}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label>Sheeting Angle</label>
                        <input type="text" id="sheetingAngle" value="{{ $project->sheeting_angle ?? ''}}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label>Skylight Panels</label>
                        <input type="text" id="skylightPanels" value="{{ $project->skylight_panel ?? ''}}"  class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label>Wall Light Panels</label>
                        <input type="text" id="wallLightPanels" value="{{ $project->wall_light_panel ?? ''}}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label>Turbo Vents</label>
                        <input type="text" id="turboVents" value="{{ $project->turbo_vents ?? ''}}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label>Fasteners / Screws</label>
                        <input type="text" id="fasteners" value="{{ $project->screws ?? ''}}" class="form-control">
                    </div>
                </div>

                <div class="d-flex gap-2 mt-4 asign-back">
                    <label for="tab1" class="btn btn-secondary">Back</label>
                <button id="saveStep2" class="btn ">Next</button>
                </div>
            </div>


            {{-- TAB 3 --}}
            <div id="content3" class="tab-content">
                <textarea id="description" rows="5" class="form-control" placeholder="Enter description">{{ $project->project_desc ?? '' }}</textarea>
                <div class="d-flex gap-2 mt-4 asign-back">
                    <label for="tab2" class="btn btn-secondary">Back</label>
                    <button id="saveStep3" class="btn btn-primary">Next</button>
                </div>
            </div>


           {{-- TAB 4 --}}
             
            <!-- <div id="content4" class="tab-content">
                    <div class="total-quotebtn">Total Quote: </div>
                <div id="stagesWrapper">
                    @if(isset($project) && $project->costStages->count())
                        @foreach($project->costStages as $stage)
                            <div class="stageRow mb-3">
                                <input type="text" class="form-control stageTitle mb-2" placeholder="Stage Title" value="{{ $stage->stage_name }}">
                                <input type="text" class="form-control stageCost mb-2" placeholder="Stage Cost" value="{{ $stage->cost }}">
                                <button type="button" class="btn btn-danger removeStage">Remove</button>
                            </div>
                        @endforeach
                    @else
                        <div class="stageRow mb-3">
                            <input type="text" class="form-control stageTitle mb-2" placeholder="Stage Title">
                            <input type="text" class="form-control stageCost mb-2" placeholder="Stage Cost">
                            <button type="button" class="btn btn-danger removeStage">Remove</button>
                        </div>
                    @endif
                </div>

                <button type="button" id="addStage" class="btn btn-secondary mb-3">+ Add More Stage</button>

                <div class="d-flex gap-2 mt-4">
                    <label for="tab3" class="btn btn-secondary">< Back</label>
                    <button id="saveStep4" class="btn btn-primary">Next ></button>
                </div>
            </div> -->

            <div id="content4" 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">
                            <h6 class="mb-0">Cost Stages</h6>
                            <div>
                                <strong>Total Quote:</strong> 
                                <span id="totalQuoteAmount" class="text-primary fs-5 ms-2">Rs{{$totalCost}}</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-md-3">
                                                    <button type="button" class="btn btn-outline-danger removeStage w-100">
                                                        Remove
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="stageRow card mb-3 border" data-index="0">
                                    <div class="card-body">
                                        <div class="row g-3 align-items-end">
                                            <div class="col-md-5">
                                                <label class="form-label fw-semibold small text-muted">Stage Title</label>
                                                <input type="text" class="form-control stageTitle" placeholder="Enter stage name">
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label fw-semibold small text-muted">Stage Cost (Rs)</label>
                                                <input type="number" class="form-control stageCost" placeholder="0.00" step="0.01">
                                            </div>
                                            <div class="col-md-3">
                                                <button type="button" class="btn btn-outline-danger removeStage w-100">
                                                    Remove
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

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

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



                                    

            {{-- TAB 5 --}}
            <div id="content5" class="tab-content">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label>Quote ID</label>
                    <input type="text" id="quoteId" class="form-control" value="{{ $leads->id ?? ''}}">
                </div>
                <div class="col-md-6 mb-3">
                    <label>Project Name</label>
                    <input type="text" id="projectName" class="form-control" value="{{ $leads->title ?? '' }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label>Project Location</label>
                    <input type="text" id="projectLocation" 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="quoteDate" 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="tab4" class="btn btn-secondary">Back</label>
                    <label for="tab6" class="btn btn-dark">Next</label>
                </div>

            </div>




            {{-- TAB 6 --}}
            <!-- <div id="content6" class="tab-content">
                  <h6 class="mb-3">Design Files</h6>

                    <table class="table table-bordered table-striped">
                        <thead>
                            <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>
                                            <a href="{{ asset('uploads/projects/drawings_img/' . $file->file_name) }}"
                                            download
                                            class="btn btn-primary btn-sm">
                                                Download
                                            </a>
                                        </td>

                                        <td>
                                            <button class="btn btn-danger btn-sm removeDesign"
                                                    data-id="{{ $file->id }}">
                                                Delete
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="4" class="text-center">No design files uploaded.</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                     <td> 
                        @if($project->designs->count()) <a href="{{ route('view.designs', $project->id) }}" 
                            class="btn btn-primary btn-sm"> View Designs ({{ $project->designs->count() }}) </a> 
                        @else <span class="text-muted">No Design</span>
                        @endif 
                    </td>               

                <div class="d-flex gap-2 mt-4">
                    <label for="tab5" class="btn btn-secondary">Back</label>
                    <label for="tab7" class="btn btn-primary">Next</label>
                </div>
            </div> -->

            <div id="content6" class="tab-content">
                <div class="row">
                    <!-- Design Files Table -->
                    <div class="col-md-8">
                        <div class="card mb-4">
                            <div class="card-header bg-dark text-white">
                                <h6 class="mb-0">Design Files</h6>
                            </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>

                    <!-- Factory Designs Button -->
                    <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" style="height:100%;">
                                @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>

                <!-- Navigation Buttons -->
                <div class="d-flex gap-2 mt-4 asign-back">
                    <label for="tab5" class="btn btn-secondary">Back</label>
                    <label for="tab7" class="btn btn-dark">Next</label>
                </div>
            </div>




             {{-- TAB 7 --}}
            <div id="content7" 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="tab6" class="btn btn-secondary">Back</label>
                    <button id="saveProject" class="btn btn-dark">Save</button>
                        <form action="{{ route('submit.designer') }}" method="POST" style="display:inline;">
                            @csrf
                            <input type="hidden" name="project_id" value="{{ $project->id ?? 0 }}">
                            <button type="submit" class="main-butn">Submit to Designer</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>



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


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

<script>
    let projectId = {{ $project->id ?? 'null' }};
    const signaturePad = new SignaturePad(document.getElementById("signature-pad"));
    document.getElementById("clear-signature").addEventListener("click", () => signaturePad.clear());
</script>

<!-- /* check user role */ -->
<script>
    const userRole = {!! json_encode(session('user.role')) !!};
    console.log("User Role:", userRole);
</script>


<!-- form js script -->
<script>
(async () => {
    const quoteIdEl = document.getElementById('quoteId');
    const clientNameEl = document.getElementById('clientName');
    const projectNameEl = document.getElementById('projectName');
    const projectLocationEl = document.getElementById('projectLocation');
    const quoteDateEl = document.getElementById('quoteDate');
    const estimateCostEl = document.getElementById('estimateCost');


    const nextBtnStep1 = document.querySelector("label[for='tab2'].next-btn");
    if (!nextBtnStep1) return;

    nextBtnStep1.addEventListener('click', async (e) => {
        e.preventDefault();

        const url = "{{ route('project.store.step1') }}";
        const payload = {
            project_id: projectId,
            quote_id: quoteIdEl?.value || '',
            client_name: clientNameEl?.value || '',
            project_name: projectNameEl?.value || '',
            project_location: projectLocationEl?.value || '',
            quote_date: quoteDateEl?.value || '',
            estimate_cost: estimateCostEl?.value || ''
        };

        try {
            const response = await fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(payload)
            });

            if (response.status === 419) {
                alert('Session expired or CSRF token missing. Refresh page and try again.');
                return;
            }

            if (!response.ok) {
                const text = await response.text();
                console.error('Server returned non-OK:', response.status, text);
                alert('Server error: ' + response.status);
                return;
            }

            const data = await response.json();
            if (data.project_id) projectId = data.project_id;

            console.log('Step 1 saved', data);
            // Move to next tab visually
            document.getElementById('tab2').checked = true;

        } catch (err) {
            console.error('Fetch error:', err);
            alert('Network error while saving step 1. See console.');
        }
    });



    // ==================== STEP 2 SAVE ====================
    const step2Btn = document.getElementById("saveStep2");

    step2Btn.addEventListener("click", async (e) => {
        e.preventDefault();

        const url = "{{ route('project.store.step2') }}";

        const payload = {
            project_id: projectId,
            approx_area: document.getElementById("approxArea").value,
            material_type_id: document.getElementById("materialUsed").value,
            colour_finish: document.getElementById("colourFinish").value,
            sheeting_angle: document.getElementById("sheetingAngle").value,
            skylight_panels: document.getElementById("skylightPanels").value,
            wall_light_panel: document.getElementById("wallLightPanels").value, // FIXED KEY
            turbo_vents: document.getElementById("turboVents").value,
            fasteners: document.getElementById("fasteners").value,
            final_cost: document.getElementById("estimateCost").value
        };

        console.log("📤 Sending Step 2 Payload:", payload);

        try {
            const response = await fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(payload)
            });

            console.log("📥 Raw Response:", response);

            if (response.status === 419) {
                console.warn("⚠ 419 CSRF/Session Expired.");
                alert("Session expired. Refresh page.");
                return;
            }

            if (!response.ok) {
                const text = await response.text();
                console.error("❌ Error Response:", text);
                return;
            }

            const data = await response.json();
            console.log("✅ Step 2 Response Parsed:", data);

            if (data.project_id) {
                projectId = data.project_id;
                console.log("🔄 Updated Project ID:", projectId);
            }

            document.getElementById("tab3").checked = true;
            console.log("➡️ Moving to Step 3");

        } catch (error) {
            console.error("❌ Fetch error:", error);
        }
    });

  // ==================== STEP 3 SAVE ====================

    const step3Btn = document.querySelector("#saveStep3"); // the button to save Step 3

    step3Btn.addEventListener("click", async (e) => {
        e.preventDefault();

        const url = "{{ route('project.store.step3') }}"; // your route for Step 3

        const payload = {
            project_id: projectId, // make sure projectId is already set from Step 2
            description: document.getElementById("description").value
        };

        console.log("📤 Sending Step 3 Payload:", payload);

        try {
            const response = await fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(payload)
            });

            console.log("📥 Raw Response:", response);

            if (response.status === 419) {
                console.warn("⚠ 419 CSRF/Session Expired.");
                alert("Session expired. Refresh page.");
                return;
            }

            if (!response.ok) {
                const text = await response.text();
                console.error("❌ Error Response:", text);
                return;
            }

            const data = await response.json();
            console.log("✅ Step 3 Response Parsed:", data);

            if (data.success) {
                // Move to next tab (Step 4)
                document.getElementById("tab4").checked = true;
                console.log("➡️ Moving to Step 4");
            }

        } catch (error) {
            console.error("❌ Fetch error:", error);
        }
    });


    // ==================== STEP 4 SAVE ====================

    const saveStep4Btn = document.getElementById("saveStep4");

    saveStep4Btn.addEventListener("click", async (e) => {
        e.preventDefault();

        const url = "{{ route('project.store.step4') }}"; // backend route

        // Collect all stage rows
        const stages = Array.from(document.querySelectorAll(".stageRow")).map(row => ({
            stage_name: row.querySelector(".stageTitle").value,
            cost: row.querySelector(".stageCost").value
        }));

        if (!stages.length) {
            alert("Please add at least one stage.");
            return;
        }

        const payload = {
            project_id: projectId, // from previous step/session
            stages
        };

        console.log("📤 Sending Step 4 Payload:", payload);

        try {
            const response = await fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(payload)
            });

            console.log("📥 Raw Response:", response);

            if (response.status === 419) {
                console.warn("⚠ 419 CSRF/Session Expired.");
                alert("Session expired. Refresh page.");
                return;
            }

            if (!response.ok) {
                const text = await response.text();
                console.error("❌ Error Response:", text);
                return;
            }

            const data = await response.json();
            console.log("✅ Step 4 Response Parsed:", data);

            if (data.success) {
                console.log("➡️ Moving to Step 5");
                document.getElementById("tab5").checked = true;
            }

        } catch (error) {
            console.error("❌ Fetch error:", error);
        }
    });


    /* js for remove add stages */

    const stagesWrapper = document.getElementById("stagesWrapper");
    const addStageBtn = document.getElementById("addStage");

    // Add new stage row
    addStageBtn.addEventListener("click", () => {
        const stageRow = document.createElement("div");
        stageRow.classList.add("stageRow", "mb-3");
        stageRow.innerHTML = `
            <input type="text" class="form-control stageTitle mb-2" placeholder="Stage Title">
            <input type="text" class="form-control stageCost mb-2" placeholder="Stage Cost">
            <button type="button" class="btn btn-danger removeStage">Remove</button>
        `;
        stagesWrapper.appendChild(stageRow);

        // Remove button inside newly added row
        stageRow.querySelector(".removeStage").addEventListener("click", () => {
            stageRow.remove();
        });
    });

    // Remove button for initial row
    document.querySelectorAll(".removeStage").forEach(btn => {
        btn.addEventListener("click", e => e.target.closest(".stageRow").remove());
    });


    // ---------------- STEP 5 (SIGNATURE - VIEW ONLY) ----------------
        document.addEventListener("DOMContentLoaded", () => {
            const nextBtn = document.getElementById("step5Next");

            nextBtn.addEventListener("click", async () => {
                const projectId = {{ $project->id ?? 'null' }};

                const payload = {
                    project_id: projectId,
                    quote_id: document.getElementById('quoteId')?.value || '',
                    project_name: document.getElementById('projectName')?.value || '',
                    project_location: document.getElementById('projectLocation')?.value || '',
                    project_type: document.getElementById('projectType')?.value || '',
                    quote_date: document.getElementById('quoteDate')?.value || '',
                    estimate_cost: document.getElementById('estimateCost')?.value || '',
                    signature: "{{ $project->digital_signature ?? '' }}" // existing signature or empty
                };

                try {
                    const response = await fetch("{{ route('project.store.step5') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json",
                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify(payload)
                    });

                    const result = await response.json();

                    if (result.success) {
                        // Move to Step 6
                        document.getElementById("tab6").checked = true;
                    } else {
                        alert("Cannot proceed: " + (result.message || "Unknown error"));
                    }
                } catch (err) {
                    console.error("Step5 fetch error:", err);
                    alert("Error moving to next step. See console.");
                }
            });
        });




    document.addEventListener("DOMContentLoaded", () => {
        const saveBtn = document.getElementById('saveProject');
        const finishBtn = document.getElementById('finishProject');

        if (!saveBtn || !finishBtn) return;

        async function submitStep6(isFinish = false) {
            const payload = {
                project_id: projectId,
                designer: document.getElementById('designer').value,
                expected_date: document.getElementById('expectedDate').value,
                special_note: document.getElementById('specialNote').value,
                is_finish: isFinish // flag to mark as finished
            };

            const url = "{{ route('project.store.step6') }}"; // single route

            try {
                const response = await fetch(url, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(payload)
                });

                const data = await response.json();

                if (data.success) {
                    alert(isFinish ? "✅ Project Finished!" : "✅ Step 6 Saved!");
                    
                    if (isFinish) {
                        if (userRole === 'sales') {
                            window.location.href = "{{ route('sales.quote') }}";
                        } else {
                            window.location.href = "/public/login"; // default redirect
                        }
                    }
                }

            } catch (error) {
                console.error("❌ Error saving Step 6:", error);
                alert("Something went wrong. Please try again.");
            }
        }

        saveBtn.addEventListener('click', (e) => {
            e.preventDefault();
            submitStep6(false);
        });

        finishBtn.addEventListener('click', (e) => {
            e.preventDefault();
            if (confirm("Are you sure you want to submit the final quote to the customer?")) {
                submitStep6(true);
            }
        });
    });




})();
</script>



@endsection