@extends("layouts.main-layout")

@section('title')
    Sow App - Edit Question
@endsection

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


<div class="container">
    <div class="row">
        <div class="col-lg-12">

            <x-error-success-messages />

            <h1 class="text-center mb-5 mt-5">Edit Question</h1>

            <form action="{{ route('updateQuestion', ['id'=> $question['question_id'] ]) }}" method="POST">
                @csrf
                @method('PUT')


                @if(!empty($question) && isset($question))
                    <div class="form-group mb-3">
                        <label for="Category">Select category</label>
                        <select name="category" class="form-select">
                            <option disabled selected>Choose Category</option>
                            @foreach($all_categories as $category)
                                <option value="{{ $category['categorie_id'] }}" {{ $question['category']['categorie_id'] == $category['categorie_id'] ? 'selected' : '' }}>{{ $category['categorie_name'] }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label for="Subcategory">Select subcategory</label>
                        <select name="subcategory" class="form-select">
                            <option disabled selected>Choose Subcategory</option>
                            @foreach($all_categories as $category)
                                <optgroup label="{{ $category['categorie_name'] }}">
                                @foreach($category['subcategory'] as $subcategory)
                                   
                                    @if(in_array($subcategory->sub_categorie_id, $belongingOfSubCategory->toArray()) || $subcategory->sub_categorie_isDefault == 1 )
                                        <option value="{{ $subcategory['sub_categorie_id'] }}" {{ $question['subcategory']['sub_categorie_id'] == $subcategory['sub_categorie_id'] ? 'selected' : '' }}>{{ $subcategory['sub_categorie_name'] }}</option>
                                    @endif
                                @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label for="Question">Question</label>
                        <textarea name="question" cols="30" rows="10" class="form-control">{{ $question['question_name'] }}</textarea>
                    </div>

                    <div class="form-group mb-3">
                        <div class="row">
                            <div class="col">
                                <label for="Design hours">Design hours</label>
                                <input type="text" class="form-control" value="{{ $question['question_design_hours'] }}" name="design_hours">
                            </div>
                            <div class="col">
                                <label for="Development hours">Development hours</label>
                                <input type="text" class="form-control" value="{{ $question['question_development_hours'] }}" name="development_hours">
                            </div>
                            <div class="col">
                                <label for="Others hours">Others hours</label>
                                <input type="text" class="form-control" value="{{ $question['question_others_time'] }}" name="others_time">
                            </div>
                        </div>
                    </div>

                    <div class="form-group d-flex text-center mt-5 justify-content-between">
                        <input type="button" value="Delete question" id="deleteQuestion" class="btn btn-danger">
                        <input type="submit" value="Update question" class="btn btn-primary">

                        @if($question->belongingclient->count() > 0)
                            @if($question->question_is_active && $question->belongingclient[0]->status != 'hidden')
                                <input type="button" value="Hide question" id="hideQuestion" class="btn btn-warning">
                            @else
                                <input type="button" value="Show question" id="showQuestion" class="btn btn-success">
                            @endif
                        @else
                            @if($question['question_is_active'])
                            <input type="button" value="Hide question" id="hideQuestion" class="btn btn-warning">
                            @else
                            <input type="button" value="Show question" id="showQuestion" class="btn btn-success">
                            @endif
                        @endif
                    </div>
                @endif
            </form>

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

<script type="text/javascript">
    $(document).ready(function(){
        $("#hideQuestion").click(function(){
            Swal.fire({
                title: "Are you sure you want to hide this question from clients?",
                icon: "warning",
                html: '<div class="d-flex justify-content-between">'+
                        '<p class="text-danger text-decoration-none btn btn-link" id="confirmHideQuestion">Confirm</p>'+
                        '<p href="#" class="text-primary text-decoration-none btn btn-link" onclick="Swal.close()">Close</p>'+
                    '</div>',
                showCancelButton: false,
                showConfirmButton: false
            });

            $("#confirmHideQuestion").click(function(){
                $.ajax({
                    url: "{{ route('hideQuestion', ['id' => $question['question_id'] ]) }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: "PUT"
                    },
                    success: function(data){
                        var res = JSON.parse(data);

                        if(res.success){
                            window.location.href = '/viewAllData';
                        }
                    },
                    error: function(data){
                        console.log("Error hidding question: ", data);

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong, please try again later!',
                        });
                    }
                });
            });
        });

        $("#showQuestion").click(function(){
            Swal.fire({
                title: "Are you sure you want to show this question to clients?",
                icon: "warning",
                html: '<div class="d-flex justify-content-between">'+
                        '<p class="text-danger text-decoration-none btn btn-link" id="confirmShowQuestion">Confirm</p>'+
                        '<p href="#" class="text-primary text-decoration-none btn btn-link" onclick="Swal.close()">Close</p>'+
                    '</div>',
                showCancelButton: false,
                showConfirmButton: false
            });

            $("#confirmShowQuestion").click(function(){
                $.ajax({
                    url: "{{ route('showQuestion', ['id' => $question['question_id'] ]) }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: "PUT"
                    },
                    success: function(data){
                        var res = JSON.parse(data);

                        if(res.success){
                            window.location.href = '/viewAllData';
                        }
                    },
                    error: function(data){
                        console.log("Error hidding question: ", data);

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong, please try again later!',
                        });
                    }
                });
            });
        });

        $("#deleteQuestion").click(function(){
            Swal.fire({
                title: "Are you sure you want to delete this question?",
                icon: "warning",
                html: '<div class="d-flex justify-content-between">'+
                        '<p class="text-danger text-decoration-none btn btn-link" id="confirmDeleteQuestion">Confirm</p>'+
                        '<p href="#" class="text-primary text-decoration-none btn btn-link" onclick="Swal.close()">Close</p>'+
                    '</div>',
                showCancelButton: false,
                showConfirmButton: false
            });

            $("#confirmDeleteQuestion").click(function(){
                $.ajax({
                    url: "{{ route('deleteQuestion', ['id' => $question['question_id'] ]) }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: "DELETE"
                    },
                    success: function(data){
                        var res = JSON.parse(data);

                        if(res.success){
                            window.location.href = '/viewAllData';
                        }
                    },
                    error: function(data){
                        console.log("Error hidding question: ", data);

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong, please try again later!',
                        });
                    }
                });
            });
        });
    });
</script>
@endsection