@extends('layouts.admin')
@section('content')
<style>
    .mar-21 {
        margin-left: -19px;
        margin-top: -18px;
    }

    .select2-results__option--highlighted {
        background-color: #c6c1c1 !important;
        color: black;
    }

    .dt-hide {
        display: none;
    }

    .select2-container {
        width: 100% !important;
        border-color: #2196f3 !important;
    }

    .select2-selection {
        border-color: #2196f3 !important;
    }
</style>
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">Report</h5>
    </div>
    <div class="card-body">

        <form method="POST" id="form_event" class="form-horizontal" action="{{ route('store') }}" enctype="multipart/form-data">
            @csrf
            <div class="tab-content">
                <div class="form-group row">
                    <label class="col-form-label col-sm-3"> Type<span class="text-danger"> * </span></label>
                    <div class="col-sm-9">
                        <input lass="form-check-input" type="radio" name="complaint_issue" id="appreciation_issue"
                            value="2" {{ old('complaint_issue') == '2' ? 'checked' : '' }} checked />
                        Appreciation
                        <input type="radio" type="radio" name="complaint_issue" id="complaint_issue"
                            value="1" {{ old('complaint_issue') == '1' ? 'checked' : '' }} />
                        Complaint / Issue
                        <label id="for_member_or_with_guest-error" class="validation-invalid-label" for="for_member_or_with_guest"></label>
                    </div>
                    @error('complaint_issue')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-sm-3">Reporting For<span class="text-danger"> * </span></label>
                    <div class="col-sm-9">
                        <select name="reporting_for" id="reporting_for" class="form-control  select_form">
                            <option value="">Select employee</option>
                            @foreach ($users as $user)
                            <option value="{{ $user->id }}"
                                {{ old('reporting_for') == $user->id ? 'selected' : '' }}>{{ $user->full_name }}
                            </option>
                            @endforeach
                        </select>
                        @error('reporting_for')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <input type="hidden" name="employee" id="employee" value="{{ $userLogin->id }}">

                <div class="form-group row" id="select_topic_row" style="display: {{ old('complaint_issue') == '1' ? 'block' : 'none' }};">
                    <label class="col-form-label col-sm-3">Select Topic<span class="text-danger"> * </span></label>
                    <div class="col-sm-9">
                        <input lass="form-check-input" type="radio" name="topic" value="general" id="general_topic"
                            {{ old('topic') == 'general' ? 'checked' : '' }} />
                        General
                        <input type="radio" name="topic" value="moderate" id="moderate_topic"
                            {{ old('topic') == 'moderate' ? 'checked' : '' }} />
                        Moderate
                        <label id="for_member_or_with_guest-error" class="validation-invalid-label" for="for_member_or_with_guest"></label>

                        <input type="radio" type="radio" name="topic" value="serious" id="serious_topic"
                            {{ old('topic') == 'serious' ? 'checked' : '' }} />
                        Serious
                        <label id="for_member_or_with_guest-error" class="validation-invalid-label" for="for_member_or_with_guest"></label>
                        @error('topic')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                    </div>
                </div>
                <div class="form-group row" id="appreciation_type_row" style="display: {{ old('complaint_issue') == '2' ? 'block' : 'none' }};">
                    <label class="col-form-label col-sm-3">Appreciation Type<span class="text-danger"> * </span></label>
                    <div class="col-sm-9">
                        <select name="appreciation_type" id="appreciation_type" class="form-control select_form"
                            style="width: 100%;">
                            <option value="">Select appreciation type</option>
                            @foreach ($appreciationType as $appreciate)
                            <option value="{{ $appreciate->id }}"
                                {{ old('appreciation_type') == $appreciate->id ? 'selected' : '' }}>
                                {{ $appreciate->name }}
                            </option>
                            @endforeach
                        </select>
                        @error('appreciation_type')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="form-group row" id="issue_type_row" style="display: {{ old('complaint_issue') == '1' ? 'block' : 'none' }}">

                    <label class="col-form-label col-sm-3">Issue Type<span class="text-danger"> * </span></label>
                    <div class="col-sm-9">
                        <select name="issue_type" id="issue_type" class="form-control select_form" style="width: 100%;">
                            <option value="">Select issue type</option>
                            @foreach ($issueType as $issue)
                            <option value="{{ $issue->id }}"
                                {{ old('issue_type') == $issue->id ? 'selected' : '' }}>{{ $issue->name }}</option>
                            @endforeach
                        </select>
                        @error('issue_type')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-sm-3">Message / Comments</label>
                    <div class="col-sm-9">
                        <textarea class="form-control" name="message_comment" placeholder="Message / Comments" id="exampleFormControlTextarea1" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="text-right">

                <button type="submit" name="submit" id="event_submit" class="btn btn-xs border-blue text-blue btn-flat">
                    Submit
                    <i id="icon-hide" class="fa fa-arrow-right"></i>
                </button>
            </div>
    </div>
</div>
</form>
</div>
</div>
<script>
     $(".select_form").select2({
        tags: true
    });
    $('.select').on('select2:select select2:unselect', function() {
        replaceClearButton();
    });
</script>
@endsection
@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const complaintIssueRadio = document.getElementById('complaint_issue');
        const appreciationRadio = document.getElementById('appreciation_issue');
        const selectTopicRow = document.getElementById('select_topic_row');
        const appreciationTypeRow = document.getElementById('appreciation_type_row');
        const issue_type = document.getElementById('issue_type_row');

        function toggleSections() {
            if (complaintIssueRadio.checked) {
                issue_type.style.display = '';

                selectTopicRow.style.display = '';
                appreciationTypeRow.style.display = 'none';
            } else if (appreciationRadio.checked) {
                selectTopicRow.style.display = 'none';
                appreciationTypeRow.style.display = '';
                issue_type.style.display = 'none';
            }
        }
        complaintIssueRadio.addEventListener('change', toggleSections);
        appreciationRadio.addEventListener('change', toggleSections);
        toggleSections();
    });
</script>