@extends('layouts.main-layout')

@section('title')
    {{ config('app.name') }} - Dashboard
@endsection

@section('content')

<div class="content-wrap">
        <div class="main">
            <div class="container">
                <div class="row justify-content-center my-5">

                    <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 text-center w-50">
                                    <hr>
                                    <div class="d-flex justify-content-between">
                                    <span><strong>Total Hours:</strong> <span class="total-hours">0</span>h</span>
                                    <span><strong>Total Price:</strong> <span class="total-price">0</span><span class="currencySymbol"></span> </span>
                                    <span><strong>Our price per hour:</strong>  <span class="our-price-per-hour"></span> </span>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12">
                        @if(session()->get('client_expires_at') != null)
                            <p class="text-end fw-bold">Your account expires at: {{ session()->get('client_expires_at') }}</p>
                        @endif

                        <h1 class="text-center my-4">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 }}"> 
                            <input type="hidden" name="currency_symbol" value="{{ $price->currency_symbol }}" class="currency_symbol">

                            <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(!in_array($cat->categorie_id, $deletedCategoires))
                                            @if($cat->is_categorie_active && !in_array($cat->categorie_id, $categoryToHide))
                                                <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, $deletedSubcategories->toArray()))
                                                            @if($subcat->sub_categorie_isActive && !in_array($subcat->sub_categorie_id, $subcategoryToHide))
                                                                @if(in_array($subcat->sub_categorie_id,  $belongingOfSubCategory->toArray()) ||  $subcat->sub_categorie_isDefault == 1) 

                                                                    @php
                                                                        $repetetiveCount = 0;
                                                                    @endphp

                                                                    <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)
                                                                                            @if($question->sub_categorie_id == $subcat->sub_categorie_id)
                                                                                                @php
                                                                                                    $repetetiveCount++;
                                                                                                @endphp
                                                                                            @endif

                                                                                            <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">
                                                                                                @if($repetetiveCount == 1)
                                                                                                    <label for="{{ $subcat->sub_categorie_name }}"><strong> {{ $subcat->sub_categorie_name }} </strong></label>
                                                                                                @endif
                                                                                                <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
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            @endif
                                        @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>
            </div>
    </div>
</div>

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

        $(".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;

            $(".currencySymbol").text(currency_symbol);
            $(".our-price-per-hour").text(price +''+ currency_symbol);

           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