@extends('master.authMaster')
@section('content')
    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-fluid flex-grow-1 container-p-y">
            <div class="row mb-4 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-5">Add Project</h3>
                            <!-- <small class="text-body-secondary float-end">Project Entry</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="projectaddform" method="POST" action="{{ route('project.submit') }}">
                                @csrf

                                <input type="hidden" id="project_id_field" name="project_id_field">

                                <div class="firstPage">
                                    {{-- Project Name --}}
                                    <div class="row mb-4">
                                       
                                        <div class="col-sm-3">
                                             <label class="col-form-label">Project Name <span
                                                class="text-danger">*</span></label>
                                            <input type="text" name="project_name" class="form-control"
                                                value="{{ old('project_name') }}" placeholder="Project Alpha">
                                            @error('project_name')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                         <div class="col-sm-3">
                                              <label class=" col-form-label">Review Project Manager<span
                                                class="text-danger">*</span></label>
                                            <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 }}"
                                                            {{ old('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 class="col-sm-3">
                                             <label class="col-form-label">Assign Team Lead </label>
                                            <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 }}"
                                                            {{ old('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 class="col-sm-3">
                                             <label class="col-form-label">Project Type <span
                                                class="text-danger">*</span></label>
                                            <select name="project_type" class="form-select">
                                                <option value="">-- Select Type --</option>
                                                <option value="1" {{ old('project_type') == 1 ? 'selected' : '' }}>
                                                    Website
                                                </option>
                                                <option value="1" {{ old('project_type') == 1 ? 'selected' : '' }}>
                                                    Admin
                                                    Dashboard
                                                </option>
                                                <option value="1" {{ old('project_type') == 1 ? 'selected' : '' }}>
                                                    Website
                                                    + Admin Dashboard
                                                </option>
                                                <option value="2" {{ old('project_type') == 2 ? 'selected' : '' }}>
                                                    Website
                                                    + Mobile App (iOS + Android)</option>
                                                <option value="3" {{ old('project_type') == 3 ? 'selected' : '' }}>
                                                    Website
                                                    + Mobile App (iOS + Android) + Playstore assistance</option>
                                                <option value="4" {{ old('project_type') == 4 ? 'selected' : '' }}>apk
                                                </option>
                                            </select>
                                            @error('project_type')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                   

                                  

                                    {{-- Project Type --}}
                                    <div class="row mb-4">
                                       
                                     

                                        <div class="col-sm-5">
                                            <input type="text" name="project_type_note" class="form-control"
                                                placeholder="One-line description. e.g lms/cms"
                                                value="{{ old('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">
                                        
                                        <div class="col-sm-3">
                                            <label class="col-form-label">Client Name <span
                                                class="text-danger">*</span></label>
                                            <input type="text" name="client_name" class="form-control"
                                                value="{{ old('client_name') }}" placeholder="Enter the Client Name">
                                            @error('client_name')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                          <div class="col-sm-3">
                                            <label class="col-form-label" for="technology">Technology
                                            <span class="text-danger">*</span>
                                        </label>
                                            <select class="form-select" id="technology" name="technology[]" multiple
                                                class="form-select select2 @error('technology') is-invalid @enderror">
                                                <option value="PHP"
                                                    {{ in_array('PHP', old('technology', [])) ? 'selected' : '' }}>PHP
                                                </option>
                                                <option value="Laravel"
                                                    {{ in_array('Laravel', old('technology', [])) ? 'selected' : '' }}>
                                                    Laravel
                                                </option>
                                                <option value="JavaScript"
                                                    {{ in_array('JavaScript', old('technology', [])) ? 'selected' : '' }}>
                                                    JavaScript</option>
                                                <option value="VueJS"
                                                    {{ in_array('VueJS', old('technology', [])) ? 'selected' : '' }}>VueJS
                                                </option>
                                                <option value="React"
                                                    {{ in_array('React', old('technology', [])) ? 'selected' : '' }}>React
                                                </option>
                                                <option value="MySQL"
                                                    {{ in_array('MySQL', old('technology', [])) ? 'selected' : '' }}>MySQL
                                                </option>
                                            </select>
                                            @error('technology')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                   

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

                                    {{-- proposal date --}}
                                    <div class="row mb-4">
                                        
                                        <div class="col-lg-3">
                                            <label class="col-form-label">Proposal Date
                                            <span class="text-danger">*</span>
                                        </label>
                                            <input type="date" name="proposal_date" id="proposal_date"
                                                class="form-control"
                                                value="{{ old('proposal_date', \Carbon\Carbon::now()->format('Y-m-d')) }}">
                                        </div>
                                           <div class="col-sm-3">
                                            <label class="col-form-label">Start Date </label>
                                            <input type="date" name="start_date" id="start_date" class="form-control"
                                                value="{{ old('start_date') }}">
                                            @error('start_date')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                         <div class="col-sm-3">
                                             <label class=" col-form-label">End Date </label>
                                            <input type="date" name="end_date" id="end_date" class="form-control"
                                                value="{{ old('end_date') }}">
                                            @error('end_date')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-sm-3">
                                             <label class="col-form-label">Status</label>
                                            <select name="status" class="form-select">
                                                <option value="initiated"
                                                    {{ old('status') == 'initiated' ? 'selected' : '' }}>
                                                    Initiated</option>
                                                <option value="inprogress"
                                                    {{ old('status') == 'inprogress' ? 'selected' : '' }}>In Progress
                                                </option>
                                                <option value="completed"
                                                    {{ old('status') == 'completed' ? 'selected' : '' }}>
                                                    Completed</option>
                                                <option value="onhold" {{ old('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-4">
                                      

                                        <div class="col-lg-3">
                                              <label class="col-form-label" for="assigned_employee">Assign Resources
                                            <span class="text-danger">*</span>
                                        </label>
                                            <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', [])) ? 'selected' : '' }}>
                                                            {{ $user->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            @error('assigned_employee')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
<h3 class="mt-5 mb-3"
                                            >Resources Name and Cost (INR)
                                        </h3>
                                    {{-- Display Selected Resources and Monthly Rates --}}
                                    <div class="row mb-4">
                                       
                                        
                                       
                                        <div id="resource-body" class="mt-4">
                                            <table class="table table-bordered" 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-4">
                                            <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>
                                     
                                    </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="{{ old('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="{{ old('pm_cost') }}"
                                                placeholder="Calculated PM Cost (INR)">
                                            @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" class="form-control"
                                                value="{{ old('infra_cost') }}" placeholder="Enter the Operational Cost">
                                            @error('infra_cost')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                   
                                    <h3 class="mb-5">Other Costs:</h3>
                                 

                                    <div class="row mb-3">
                                       
                                        <div class="col-lg-12" id="cost-checkboxes">
                                             <label class="col-form-label mr-4">Select Cost Type</label>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input cost-toggle" type="checkbox"
                                                    value="travel_cost" id="travel_cost">
                                                <label class="form-check-label" for="travel_cost">Travelling Cost</label>
                                            </div>
                                            {{-- <div class="form-check form-check-inline">
                                                <input class="form-check-input cost-toggle" type="checkbox"
                                                    value="comission" id="comission">
                                                <label class="form-check-label" for="comission">Comission</label>
                                            </div> --}}
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input cost-toggle" type="checkbox"
                                                    value="accomodation_cost" id="accomodation_cost">
                                                <label class="form-check-label" for="accomodation_cost">Accomodation
                                                    Cost</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input cost-toggle" type="checkbox"
                                                    value="other" id="other">
                                                <label class="form-check-label" for="other">Other (Custom)</label>
                                            </div>
                                        </div>
                                    </div>

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

                                    <!-- Custom Other Costs -->
                                    <div id="other-costs-group" style="display: none;">
                                        <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>


                                 


                                    <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" class="form-control"
                                                value="{{ old('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" class="form-control"
                                                value="{{ old('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 ">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>
                                        </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="{{ old('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="{{ old('profit_margin') }}"
                                                placeholder="Calculated Profit Margin (INR)">
                                            @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">
                                        </div>
                                    </div>

                                    {{-- total_project_cost after profit_margin --}}
                                    <div class="row mb-4">
                                        <label class="col-sm-2 col-form-label ">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>
                                        </div>
                                    </div>


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

                                        </label>
                                        <div class="col-sm-10">
                                            <input type="decimal" id="cost_to_customer" name="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 ">Accepted Project Cost
                                            (INR)

                                        </label>
                                        <div class="col-sm-10">
                                            <input type="decimal" id="accepted_project_cost" name="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 -->
                                    <div id="normal_billing_fields" style="display: none;">
                                        @php
                                            $normalBillingStages = [
                                                'advance' => 'Advance Payment',
                                                'uat' => 'UAT Payment',
                                                'golive' => 'Go-Live Payment',
                                            ];
                                        @endphp

                                        @foreach ($normalBillingStages as $key => $label)
                                            <div class="row mb-3">
                                                <label class="col-sm-3 col-form-label">{{ $label }} (%)</label>
                                                <div class="col-sm-2">
                                                    <input type="decimal" name="{{ $key }}_payment"
                                                        class="form-control" placeholder="e.g. 30">
                                                </div>
                                                <div class="col-sm-3">
                                                    <input type="text" name="{{ $key }}_description"
                                                        class="form-control" placeholder="Description">
                                                </div>
                                                <div class="col-sm-2">
                                                    <input type="date" name="{{ $key }}_start_date"
                                                        class="form-control">
                                                </div>
                                                <div class="col-sm-2">
                                                    <input type="date" name="{{ $key }}_end_date"
                                                        class="form-control">
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <!-- Module-Wise Billing Section -->
                                    <div id="module_wise_billing_fields" style="display: none;">

                                        <button type="button" class="btn btn-outline-primary btn-sm mb-3"
                                            onclick="addModuleRow()">+ Add Billing Milestones </button>
                                        <div id="module-wise-container"></div>
                                    </div>

                                    <!-- One Time Billing -->
                                    <div id="single_field_billing" style="display: none;">
                                        <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="decimal" name="billing_note" class="form-control"
                                                    placeholder="Enter note or percentage">
                                            </div>
                                            <div class="col-sm-3">
                                                <input type="text" name="billing_description" class="form-control"
                                                    placeholder="Billing Description">
                                            </div>
                                            <div class="col-sm-1">
                                                <input type="date" name="billing_start_date" class="form-control">
                                            </div>
                                            <div class="col-sm-2">
                                                <input type="date" name="billing_end_date" class="form-control">
                                            </div>
                                        </div>
                                    </div>

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


                                </div>

                                {{-- Submit Button --}}
                                <div class="row justify-content-between mt-4">
                                    <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>


                                    </div>
                                </div>


                            </form>

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

        <!-- / Content -->
    @endsection
    @section('scripts')
        <script>
            let projectId = null;

            function handleBillingTypeChange(value) {
                document.getElementById('normal_billing_fields').style.display = 'none';
                document.getElementById('module_wise_billing_fields').style.display = 'none';
                document.getElementById('single_field_billing').style.display = 'none';

                if (value === 'normal') {
                    document.getElementById('normal_billing_fields').style.display = 'block';
                } else if (value === 'module_wise') {
                    document.getElementById('module_wise_billing_fields').style.display = 'block';
                } else if (value === 'advance' || value === 'postpayment') {
                    document.getElementById('single_field_billing').style.display = 'block';
                    document.getElementById('single_field_label').textContent =
                        value === 'advance' ? 'Advance Billing Detail' : 'Post Live Billing Detail';
                }
            }

            function addModuleRow() {
                const container = document.getElementById('module-wise-container');
                const index = container.children.length;

                const html = `
                        <div class="row mb-3 module-row border p-2 rounded">
                            <div class="col-sm-2">
                                <input type="text" name="modules[${index}][title]" class="form-control" placeholder="Module Title">
                                
                            </div>
                            <div class="col-sm-2">
                                <input type="decimal"  name="modules[${index}][amount]" class="form-control" placeholder="Amount (INR)">
                            </div>
                            <div class="col-sm-2">
                                <input type="text" name="modules[${index}][description]" class="form-control" placeholder="Description">
                            </div>
                            <div class="col-sm-2">
                                <input type="date" name="modules[${index}][start_date]" class="form-control">
                            </div>
                            <div class="col-sm-2">
                                <input type="date" name="modules[${index}][end_date]" class="form-control">
                            </div>
                            <div class="col-sm-2 d-flex align-items-center">
                                <button type="button" class="btn btn-danger btn-sm" onclick="this.closest('.module-row').remove()">Remove</button>
                            </div>
                        </div>
                    `;
                container.insertAdjacentHTML('beforeend', html);
            }

            $('#selected-resources').on('input', '.quantity-input, .rate-type-select', calculateCosts);
            $('#assigned_employee').on('change', calculateTotalProjectCost);

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

                $('#proposal_date').on('focus click', function() {
                    if (this.showPicker) {
                        this.showPicker();
                    } else {
                        $(this).trigger('click');
                    }
                });
                $('#start_date').on('focus click', function() {
                    if (this.showPicker) {
                        this.showPicker();
                    } else {
                        $(this).trigger('click');
                    }
                });
                $('#end_date').on('focus click', function() {
                    if (this.showPicker) {
                        this.showPicker();
                    } else {
                        $(this).trigger('click');
                    }
                });

                $('#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();
                // });

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

                    let isValid = true;

                    const requiredFields = [
                        'input[name="project_name"]',
                        'select[name="project_manager_id"]',
                        'select[name="project_type"]',
                        'input[name="client_name"]',
                        'select[name="technology[]"]',
                        'input[name="proposal_date"]'
                    ];

                    $('.is-invalid').removeClass('is-invalid');
                    $('.border-danger').removeClass('border-danger');
                    $('.text-danger.tech-error').remove();

                    requiredFields.forEach(function(selector) {
                        const field = $(selector);

                        if (field.length) {
                            if (field.is('[multiple]')) {
                                if (!field.val() || field.val().length === 0) {
                                    field.addClass('is-invalid');
                                    field.next('.select2-container')
                                        .find('.select2-selection')
                                        .addClass('border border-danger');
                                    if (field.closest('.col-sm-10').find('.tech-error').length === 0) {
                                        field.closest('.col-sm-10').append(
                                            '<div class="text-danger mt-1 tech-error">Please select at least one technology.</div>'
                                        );
                                    }

                                    isValid = false;
                                } else {
                                    field.removeClass('is-invalid');
                                    field.next('.select2-container')
                                        .find('.select2-selection')
                                        .removeClass('border border-danger');
                                    field.closest('.col-sm-10').find('.tech-error').remove();
                                }
                            } else {
                                if (!field.val() || $.trim(field.val()) === '') {
                                    field.addClass('is-invalid');
                                    isValid = false;
                                }
                            }
                        }
                    });

                    if (isValid) {
                        $('.firstPage').hide();
                        $('.secondPage').show();
                        $('#nextButton').hide();
                        $('#submitButton').show();
                        $('#backButton').show();
                    } else {
                        alert('Please fill all required fields before continuing.');
                    }
                });


                let editUrlBase = "{{ route('project.edit.submit', ':id') }}";

                $('#submitButton').on('click', function(e) {
                    e.preventDefault();

                    if (!projectId) {
                        alert('Project ID not found. Please submit the project first.');
                        return;
                    }

                    let editUrl = editUrlBase.replace(':id', projectId);
                    let $form = $('#projectaddform');
                    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.ef = "{{ route('project.manage.view') }}";
                        },
                        error: function(x) {
                            console.error('Error updating project:', x.responseText);
                            alert('Update failed. Check console for details.');
                        }
                    });
                });


                $('#nextButton').on('click', function(e) {
                    e.preventDefault();
                    if (!projectId) {
                        $('#projectaddform').submit();
                    } else {
                        console.log('Project already created with ID:', projectId);
                        // Move to next step or perform another action here
                    }
                });

                $('#projectaddform').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 submitted successfully!');
                        },
                        error: function(x) {
                            console.error('Error:', x.responseText);
                            alert('Submission failed. Check console for errors.');
                        },
                        complete: function() {
                            $('#submitProjectForm').prop('disabled', false).text('Submit');
                        }
                    });
                });

                $('input, select').on('input change', function() {
                    const field = $(this);

                    if (field.is('[multiple]')) {
                        if (field.val() && field.val().length > 0) {
                            field.removeClass('is-invalid');
                            field.next('.select2-container')
                                .find('.select2-selection')
                                .removeClass('border border-danger');
                            field.closest('.col-sm-10').find('.tech-error').remove();
                        }
                    } else {
                        if (field.val() && $.trim(field.val()) !== '') {
                            field.removeClass('is-invalid');
                        }
                    }
                });

                $('#backButton').on('click', function(e) {
                    e.preventDefault();
                    $('.firstPage').show();
                    $('.secondPage').hide();
                    $('#nextButton').show();
                    $('#submitButton').hide();
                    $('#backButton').hide();
                });

                $('#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);
                $('#pm_percentage').on('input', updateSelectedResources);


                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', 'input[name="pm_percentage"], input[name^="resources"][name$="[quantity]"]',
                    function() {
                        calculateTotalProjectCost();
                    });

                const initialBillingType = $('#billing_type').val();
                if (initialBillingType) {
                    handleBillingTypeChange(initialBillingType);
                }

                $(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();
                });

                function calculateTotalResourceCost() {
                    let total = 0;

                    $('.total-cost').each(function() {
                        total += parseFloat($(this).val()) || 0;
                    });

                    $('#total_resource_cost').val(total.toFixed(2));
                }

                //this js is for the other costs checkbox:

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

                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();
                    }
                });

                $('#add-other-cost').on('click', function() {
                    addOtherCostRow();
                });

                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" 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:


                $(document).on('input', 'input[type="decimal"]', function() {
                    // Remove negative sign and plus sign
                    this.value = this.value.replace(/[+\-]/g, '');
                });


                const $start = $('input[name="start_date"]');
                const $end = $('input[name="end_date"]');

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

                    // Set minimum date for end date
                    $end.attr('min', startVal);

                    // If the current end date is before start date, reset it
                    if ($end.val() && $end.val() < startVal) {
                        $end.val(startVal);
                    }
                }

                $start.on('change', syncEndMin);
                syncEndMin();


                $('#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();
                });


            });

            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;
                $('#cost-inputs-container input[type="decimal"]').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());
                });

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

                // Calculate profit margin from percentage
                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 including profit margin
                const totalWithMargin = baseTotal + marginValue + comissionStatic;
                $('#total_project_cost').val(baseTotal.toFixed(2));
                $('#net_project_cost').val(totalWithMargin.toFixed(2));
            }

            //resources coming 
            const rawSalaryLogs = @json($resource_salaries);
            const resourceSalaries = {};

            (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 toNumber(val) {
                return parseFloat(val) || 0;
            }

            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();
                    }
                });
                selectedOptions.each(function() {
                    const id = String($(this).val());
                    const name = $(this).data('name');

                    if ($container.find(`tr[data-id="${id}"]`).length > 0) return;

                    const salaries = resourceSalaries[id] || {
                        hourly: 0,
                        daily: 0,
                        monthly: 0
                    };

                    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="${salaries.hourly}">
                                <input type="hidden" class="hidden-cost-monthly" name="resources[${id}][cost_monthly]" value="${salaries.monthly}">

                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control quantity-input" name="resources[${id}][quantity]" placeholder="Enter quantity">
                            </td>
                            <td>
                                <select class="form-select rate-type-select" name="resources[${id}][rate_type]">
                                   <option value="monthly">Monthly</option>
                                   <option value="daily">Daily</option>
                                    <option value="hourly">Hourly</option>
                                    
                                </select>
                            </td>
                            <td>
                                <input type="text" class="form-control computed-rate" name="resources[${id}][computed_rate]" readonly>
                            </td>
                        </tr>
                    `;
                    $container.append(row);
                });
                calculateCosts();

            }
            //func for : if option deslected amount should get updated.
            function calculateCosts() {
                let totalResourceCost = 0;

                $('#selected-resources tr[data-id]').each(function() {
                    const id = $(this).data('id');
                    let quantity = parseFloat($(this).find('.quantity-input').val()) || 0;
                    let rateType = $(this).find('.rate-type-select').val();
                    let hourlyRate = parseFloat($(this).find('.hidden-cost-per-hour').val()) || 0;
                    let monthlyRate = parseFloat($(this).find('.hidden-cost-monthly').val()) || 0;

                    console.log(
                        `Row ID: ${id}, Quantity: ${quantity}, Rate Type: ${rateType}, Hourly Rate: ${hourlyRate} , monthly rate ${monthlyRate}`
                    );

                    let computedRate = 0;
                    if (rateType === 'hourly') {
                        computedRate = quantity * hourlyRate;
                    } else if (rateType === 'daily') {
                        computedRate = quantity * hourlyRate * 8;
                    } else if (rateType === 'monthly') {
                        computedRate = quantity * monthlyRate;
                    }

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

                let fixedCost = parseFloat($('#fixed_cost').val()) || 0;
                let totalProjectCost = totalResourceCost + fixedCost;

                $('#total_resource_cost').val(totalResourceCost.toFixed(2));

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

                let dynamicOtherCostsTotal = 0;
                $('#cost-inputs-container input[type="decimal"]').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());
                });

                const baseTotal = totalResourceCost + infraCost + pmCost + travelCost +
                    comission + accomodation + marketing + sales +
                    dynamicOtherCostsTotal + customOtherCostsTotal;

                $('#total_resource_cost').val(totalResourceCost.toFixed(2));
                $('#total_project_cost').val(baseTotal.toFixed(2));
                $('#net_project_cost').val(baseTotal.toFixed(2));

            }
            //end :


            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));

                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 pmCost = (percentage / 100) * totalResourceCost;
                $('#pm_cost').val(pmCost.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();
            });

            $('#assigned_employee').on('change', calculateTotalProjectCost);
        </script>
    @endsection