@extends('layouts.sales.sales')

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

@section('content')

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

    <div>
        <button class="btn btn-primary mb-4"><a href="{{route ('sales.quote') }}" class="text-white">Back</a></button>
    </div>
    <div class="assign mx-3 py-0 card-new-pro">
        <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">

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

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

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



                                    

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

            </div>



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


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

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

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

                   
                </div>
            </div>


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



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


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

<script>
    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>

<script>
    (function() {
        // Use a named function for proper removal
        function addStageFunction() {
            // Get first row as template
            let firstRow = document.querySelector('.stageRow');

            // Clone it
            let newRow = firstRow.cloneNode(true);

            // Clear inputs
            newRow.querySelectorAll('input').forEach(input => input.value = "");

            // Set new index
            let totalRows = document.querySelectorAll('.stageRow').length;
            newRow.setAttribute('data-index', totalRows);

            // Append new row
            document.getElementById('stagesWrapper').appendChild(newRow);
        }

        // Get the button
        let addButton = document.getElementById('addStage');
        
        // Remove any existing listener and add fresh one
        // Clone and replace to remove ALL listeners
        let newButton = addButton.cloneNode(true);
        addButton.parentNode.replaceChild(newButton, addButton);
        
        // Add listener once to the new button
        newButton.addEventListener('click', addStageFunction);

        // Remove row handler (using event delegation - only needs to be set once)
        document.addEventListener('click', function(event){
            if(event.target.classList.contains('removeStage')){
                let rows = document.querySelectorAll('.stageRow');
                if(rows.length > 1){
                    event.target.closest('.stageRow').remove();
                } else {
                    alert("At least one stage is required!");
                }
            }
        });
    })();
</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);
        }
    });





    // ---------------- 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