@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="addCommissionForm" action="{{ route('storeCommission') }}" method="POST">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="col-md-12">
                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label for="commissionTitle" class="form-label">{{ __('commission.title') }} <span class="required">*</span></label>
                                                    <input type="text" class="form-control" name="r_commissionTitle[]" id="commissionTitle" placeholder="{{ __('commission.title') }}" />
                                                    <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" placeholder="{{ __('commission.time') }}" />
                                                </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" placeholder="{{ __('commission.location') }}" />
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <div class="col-md-12">
                                                    <label for="matterTtitle" class="form-label">{{ __('matter.item') }} <span class="required">*</span></label>
                                                    <select name="r_matter" id="matter" class="form-control select2" onchange="addMatterToCommission();">
                                                        <option value="">--{{__('global.select')}}--</option>
                                                        @if($matters)
                                                            @foreach($matters as $matter)
                                                                <option value="{{ encryption($matter->id)}}">{{$matter->title}} -- {{ substr($matter->description, 0, 200) }} -- [{{ $matter->organizationName->name }}]</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                </div>                                               
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <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>
                                                    <hr>
                                                    <div class="col-md-12">
                                                        <div class="row mb-4">
                                                            <div class="col-md-12">
                                                                <div class="row">
                                                                    <label for="commissionDescription" class="form-label">{{ __('commission.description') }}</label>
                                                                    <textarea name="commissionDescription" id="commissionDescription" class="form-control" cols="2" rows="2"></textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 mt-3">
                                                        <div class="row">
                                                            <button type="submit" class="btn btn-primary form-control">{{ __('global.save')}}</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

        </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);
                    }
                });

                let inputField = $("<input name='commissionTimes[]' class='commissionTimes'>").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' 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(){

            $('[data-toggle="tooltip"]').tooltip();

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

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

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

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

                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='commissionTimes[]']").val(); // Get time

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

                if (itemsIds.length > 0) {
                    $.ajax({
                        url: $(this).attr('action'),
                        method: "POST",
                        data: {
                            title: title,
                            time: time,
                            location: location,
                            description: description,
                            itemsIds: itemsIds,
                            itemOrganization: itemOrganization,
                            commissionTimes: commissionTimes, // Include times in the data sent
                        },
                        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);
                                $("#addCommissionForm")[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');
                        }
                    });
                } else {
                    toastr.options = {
                        "closeButton": true,
                        "progressBar": true,
                    };
                    toastr.error("Please add at least one matter to the list.");
                }
            });
        });

    </script>
@endsection