@extends('front.layouts.master-auth')
@section('content')
    <!-- Start Page Content -->
    <section class="page-content">
        <div class="container">
            <div class="addOffer-page-title">
                <h2 class="addOffer-name">
                   @isset($offer) @lang('Edit Offer') @else @lang('Add Offer') @endisset
                </h2>
            </div>
            <div class="addOffer-page-cont">
                <div class="addOffer-right-div">
                    <div class="addOffer-block">
                        <div class="block-head">
                            <h3 class="block-title">
                                تفاصيل المشروع
                                @if($project->is_private)
                                    <span class="hint" style="display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 10px; background: #fc8b8b; color: #fff; border-radius: 3px; margin-right: 5px; font-weight: 600; vertical-align: middle;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M12 1C8.676 1 6 3.676 6 7v2H5c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2h-1V7c0-3.324-2.676-6-6-6zm0 2c2.206 0 4 1.794 4 4v2H8V7c0-2.206 1.794-4 4-4zm0 10c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/>
                                        </svg>
                                        مشروع خاص
                                    </span>
                                @endif
                            </h3>
                            <a href="{{route('project.details', [$project->id, createProjectSlug($project->title)])}}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 5px;">
                                    <line x1="19" y1="12" x2="5" y2="12"></line>
                                    <polyline points="12 19 5 12 12 5"></polyline>
                                </svg>
                                @lang('View Project')
                            </a>
                        </div>
                        <div class="block-body">
                            <h6 style="font-size: 18px;"> {{$project->title}} </h6>
                            <div class="project-info">
                                @php
                                    $description = format_text($project->description);
                                    $shortDescription = mb_substr($project->description ?? '', 0, 100);
                                    $isLong = mb_strlen($project->description ?? '') > 100;

                                    if(isset($project->is_direct) && $project->is_direct){
                                        $commissionRate = getDirectCommission();
                                    }else{
                                        $commissionRate = getCommission();
                                    }
                                @endphp
                                
                                <div class="project-desc" id="project-description-create">
                                    @if($isLong)
                                        <span class="short-text">{!! e($shortDescription) !!}...</span>
                                        <div class="full-text" style="display: none;">{!! $description !!}</div>
                                        <button type="button" class="show-more-btn" id="toggleDescriptionCreate" style="background: none; border: none; color: #60d049; cursor: pointer; font-weight: 600; padding: 0; margin-right: 5px; display: inline;">
                                            عرض المزيد
                                        </button>
                                    @else
                                        {!! $description !!}
                                    @endif
                                </div>
                                <!-- <ul class="additional-info list-unstyled">
                                    <li>
                                        <span>حجم المشروع :</span>
                                        كبير
                                    </li>
                                    <li>
                                        <span>الميزانية :</span>
                                        1,000 $
                                    </li>
                                    <li>
                                        <span>مدة التنفيذ :</span>
                                        أقل من شهر
                                    </li>
                                </ul> -->
                            </div>
                        </div>
                    </div>
                    <form action="@isset($offer){{ route('offer.update', $offer->uuid) }}@else{{ route('offer.store') }}@endisset" method="post" enctype="multipart/form-data" id="add_offer">
                        @csrf
                        <input type="hidden" name="project_id" value="{{$project->id}}">
                        @if($errors->any())
                            <div class="alert alert-danger" style="margin-bottom: 15px; border-radius: 8px;">
                                <ul style="margin: 0; padding-right: 20px;">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                    <div class="addOffer-block">
                        <div class="block-head">
                            <h3 class="block-title"> تفاصيل الدفع </h3>
                        </div>
                        <div class="block-body">
                            <h4>
                                كيف تريد استلام مستحقاتك؟
                            </h4>
                            @if($project->budget_type == \App\Models\Project::BUDGET_TYPE_FIXED)
                                @php
                                    $isStagesProject = $project->size?->payment_type === 'stages';
                                    $defaultPart = (isset($offer) && $offer->payment_type === 'part')
                                        || ($isStagesProject && !isset($offer));
                                    $defaultFull = !$defaultPart;
                                @endphp
                                <div class="radios">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" required name="payment_type" {{ $defaultFull ? 'checked' : '' }} value="full">
                                            <span class="mark"></span>
                                            <div class="radio-text">
                                                <h6>دفعة واحدة</h6>
                                                <p>تحصل على المبلغ كاملاً بعد تسليم المشروع واعتماده.</p>
                                            </div>
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" required name="payment_type" {{ $defaultPart ? 'checked' : '' }} value="part">
                                            <span class="mark"></span>
                                            <div class="radio-text">
                                                <h6>دفعات مرحلية</h6>
                                                <p>قسّم المشروع إلى مراحل، وتحصل على مستحقاتك عند إتمام كل مرحلة. (يجب إضافة مرحلتين على الأقل)</p>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="method-form" id="full" style="display: block">
                                    
                                    <div class="full-project-cost project-cost">
                                        <div class="form-group">
                                            <label>
                                                قيمة العرض
                                            </label>
                                            <div class="input-cont">
                                                <input type="number" min="10" name="price" id="total_cost"
                                                       value="{{ isset($offer) ? $offer->total : ($project->price ?? $project->price_from) }}"
                                                       class="form-control">
                                                <span>$</span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>
                                               مستحقاتك :
                                               <span style="font-size: 12px;"> بعد خصم <a href="{{route('front.pricing')}}">عمولة المنصة</a> {{$commissionRate}}%</span>
                                            </label>
                                            <div class="input-cont">
                                                <input type="number" min="0" readonly id="revenue"
                                                       value="{{($project->price ?? $project->price_from) - round(($project->price ?? $project->price_from) * ($commissionRate / 100), 3)}}"
                                                       class="form-control">
                                                <span>$</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="method-form" id="part" >
                                    <div class="part-project-cost project-cost">
                                        @if(isset($offer) && $offer->installments->count() > 0)
                                            @foreach($offer->installments as $i => $installment)
                                                <div class="part-item">
                                                    <div class="part-item-input part-item-input-special">
                                                        <label>
                                                            وصف المرحلة
                                                        </label>
                                                        <input type="text" name="description[]" class="form-control" placeholder="مثال: تصميم الواجهة الرئيسية" value="{{ $installment->description }}">
                                                    </div>
                                                    <div class="part-item-input">
                                                        <label>
                                                            المدة
                                                        </label>
                                                        <div class="input-cont">
                                                            <input type="number" min="1" name="delivery_days_part[]" class="form-control installment-days" required placeholder="@lang('Number of days')" value="{{ $installment->delivery_days }}">
                                                            <span>@lang('Day')</span>
                                                        </div>
                                                    </div>
                                                    <div class="part-item-input">
                                                        <label>
                                                            التكلفة
                                                        </label>
                                                        <div class="input-cont">
                                                            <input type="number" min="5" name="amount[]"
                                                                   value="{{ $installment->amount }}"
                                                                   class="form-control">
                                                            <span>$</span>
                                                        </div>
                                                    </div>
                                                    @if($i == 0)
                                                        <a href="#!" class="one-more"> أضف مرحلة </a>
                                                    @else
                                                        <div class="del-cont">
                                                            <a href="#!" class="del-part">حذف مرحلة</a>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="part-item">
                                                <div class="part-item-input part-item-input-special">
                                                    <label>
                                                        وصف المرحلة
                                                    </label>
                                                    <input type="text" name="description[]" class="form-control" placeholder="مثال: تصميم الواجهة الرئيسية">
                                                </div>
                                                <div class="part-item-input">
                                                    <label>
                                                        المدة
                                                    </label>
                                                    <div class="input-cont">
                                                        <input type="number" min="1" name="delivery_days_part[]" class="form-control installment-days" required placeholder="@lang('Number of days')">
                                                        <span>@lang('Day')</span>
                                                    </div>
                                                </div>
                                                <div class="part-item-input">
                                                    <label>
                                                        التكلفة
                                                    </label>
                                                    <div class="input-cont">
                                                        <input type="number" min="5" name="amount[]"
                                                               value="{{$project->price ?? $project->price_from}}"
                                                               class="form-control">
                                                        <span>$</span>
                                                    </div>
                                                </div>
                                                <a href="#!" class="one-more">
                                                    أضف مرحلة
                                                </a>
                                            </div>
                                        @endif


                                        <div class="cost-summary">
                                           {{-- <h4> مجموع مدة وتكلفة المشروع </h4> --}}
                                            <div class="cost-flex">
                                                <div class="cost-item">
                                                    المدة الإجمالية :
                                                    <strong id="total-delivery-days">0 @lang('Day')</strong>
                                                </div>
                                                <div class="cost-item">
                                                    إجمالي التكلفة :
                                                    <strong id="total-cost">$</strong>
                                                </div>
                                                {{-- <div class="cost-item">
                                                    @lang('Service Cost') :
                                                    <strong id="service-cost"></strong>
                                                </div> --}}
                                                <div class="cost-item" style="flex-direction: column; align-items: flex-start;">
                                                    <div style="white-space: nowrap;display: flex;align-items: center;gap: 5px;"> مستحقاتك : <strong id="revenue-cost">$</strong> </div>
                                                    <div style="font-size: 12px;margin-top: -10px;">بعد خصم <a href="{{route('front.pricing')}}" style="font-size: 12px; margin-top: 2px;">عمولة المنصة</a> {{$commissionRate}}%</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @else
                                <div class="radios">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" required name="payment_type" checked value="full">
                                            <span class="mark"></span>
                                            <div class="radio-text">
                                                <h6>
                                                    أجر بالساعة
                                                </h6>
                                                <p>
                                                    يتم احتساب مستحقاتك بناءً على عدد ساعات العمل.
                                                </p>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="method-form" id="full" style="display: block">
                                    
                                    <div class="full-project-cost project-cost">
                                        <div class="part-item">
                                            <div class="form-group">
                                                <label>
                                                    سعر الساعة
                                                </label>
                                                <div class="input-cont">
                                                    <input type="number" min="10" required name="price" id="total_cost"
                                                           value="{{$project->price ?? $project->price_from}}"
                                                           class="form-control">
                                                    <span>$</span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label>
                                                    عدد الساعات
                                                </label>
                                                <div class="input-cont">
                                                    <input type="number" min="0" required name="hours_number" id="total_hours"
                                                           value="{{old('hours_number')}}"
                                                           class="form-control">
                                                    <span></span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label>
                                                مستحقاتك
                                                </label>
                                                <div class="input-cont">
                                                    <input type="number" min="0" readonly id="revenue_hours"
                                                           value="{{($project->price ?? $project->price_from) - round(($project->price ?? $project->price_from) * ($commissionRate / 100), 3)}}"
                                                           class="form-control">
                                                    <span>$</span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <strong>
                                        عمولة المنصة :
                                        <span> {{$commissionRate }} %</span>
                                    </strong>
                                </div>

                            @endif
                        </div>
                    </div>
                    @if(count($project->questions) > 0)
                    <div class="addOffer-block">
                        <div class="block-head">
                            <h3 class="block-title">
                                @lang('Questions')
                            </h3>
                        </div>
                        <div class="block-body">
                            @foreach($project->questions as $question)
                                <label class="label">
                                    {{$question->question}}
                                </label>
                                <textarea style="height: unset !important;" class="form-control" required name="answers[{{$question->question}}]">{{ isset($offer) && isset($offer->answers[$question->question]) ? $offer->answers[$question->question] : '' }}</textarea>
                            @endforeach
                        </div>
                    </div>
                    @endif
                    <div class="addOffer-block">
                        <div class="block-head">
                            <h3 class="block-title">
                                @lang('Offer Details')
                            </h3>
                        </div>
                        <div class="block-body offer-details-add">
                            <h4 id="duration_title"> مدة التسليم </h4>
                            <div class="input-cont">
                                <input type="number" min="1" name="delivery_days" id="offer_delivery_days" class="form-control" value="{{ isset($offer) ? $offer->delivery_days : old('delivery_days') }}" required placeholder="@lang('Number of days')">
                                <span>يوم</span>
                            </div>
                            <h4 style="margin-top:15px"> التفاصيل </h4>
                            <div class="inputs-cont">
                                <textarea class="form-control" name="notes" id="offer-notes" required placeholder="اشرح كيف ستنفذ المشروع، خبرتك في مشاريع مشابهة، والأدوات التي ستستخدمها..." style="padding-bottom:15px">{{ isset($offer) ? $offer->notes : old('notes') }}</textarea>
                                <div class="word-counter" id="word-counter">
                                    <span id="current-word-count">0</span> / 25 كلمة
                                </div>
                            </div>
                            @php $offerMediaCount = isset($offer) ? $offer->getMedia('attachments')->count() : 0; @endphp
                            <button type="button" class="dropzone-toggle-btn" id="offer-dropzone-toggle">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                                <span class="toggle-btn-text">@lang('front.Attach Files')</span>
                                <span class="toggle-file-count" style="{{ $offerMediaCount > 0 ? '' : 'display:none' }}">{{ $offerMediaCount }}</span>
                            </button>
                            <div class="file-drop-zone multi-file-zone" id="offer-drop-zone" style="{{ $offerMediaCount > 0 ? 'margin-top:8px' : 'display:none; margin-top:8px' }}">
                                <div class="input-file-text">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="39.629" height="27.74" viewBox="0 0 39.629 27.74">
                                        <path d="M33.289,14.3A5.951,5.951,0,0,0,27.74,6.213a5.914,5.914,0,0,0-3.3,1,9.908,9.908,0,0,0-18.5,4.941c0,.167.006.334.012.5A8.919,8.919,0,0,0,8.917,29.99H31.7A7.925,7.925,0,0,0,33.289,14.3ZM24.36,18.1H20.31v6.935a.994.994,0,0,1-.991.991H16.347a.994.994,0,0,1-.991-.991V18.1h-4.05a.989.989,0,0,1-.7-1.69l6.526-6.526a.994.994,0,0,1,1.4,0l6.526,6.526a.99.99,0,0,1-.7,1.69Z" transform="translate(0 -2.25)" fill="#393939"></path>
                                    </svg>
                                    <span class="drop-text">اسحب الملفات هنا أو اضغط للاختيار (حتى 5 ملفات)</span>
                                    <input type="file" name="attachments[]" multiple id="file-upload">
                                </div>
                                <div class="multi-file-preview">
                                    @if($offerMediaCount > 0)
                                        @foreach($offer->getMedia('attachments') as $media)
                                            <div class="multi-file-item existing-item" data-media-id="{{ $media->id }}">
                                                <div class="item-preview">
                                                    @if(str_contains($media->mime_type, 'image'))
                                                        <img src="{{ $media->getUrl() }}" alt="{{ $media->file_name }}" loading="lazy" decoding="async">
                                                    @else
                                                        <div class="file-icon-placeholder">
                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
                                                            <span class="file-ext">{{ strtoupper(pathinfo($media->file_name, PATHINFO_EXTENSION)) }}</span>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="item-name" title="{{ $media->file_name }}">{{ $media->file_name }}</div>
                                                <button type="button" class="item-remove" data-existing="1">&times;</button>
                                                <input type="hidden" name="existing_attachments[]" value="{{ $media->id }}">
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <div class="btns">
{{--                        <a href="#" onclick="$('#add_offer').submit()" class="send-anchor">--}}
{{--                            @lang('Send')--}}
{{--                        </a>--}}
                        <button type="button" class="send-anchor" id="offer-submit-btn">
                            @isset($offer) @lang('Update Offer') @else @lang('Send') @endisset
                        </button>
                        
                    </div>

                    </form>
                </div>
                <div class="side-cont">

                {{-- Project Details Box --}}
                @include('front.project._project_details_box')

                    <div class="box-cont smart-tips-box">
                        <h3 class="side-title">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-left: 5px;">
                                <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                            التوصية الذكية
                        </h3>
                        <p class="smart-tips-desc">صاحب المشروع يرى نسبة توافق كل عرض مع مشروعه. لترفع نسبتك:</p>
                        <ul class="smart-tips-list">
                            <li>
                                <span class="tip-points">+10</span>
                                <span>اكتب تفاصيل العرض بشكل مفصّل (25 كلمة على الأقل)</span>
                            </li>
                            <li>
                                <span class="tip-points">+10</span>
                                <span>أجب على جميع أسئلة صاحب المشروع</span>
                            </li>
                            <li>
                                <span class="tip-points">+20</span>
                                <span>قدّم سعراً ضمن ميزانية المشروع المحددة</span>
                            </li>
                            <li>
                                <span class="tip-points">+10</span>
                                <span>حدد مدة تسليم واقعية تناسب حجم المشروع</span>
                            </li>
                            <li>
                                <span class="tip-points">+10</span>
                                <span>تأكد أن تخصصك في ملفك يطابق تصنيف المشروع</span>
                            </li>
                            <li>
                                <span class="tip-points">+30</span>
                                <span>أكمل ملفك الشخصي، وثّق هويتك، واحصل على تقييمات عالية</span>
                            </li>
                        </ul>
                    </div>

                    <div class="box-cont">
                    <h3 class="side-title">
                        ملاحظات هامة
                    </h3>
                    <ol class="help">
                        {!! getSetting('project_freelancer_notes') !!}
                    </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Page Content -->
