@extends('template.layouts.simple.master')
@section('content')
    <div class="page-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Get OA Report</h4>
                        </div>
                        <div class="card-body">
                            <div class="horizontal-wizard-wrapper">
                                <div class="row g-3">
                                    <div class="col-12">
                                        <div class="tab-content dark-field" id="horizontal-wizard-tabContent">
                                            <div class="tab-pane fade show active" id="wizard-info" role="tabpanel" aria-labelledby="wizard-info-tab">
                                                <form method="POST" action="{{route('get.Project.OAReport')}}" enctype="multipart/form-data" class="row g-3 needs-validation" novalidate="">
                                                    @csrf
                                                    <div class="col-xl-6 col-6">
                                                        <label class="form-label" for="project_id">Select Project<span class="txt-danger"></span></label>
                                                        <select name="project_id" class="form-select" id="project_id">
                                                            <option value="">Select Project --</option>
                                                            @foreach($projects as $project)
                                                            <option value="{{$project->id}}" @if(old('project_id') ==$project->id) selected @endif>{{$project->project_name}}</option>
                                                            @endforeach

                                                        </select>
                                                        @error('project_id')
                                                        <p class="text-red-500 text-xs mt-1">
                                                            {{$message}}
                                                        </p>
                                                        @enderror
                                                    </div>
                                                    <div class="col-xl-6 col-6">
                                                        <label class="form-label" for="template_name_id">Select Project Template<span class="txt-danger"></span></label>
                                                        <select name="template_name_id" class="form-select" id="template_name_id">
                                                            <option value="">Select  Project Template</option>


                                                        </select>
                                                        @error('template_name_id')
                                                        <p class="text-red-500 text-xs mt-1">
                                                            {{$message}}
                                                        </p>
                                                        @enderror
                                                    </div>
                                                    <div class="col-xl-6 col-6">
                                                        <label class="form-label" for="activity_id">Select Project Activity<span class="txt-danger"></span></label>
                                                        <select name="activity_id" class="form-select" id="activity_id">
                                                            <option value="">Select Project Activity</option>


                                                        </select>
                                                        @error('activity_id')
                                                        <p class="text-red-500 text-xs mt-1">
                                                            {{$message}}
                                                        </p>
                                                        @enderror
                                                    </div>

                                                    <div class="col-xl-6 col-sm-6">
                                                        <label class="form-label" for="from_date">Start Date<span class="txt-danger"></span></label>
                                                        <input class="form-control" id="from_date" value="{{old('from_date')}}" name="from_date" type="date">
                                                        @error('from_date')
                                                        <p class="text-red-500 text-xs mt-1">
                                                            {{$message}}
                                                        </p>
                                                        @enderror
                                                    </div>
                                                    <div class="col-xl-6 col-sm-6">
                                                        <label class="form-label" for="to_date">End Date<span class="txt-danger"></span></label>
                                                        <input class="form-control" id="to_date" value="{{old('to_date')}}" name="to_date" type="date">
                                                        @error('to_date')
                                                        <p class="text-red-500 text-xs mt-1">
                                                            {{$message}}
                                                        </p>
                                                        @enderror
                                                    </div>
                                                    <div class="col-xl-4 col-sm-4">
                                                        <div class="form-check checkbox checkbox-primary mb-0 mt-4">
                                                            <input class="form-check-input" name="user_details" id="user_details" type="checkbox">
                                                            <label class="form-check-label" for="user_details">User Details Required</label></div>
                                                    </div>
                                                    <div class="col-xl-4 col-sm-4">
                                                        <div class="form-check checkbox checkbox-primary mb-0">
                                                            <input class="form-check-input" name="date_required" id="date_required" type="checkbox">
                                                            <label class="form-check-label" for="date_required">Date Required </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 col-sm-4">
                                                        <div class="form-check checkbox checkbox-primary mb-0">
                                                            <input class="form-check-input" name="time_required" id="time_required" type="checkbox">
                                                            <label class="form-check-label" for="time_required">Time Required</label>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 text-end">
                                                        <button class="btn btn-primary">Add Now</button>
                                                    </div>
                                                </form>
                                            </div>

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

            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function(){
            function render_templates(templates){

                let templatNameSelect = $("#template_name_id");
                templatNameSelect.empty();
                templatNameSelect.append($('<option>').text('Select Project Template').attr('disabled', 'disabled').attr('selected', 'selected').val(''));
                $.each(templates, function (index, value){
                    templatNameSelect.append($('<option>').text(value.get_template.template_name).val(value.get_template.id).attr('selected', true));
                })
            }
            function render_activities(activities)
            {
                let activitySelect = $("#activity_id");
                activitySelect.empty();
                activitySelect.append($('<option>').text('Select Project Activity').attr('disabled', 'disabled').attr('selected', 'selected').val(''));
                $.each(activities, function (index, value){
                    activitySelect.append($('<option>').text(value.actvity_name.template_name).val(value.actvity_name.id));
                })
            }
            $("#project_id").change(function (e){
                const selectedProjectId = $(this).val();
                if(selectedProjectId){
                    $.ajax({
                        url:'{{route('get_project.template_names')}}',
                        type:"POST",
                        data: {
                            "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                            "id":selectedProjectId
                        },
                        success:function (response){
                            if(response.message=="Success"){
                                render_templates(response.related_templates);
                                render_activities(response.related_activities);
                            }
                        }
                    })
                }
            })
        })
    </script>
@endsection