@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('page-content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <!-- card-header -->
                            <!--cenario 1: only header, 2:header and add button, 3:header and print, other:header , add button and prin. type:both[pdf,excel], type:[pdf], type:[excel] -->
                            <x-card-header 
                                :scenario="'1'"
                                :pageTitle="$page_title"
                            />
                            @csrf
                            <form id="updateAgendaForm" action="{{route('updateAgenda')}}" method="POST">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="col-md-12">
                                            <div class="row mb-4">
                                                <div class="col-md-12">
                                                    <div class="row mb-3">
                                                        <div class="col-md-2">
                                                            <input type="hidden" id="item_id" name="item_id" value="{{ encryption($agenda->id) }}" />
                                                            <label for="agendaType" class="form-label">{{ __('agenda.type.header') }} <span class="required">*</span></label>
                                                            <select name="r_agendaType" id="agendaType" class="form-control select2" disabled>
                                                                @if($agenda->type == 'tarh')
                                                                    <option value="tarh">{{__('agenda.type.tarh')}}</option>
                                                                @elseif($agenda->type == 'technical')
                                                                    <option value="technical">{{__('agenda.type.technical')}}</option>
                                                                @else
                                                                    <option value="commission">{{__('agenda.type.commission')}}</option>
                                                                @endif
                                                            </select>
                                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label for="agendaTitle" class="form-label">{{ __('agenda.title') }} <span class="required">*</span></label>
                                                            <input type="text" class="form-control"  name="r_agendaTitle" id="agendaTitle" value="{{ $agenda->title }}" placeholder="{{__('agenda.title')}}" />
                                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label for="agendaTime" class="form-label">{{ __('agenda.time') }}</label>
                                                            <input type="text" class="form-control" name="agendaTime" id="agendaTime"  value="{{ $agenda->time }}" placeholder="{{ __('agenda.time') }}" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="row mb-4">
                                                        <div class="col-md-4">
                                                            <label for="agendaLocation" class="form-label">{{ __('agenda.location') }}</label>
                                                            <input type="text" class="form-control" name="agendaLocation" id="agendaLocation" value="{{ $agenda->location }}" placeholder="{{ __('agenda.location') }}" />
                                                        </div>
                                                        <div class="col-md-8">
                                                            <label for="agendaDescription" class="form-label">{{ __('agenda.description') }}</label>
                                                            <textarea name="agendaDescription" id="agendaDescription" class="form-control" cols="2" rows="1">{{ $agenda->description }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 hiddens" id="participantDiv">
                                                    <div class="row mb-2">
                                                        <div class="col-md-8">
                                                            <label for="agendaParticipant" class="form-label">{{ __('agenda.participant') }}</label>
                                                            <input type="text" class="form-control" name="agendaParticipant" id="agendaParticipant" value="{{ $agenda->participant }}" placeholder="{{ __('agenda.participant') }}" />
                                                        </div>
                                                    </div>
                                                </div>                                         
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="col-md-12">
                                            <label for="matterTtitle" class="form-label">{{ __('matter.item') }}</label>
                                            <select name="matter" id="matter" class="form-control select2" onchange="addMatterToAgenda();"></select>
                                        </div> 
                                        <hr>
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="row">
                                                            <label style="font-size: 14px; font-weight: bold; margin-{{app()->getLocale() == 'en' ? 'left' : 'right'}}: -10px">{{ __('agenda.selected_matter_list') }}</label>
                                                            <div class="d-flex flex-column mb-2 col-md-12 fv-row matter-list" style="border: 1px solid #CCC; padding: 5px">
                                                                <ul class="list-group p-0"></ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @if($agenda->matters)
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <label style="font-size: 14px; font-weight: bold;">{{ __('agenda.previous_selected_matter_list') }}</label>
                                                            <div class="d-flex flex-column mb-2 col-md-12 fv-row" style="border: 1px solid #CCC; padding: 5px">
                                                                <ul class="list-group p-0">
                                                                    @foreach($agenda->matters as $matters)
                                                                        <li class="list-group-item previous-list-item" data-id="{{ encryption($matters->matter_id) }}">
                                                                            <span class="mb-1">{{ $matters->matterName->title }}</span>
                                                                            <div class="d-flex align-items-center mt-2">
                                                                                @php
                                                                                    $selectedOrganizations = json_decode($matters->organizations); // Decode the JSON into an array
                                                                                @endphp
                                                                                <select name="r_prevAgendaOrganization[]" multiple class="form-control input-sm select2 m{{ app()->getLocale() == 'en' ? 'e' : 's' }}-2" style="width: 20%;">
                                                                                    @foreach ($organizations as $org)
                                                                                        <option value="{{ $org->id }}" 
                                                                                            @if (in_array($org->id, (array)$selectedOrganizations)) selected @endif>
                                                                                            {{ $org->name }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                                <input type="number" name="prevAgendaTime[]" class="form-control input-sm me-2 ms-2" value="{{ $matters->timing }}" placeholder="{{ __('global.time') }}" style="width: 12%;" oninput="validateInput(event)">
                                                                                <span class="m{{ app()->getLocale() == 'en' ? 'e' : 's'}}-2">{{ __('global.minute') }}</span>
                                                                                <textarea name="prevAgendaDecission[]" class="form-control input-sm ms-2" rows="3" placeholder="{{ __('global.committee_decission') }} " style="width: 68%;">{{ $matters->committee_decision }}</textarea>
                                                                                <button type="button" class="btn btn-danger btn-sm confirmationModal" 
                                                                                    data-id="{{ encryption($matters->matter_id) }}" 
                                                                                    data-status="decline" 
                                                                                    data-lar="{{ route('removeMatterFromAgenda')}}" 
                                                                                    data-type="agenda" 
                                                                                    data-title="{{ __('agenda.decline')}}" 
                                                                                    data-description="{{ __('agenda.are_you_agree_to_delete_the_requested_matter')}}" 
                                                                                    data-request-action="decline">
                                                                                    <i class="fas fa-times"></i>
                                                                                </button>
                                                                                <button type="button" class="btn btn-info btn-sm confirmationModal m{{ app()->getLocale() == 'en' ? 's' : 'e'}}-2" 
                                                                                    data-id="{{ encryption($matters->matter_id) }}" 
                                                                                    data-status="followup" 
                                                                                    data-lar="{{ route('followupMatter', ['matter_id'=> encryption($matters->matter_id), 'agenda_id' => encryption($agenda->id)]) }}" 
                                                                                    data-type="agenda" 
                                                                                    data-title="{{ __('agenda.followup')}}" 
                                                                                    data-description="{{ __('agenda.are_you_agree_to_followup_matter')}}" 
                                                                                    data-request-action="followup"
                                                                                    data-action-type="GET">
                                                                                    <i class="fas fa-arrow-{{ app()->getLocale() == 'en' ? 'left' : 'right'}}"></i>
                                                                                </button>
                                                                            </div>
                                                                        </li>
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="col-md-2 mt-3">
                                            <button type="submit" class="btn btn-primary form-control m{{ app()->getLocale() == 'en' ? 's' : 'e' }}-1">{{ __('global.update')}}</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <x-confirmation-modal />

        </div> <!-- container-fluid -->
    </div>

@endsection

@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>
    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    <script type="text/javascript">

        let matterIDArray = [];
        let lang = "{{ app()->getLocale() }}";

        function addMatterToAgenda() {
            let selectedOptions = $("#matter option:selected");
            let timePlaceholder = "{{ __('global.time') }}";
            let committeeDecissionPlaceholder = "{{ __('global.committee_decission') }}";
            let minute = "{{ __('global.minute') }}";

            $.map(selectedOptions, function(option) {
                let stu = $(option).text();
                let stuID = $(option).val();
                if (stuID != 0) {
                    let existingIndex = matterIDArray.findIndex(item => item.index === stuID);
                    if (existingIndex === -1) {
                        matterIDArray.push({ index: stuID, value: stu });
                        $(option).prop("disabled", true);
                    } else {
                        matterIDArray[existingIndex].value = stu;
                    }
                }
            });

            $(".matter-list ul").empty();
            matterIDArray.forEach(item => {
                // Create the button
                let removeButton = $("<button>")
                    .text("x")
                    .addClass("remove-matter btn btn-danger")
                    .data("index", item.index);

                // Create select2 elements with reduced width
                let selectField = $("<select name='r_agendaOrganization[]' multiple>").attr({
                    class: (lang == 'en') ? "form-control select2 input-sm me-2" : "form-control input-sm select2 ms-2",
                    style: "width: 20%;" // Set a fixed width for the select element
                });

                // AJAX call to fetch organizations using Laravel route()
                $.ajax({
                    url: "{{ route('agendaGovernmentOrganizations') }}", // Use the named route for organizations
                    method: 'GET',
                    dataType: 'json',
                    success: function(organizations) {
                        // Append options to the select field
                        organizations.forEach(org => {
                            selectField.append($("<option>").val(org.id).text(org.name));
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error("Error fetching organizations:", status, error);
                    }
                });

                // Create input and textarea elements with reduced width
                let inputField = $("<input name='agendaTime[]' class='agendaTime'>").attr({
                    type: "number",
                    class: "form-control input-sm me-2 ms-2",
                    style: "width: 15%;", // Set a fixed width for the time input
                    placeholder: timePlaceholder,
                    oninput: "validateInput(event)"
                });

                let timeSpan = $("<span>").attr({
                    class: (lang == 'en') ? "me-2" : "ms-2",
                }).text(minute);

                let textArea = $("<textarea name='agendaDecission[]' class='agendaDecission'>").attr({
                    class: (lang == 'en') ? "form-control input-sm me-2" : "form-control input-sm ms-2",
                    rows: 3,
                    style: "width: 65%;", // Set a fixed width for the textarea
                    placeholder: committeeDecissionPlaceholder
                });

                let requiredSpan = $("<span class='text-danger hiddens'>{{ __('global.required') }} *</span>");

                // Create a container for the inputs
                let inputsContainer = $("<div class='d-flex align-items-center mt-2'>")
                    .append(selectField, requiredSpan, inputField, timeSpan, textArea, removeButton); // Group the inputs together

                // Create the list item and append elements
                let li = $("<li class='list-group-item new-list-item' data-id='" + item.index + "'>")
                    .append($("<span class='mb-1'>").text(item.value)) // Item text on a separate line
                    .append(inputsContainer); // Append inputs below

                $(".matter-list ul").append(li);
            });

            $(".select2").select2(); // Initialize Select2 for the newly created select fields
        }

        $(".matter-list").on("click", ".remove-matter", function() {
            let index = $(this).data("index");
            let selectedOption = $("#matter option[value='" + index + "']");

            matterIDArray = matterIDArray.filter(item => item.index !== index);
            selectedOption.prop("selected", false);
            selectedOption.prop("disabled", false);
            $("#matter").trigger("change");
            $(this).parent().remove();
        });

        $(document).ready(function(){

            $(document).on('change', '#agendaType', function(e) {
                var access_token = $("#access_token").val();
                var type = $("#agendaType option:selected").val();

                $('#participantDiv').toggleClass('hiddens', type !== 'technical');

                $.ajax({
                    type: "GET",
                    url: "{{ route('getMatterBasedTypeAgenda')}}",
                    data: { 
                        access_token: access_token,
                        type: type,
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#matter').html(result.content);
                        $(".select2").select2();
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#matter').html(errors);
                    }
                });
            });

            $("#agendaType").trigger("change");

            $(document).on('submit', '#updateAgendaForm', function (e) {
                e.preventDefault();

                if (!validateForm('updateAgendaForm')) {
                    return false;
                }

                let agenda_id = $('#item_id').val();
                let title = $('#agendaTitle').val();
                let time = $('#agendaTime').val();
                let location = $('#agendaLocation').val();
                let description = $('#agendaDescription').val();
                let participant = $('#agendaParticipant').val();

                var rows = $('.new-list-item');
                var itemsIds = [];
                var itemOrganization = [];
                var agendaTimes = [];
                var agendaDecisions = [];

                rows.each(function() {
                    var single_id = $(this).attr('data-id');
                    var single_org = $(this).find("select[name='r_agendaOrganization[]']").val(); // Get organization
                    var single_time = $(this).find("input[name='agendaTime[]']").val(); // Get time
                    var single_decision = $(this).find("textarea[name='agendaDecission[]']").val(); // Get decision

                    itemsIds.push(single_id);
                    itemOrganization.push(single_org);
                    agendaTimes.push(single_time);
                    agendaDecisions.push(single_decision);
                });

                var rowsPrev = $('.previous-list-item');
                var itemsIdsPrev = [];
                var itemOrganizationPrev = [];
                var agendaTimesPrev = [];
                var agendaDecisionsPrev = [];

                rowsPrev.each(function() {
                    var single_id_prev = $(this).attr('data-id');
                    var single_org_prev = $(this).find("select[name='r_prevAgendaOrganization[]']").val(); // Get organization
                    var single_time_prev = $(this).find("input[name='prevAgendaTime[]']").val(); // Get time
                    var single_decision_prev = $(this).find("textarea[name='prevAgendaDecission[]']").val(); // Get decision

                    itemsIdsPrev.push(single_id_prev);
                    itemOrganizationPrev.push(single_org_prev);
                    agendaTimesPrev.push(single_time_prev);
                    agendaDecisionsPrev.push(single_decision_prev);
                });

                $.ajax({
                    url: $(this).attr('action'),
                    method: "POST",
                    data: {
                        agenda_id: agenda_id,
                        title: title,
                        time: time,
                        location: location,
                        participant: participant,
                        description: description,
                        itemsIds: itemsIds,
                        itemsIdsPrev: itemsIdsPrev,
                        itemOrganization: itemOrganization,
                        itemOrganizationPrev: itemOrganizationPrev,
                        agendaTimes: agendaTimes, // Include times in the data sent
                        agendaTimesPrev: agendaTimesPrev,
                        agendaDecisions: agendaDecisions, // Include decisions in the data sent
                        agendaDecisionsPrev: agendaDecisionsPrev
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        // Handle the success response
                        if (response.status == 'success') {
                            toastr.options = {
                                "closeButton": true,
                                "progressBar": true,
                            };
                            toastr.success(response.message);
                            $("#updateAgendaForm")[0].reset();
                            setTimeout(function() {
                                window.location.href = '{{ route("allAgendas") }}';
                            }, 2000); // 2 seconds in milliseconds
                        } else {
                            toastr.options = {
                                "closeButton": true,
                                "progressBar": true,
                            };
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle the error response
                        console.error('Form submission failed');
                    }
                });
            });

        });
    </script>
@endsection