@extends('layout.app')
@section('title')
    {{ __('message.projects_create') }}
@stop
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/vendors/css/forms/select/select2.min.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/vendors/css/forms/wizard/bs-stepper.min.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/css/plugins/forms/form-validation.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/css/plugins/forms/form-wizard.css")}}">
@stop

@section('content')
    <!-- Horizontal Wizard -->
    <!-- /Horizontal Wizard -->

    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{ __('message.projects_create') }}</h2>

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

        <div class="content-body">
            <!-- users edit start -->
            <!-- Modern Horizontal Wizard -->
            <section class="modern-horizontal-wizard">
                <div class="bs-stepper wizard-modern modern-wizard-example">
                    <div class="bs-stepper-header">
                        <div class="step" data-target="#account-details-modern">
                            <button type="button" class="step-trigger">
                                    <span class="bs-stepper-box">
                                        <i data-feather='monitor' class="font-medium-3"></i>
                                    </span>
                                <span class="bs-stepper-label">
                                        <span class="bs-stepper-title">{{ __('message.projects') }}</span>
                                        <span class="bs-stepper-subtitle">Create Project</span>
                                    </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#personal-info-modern">
                            <button type="button" class="step-trigger">
                                    <span class="bs-stepper-box">
                                        <i data-feather='user' class="font-medium-3"></i>
                                    </span>
                                <span class="bs-stepper-label">
                                        <span class="bs-stepper-title">Choose Users</span>
                                        <span class="bs-stepper-subtitle">Put User</span>
                                    </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#tag-details-modern">
                            <button type="button" class="step-trigger">
                                    <span class="bs-stepper-box">
                                        <i data-feather='monitor' class="font-medium-3"></i>
                                    </span>
                                <span class="bs-stepper-label">
                                        <span class="bs-stepper-title">{{ __('message.tags') }}</span>
                                        <span class="bs-stepper-subtitle">Create Tag</span>
                                    </span>
                            </button>
                        </div>

                    </div>
                    <div class="bs-stepper-content">
                        <x-alert/>
                        {{-- form for store clients --}}
                        <form method="POST" action="{{route("projects.store")}}" enctype="multipart/form-data">
                            @csrf
                            <div id="account-details-modern" class="content">
                                <div class="content-header">
                                    <h5 class="mb-0">{{ __('message.projects') }}</h5>
                                </div>
                                <div class="row">
                                    {{-- client name --}}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label">{{ __('message.projects_name') }}</label>
                                            <input type="text" class="form-control" id="project_name" name="project_name"
                                                   value="{{ old('project_name') }}" required autofocus>
                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}
                                    <div class="col-md-6 mb-1">
                                        <label>{{__("message.websites")}}</label>

                                        <select name="website_id[]" class="select2 form-control" id="website_id" multiple>
                                            @isset($websites)
                                                @foreach($websites as $website)
                                                    <option value="{{$website->id}}">{{$website->name}}</option>

                                                @endforeach
                                            @endisset

                                        </select>

                                    </div>
                                    {{-- end client name --}}
                                    <div class="col-md-6 mb-1">
                                        <label>{{__("message.not_app_id")}}</label>

                                        <select name="not_app_id[]" class="select2 form-control" id="not_app_id" multiple>

                                        </select>

                                    </div>
                                    {{-- end client name --}}
                                    {{-- end client name --}}
                                    <div class="col-md-6 mb-1">
                                        <label>{{__("message.tasks")}}</label>

                                        <select name="task_id[]" class="select2 form-control" id="task_id" multiple>

                                        </select>

                                    </div>
                                    {{-- end client name --}}


                                    </div>

                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                        <i data-feather="arrow-left" class="align-middle mr-sm-25 mr-0"></i>
                                        <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                    </button>
                                    <button type="button" class="btn btn-primary btn-next">
                                        <span class="align-middle d-sm-inline-block d-none">Next</span>
                                        <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="personal-info-modern" class="content">
                                <div class="content-header">
                                    <h5 class="mb-0">Choose User</h5>
                                </div>
                                <div class="row">
                                    {{-- end client name --}}
                                    <div class="col-md-12 mb-1">
                                        <label>{{__("message.users")}}</label>

                                        <select name="user_id[]" class="select2 form-control" id="user_id" multiple>
                                            @isset($users)
                                                @foreach($users as $user)
                                                    <option value="{{$user->id}}">{{$user->name}}</option>

                                                @endforeach
                                            @endisset
                                        </select>

                                    </div>
                                    {{-- end client name --}}
                                </div>

                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-primary btn-prev">
                                        <i data-feather="arrow-left" class="align-middle mr-sm-25 mr-0"></i>
                                        <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                    </button>

                                    <button type="button" class="btn btn-primary btn-next">
                                        <span class="align-middle d-sm-inline-block d-none">Next</span>
                                        <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="tag-details-modern" class="content">
                                <div class="content-header">
                                    <h5 class="mb-0">Create Tag </h5>
                                </div>
                                <div class="row">
                                    {{-- client name --}}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label">{{ __('message.tag_name') }}</label>
                                            <input type="text" class="form-control" id="tag_name" name="tag_name"
                                                   value="{{ old('tag_name') }}" required autofocus>
                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}
                                    <div class="col-md-12 mb-1">
                                        <label>{{__("message.apps")}}</label>

                                        <table class="app-tag-table table">
                                            <thead>
                                            <tr>
                                                <th>
                                                    <div class="animated-checkbox">
                                                        <label class="m-0">
                                                            <input type="checkbox" id="record__select-all">
                                                            <span class="label-text"></span>
                                                        </label>
                                                    </div>
                                                </th>
                                                <th>{{ __('message.name') }}</th>
                                                <th>{{ __('message.category') }}</th>
                                                <th>{{ __('message.website') }}</th>
                                                <th>{{ __('message.update_type') }}</th>

                                            </tr>
                                            </thead>
                                            <tfoot>
                                            <tr>
                                                <th>
                                                    <div class="animated-checkbox">
                                                        <label class="m-0">
                                                            <input type="checkbox" id="record__select-all">
                                                            <span class="label-text"></span>
                                                        </label>
                                                    </div>
                                                </th>
                                                <th>{{ __('message.name') }}</th>
                                                <th>{{ __('message.category') }}</th>
                                                <th>{{ __('message.website') }}</th>
                                                <th>{{ __('message.update_type') }}</th>


                                            </tr>
                                            </tfoot>
                                        </table>
                                        <input type="hidden" id="record-apps-tag-ids" name="record_ids[]">

                                    </div>
                                    {{-- end client name --}}
                                </div>

                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-primary btn-prev">
                                        <i data-feather="arrow-left" class="align-middle mr-sm-25 mr-0"></i>
                                        <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <span class="align-middle d-sm-inline-block d-none">submit</span>
                                        {{--                                    <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>--}}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
            <!-- /Modern Horizontal Wizard -->


        </div>
    </div>
