@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>Add New Project <a href="{{route('project.list')}}"><button class = "btn btn-primary float-end">View Projects</button></a></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('project.store')}}" enctype="multipart/form-data" class="row g-3 needs-validation" novalidate="">
                                                @csrf
                                                <div class="col-xl-6 col-sm-6">
                                                    <label class="form-label" for="company_id">Select Company</label>
                                                    <select class="form-select" id="company_id" name="company_id" required="">
                                                        <option selected="" disabled="" value="">Choose...</option>
                                                        @foreach($companies as $company)
                                                        <option value="{{$company->id}}" @if(old('company_id') == $company->id) selected @endif>{{$company->company_name}}</option>
                                                        @endforeach
                                                        </select>
                                                    @error('company_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="zone_id">Select Zone</label>
                                                    <select class="form-select" id="zone_id" name="zone_id" required="">
                                                        <option selected="" disabled="" value="">Choose...</option>
                                                        </select>
                                                    @error('zone_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="unit_id">Select Unit</label>
                                                    <select class="form-select" id="unit_id" name="unit_id" required="">
                                                        <option selected="" disabled="" value="">Choose...</option>
                                                        </select>
                                                    @error('unit_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="project_name">Project Name<span class="txt-danger">*</span></label>
                                                    <input class="form-control" id="project_name" value="{{old('project_name')}}" name="project_name" type="text" placeholder="Enter project name" required="">
                                                    @error('project_name')
                                                    <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="template_name_id">Select Heads Template</label>
                                                    <select class="form-select" id="template_name_id" name="template_name_id" required="">
                                                        <option selected="" disabled="" value="">Choose...</option>
                                                        @foreach($template_names as $template_name)
                                                            <option value="{{$template_name->id}}" @if(old('template_name_id') == $template_name->id) selected @endif>{{$template_name->template_name}}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('template_name_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="template_id">Select Activity</label>
                                                    <select class="form-select" id="template_id" name="template_id" >
                                                        <option selected="" disabled="" value="">Choose...</option>
                                                        @foreach($activites as $activity)
                                                            <option value="{{$activity->id}}" @if(old('template_id') == $activity->id) selected @endif>{{$activity->template_name}}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('template_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="activity_group_name_id">Select Activity Group</label>
                                                    <select class="form-select" id="activity_group_name_id" name="activity_group_name_id">
                                                        <option selected="" disabled="" value="">Choose...</option>
                                                        @foreach($activity_groups as $activity_group)
                                                            <option value="{{$activity_group->id}}" @if(old('activity_group_name_id') == $activity_group->id) selected @endif>{{$activity_group->activity_group_name}}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('activity_group_name_id')
                                                    <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="with_data" id="with_data" type="checkbox">
                                                        <label class="form-check-label" for="with_data">With Data OR Not</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="is_application_applicable" id="is_application_applicable" type="checkbox">
                                                        <label class="form-check-label" for="is_application_applicable">AP Applicable </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="recurring" id="recurring" type="checkbox">
                                                        <label class="form-check-label" for="recurring">Recurring Project or Not</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(){
            var changingSelect = false;
            // this is for the activityGroup and activity
            $("#activity_group_name_id").change(function() {
                if (!changingSelect) {
                    changingSelect = true;
                    $("#template_id").val('').trigger('change');
                    changingSelect = false;
                }
            });
            // When template select changes
            $("#template_id").change(function() {
                if (!changingSelect) {
                    changingSelect = true;
                    $("#activity_group_name_id").val('').trigger('change');
                    changingSelect = false;
                }
            });
            function render_zones(zones){
                let zone_select = $("#zone_id");
                zone_select.empty();
                zone_select.append($('<option>').text('Choose...').attr('disabled', 'disabled').attr('selected', 'selected').val(''));
                $.each(zones, function (index, value){
                    zone_select.append($('<option>').text(value.zone_name).val(value.id));
                })
            }
            function render_units(units){
                let unit_select = $("#unit_id");
                unit_select.empty();
                unit_select.append($('<option>').text('Choose...').attr('disabled', 'disabled').attr('selected', 'selected').val(''));
                $.each(units, function (index, value){
                    unit_select.append($('<option>').text(value.unit_name).val(value.id));
                })
            }
            $("#company_id").change(function (e){
                const selectedCompanyId = $(this).val();
                if(selectedCompanyId){
                    $.ajax({
                        url:'{{route('get_company_zones')}}',
                        type:"POST",
                        data: {
                            "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                            "id":selectedCompanyId
                        },
                        success:function (response){
                            console.log(response)
                            if(response.message=="Success"){
                                render_zones(response.related_zones);
                            }
                        }
                    })
                }
            })
            $("#zone_id").change(function (e){
                const selectedZoneId = $(this).val();
                if(selectedZoneId){
                    $.ajax({
                        url:'{{route('get_zones_units')}}',
                        type:"POST",
                        data: {
                            "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                            "id":selectedZoneId
                        },
                        success:function (response){
                            console.log(response)
                            if(response.message=="Success"){
                                render_units(response.related_units);
                            }
                        }
                    })
                }
            })
        })
    </script>
@endsection