@extends('layouts.main-layout')

@section('title')
    Sow App - Edit Client Requirement
@endsection

@section('content')
    <x-navigation />

    <div class="container">
    <div class="row justify-content-center my-5">
        <div class="col-lg-12">

            <h1 class="text-center my-2 mb-3">Edit client requirements - {{ $client_requirement['client']['client_firstName'] }} {{ $client_requirement['client']['client_lastName'] }}</h1>

           <x-error-success-messages />

            <form action="{{ route('updateClientRequirement', ['id' => $client_requirement['client_requirement_id'] ] ) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="card">
                    <div class="card-body">
                            <div class="form-group">
                                <label for="Website to edit">Please enter your website link which one you want to edit (Optional)</label>
                                <input type="url" name="website_to_edit_url" id="website_to_edit_url" class="form-control" placeholder="https://example.com" value="@if($client_requirement['client_requirement_site']){{ $client_requirement['client_requirement_site'] }}@endif">
                            </div>
                    </div>
                </div> 
                
                <div class="card my-2">
                    <div class="card-body">

                    @if(!empty($client_requirement) && isset($client_requirement))

                      
                            @foreach($client_requirement['categories'] as $cat)
                                @if($cat->is_categorie_active)
                                    <div class="form-group">
                                        
                                        <div class="row">
                                            <div class="col-sm-2 justify-content-center text-center">
                                                <p><strong>To include?</strong></p>
                                            </div>

                                            <div class="col-sm-4">
                                                <h2 class="text-break">{{ $cat['categorie_name'] }}</h2>
                                            </div>
                                            
                                            <div class="col-sm-2 justify-content-center text-center">
                                                <p><strong>Design hours</strong></p>
                                            </div>
                                            
                                            <div class="col-sm-2 justify-content-center text-center">
                                                <p><strong>Development hours</strong></p>
                                            </div>
                                            
                                            <div class="col-sm-2 justify-content-center text-center">
                                                <p><strong>Others hours</strong></p>
                                            </div>
                                        </div>

                                        @foreach($cat['subcategory'] as $subcat)
                                            @if(in_array($subcat->sub_categorie_id, $belongingOfSubCategory->toArray()) || $subcat->sub_categorie_isDefault == 1)
                                                <div class="row">
                                                    @foreach($subcat['question'] as $question)
                                                        @if(in_array($question->question_id, $belongingOfQuestions->toArray())  || $question->question_isDefault == 1)
                                                            @if(!in_array($question->question_id, $deletedQuestions->toArray()))
                                                                @if(!in_array($question->question_id, $hideQuestions->toArray()))
                                                                    @if($question->question_is_active)

                                                                        <div class="col-sm-2 justify-content-center text-center">
                                                                            
                                                                            <input type="checkbox" name="questions[]" value="{{ $question['question_id'] }}" class="form-check-input is-checked" data-design-hours="{{ $question['question_design_hours'] }}" data-development-hours="{{ $question['question_development_hours'] }}" data-others-hours="{{ $question['question_others_time'] }}" {{ $checked }}>


                                                                            <input type="hidden" name="price" value="{{ $client_requirement['price']['price'] }}" class="price">
                                                                            <input type="hidden" name="price_id" value="{{ $client_requirement['price']['price_id'] }}">

                                                                                                                                                    </div>

                                                                        <div class="col-sm-4">
                                                                            <label for="{{ $subcat['sub_categorie_name'] }}"><strong> {{ $subcat['sub_categorie_name'] }} </strong></label>
                                                                            <p class="text-break">{{ $question['question_name'] }}</p>
                                                                        </div>

                                                                        <div class="col-lg-2 justify-content-center text-center">
                                                                            @if($question['question_design_hours'] == "VARIES")
                                                                                <p class="text-break">{{ $question['question_design_hours'] }}</p>
                                                                            @else
                                                                                <p class="text-break">{{ $question['question_design_hours'] }}h</p>
                                                                            @endif
                                                                        </div>

                                                                        <div class="col-lg-2 justify-content-center text-center">
                                                                            @if($question['question_development_hours'] == "VARIES")
                                                                                <p class="text-break">{{ $question['question_development_hours'] }}</p>
                                                                            @else
                                                                                <p class="text-break">{{ $question['question_development_hours'] }}h</p>
                                                                            @endif
                                                                        </div>
                                                                        
                                                                        <div class="col-lg-2 justify-content-center text-center">
                                                                            @if($question['question_others_time'] == "VARIES")
                                                                                <p class="text-break">{{ $question['question_others_time'] }}</p>
                                                                            @else
                                                                                <p class="text-break">{{ $question['question_others_time'] }}h</p>
                                                                            @endif
                                                                        </div>
                                                                    
                                                                    @endif
                                                                @endif
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>    
                                            @endif
                                        @endforeach
                                    </div>
                                @endif
                            @endforeach
                    @endif


                        <div class="form-group my-3 text-center">
                            <input type="submit" value="Update requirements" class="btn btn-primary">
                        </div>

                    </div>
                </div>

            </form>

        </div>

        <div class="col-lg-12 my-3">
            <div class="card ">
                <div class="card-body">
                   <div class="row justify-content-center text-center">
                       <div class="col-sm-4">
                            <p><strong>Design Hours</strong></p>
                            <p><span class="design-hours">0</span>h</p>
                       </div>
                       <div class="col-sm-4">
                            <p><strong>Development Hours</strong></p>
                            <p><span class="development-hours">0</span>h</p>
                       </div> 
                       <div class="col-sm-4">
                            <p><strong>Others Hours</strong></p>
                            <p><span class="others-hours">0</span>h</p>
                       </div>

                       <div class="total d-none">
                           <hr>
                           <p><strong>Total Hours:</strong> <span class="total-hours">0</span>h</p>
                           <p><strong>Total Price:</strong> <span class="total-price">0</span>{{ $currency_symbol }}</p>
                           <p><strong>Our price per hour:</strong> {{ $our_price_per_hour }}{{ $currency_symbol }}</p>
                       </div>

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

    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var price = $('.price').val();
        var design_hours = 0;
        var development_hours = 0;
        var others_hours = 0;
        console.log("Our price: ", price);

        $(".is-checked:checked").each(function(){
            var checkbox_design_hours = (!isNaN($(this).data('design-hours'))) ? parseFloat($(this).data('design-hours')) : 0;
            var checkbox_development_hours = (!isNaN($(this).data('development-hours'))) ? parseFloat($(this).data('development-hours')) : 0;
            var checkbox_others_hours = (!isNaN($(this).data('others-hours'))) ? parseFloat($(this).data('others-hours')) : 0;

            if($(this).is(':checked')){
                design_hours += checkbox_design_hours;
                development_hours += checkbox_development_hours;
                others_hours += checkbox_others_hours;
            }else{
                design_hours -= checkbox_design_hours;
                development_hours -= checkbox_development_hours;
                others_hours -= checkbox_others_hours;
            }

            console.log("Design hours: ", design_hours);
            console.log("Development hours: ", development_hours);
            console.log("Others hours: ", others_hours);

            if(design_hours > 0){
                $('.design-hours').text(design_hours);
            }else{
                $('.design-hours').text(0);
            }

            if(development_hours > 0){
                $('.development-hours').text(development_hours);
            }else{
                $('.development-hours').text(0);
            }

            if(others_hours > 0){
                $('.others-hours').text(others_hours);
            }else{
                $('.others-hours').text(0);
            }

            if(design_hours > 0 || development_hours > 0 || others_hours > 0){
                let total_hours = design_hours + development_hours + others_hours * 1;
                $('.total').removeClass('d-none');
                $('.total').addClass('animate__animated animate__fadeInDown');
                $('.total-hours').text(total_hours);
                $('.total-price').text(total_hours * price);

            }else{
                $('.total').addClass('d-none');
                $('.total').removeClass('animate__animated animate__fadeInDown');
            }
        });


        $(".is-checked").click(function(){
            var checkbox_design_hours = (!isNaN($(this).data('design-hours'))) ? parseFloat($(this).data('design-hours')) : 0;
            var checkbox_development_hours = (!isNaN($(this).data('development-hours'))) ? parseFloat($(this).data('development-hours')) : 0;
            var checkbox_others_hours = (!isNaN($(this).data('others-hours'))) ? parseFloat($(this).data('others-hours')) : 0;

           if($(this).is(':checked')){
                design_hours += checkbox_design_hours;
                development_hours += checkbox_development_hours;
                others_hours += checkbox_others_hours;
            }else{
                design_hours -= checkbox_design_hours;
                development_hours -= checkbox_development_hours;
                others_hours -= checkbox_others_hours;
            }

            console.log("Design hours: ", design_hours);
            console.log("Development hours: ", development_hours);
            console.log("Others hours: ", others_hours);

            if(design_hours > 0){
                $('.design-hours').text(design_hours);
            }else{
                $('.design-hours').text(0);
            }

            if(development_hours > 0){
                $('.development-hours').text(development_hours);
            }else{
                $('.development-hours').text(0);
            }

            if(others_hours > 0){
                $('.others-hours').text(others_hours);
            }else{
                $('.others-hours').text(0);
            }

            if(design_hours > 0 || development_hours > 0 || others_hours > 0){
                let total_hours = design_hours + development_hours + others_hours * 1;
                $('.total').removeClass('d-none');
                $('.total').addClass('animate__animated animate__fadeInDown');
                $('.total-hours').text(total_hours);
                $('.total-price').text(total_hours * price);

            }else{
                $('.total').addClass('d-none');
                $('.total').removeClass('animate__animated animate__fadeInDown');
            }
        });
    });
</script>
@endsection