@endsection
@section('js-body')
    <style>
        /* Validation styling for enhanced user experience */
        .is-invalid {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        }

        .is-invalid:focus {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        }

        /* Smooth transitions for better UX */
        .form-control {
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        /* Loading indicator for calculations */
        .calculating {
            opacity: 0.7;
            pointer-events: none;
        }

        /* Error message styling */
        .invalid-feedback {
            display: block;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 0.875em;
            color: #dc3545;
        }

        /* Smooth animations for better UX */
        .form-control:focus {
            border-color: unset;
            outline: 0;
            /* box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); */
            border: 1px solid #ccc;
        }
    </style>
    <script>
        function togglePaymentFields() {
            // Read selected payment type from radio buttons
            var valueId = $("input[name='payment_type']:checked").val()
                       || $("input[type='hidden'][name='payment_type']").val();
            if (!valueId) return;

            // Remove required attributes from hidden divs immediately
            $(".method-form").not("#" + valueId).find('input').prop('required', false);
            $(".pay-inputs").not("#" + valueId).find('input').prop('required', false);
            
            // Add required attributes to shown div immediately (except readonly fields)
            $("#" + valueId).find('input').not('[readonly]').prop('required', true);

            // Animate visibility
            $(".method-form").not("#" + valueId).slideUp();
            $(".pay-inputs").not("#" + valueId).slideUp();
            $("#" + valueId).slideDown();

            // Toggle the standalone delivery_days input
            if (valueId === 'part') {
                $('#duration_title').slideUp();
                $('#offer_delivery_days').closest('.input-cont').slideUp();
                $('#offer_delivery_days').prop('required', false);
            } else {
                $('#duration_title').slideDown();
                $('#offer_delivery_days').closest('.input-cont').slideDown();
                $('#offer_delivery_days').prop('required', true);
            }
        }

        $('input:radio[name=payment_type]').change(togglePaymentFields);
        
        // Initialize correct required states on page load
        $(document).ready(function() {
            togglePaymentFields();
            calculateInstallmentValues();
            calculateTotalDeliveryDays();
        });
        // Enhanced delete part functionality
        $(document).on('click', '.del-part', function () {
            $(this).closest('.part-item').remove();
            // Recalculate totals after removing a part
            calculateInstallmentValues();
            calculateTotalDeliveryDays();
        });

        {{--// on click one-more class add new part-item--}}
        {{--$(document).on('click', '.one-more', function () {--}}
        {{--    var partItem = '@include('front.user.offer._column')';--}}
        {{--    $('.part-project-cost').append(partItem);--}}
        {{--});--}}

        $(document).on('click', '.one-more', function () {
            $.ajax({
                url: '{{route('partial.payment.row')}}', // Your route to fetch the partial
                method: 'GET',
                success: function (response) {
                    $('.cost-summary').before(response);
                },
                error: function () {
                    alert('Failed to fetch partial content.');
                }
            });
        });

        // Calculate total delivery days from installment parts
        function calculateTotalDeliveryDays() {
            let totalDays = 0;
            $('input[name^="delivery_days_part"]').each(function () {
                const value = parseInt($(this).val()) || 0;
                totalDays += value;
            });
            $('#total-delivery-days').text(totalDays + ' ' + '@lang("Day")');
        }

        // Event handler for installment delivery days
        $(document).on('input', 'input[name^="delivery_days_part"]', function () {
            calculateTotalDeliveryDays();
        });

        // Enhanced installment calculation function
        function calculateInstallmentValues() {
            let total = 0;
            let hasInvalidInput = false;

            // Calculate total from all amount inputs with validation
            $('input[name^="amount"]').each(function () {
                const value = parseFloat($(this).val()) || 0;

                // Validate input
                if (value < 0) {
                    $(this).addClass('is-invalid');
                    hasInvalidInput = true;
                } else {
                    $(this).removeClass('is-invalid');
                    total += value;
                }
            });

            // Don't proceed if there are invalid inputs
            if (hasInvalidInput) {
                return;
            }

            // Calculate commission and revenue
            const commissionRate = {{$commissionRate}};
            const commission = (total * commissionRate) / 100;
            const revenue = total - commission;

            // Format currency values
            const formatCurrency = (value) => {
                return parseFloat(value).toFixed(2);
            };

            // Update display elements
            const totalCostDisplay = $('#total-cost');
            const revenueCostDisplay = $('#revenue-cost');
            const serviceCostDisplay = $('#service-cost');

            if (totalCostDisplay.length) {
                totalCostDisplay.text(formatCurrency(total) + ' $');
            }

            if (revenueCostDisplay.length) {
                revenueCostDisplay.text(formatCurrency(revenue) + ' $');
            }

            if (serviceCostDisplay.length) {
                serviceCostDisplay.text('-' + formatCurrency(commission) + ' $');
            }
        }

        // Debounced version for installment calculations
        let installmentCalculationTimeout;
        function debouncedInstallmentCalculate() {
            clearTimeout(installmentCalculationTimeout);
            installmentCalculationTimeout = setTimeout(calculateInstallmentValues, 300);
        }

        // Event handler for installment amounts with debouncing
        $(document).on('input', 'input[name^="amount"]', function () {
            debouncedInstallmentCalculate();
        });

        // Enhanced calculation function with proper validation and error handling
        function calculateOfferValues() {
            const totalCostInput = $('#total_cost');
            const totalHoursInput = $('#total_hours');
            const serviceInput = $('#service');
            const revenueInput = $('#revenue');
            const revenueHoursInput = $('#revenue_hours');

            // Get and validate input values
            const totalCost = parseFloat(totalCostInput.val()) || 0;
            const totalHours = parseFloat(totalHoursInput.val()) || 0;

            // Validate inputs
            if (totalCost < 0) {
                totalCostInput.addClass('is-invalid');
                return;
            } else {
                totalCostInput.removeClass('is-invalid');
            }

            if (totalHours < 0) {
                totalHoursInput.addClass('is-invalid');
                return;
            } else {
                totalHoursInput.removeClass('is-invalid');
            }

            // Calculate total amount (cost * hours for hourly projects)
            const totalAmount = totalCost * (totalHours > 0 ? totalHours : 1);

            // Calculate commission and revenue
            const commissionRate = {{$commissionRate}};
            const commission = (totalAmount * commissionRate) / 100;
            const revenue = totalAmount - commission;

            // Update all related fields with proper formatting
            const formatCurrency = (value) => {
                return parseFloat(value).toFixed(2);
            };

            // Update service cost field if it exists
            if (serviceInput.length) {
                serviceInput.val(formatCurrency(commission));
            }

            // Update revenue fields
            if (revenueInput.length) {
                revenueInput.val(formatCurrency(revenue));
            }

            if (revenueHoursInput.length) {
                revenueHoursInput.val(formatCurrency(revenue));
            }

            // Update display elements if they exist
            const serviceCostDisplay = $('#service-cost');
            const revenueCostDisplay = $('#revenue-cost');
            const totalCostDisplay = $('#total-cost');

            if (serviceCostDisplay.length) {
                serviceCostDisplay.text('-' + formatCurrency(commission) + ' $');
            }

            if (revenueCostDisplay.length) {
                revenueCostDisplay.text(formatCurrency(revenue) + ' $');
            }

            if (totalCostDisplay.length) {
                totalCostDisplay.text(formatCurrency(totalAmount) + ' $');
            }
        }

        // Debounced version of the calculation function for better performance
        let calculationTimeout;
        function debouncedCalculate() {
            clearTimeout(calculationTimeout);
            calculationTimeout = setTimeout(calculateOfferValues, 300);
        }

        // Event handlers with debouncing
        $(document).on('input', '#total_cost, #total_hours', function() {
            debouncedCalculate();
        });

        // Also trigger calculation on page load to set initial values
        $(document).ready(function() {
            calculateOfferValues();
            calculateInstallmentValues();

            // Add input validation for better UX
            $('input[type="number"]').on('blur', function() {
                const value = parseFloat($(this).val());
                if (value < 0) {
                    $(this).addClass('is-invalid');
                    // Show error message
                    if (!$(this).next('.invalid-feedback').length) {
                        $(this).after('<div class="invalid-feedback">Please enter a valid positive number.</div>');
                    }
                } else {
                    $(this).removeClass('is-invalid');
                    $(this).next('.invalid-feedback').remove();
                }
            });

            // Clear validation on input
            $('input[type="number"]').on('input', function() {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            });
        });

        // Initialize datepicker with minimum date validation
        $(document).ready(function() {
            $('.input-datepicker').datepicker({
                autoclose: true,
                clearBtn: true,
                format: 'yyyy-mm-dd',
                startDate: 'today', // Prevent selecting past dates
            });
        });

        // Dropzone toggle button
        if ($('#offer-drop-zone').is(':visible')) {
            $('#offer-dropzone-toggle').addClass('is-open');
        }
        $('#offer-dropzone-toggle').on('click', function() {
            var $zone = $('#offer-drop-zone');
            $zone.slideToggle(200);
            $(this).toggleClass('is-open');
        });

        // Multi-file drag-and-drop upload
        $(document).ready(function() {
            var $zone = $('#offer-drop-zone');
            var $input = $zone.find('input[type="file"]');
            var $previewArea = $zone.find('.multi-file-preview');
            var fileList = [];
            var MAX_FILES = 5;
            var MAX_FILE_SIZE = 10 * 1024 * 1024;

            function getFileExt(name) {
                var parts = name.split('.');
                return parts.length > 1 ? parts.pop() : '';
            }

            function isImage(file) {
                return file.type && file.type.startsWith('image/');
            }

            function getExistingCount() {
                return $previewArea.find('.existing-item').length;
            }

            function getTotalCount() {
                return getExistingCount() + fileList.length;
            }

            function updateZoneState() {
                var total = getTotalCount();
                if (total > 0) {
                    $zone.addClass('has-files');
                } else {
                    $zone.removeClass('has-files');
                }
                var $badge = $('#offer-dropzone-toggle .toggle-file-count');
                if (total > 0) {
                    $badge.text(total).show();
                } else {
                    $badge.hide();
                }
            }

            function syncInput() {
                var dt = new DataTransfer();
                fileList.forEach(function(f) { dt.items.add(f); });
                $input[0].files = dt.files;
            }

            function renderNewFile(file, idx) {
                var $item = $('<div class="multi-file-item new-item" data-idx="' + idx + '"></div>');
                var $preview = $('<div class="item-preview"></div>');

                if (isImage(file)) {
                    var $img = $('<img alt="' + file.name + '">');
                    var reader = new FileReader();
                    reader.onload = function(e) { $img.attr('src', e.target.result); };
                    reader.readAsDataURL(file);
                    $preview.append($img);
                } else {
                    var ext = getFileExt(file.name);
                    $preview.append(
                        '<div class="file-icon-placeholder">' +
                            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>' +
                            '<span class="file-ext">' + ext + '</span>' +
                        '</div>'
                    );
                }

                $item.append($preview);
                $item.append('<div class="item-name" title="' + file.name + '">' + file.name + '</div>');
                $item.append('<button type="button" class="item-remove">&times;</button>');
                $previewArea.append($item);
            }

            function renderAllNewFiles() {
                $previewArea.find('.new-item').remove();
                fileList.forEach(function(file, idx) {
                    renderNewFile(file, idx);
                });
                updateZoneState();
            }

            function addFiles(files) {
                var added = 0;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    if (getTotalCount() + added >= MAX_FILES) {
                        alert('يمكنك رفع ' + MAX_FILES + ' ملفات كحد أقصى');
                        break;
                    }
                    if (file.size > MAX_FILE_SIZE) {
                        var sizeMB = (file.size / (1024 * 1024)).toFixed(1);
                        alert('حجم الملف "' + file.name + '" (' + sizeMB + ' MB) يتجاوز الحد المسموح (10 MB)');
                        continue;
                    }
                    if (!fileList.some(function(ex) { return ex.name === file.name && ex.size === file.size; })) {
                        fileList.push(file);
                        added++;
                    }
                }
                renderAllNewFiles();
                syncInput();
            }

            $input.on('change', function() {
                if (this.files && this.files.length) {
                    addFiles(this.files);
                }
            });

            $previewArea.on('click', '.item-remove', function() {
                var $item = $(this).closest('.multi-file-item');
                if ($item.hasClass('existing-item')) {
                    $item.remove();
                } else {
                    var idx = $item.data('idx');
                    fileList.splice(idx, 1);
                    renderAllNewFiles();
                    syncInput();
                }
                updateZoneState();
            });

            $zone[0].addEventListener('dragover', function(e) {
                e.preventDefault();
                $zone.addClass('drag-over');
            });
            $zone[0].addEventListener('dragleave', function(e) {
                e.preventDefault();
                $zone.removeClass('drag-over');
            });
            $zone[0].addEventListener('drop', function(e) {
                e.preventDefault();
                $zone.removeClass('drag-over');
                if (e.dataTransfer.files.length) {
                    addFiles(e.dataTransfer.files);
                }
            });

            updateZoneState();
        });


        ///////// Client-side Validation /////////
        function showFieldError($field, message) {
            var $err = $('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">' + message + '</div>');
            $field.closest('.block-body, .form-group, .inputs-cont').append($err);
        }

        $('#offer-submit-btn').on('click', function() {
            $('.js-validation-error').remove();
            var hasError = false;
            var $firstError = null;
            var $btn = $(this);
            var paymentType = $('input[name="payment_type"]:checked').val()
                          || $('input[type="hidden"][name="payment_type"]').val();

            if (paymentType === 'full') {
                var $priceInput = $('#total_cost');
                if (!$priceInput.val() || parseFloat($priceInput.val()) <= 0) {
                    var $err = $('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">تكلفة العرض مطلوبة</div>');
                    $priceInput.closest('.form-group').append($err);
                    if (!$firstError) $firstError = $priceInput;
                    hasError = true;
                } else if (parseFloat($priceInput.val()) < 10) {
                    var $err = $('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">لا يمكن إضافة مبلغ أقل من 10$</div>');
                    $priceInput.closest('.form-group').append($err);
                    if (!$firstError) $firstError = $priceInput;
                    hasError = true;
                }
                var $daysInput = $('#offer_delivery_days');
                if ($daysInput.is(':visible') && (!$daysInput.val() || parseInt($daysInput.val()) < 1)) {
                    var $err2 = $('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">مدة التنفيذ مطلوبة (يوم واحد على الأقل)</div>');
                    $daysInput.closest('.input-cont').after($err2);
                    if (!$firstError) $firstError = $daysInput;
                    hasError = true;
                }
            } else if (paymentType === 'part') {
                var $partItems = $('.part-item');
                // Minimum 2 milestones required
                if ($partItems.length < 2) {
                    var $e0 = $('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">يجب إضافة مرحلتين على الأقل عند اختيار الدفع على مراحل</div>');
                    $('.part-project-cost').prepend($e0);
                    if (!$firstError) $firstError = $('.one-more').first();
                    hasError = true;
                }
                $partItems.each(function(index) {
                    var $partItem = $(this);
                    var $descInput = $partItem.find('input[name="description[]"]');
                    var $daysPartInput = $partItem.find('input[name="delivery_days_part[]"]');
                    var $amountInput = $partItem.find('input[name="amount[]"]');
                    var partNum = index + 1;

                    if (!$descInput.val() || !$descInput.val().trim()) {
                        var $e1 = $('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">وصف المرحلة ' + partNum + ' مطلوب</div>');
                        $descInput.closest('.form-group').append($e1);
                        if (!$firstError) $firstError = $descInput;
                        hasError = true;
                    }
                    if (!$daysPartInput.val() || parseInt($daysPartInput.val()) < 1) {
                        var $e2 = $('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">المدة ' + partNum + ' مطلوبة</div>');
                        $daysPartInput.closest('.form-group').append($e2);
                        if (!$firstError) $firstError = $daysPartInput;
                        hasError = true;
                    }
                    if (!$amountInput.val() || parseFloat($amountInput.val()) <= 0) {
                        var $e3 = $('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">التكلفة ' + partNum + ' مطلوبة</div>');
                        $amountInput.closest('.part-item-input').append($e3);
                        if (!$firstError) $firstError = $amountInput;
                        hasError = true;
                    } else if (parseFloat($amountInput.val()) < 5) {
                        var $e3min = $('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">لا يمكن إضافة مبلغ أقل من 5$</div>');
                        $amountInput.closest('.part-item-input').append($e3min);
                        if (!$firstError) $firstError = $amountInput;
                        hasError = true;
                    }
                });
            }

            var notesText = $('textarea[name="notes"]').val();
            if (!notesText || !notesText.trim()) {
                $('textarea[name="notes"]').closest('.inputs-cont').after('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">تفاصيل العرض مطلوبة</div>');
                if (!$firstError) $firstError = $('textarea[name="notes"]');
                hasError = true;
            } else if (countWords(notesText) < MIN_WORDS) {
                $('textarea[name="notes"]').closest('.inputs-cont').after('<div class="alert alert-danger js-validation-error" style="margin-top:5px;">يجب أن تحتوي تفاصيل العرض على ' + MIN_WORDS + ' كلمة على الأقل</div>');
                if (!$firstError) $firstError = $('textarea[name="notes"]');
                hasError = true;
            }

            if (hasError) {
                if ($firstError) {
                    $('html, body').animate({ scrollTop: $firstError.closest('.addOffer-block, .block-body').offset().top - 100 }, 300);
                }
                return;
            }

            $btn.prop('disabled', true).html('<span class="work-btn-spinner"></span> جاري الإرسال...');
            $('#add_offer')[0].submit();
        });

        ///////// Word Counter for Offer Notes /////////
        const MIN_WORDS = 25;
        const notesTextarea = document.getElementById('offer-notes');
        const wordCounterEl = document.getElementById('word-counter');
        const currentCountEl = document.getElementById('current-word-count');

        function countWords(text) {
            const trimmed = text.trim();
            if (!trimmed) return 0;
            return trimmed.split(/\s+/).length;
        }

        function updateWordCounter() {
            const count = countWords(notesTextarea.value);
            currentCountEl.textContent = count;
            wordCounterEl.classList.toggle('met', count >= MIN_WORDS);
        }

        notesTextarea.addEventListener('input', updateWordCounter);
        updateWordCounter();


        ///////// Toggle Project Description in Create Offer Page /////////
        $(document).ready(function() {
            $('#toggleDescriptionCreate').on('click', function() {
                const shortText = $('#project-description-create .short-text');
                const fullText = $('#project-description-create .full-text');
                const button = $(this);
                
                if (fullText.is(':visible')) {
                    // Hide full text, show short text
                    fullText.hide();
                    shortText.show();
                    button.text('عرض المزيد');
                } else {
                    // Show full text, hide short text
                    shortText.hide();
                    fullText.show();
                    button.text('عرض أقل');
                }
            });
        });

    </script>
@endsection