@extends('master.authMaster')
@section('content')
    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-fluid flex-grow-1 container-p-y">
            <div class="row mb-6 gy-6">
                <div class="col-xxl">
                     <div class="table-wrapper-dashboard">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h3 class="mb-3">Edit Project</h3>
                            <!-- <small class="text-body-secondary float-end">Edit Project </small> -->
                        </div>

                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        <div class="card-body">
                            <form id="projecteditform" method="POST"
                                action="{{ route('project.edit.submit', $project->project_id) }}">
                                @csrf

                                <div class="firstPage">
                                    {{-- Project Name --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Project Name <span
                                                class="text-danger">*</span></label>
                                        <div class="col-sm-10">
                                            <input type="text" name="project_name" class="form-control"
                                                value="{{ $project->project_name }}">
                                            @error('project_name')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    {{-- Project Manager --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Review Project Manager<span
                                                class="text-danger">*</span></label>
                                        <div class="col-sm-10">
                                            <select name="project_manager_id" class="form-select">
                                                <option value="">-- Select Project Manager --</option>
                                                @foreach ($users as $user)
                                                    @if ($user->role_id == 2)
                                                        <option value="{{ $user->id }}"
                                                            {{ $project->project_manager_id == $user->id ? 'selected' : '' }}>
                                                            {{ $user->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            @error('project_manager_id')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>

                                    </div>

                                    {{-- Team Lead --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Assign Team Lead </label>
                                        <div class="col-sm-10">
                                            <select name="project_TL_id" class="form-select">
                                                <option value="">-- Select Team Lead --</option>
                                                @foreach ($users as $user)
                                                    @if ($user->role_id == 4)
                                                        <option value="{{ $user->id }}"
                                                            {{ $project->project_TL_id == $user->id ? 'selected' : '' }}>
                                                            {{ $user->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            @error('project_TL_id')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    {{-- Project Type --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Project Type <span
                                                class="text-danger">*</span></label>
                                        <div class="col-sm-5">
                                            <select name="project_type" class="form-select">
                                                <option value="">-- Select Type --</option>
                                                <option value="1" {{ $project->project_type == 1 ? 'selected' : '' }}>
                                                    Website
                                                </option>
                                                <option value="1" {{ $project->project_type == 1 ? 'selected' : '' }}>
                                                    Admin
                                                    Dashboard
                                                </option>
                                                <option value="1" {{ $project->project_type == 1 ? 'selected' : '' }}>
                                                    Website
                                                    + Admin Dashboard
                                                </option>
                                                <option value="2" {{ $project->project_type == 2 ? 'selected' : '' }}>
                                                    Website
                                                    + Mobile App (iOS + Android)</option>
                                                <option value="3" {{ $project->project_type == 3 ? 'selected' : '' }}>
                                                    Website
                                                    + Mobile App (iOS + Android) + Playstore assistance</option>
                                                <option value="4" {{ $project->project_type == 4 ? 'selected' : '' }}>
                                                    apk
                                                </option>
                                            </select>
                                            @error('project_type')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-sm-5">
                                            <input type="text" name="project_type_note" class="form-control"
                                                placeholder="One-line description. e.g lms/cms"
                                                value="{{ $project->project_type_note }}">
                                            @error('project_type_note')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>


                                    {{-- Client Name --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Client Name <span
                                                class="text-danger">*</span></label>
                                        <div class="col-sm-10">
                                            <input type="text" name="client_name" class="form-control"
                                                value="{{ $project->client_name }}">
                                            @error('client_name')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    {{-- Technology --}}
                                    <div class="row mb-6">
                                        <label class="col-sm-2 col-form-label" for="technology">Technology
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="col-sm-10">
                                            @php
                                                $selectedTechnology =
                                                    old('technology') ??
                                                    json_decode($project->technology ?? '[]', true);
                                            @endphp
                                            <select id="technology" name="technology[]" multiple
                                                class="form-select select2 @error('technology') is-invalid @enderror">
                                                <option value="PHP"
                                                    {{ in_array('PHP', $selectedTechnology ?? []) ? 'selected' : '' }}>PHP
                                                </option>
                                                <option value="Laravel"
                                                    {{ in_array('Laravel', $selectedTechnology ?? []) ? 'selected' : '' }}>
                                                    Laravel
                                                </option>
                                                <option value="JavaScript"
                                                    {{ in_array('JavaScript', $selectedTechnology ?? []) ? 'selected' : '' }}>
                                                    JavaScript</option>
                                                <option value="VueJS"
                                                    {{ in_array('VueJS', $selectedTechnology ?? []) ? 'selected' : '' }}>
                                                    VueJS
                                                </option>
                                                <option value="React"
                                                    {{ in_array('React', $selectedTechnology ?? []) ? 'selected' : '' }}>
                                                    React
                                                </option>
                                                <option value="MySQL"
                                                    {{ in_array('MySQL', $selectedTechnology ?? []) ? 'selected' : '' }}>
                                                    MySQL
                                                </option>
                                            </select>
                                            @error('technology')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    {{-- Description --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Project Description in Brief<span
                                                class="text-danger">*</span></label>
                                        <div class="col-sm-10">
                                            <textarea name="description" id="description" class="form-control" rows="4" placeholder="Project description...">{{ $project->description }}</textarea>
                                            @error('description')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    {{-- proposal date --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Proposal Date
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="col-sm-10">
                                            <input type="date" name="proposal_date" id="proposal_date"
                                                class="form-control"
                                                value="{{ $project->proposal_date ? \Carbon\Carbon::parse($project->proposal_date)->format('Y-m-d') : '' }}">
                                        </div>
                                    </div>

                                    {{-- start date end date --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Start Date</label>
                                        <div class="col-sm-4">
                                            <input type="date" name="start_date" id="start_date" class="form-control"
                                                value="{{ $project->start_date ? \Carbon\Carbon::parse($project->start_date)->format('Y-m-d') : '' }}">
                                        </div>
                                        <label class="col-sm-2 col-form-label">End Date</label>
                                        <div class="col-sm-4">
                                            <input type="date" name="end_date" id="end_date" class="form-control"
                                                value="{{ $project->end_date ? \Carbon\Carbon::parse($project->end_date)->format('Y-m-d') : '' }}"
                                                min="{{ $project->start_date ? \Carbon\Carbon::parse($project->start_date)->format('Y-m-d') : '' }}">
                                        </div>
                                    </div>

                                    {{-- Status --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Status</label>
                                        <div class="col-sm-10">
                                            <select name="status" class="form-select">
                                                <option value="initiated"
                                                    {{ $project->status == 'initiated' ? 'selected' : '' }}>
                                                    Initiated</option>
                                                <option value="inprogress"
                                                    {{ $project->status == 'inprogress' ? 'selected' : '' }}>In Progress
                                                </option>
                                                <option value="completed"
                                                    {{ $project->status == 'completed' ? 'selected' : '' }}>
                                                    Completed</option>
                                                <option value="onhold"
                                                    {{ $project->status == 'onhold' ? 'selected' : '' }}>On
                                                    Hold</option>
                                            </select>
                                            @error('status')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="secondPage" style=" display:none;">

                                    {{-- Assign Resources --}}
                                    <div class="row mb-6">
                                        <label class="col-sm-2 col-form-label" for="assigned_employee">Assign Resources
                                            <span class="text-danger">*</span>
                                        </label>
                                        @php
                                            $assignedEmployees = is_array($project->assigned_employee)
                                                ? $project->assigned_employee
                                                : json_decode($project->assigned_employee ?? '[]', true);
                                        @endphp

                                        <div class="col-sm-10">
                                            <select id="assigned_employee" name="assigned_employee[]" multiple
                                                class="form-select select2 @error('assigned_employee') is-invalid @enderror">
                                                @foreach ($users as $user)
                                                    @if (in_array($user->role_id, [2, 3, 4]))
                                                        <option value="{{ $user->id }}"
                                                            data-name="{{ $user->name }}"
                                                            data-rate="{{ $user->employee->monthly_rate ?? 0 }}"
                                                            {{ in_array($user->id, old('assigned_employee', $assignedEmployees ?? [])) ? 'selected' : '' }}>
                                                            {{ $user->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            @error('assigned_employee')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    {{-- Display Selected Resources and Monthly Rates --}}
                                    <div class="row mb-4">
                                        <hr>
                                        <label class="col-sm-12 col-form-label fw-bold rounded p-2 mb-2 text-primary"
                                            style="font-size: 16px;">Resources Name and Cost (INR)
                                        </label>
                                        <hr>
                                        <div id="resource-body" class="mt-4">
                                            <table class="table" id="selected-resources">
                                                <thead>
                                                    <tr>
                                                        <th>Resource</th>
                                                        <th>Duration</th>
                                                        <th>Duration Type</th>
                                                        <th>Calculated Cost</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>

                                        </div>

                                        {{-- Total Resource Cost --}}
                                        <div class="row mt-3 mb-6">
                                            <label class="col-sm-2 col-form-label">Total Resource Cost (INR)<span
                                                    class="text-danger">*</span></label>
                                            <div class="col-sm-10">
                                                <input type="decimal" id="total_resource_cost" name="total_resource_cost"
                                                    class="form-control" readonly
                                                    value="{{ old('total_resource_cost') }}">
                                                @error('total_resource_cost')
                                                    <div class="text-danger mt-1">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <hr>
                                    </div>


                                    {{-- Project Manager Cost --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Project Manager (PM) Cost <span
                                                class="text-danger">*</span></label>
                                        <div class="col-sm-4">
                                            <input type="number" min="0" max="100" step="0.01"
                                                name="pm_percentage" id="pm_percentage" class="form-control"
                                                placeholder="PM % of Resource Cost"
                                                value="{{ $project->pm_percentage }}">
                                            <small class="text-muted">Enter percentage (e.g., 10 for 10%)</small>
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="decimal" name="pm_cost" id="pm_cost" class="form-control"
                                                readonly value="{{ $project->pm_cost }}">
                                            @error('pm_cost')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>


                                    {{-- operational cost --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Operational Cost</label>
                                        <div class="col-sm-10">
                                            <input type="decimal" name="infra_cost" id="infra_cost" class="form-control"
                                                value="{{ $project->operational_cost }}"
                                                placeholder="Enter the Operational Cost">
                                            @error('infra_cost')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>


                                    <hr>
                                    <label class="col-sm-12 col-form-label fw-bold rounded p-2 mb-2 text-primary"
                                        style="font-size: 16px;">Other Costs:</label>
                                    <hr>

                                    <div id="cost-inputs-container">
                                        @foreach ($otherCosts as $key => $otherCost)
                                            <div class="row mb-4">
                                                <label class="col-sm-2 col-form-label">{{ $key }}<span
                                                        class="text-danger">*</span></label>
                                                <div class="col-sm-10">
                                                    <input type="number" step="0.01" name="{{ $key }}"
                                                        class="form-control"
                                                        value="{{ is_array($otherCost)
                                                            ? implode(', ', array_map(fn($v) => is_array($v) ? $v['amount'] ?? '' : $v, $otherCost))
                                                            : $otherCost }}"
                                                        placeholder="Enter the Project Margin" readonly>
                                                    @error('profit_margin')
                                                        <div class="text-danger mt-1">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        @endforeach

                                    </div>


                                    <!-- Container to append input fields -->
                                    <div id="cost-inputs-container"></div>

                                    <!-- Custom Other Costs -->
                                    <div id="other-costs-group" style="display: block;">
                                        <label class="col-sm-12 col-form-label text-primary fw-semibold">Other Custom
                                            Costs:</label>
                                        <div id="other-costs-container"></div>
                                        <div class="text-end">
                                            <button type="button" id="add-other-cost"
                                                class="btn btn-sm btn-outline-primary mt-2">+ Add More</button>
                                        </div>
                                    </div>

                                    <hr>


                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Marketing Cost</label>
                                        <div class="col-sm-10">
                                            <input type="decimal" name="marketing_cost" id="marketing_cost"
                                                class="form-control" value="{{ $project->marketing_cost }}"
                                                placeholder="Enter the Marketing Cost">
                                            @error('marketing_cost')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Sales Cost</label>
                                        <div class="col-sm-10">
                                            <input type="decimal" name="sales_cost" id="sales_cost" class="form-control"
                                                value="{{ $project->sales_cost }}" placeholder="Enter the Sales Cost">
                                            @error('sales_cost')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    {{-- total_project_cost --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label fw-bold text-primary">Total Project Cost
                                            (INR)
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="col-sm-10">
                                            <input type="decimal" id="total_project_cost" name="total_project_cost"
                                                class="form-control bg-light border-primary" readonly
                                                value="{{ $project->total_project_cost }}">
                                        </div>
                                    </div>

                                    {{-- Profit Margin --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Profit Margin</label>
                                        <div class="col-sm-4">
                                            <input type="number" min="0" max="100" step="0.01"
                                                name="profit_margin_percentage" id="profit_margin_percentage"
                                                class="form-control" placeholder="Margin % of Total Project Cost"
                                                value="{{ $project->profit_margin_percentage }}">
                                            <small class="text-muted">Enter percentage (e.g., 15 for 15%)</small>
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="decimal" name="profit_margin" id="profit_margin"
                                                class="form-control" readonly value="{{ $project->profit_margin }}">
                                            @error('profit_margin')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    {{-- end --}}


                                    {{-- Comission Static field --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label">Comission

                                        </label>
                                        <div class="col-sm-10">
                                            <input type="decimal" name="comission_static" class="form-control"
                                                id="comission_static" name="comission_static"
                                                value="{{ $project->comission }}">
                                        </div>
                                    </div>

                                    {{-- total_project_cost after profit_margin --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label fw-bold text-primary">Net Project Cost
                                            (INR)
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="col-sm-10">
                                            <input type="decimal" id="net_project_cost" name="net_project_cost"
                                                class="form-control bg-light border-primary" readonly
                                                value="{{ $project->net_project_cost }}">
                                        </div>
                                    </div>


                                    {{-- Cost to Customer Project Cost --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label fw-bold text-primary">Cost to Customer
                                            (INR)

                                        </label>
                                        <div class="col-sm-10">
                                            <input type="decimal" id="cost_to_customer" name="cost_to_customer"
                                                value="{{ $project->cost_to_customer }}"
                                                class="form-control bg-light border-primary">
                                        </div>
                                    </div>

                                    {{-- Accepted Project Cost --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label fw-bold text-primary">Accepted Project Cost
                                            (INR)

                                        </label>
                                        <div class="col-sm-10">
                                            <input type="decimal" id="accepted_project_cost" name="accepted_project_cost"
                                                value="{{ $project->accepted_project_cost }}"
                                                class="form-control bg-light border-primary">
                                        </div>
                                    </div>


                                    <div class="row mb-4" style="display: none">
                                        <label class="col-sm-2 col-form-label">Billing Type <span
                                                class="text-danger">*</span></label>
                                        <div class="col-sm-10">
                                            <select class="form-select" id="billing_type" name="billing_type"
                                                onchange="handleBillingTypeChange(this.value)">
                                                {{-- <option value="">-- Select Billing Type --</option> --}}
                                                <option value="module_wise" selected>Module-wise Billing</option>
                                            </select>
                                        </div>
                                    </div>

                                    {{-- FOR DYNAMIC BILLING FIELDS --}}

                                    <!-- Normal Billing Section -->
                                    @if ($project->billing_type == 'normal')
                                        @php
                                            $normalBillingStages = [
                                                'advance' => 'Advance Payment',
                                                'uat' => 'UAT Payment',
                                                'golive' => 'Go-Live Payment',
                                            ];

                                            $billingMap = $project->billingModules->keyBy('title');
                                        @endphp

                                        @foreach ($normalBillingStages as $key => $label)
                                            @php
                                                $billing = $billingMap[$label] ?? null;
                                            @endphp
                                            <div class="row mb-3">
                                                <label class="col-sm-3 col-form-label">{{ $label }} (%)</label>
                                                <div class="col-sm-2">
                                                    <input type="number" name="{{ $key }}_payment"
                                                        value="{{ old($key . '_payment', $billing->amount ?? '') }}"
                                                        class="form-control" placeholder="e.g. 30">
                                                </div>
                                                <div class="col-sm-3">
                                                    <input type="text" name="{{ $key }}_description"
                                                        value="{{ old($key . '_description', $billing->description ?? '') }}"
                                                        class="form-control" placeholder="Description">
                                                </div>
                                                <div class="col-sm-2">
                                                    <input type="date" name="{{ $key }}_start_date"
                                                        value="{{ old($key . '_start_date', $billing->start_date ?? '') }}"
                                                        class="form-control">
                                                </div>
                                                <div class="col-sm-2">
                                                    <input type="date" name="{{ $key }}_end_date"
                                                        value="{{ old($key . '_end_date', $billing->end_date ?? '') }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif

                                    <!-- Module-Wise Billing Section -->
                                    <div id="module_wise_billing_fields">
                                        <div id="module-wise-container">
                                            @foreach ($project->billingModules as $index => $module)
                                                <div class="row mb-2 module-row">
                                                    <div class="col-sm-3">
                                                        <input type="text" name="modules[{{ $index }}][title]"
                                                            class="form-control"
                                                            value="{{ old("modules.$index.title", $module->title) }}"
                                                            placeholder="Module Title">
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <input type="number" name="modules[{{ $index }}][amount]"
                                                            class="form-control"
                                                            value="{{ old("modules.$index.amount", $module->amount) }}"
                                                            placeholder="Amount">
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <input type="text"
                                                            name="modules[{{ $index }}][description]"
                                                            class="form-control"
                                                            value="{{ old("modules.$index.description", $module->description) }}"
                                                            placeholder="Description">
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <input type="date"
                                                            name="modules[{{ $index }}][start_date]"
                                                            class="form-control"
                                                            value="{{ old("modules.$index.start_date", $module->start_date) }}">
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <input type="date"
                                                            name="modules[{{ $index }}][end_date]"
                                                            class="form-control"
                                                            value="{{ old("modules.$index.end_date", $module->end_date) }}">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <button type="button" class="btn btn-outline-primary btn-sm mb-3"
                                            onclick="addModuleRow()">+ Add Module</button>
                                    </div>

                                    <!-- One Time Billing -->
                                    @php
                                        $singleBilling = $project->billingModules->first();
                                    @endphp

                                    @if ($project->billing_type == 'advance' || $project->billing_type == 'postpayment')
                                        <div id="single_field_billing">
                                            <div class="row mb-3">
                                                <label class="col-sm-3 col-form-label" id="single_field_label">Billing
                                                    Detail</label>
                                                <div class="col-sm-3">
                                                    <input type="number" name="billing_note" class="form-control"
                                                        value="{{ old('billing_note', $singleBilling->amount ?? '') }}">
                                                </div>
                                                <div class="col-sm-3">
                                                    <input type="text" name="billing_description" class="form-control"
                                                        value="{{ old('billing_description', $singleBilling->description ?? '') }}">
                                                </div>
                                                <div class="col-sm-1">
                                                    <input type="date" name="billing_start_date" class="form-control"
                                                        value="{{ old('billing_start_date', $singleBilling->start_date ?? '') }}">
                                                </div>
                                                <div class="col-sm-2">
                                                    <input type="date" name="billing_end_date" class="form-control"
                                                        value="{{ old('billing_end_date', $singleBilling->end_date ?? '') }}">
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    {{-- END DYNAMIC BILLING FIELDS --}}


                                </div>

                                {{-- Submit Button --}}
                                <div class="row justify-content-between mt-5">
                                    <div class="col-sm-6">
                                        {{-- only on second page --}}
                                        <button id="backButton" type="button" class="btn btn-secondary"
                                            style="display: none;">Back</button>
                                    </div>
                                    <div class="col-sm-6 text-end">
                                        {{-- only on first page --}}
                                        <button id="nextButton" type="submit" class="btn btn-secondary">Next</button>

                                        {{-- only on second page --}}
                                        <button id="submitButton" class="btn btn-primary" style="display: none;">Save
                                            Project</button>
                                    </div>
                                </div>


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

        <!-- / Content -->
    @endsection
    @section('scripts')
        <script>
            const projectId = @json($project_id);
            const otherCostResponse = @json($otherCosts);
            console.log(otherCostResponse);

            calculateTotalProjectCost();
            let moduleIndex = {{ $project->billingModules->count() ?? 0 }};

            function addModuleRow() {
                const container = document.getElementById('module-wise-container');
                const row = document.createElement('div');
                row.classList.add('row', 'mb-2', 'module-row');
                row.innerHTML = `
                    <div class="col-sm-3">
                        <input type="text" name="modules[${moduleIndex}][title]" class="form-control" placeholder="Module Title">
                    </div>
                    <div class="col-sm-2">
                        <input type="number" name="modules[${moduleIndex}][amount]" class="form-control" placeholder="Amount">
                    </div>
                    <div class="col-sm-3">
                        <input type="text" name="modules[${moduleIndex}][description]" class="form-control" placeholder="Description">
                    </div>
                    <div class="col-sm-2">
                        <input type="date" name="modules[${moduleIndex}][start_date]" class="form-control">
                    </div>
                    <div class="col-sm-2">
                        <input type="date" name="modules[${moduleIndex}][end_date]" class="form-control">
                    </div>
                `;
                container.appendChild(row);
                moduleIndex++;
            }


            function calculateTotalProjectCost() {
                const toNumber = val => parseFloat(val) || 0;

                const totalResourceCost = toNumber($('#total_resource_cost').val());
                const infraCost = toNumber($('input[name="infra_cost"]').val());
                const pmCost = toNumber($('input[name="pm_cost"]').val());
                const travelCost = toNumber($('input[name="travel_cost"]').val());
                const comission = toNumber($('input[name="comission"]').val());
                const accomodation = toNumber($('input[name="accomodation_cost"]').val());
                const marketing = toNumber($('input[name="marketing_cost"]').val());
                const sales = toNumber($('input[name="sales_cost"]').val());

                let dynamicOtherCostsTotal = 0;
                $('input[name^="other_costs["]').each(function() {
                    dynamicOtherCostsTotal += toNumber($(this).val());
                });

                let customOtherCostsTotal = 0;
                $('#other-costs-container input[name^="other_costs[custom]"][name$="[amount]"]').each(function() {
                    customOtherCostsTotal += toNumber($(this).val());
                });

                // ✅ Fixed: correct typeof check
                let otherCostResponseTotal = 0;
                console.log(otherCostResponse);
                if (typeof otherCostResponse === 'object' && otherCostResponse !== null) {
                    Object.values(otherCostResponse).forEach(value => {
                        otherCostResponseTotal += toNumber(value);
                    });
                }

                // Total before profit margin
                const baseTotal =
                    totalResourceCost +
                    infraCost +
                    pmCost +
                    travelCost +
                    comission +
                    accomodation +
                    marketing +
                    sales +
                    dynamicOtherCostsTotal +
                    customOtherCostsTotal +
                    otherCostResponseTotal;

                // Profit margin
                const marginPercent = toNumber($('#profit_margin_percentage').val());
                const comissionStatic = toNumber($('#comission_static').val());
                const marginValue = (baseTotal * marginPercent) / 100;
                $('#profit_margin').val(marginValue.toFixed(2));

                // Final total
                const totalWithMargin = baseTotal + marginValue + comissionStatic;
                $('#total_project_cost').val(baseTotal.toFixed(2));
                $('#net_project_cost').val(totalWithMargin.toFixed(2));
            }

            $(document).on('input', '.otherCost', function() {
                calculateTotalProjectCost();
            });
            $(document).on('input', '#accomodation_cost', function() {
                calculateTotalProjectCost();
            });
            $(document).on('input', '.other-cost-input', function() {
                calculateTotalProjectCost();
            });

            $(document).on('input change', '.quantity-input, .rate-type-select, .other-cost-input', updateSelectedResources);

            $(document).on('input', '.rate, .duration', function() {
                const $row = $(this).closest('tr');

                const toNum = v => {
                    const n = parseFloat(v);
                    return Number.isFinite(n) ? n : null;
                };

                const r = toNum($row.find('.rate').val());
                const d = toNum($row.find('.duration').val());
                const total = (r !== null && d !== null) ? (r * d).toFixed(2) : '';

                $row.find('.total-cost').val(total);

                calculateTotalResourceCost();
                calculateTotalProjectCost();
            });



            // CKEDITOR.replace('description');
            $(document).ready(function() {

                $('#technology').select2({
                    placeholder: "Select Technology",
                    allowClear: true,
                    width: '100%'
                });
                $('#assigned_employee').select2({
                    placeholder: "Select Employee",
                    allowClear: true,
                    width: '100%'
                });
                $('#nextButton').on('click', function(e) {
                    e.preventDefault();
                    $('.firstPage').hide();
                    $('.secondPage').show();
                    $('#nextButton').hide();
                    $('#submitButton').show();
                    $('#backButton').show();
                });
                $('#backButton').on('click', function(e) {
                    e.preventDefault();
                    $('.firstPage').show();
                    $('.secondPage').hide();
                    $('#nextButton').show();
                    $('#submitButton').hide();
                    $('#backButton').hide();
                });

                calculateTotalProjectCost();


                $('#assigned_employee').on('change', updateSelectedResources);

                $('#profit_margin_percentage').on('input', calculateTotalProjectCost);
                $('#pm_percentage').on('input', calculateTotalProjectCost);
                $('.quantity-input').on('input', calculateTotalProjectCost);
                $('.rate-type-select').on('change', calculateTotalProjectCost);
                $('#comission_static').on('input', calculateTotalProjectCost);

                $('#infra_cost').on('input', calculateTotalProjectCost);
                $('#marketing_cost').on('input', calculateTotalProjectCost);
                $('#sales_cost').on('input', calculateTotalProjectCost);

                $('#travel_cost').on('input', calculateTotalProjectCost);
                $('#accomodation_cost').on('input', calculateTotalProjectCost);

                $('#otherCost').on('change', calculateTotalProjectCost);



                updateSelectedResources();

                $(
                        'input[name="infra_cost"], input[name="pm_cost"], input[name="travel_cost"], input[name="comission"], input[name="accomodation_cost"], input[name="profit_margin"], input[name="marketing_cost"], input[name="sales_cost"], #total_resource_cost'
                    )
                    .on('input', calculateTotalProjectCost);
                $(document).on('input',
                    '#cost-inputs-container input, #other-costs-container input', '#pm_percentage',
                    calculateTotalProjectCost);
                calculateTotalProjectCost();

                $(document).on('input', '#selected-resources .rate, #selected-resources .duration', function() {
                    const $row = $(this).closest('tr');
                    calculateRowTotal($row);
                    calculateTotalResourceCost();
                    calculateTotalProjectCost();
                });

                $(document).on('input change', '#cost-inputs-container input', calculateTotalProjectCost);

                // end date validation

                const $start = $('#start_date');
                const $end = $('#end_date');

                function addOneDay(ymd) {
                    const d = new Date(ymd);
                    d.setDate(d.getDate() + 1);
                    return d.toISOString().split('T')[0];
                }

                function syncEndMin() {
                    const startVal = $start.val();
                    if (!startVal) return;
                    const min = startVal;

                    $end.attr('min', min);

                    if ($end.val() && $end.val() < min) {
                        $end.val(min);
                    }
                }

                $start.on('change', syncEndMin);
                syncEndMin(); //
                //end date validation ends

                $('#assigned_employee, #pm_percentage, #total_resource_cost').on('input change', function() {
                    const percentage = parseFloat($('#pm_percentage').val()) || 0;
                    const totalResourceCost = parseFloat($('#total_resource_cost').val()) || 0;

                    const pmCost = (percentage / 100) * totalResourceCost;
                    $('#pm_cost').val(pmCost.toFixed(2));

                    calculateTotalProjectCost();
                });
 

                let editUrlBase = "{{ route('project.edit.submit', ':id') }}";
                $('#submitButton').on('click', function(e) {
                    e.preventDefault();

                    let editUrl = editUrlBase.replace(':id', projectId);
                    let $form = $('#projecteditform');
                    let formData = new FormData($form[0]);

                    $.ajax({
                        url: editUrl,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            console.log('Project updated successfully', response);
                            alert('Project updated successfully!');
                            window.location.href = "{{ route('project.manage.view') }}";
                        },
                        error: function(xhr) {
                            console.error('Error updating project:', xhr.responseText);
                            alert('Update failed. Check console for details.');
                        }
                    });
                });


                $('#nextButton').on('click', function(e) {
                    e.preventDefault();
                    $('#projecteditform').submit();
                });

                $('#projecteditform').on('submit', function(e) {
                    e.preventDefault();

                    let $form = $(this);
                    let formData = new FormData(
                        this);

                    $.ajax({
                        url: $form.attr('action'),
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                'content')
                        },
                        success: function(response) {
                            console.log('Success:', response);
                            projectId = response.project_id;
                            $('#project_id_field').val(response.project_id);

                            alert('Project updated successfully!');
                        },
                        error: function(xhr) {
                            console.error('Error:', xhr.responseText);
                            alert('Submission failed. Check console for errors.');
                        },
                        complete: function() {
                            $('#projecteditform').prop('disabled', false).text('Submit');
                        }
                    });
                });


            });

            $('#selected-resources').on('input', '.rate, .duration', function() {
                const $row = $(this).closest('tr');
                const rate = parseFloat($row.find('.rate').val()) || 0;
                const duration = parseFloat($row.find('.duration').val()) || 0;
                const total = rate * duration;

                $row.find('.total-cost').val(total.toFixed(2));

                calculateTotalResourceCost();
                calculateTotalProjectCost();
            });


            $(document).on('input change',
                'input[name="infra_cost"], input[name="marketing_cost"], input[name="sales_cost"]',
                function() {
                    console.log('Input changed:', this.name, $(this).val());
                    calculateTotalProjectCost();
                });


            //this js is for the other costs checkbox:

            const $container = $('#cost-inputs-container');
            const $otherGroup = $('#other-costs-group');


            const labelMap = {
                travel_cost: 'Travelling Cost',
                comission: 'Comission',
                accomodation_cost: 'Accomodation Cost'
            };

            $('.cost-toggle').on('change', function() {
                const selectedValue = $(this).val();

                if (selectedValue === 'other') {
                    if ($(this).is(':checked')) {
                        $otherGroup.show();
                        if ($otherContainer.children('.row').length === 0) {
                            addOtherCostRow();
                        }
                    } else {
                        $otherGroup.hide();
                        $otherContainer.empty();
                    }
                    return;
                }

                const exists = $container.find(`[data-type="${selectedValue}"]`).length > 0;

                if ($(this).is(':checked') && !exists) {
                    const row = `
                            <div class="row mb-2 cost-row" data-type="${selectedValue}">
                                <div class="col-sm-5">
                                    <label class="form-label">${labelMap[selectedValue]}</label>
                                </div>
                                <div class="col-sm-5">
                                    <input type="decimal" name="other_costs[${selectedValue}]" class="form-control" placeholder="Enter amount">
                                </div>
                                <div class="col-sm-2 text-end">
                                    <button type="button" class="btn btn-sm btn-danger remove-cost">×</button>
                                </div>
                            </div>
                        `;
                    $container.append(row);
                } else if (!$(this).is(':checked') && exists) {
                    $container.find(`[data-type="${selectedValue}"]`).remove();
                }
                calculateTotalProjectCost();
            });

            $('#add-other-cost').on('click', function() {
                addOtherCostRow();
            });
            const $otherContainer = $('#other-costs-container');

            function addOtherCostRow() {
                const index = $otherContainer.children('.row').length;
                const row = `
                        <div class="row mb-2">
                            <div class="col-sm-5">
                                <input type="text" name="other_costs[custom][${index}][title]" class="form-control " placeholder="Other Cost Title">
                            </div>
                            <div class="col-sm-5">
                                <input type="decimal" name="other_costs[custom][${index}][amount]" class="form-control otherCost" placeholder="Amount">
                            </div>
                            <div class="col-sm-2 text-end">
                                <button type="button" class="btn btn-sm btn-danger remove-cost">×</button>
                            </div>
                        </div>
                    `;
                $otherContainer.append(row);
            }

            $(document).on('click', '.remove-cost', function() {
                const $row = $(this).closest('.row');
                const type = $row.data('type');

                if (type) {
                    $(`#${type}`).prop('checked', false); // Uncheck the checkbox
                }

                $row.remove();
                calculateTotalProjectCost();

            });

            // end this js is for the other costs checkbox:
            function toNum(v) {
                const n = parseFloat(v);
                return Number.isFinite(n) ? n : 0;
            }

            function calculateRowTotal($row) {
                const rate = toNum($row.find('.rate').val());
                const duration = toNum($row.find('.duration').val());
                const total = rate * duration;
                $row.find('.total-cost').val(total ? total.toFixed(2) : '');
                return total;
            }

            function calculateTotalResourceCost() {
                let total = 0;
                $('#selected-resources .total-cost').each(function() {
                    const val = parseFloat($(this).val()) || 0;
                    total += val;
                });
                $('#total_resource_cost').val(total.toFixed(2));
            }


            //resources coming 
            const rawSalaryLogs = @json($resource_salaries);
            const resourceSalaries = {};
            var existingProjectResources = @json($resources ?? []);
            // console.log("existing mapping resources : ".existingProjectResources);

            (rawSalaryLogs || []).forEach(log => {
                const userId = String(log.user_id);
                if (
                    !resourceSalaries[userId] ||
                    new Date(log.effective_date) > new Date(resourceSalaries[userId].effective_date)
                ) {
                    const ratePerHour = parseFloat(log.rate_per_hour) || 0;
                    const salaryAmount = parseFloat(log.salary_amount) || 0;

                    resourceSalaries[userId] = {
                        effective_date: log.effective_date,
                        rate_per_hour: ratePerHour,
                        salary_amount: salaryAmount,
                        hourly: ratePerHour,
                        daily: ratePerHour * 8,
                        monthly: salaryAmount
                    };
                }
            });
            // End Structure salary data per user latest log 



            function updateSelectedResources() {
                const selectedOptions = $('#assigned_employee').find('option:selected');
                const selectedIds = selectedOptions.map(function() {
                    return String($(this).val());
                }).get();

                const $container = $('#selected-resources');

                $container.find('tr[data-id]').each(function() {
                    const rowId = String($(this).data('id'));
                    if (!selectedIds.includes(rowId)) {
                        $(this).remove();
                    }
                });

                console.log(existingProjectResources);

                selectedOptions.each(function() {
                    const id = String($(this).val());
                    const name = $(this).data('name');
                    if ($container.find(`tr[data-id="${id}"]`).length > 0) return;
                    const existing = existingProjectResources.find(r => String(r.resource_id) === id);

                    let quantity = '';
                    let rateType = 'monthly';
                    let computedRate = '';
                    let costPerHour = '';

                    if (existing) {
                        quantity = existing.duration;
                        rateType = existing.cost_type;
                        computedRate = existing.total_cost;
                        costPerHour = existing.cost_per_hour;
                    } else {
                        const salaries = resourceSalaries[id] || {
                            hourly: 0,
                            daily: 0,
                            monthly: 0
                        };
                        costPerHour = salaries.hourly;
                    }

                    const row = `
                            <tr data-id="${id}">
                                <td>
                                    <input type="hidden" name="resources[${id}][user_id]" value="${id}">
                                    <input type="hidden" name="resources[${id}][name]" value="${name}">
                                    <input type="text" class="form-control" value="${name}" readonly>
                                    <input type="hidden" class="hidden-cost-per-hour" 
                                        name="resources[${id}][cost_per_hour]" 
                                        value="${costPerHour}">
                                    
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0" 
                                        class="form-control quantity-input" 
                                        name="resources[${id}][quantity]" 
                                        placeholder="Enter quantity" 
                                        value="${quantity}">
                                </td>
                                <td>
                                    <select class="form-select rate-type-select" 
                                            name="resources[${id}][rate_type]">
                                        <option value="monthly" ${rateType === 'monthly' ? 'selected' : ''}>Monthly</option>
                                        <option value="hourly" ${rateType === 'hourly' ? 'selected' : ''}>Hourly</option>
                                        <option value="daily" ${rateType === 'daily' ? 'selected' : ''}>Daily</option>
                                        
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control computed-rate" 
                                        name="resources[${id}][computed_rate]" 
                                        value="${computedRate}" readonly>
                                </td>
                            </tr>
                        `;
                    $container.append(row);
                });

                calculateCosts();
            }

            function toNumber(value) {
                const n = parseFloat(value);
                return isNaN(n) ? 0 : n;
            }

            function calculateCosts() {
                let totalResourceCost = 0;

                $('#selected-resources tr[data-id]').each(function() {
                    const id = String($(this).data('id'));

                    const quantity = parseFloat($(this).find('.quantity-input').val()) || 0;
                    const rateType = $(this).find('.rate-type-select').val();
                    const hourlyRate = parseFloat($(this).find('.hidden-cost-per-hour').val()) || 0;

                    let computedRate = 0;

                    if (rateType === 'hourly') {
                        computedRate = quantity * hourlyRate;
                    } else if (rateType === 'daily') {
                        computedRate = quantity * hourlyRate * 8;
                    } else if (rateType === 'monthly') {
                        // Use salary amount if available for monthly calculation
                        const userData = resourceSalaries[id];
                        const monthlySalary = userData ? parseFloat(userData.salary_amount) || 0 : hourlyRate * 8 * 22;
                        computedRate = quantity * monthlySalary;
                    }

                    $(this).find('.computed-rate').val(computedRate.toFixed(2));
                    totalResourceCost += computedRate;
                });

                // Helper function to parse numbers safely
                const toNumber = val => parseFloat(val) || 0;

                // Fixed / standard costs
                const fixedCost = toNumber($('#fixed_cost').val());
                const pmCost = toNumber($('input[name="pm_cost"]').val());
                const infraCost = toNumber($('input[name="infra_cost"]').val());
                const marketing = toNumber($('input[name="marketing_cost"]').val());
                const sales = toNumber($('input[name="sales_cost"]').val());
                const travelCost = toNumber($('input[name="travel_cost"]').val());
                const commission = toNumber($('input[name="comission_cost"]').val());
                const accommodation = toNumber($('input[name="accomodation_cost"]').val());

                // Dynamic "other costs"
                let otherCostsTotal = 0;
                $('#cost-inputs-container input.other-cost-input, #other-costs-container input.other-cost-input').each(
                    function() {
                        otherCostsTotal += toNumber($(this).val());
                    });

                // Final total
                const baseTotal = totalResourceCost +
                    fixedCost +
                    pmCost +
                    infraCost +
                    marketing +
                    sales +
                    travelCost +
                    commission +
                    accommodation +
                    otherCostsTotal;

                // Update totals in the UI
                $('#total_resource_cost').val(totalResourceCost.toFixed(2));
                $('#total_project_cost').val(baseTotal.toFixed(2));
                $('#net_project_cost').val(baseTotal.toFixed(2));
            }
            const $container2 = $('#selected-resources');
            $container2.off('input change').on('input change', '.quantity-input, .rate-type-select', function() {
                const $row = $(this).closest('tr');
                const id = String($row.data('id'));
                const qty = parseFloat($row.find('.quantity-input').val()) || 0;
                const type = $row.find('.rate-type-select').val();

                const userData = resourceSalaries[id];
                console.log('Salary data for ID', id, userData);

                if (!userData) {
                    console.warn(`No salary data found for user ID ${id}`);
                    $row.find('.computed-rate').val('0.00');
                    return;
                }

                let baseRate = userData.rate_per_hour;
                let salaryAmount = userData.salary_amount;
                console.log(userData.salary_amount);

                let monthlySalary = parseFloat(userData.salary_amount) || 0;
                let total = 0;

                if (type === 'hourly') {
                    total = qty * baseRate;
                } else if (type === 'daily') {
                    total = qty * baseRate * 8;
                } else if (type === 'monthly') {
                    total = qty * monthlySalary;
                }

                $row.find('.computed-rate').val(total.toFixed(2));


                let totalResourceCost = 0;
                $('#selected-resources .computed-rate').each(function() {
                    const val = parseFloat($(this).val()) || 0;
                    totalResourceCost += val;
                });
                $('#total_resource_cost').val(totalResourceCost.toFixed(2));
                $('#total_project_cost').val(totalResourceCost.toFixed(2));
                $('#net_project_cost').val(totalResourceCost.toFixed(2));


                const pmPercentage = parseFloat($('#pm_percentage').val()) || 0;
                const pmCost = (pmPercentage / 100) * totalResourceCost;
                $('#pm_cost').val(pmCost.toFixed(2));

            });

            $('#pm_percentage').on('input change', function() {
                const percentage = parseFloat($(this).val()) || 0;
                const totalResourceCost = parseFloat($('#total_resource_cost').val()) || 0;

                const travelCost = toNumber($('input[name="travel_cost"]').val());
                const accomodation = toNumber($('input[name="accomodation_cost"]').val());

                const pmCost = (percentage / 100) * totalResourceCost;
                var totalCost = totalResourceCost + pmCost + travelCost + accomodation;
                $('#pm_cost').val(pmCost.toFixed(2));

                $('#total_project_cost').val(totalCost.toFixed(2));
                $('#net_project_cost').val(totalCost.toFixed(2));
                calculateTotalProjectCost();
            });
            $('#profit_margin_percentage').on('input change', calculateTotalProjectCost);
            $('.cost-input-class, .quantity-input, .rate-type-select').on('input change', calculateTotalProjectCost);

            $('.remove-cost').on('click', function() {
                calculateTotalProjectCost();
            });


            $(document).on('input change', '.quantity-input, .rate-type-select', function() {
                const $row = $(this).closest('tr');
                const id = String($row.data('id'));
                const qty = parseFloat($row.find('.quantity-input').val()) || 0;
                const type = $row.find('.rate-type-select').val();

                const userData = resourceSalaries[id];
                console.log('Salary data for ID', id, userData);

                if (!userData) {
                    console.warn(`No salary data found for user ID ${id}`);
                    $row.find('.computed-rate').val('0.00');
                    return;
                }

                let baseRate = userData.rate_per_hour;
                let salaryAmount = userData.salary_amount;
                console.log(userData.salary_amount);

                let monthlySalary = parseFloat(userData.salary_amount) || 0;
                let total = 0;

                if (type === 'hourly') {
                    total = qty * baseRate;
                } else if (type === 'daily') {
                    total = qty * baseRate * 8;
                } else if (type === 'monthly') {
                    total = qty * monthlySalary;
                }

                $row.find('.computed-rate').val(total.toFixed(2));


                let totalResourceCost = 0;
                $('#selected-resources .computed-rate').each(function() {
                    const val = parseFloat($(this).val()) || 0;
                    totalResourceCost += val;
                });
                $('#total_resource_cost').val(totalResourceCost.toFixed(2));
                $('#total_project_cost').val(totalResourceCost.toFixed(2));
                $('#net_project_cost').val(totalResourceCost.toFixed(2));


                const pmPercentage = parseFloat($('#pm_percentage').val()) || 0;
                const pmCost = (pmPercentage / 100) * totalResourceCost;
                $('#pm_cost').val(pmCost.toFixed(2));

                calculateTotalProjectCost();
            });
        </script>
    @endsection