@extends('layouts.main-layout')

@section('title')
    Sow App - Dashboard
@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">Please fill out the form</h1>

           <x-error-success-messages />

            <form action="{{ route('clientRequirements') }}" method="POST">
                @csrf

                                
                <input type="hidden" name="price" value="{{ $price->price }}" class="price">
                <input type="hidden" name="price_id" value="{{ $price->price_id }}"> 

                
                <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">
                            </div>
                    </div>
                </div> 
                
                <div class="card my-2">
                    <div class="card-body">

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

                        @foreach($category 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 }}">
                                                                    </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="Submit 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").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