@endsection


@section("js")
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/responsive.bootstrap4.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jszip.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js') }}"></script>
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{asset("app-assets/vendors/js/forms/select/select2.full.min.js")}}"></script>
    <!-- END: Page Vendor JS-->
    <!-- BEGIN: Page JS-->
    <script src="{{asset("app-assets/js/scripts/forms/form-select2.js")}}"></script>
    <!-- END: Page JS-->
    <script src="{{asset("app-assets/vendors/js/forms/wizard/bs-stepper.min.js")}}"></script>
    <script src="{{asset("app-assets/js/scripts/forms/form-wizard.js")}}"></script>
    <script>
        var website_data = $("#website_id ").val();
        const indexUrl = '{{route("projects.appsTagsDt")}}';

    </script>
    <script src="{{ asset('app-assets/js/dt.js') }}?v=0.8"></script>

    <script>
        var selectedValues = [];

        $(document).ready(function() {
            var task_array =  $("#task_id ").val();
            var not_app_id_array =  $("#not_app_id ").val();
            var intArray = not_app_id_array.map(function(str) {
                return parseInt(str, 10);
            });
            var intTask_array = task_array.map(function(str) {
                return parseInt(str, 10);
            });


            // Function to update the array when a checkbox is clicked
            function updateSelectedValues(value, isChecked) {
                if (isChecked) {
                    // If the checkbox is checked, add the value to the array
                    selectedValues.push(value);
                } else {
                    // If the checkbox is unchecked, remove the value from the array
                    var index = selectedValues.indexOf(value);
                    if (index !== -1) {
                        selectedValues.splice(index, 1);
                    }
                }
                $('#record-apps-tag-ids').val(JSON.stringify(selectedValues));
                console.log(selectedValues);
            }
            $( "#website_id" ).change(function() {
                $("#not_app_id ").empty();
                $("#task_id ").empty();
                $("#app_id ").empty();
                var selectedOption = $(this).val();

                $.ajax({
                    cache: false,
                    url: "{{route("projects.websiteData")}}",
                    type: "post",
                    data: { "_token": "{{ csrf_token() }}",option: selectedOption },
                    success: function(response) {
                        var apps = response.apps;
                        var tasks = response.tasks;
                        if (apps){
                            $.each(apps , function(k, v) {
                                // Check if the ID exists in the array
                                var index = $.inArray(v.id, intArray);
                                var select = "";
                                if (index !== -1) {
                                    select = "selected";
                                    // Do something if the ID exists in the array
                                } else {
                                    select = "";                                    // Do something if the ID does not exist in the array
                                }
                                jQuery('#not_app_id').append('<option '+select+' value="'+v.id+'">'+v.name+'</option>');
                                jQuery('#app_id').append('<option value="'+v.id+'">'+v.name+'</option>');

                            })
                        }
                        if (tasks){
                            $.each(tasks , function(k, v) {
                                var index = $.inArray(v.id, intTask_array);
                                var select = "";
                                if (index !== -1) {
                                    select = "selected";
                                    // Do something if the ID exists in the array
                                } else {
                                    select = "";                                    // Do something if the ID does not exist in the array
                                }
                                jQuery('#task_id').append('<option '+select+'  value="'+v.id+'">'+v.description+'</option>');

                            })
                        }
                    }
                });
                website_data = $("#website_id ").val();
                var table = $('.app-tag-table').DataTable();
                table.draw();
            });


            $( "#not_app_id" ).change(function() {
                not_app_id_array = [];
                not_app_id_array =  $("#not_app_id ").val();
                intArray = $.map(not_app_id_array, function(str) {
                    return parseInt(str, 10);
                });
            });
            $( "#task_id" ).change(function() {
                task_array = [];
                task_array =  $("#task_id ").val();
                intTask_array = $.map(task_array, function(str) {
                    return parseInt(str, 10);
                });
            });
            $(document).on('change', '.record__select', function () {
                var value = $(this).val();
                var isChecked = $(this).prop("checked");
                updateSelectedValues(value, isChecked);

            });

        });

    </script>



@endsection