@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="updateCommissionForm" action="{{route('updateCommission')}}" 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-4">
                                                        <div class="col-md-6">
                                                            <input type="hidden" id="item_id" name="item_id" value="{{ encryption($commission->id) }}" />
                                                            <label for="commissionTitle" class="form-label">{{ __('commission.title') }} <span class="required">*</span></label>
                                                            <input type="text" name="r_commissionTitle" id="commissionTitle" value="{{ $commission->title }}" class="form-control" placeholder="{{__('commission.title')}}" @if($commission->action != null) disabled @endif />
                                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label for="commissionTime" class="form-label">{{ __('commission.time') }}</label>
                                                            <input type="text" class="form-control" name="commissionTime" id="commissionTime" value="{{ $commission->time }}" placeholder="{{ __('commission.time') }}" @if($commission->action != null) disabled @endif />
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label for="commissionLocation" class="form-label">{{ __('commission.location') }}</label>
                                                            <input type="text" class="form-control" name="commissionLocation" id="commissionLocation" value="{{ $commission->location }}" placeholder="{{ __('commission.location') }}" @if($commission->action != null) disabled @endif />
                                                        </div>
                                                    </div>
                                                </div>                                               
                                            </div>
                                        </div>
                                        <hr>
                                        @if($commission->action == null)
                                            <div class="col-md-12">
                                                <label for="matterTtitle" class="form-label">{{ __('matter.item') }}</label>
                                                <select name="matter" id="matter" class="form-control select2" onchange="addMatterToCommission();"></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">{{ __('commission.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>
                                        @endif
                                        @if($commission->matters)
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <label style="font-size: 14px; font-weight: bold;">{{ __('commission.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($commission->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_id); // Decode the JSON into an array
                                                                                @endphp
                                                                                <select name="r_prevCommissionOrganization[]" multiple class="form-control input-sm select2 m{{ app()->getLocale() == 'en' ? 'e' : 's' }}-2" style="width: 20%;" @if($commission->action != null) disabled @endif>
                                                                                    @foreach ($organizations as $org)
                                                                                        <option value="{{ $org->id }}" 
                                                                                            @if (in_array($org->id, (array)$selectedOrganizations)) selected @endif>
                                                                                            {{ $org->name }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                                <input name="prevCommissionTime[]" class="form-control input-sm me-2 ms-2" type="number" value="{{ $matters->timing }}" style="width: 15%;" @if($commission->action != null) disabled @endif> 
                                                                                <span class="ms-2 me-2">{{ __('global.minute') }}</span>
                                                                                <button type="button" class="btn btn-danger confirmationModal" 
                                                                                    data-id="{{ encryption($matters->matter_id) }}" 
                                                                                    data-status="decline" 
                                                                                    data-lar="{{ route('removeMatterFromCommission')}}" 
                                                                                    data-type="commission" 
                                                                                    data-title="{{ __('commission.decline')}}" 
                                                                                    data-description="{{ __('commission.are_you_agree_to_delete_the_requested_matter')}}" 
                                                                                    data-request-action="decline">x
                                                                                </button>
                                                                            </div>
                                                                        </li>
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="col-md-12">
                                                    <div class="row m-4">
                                                        <div class="col-md-12 m-2">
                                                            <label for="commissionDescription" class="form-label">{{ __('commission.description') }}</label>
                                                            <textarea name="commissionDescription" id="commissionDescription" class="form-control" cols="2" rows="3">{{ $commission->description }}</textarea>
                                                        </div> 
                                                        <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>
                                            </div>
                                        </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 addMatterToCommission() {
            let selectedOptions = $("#matter option:selected");
            let timePlaceholder = "{{ __('global.time') }}";
            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_commissionOrganization[]' 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('commissionGovernmentOrganizations') }}", // 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='commissionTime[]' class='commissionTime'>").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 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, 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(){

            var access_token = $("#access_token").val();

            $.ajax({
                type: "GET",
                url: "{{ route('getMatterBasedTypeCommission')}}",
                data: { 
                    access_token: access_token,
                },
                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);
                }
            });

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

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

                let commission_id = $('#item_id').val();
                let title = $('#commissionTitle').val();
                let time = $('#commissionTime').val();
                let location = $('#commissionLocation').val();
                let description = $('#commissionDescription').val();

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

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

                    itemsIds.push(single_id);
                    itemOrganization.push(single_org);
                    commissionTimes.push(single_time);
                });

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

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

                    itemsIdsPrev.push(single_id_prev);
                    itemOrganizationPrev.push(single_org_prev);
                    commissionTimesPrev.push(single_time_prev);
                });

                $.ajax({
                    url: $(this).attr('action'),
                    method: "POST",
                    data: {
                        commission_id: commission_id,
                        title: title,
                        time: time,
                        location:location,
                        description: description,
                        itemsIds: itemsIds,
                        itemsIdsPrev: itemsIdsPrev,
                        itemOrganization: itemOrganization,
                        itemOrganizationPrev: itemOrganizationPrev,
                        commissionTimes: commissionTimes, // Include times in the data sent
                        commissionTimesPrev: commissionTimesPrev
                    },
                    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);
                            $("#updateCommissionForm")[0].reset();
                            setTimeout(function() {
                                window.location.href = '{{ route("allCommissions") }}';
                            }, 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