@extends('admin.layout.master')

@section('css')
@endsection

@section('content')
    <section id="multiple-column-form">
        <div class="row match-height">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{__('admin.show')}}</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.complain_number')}}</span>
                                        <div class="controls">
                                            <p class="form-control-static">{{ $complain->complain_number }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.complainant')}}</span>
                                        <div class="controls">
                                            <p class="form-control-static">
                                                @if($complain->provider)
                                                    {{ $complain->provider->name }} ({{ __('admin.provider') }})
                                                @else
                                                    {{ $complain->client->name ?? '-' }}
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="complain-status">{{__('admin.status')}}</label>
                                        <div class="controls">
                                            <select class="form-control status-select" id="complain-status" data-id="{{ $complain->id }}" data-current-status="{{ $complain->status }}" style="min-width: 120px;">
                                                @if($complain->status == 'new')
                                                    <option value="new" selected>{{ __('admin.new') }}</option>
                                                    <option value="pending">{{ __('admin.pending') }}</option>
                                                @elseif($complain->status == 'pending')
                                                    <option value="pending" selected>{{ __('admin.pending') }}</option>
                                                    <option value="finish">{{ __('admin.finish') }}</option>
                                                @elseif($complain->status == 'finish')
                                                    <option value="finish" selected>{{ __('admin.finish') }}</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.created_at')}}</span>
                                        <div class="controls">
                                            <p class="form-control-static">{{ $complain->created_at->format('Y-m-d H:i') }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.title')}}</span>
                                        <div class="controls">
                                            <p class="form-control-static">{{ $complain->title }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.description')}}</span>
                                        <div class="controls">
                                            <p class="form-control-static">{{ $complain->description ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>

                                @if($complain->images->count() > 0)
                                <div class="col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.images')}}</span>
                                        <div class="controls">
                                            <div class="row">
                                                @foreach($complain->images as $image)
                                                    <div class="col-md-3 mb-2">
                                                        <img src="{{ $image->image }}" alt="{{ __('admin.complain') }} {{ $loop->iteration }}" class="img-fluid" style="max-height: 200px;">
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                @if($complain->reply)
                                <div class="col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.reply')}}</span>
                                        <div class="controls">
                                            <p class="form-control-static">{{ $complain->reply }}</p>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <div class="col-12 d-flex justify-content-center mt-3">
                                    @if($complain->status === 'pending' && !$complain->reply)
                                        <a data-toggle="modal" id="complain-reply-anchor" data-target="#complain-reply-modal"
                                            class="btn btn-outline-primary mr-1 mb-1">
                                            {{ __('admin.reply') }}
                                        </a>
                                    @endif
                                    <span class="delete-row btn btn-danger mr-1 mb-1" data-url="{{ url('admin/complains/' . $complain->id) }}" style="cursor: pointer;">
                                        {{__('admin.delete')}}
                                    </span>
                                    <a href="{{ url()->previous() }}" class="btn btn-outline-warning mr-1 mb-1">{{__('admin.back')}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if($complain->status === 'pending' && !$complain->reply)
    <dialog class="modal fade text-left" id="complain-reply-modal" tabindex="-1" aria-labelledby="complainReplyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header bg-primary white">
                    <h5 class="modal-title" id="complainReplyModalLabel">{{ __('admin.the_reply') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('admin.complains.completed', ['id' => $complain->id]) }}" method="POST" enctype="multipart/form-data" class="reply-form store parsley" id="complain_reply_form">
                        @csrf
                        <div class="col-md-12 col-12">
                            <div class="form-group">
                                <label for="complain-reply">{{ __('admin.the_reply') }}</label>
                                <div class="controls">
                                    <textarea name="reply" id="complain-reply" class="form-control" cols="30" rows="10" required
                                        data-parsley-required-message="{{ __('admin.this_field_is_required') }}"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary send-reply-button">
                                {{ __('admin.send') }}
                            </button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                {{ __('admin.cancel') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </dialog>
    @endif
@endsection

@section('js')
    <script src="{{asset('admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
    <script src="{{asset('admin/app-assets/js/scripts/extensions/sweet-alerts.js')}}"></script>

    <script>
        // Make show-page fields readonly, but keep status select and reply modal editable
        $(document).ready(function() {
            $('input').not('.status-select, #complain-reply-modal :input').attr('readonly', true).attr('disabled', true);
            $('textarea').not('#complain-reply-modal textarea').attr('readonly', true).attr('disabled', true);
        });

        // Handle status change
        $(document).on('change', '.status-select', function() {
            var select = $(this);
            var complainId = select.data('id');
            var newStatus = select.val();

            // Get the previously selected option (before change)
            var oldStatus = select.data('current-status') || select.data('old-status') || select.find('option[selected]').val();

            // Store current value as old for next change
            select.data('old-status', newStatus);

            // If status is finish, ask for reply
            if (newStatus === 'finish') {
                Swal.fire({
                    title: '{{ __('admin.reply') }}',
                    input: 'textarea',
                    inputLabel: '{{ __('admin.reply_is_required_when_status_is_finish') }} ({{ __('admin.min') }}: 2, {{ __('admin.max') }}: 500)',
                    inputPlaceholder: '{{ str_replace(':input', __('admin.reply'), __('admin.please_enter')) }}',
                    inputAttributes: {
                        'aria-label': '{{ __('admin.reply') }}',
                        'maxlength': '500'
                    },
                    showCancelButton: true,
                    confirmButtonText: '{{ __('admin.confirm') }}',
                    cancelButtonText: '{{ __('admin.cancel') }}',
                    inputValidator: (value) => {
                        if (!value || value.trim() === '') {
                            return '{{ __('admin.reply_is_required_when_status_is_finish') }}';
                        }
                        if (value.trim().length < 2) {
                            return '{{ __('admin.reply_min_2_characters') }}';
                        }
                        if (value.length > 500) {
                            return '{{ __('admin.reply_max_500_characters') }}';
                        }
                    },
                    preConfirm: (reply) => {
                        return new Promise((resolve, reject) => {
                            if (!reply || reply.trim() === '') {
                                Swal.showValidationMessage('{{ __('admin.reply_is_required_when_status_is_finish') }}');
                                reject(new Error('{{ __('admin.reply_is_required_when_status_is_finish') }}'));
                                return;
                            }

                            if (reply.trim().length < 2) {
                                Swal.showValidationMessage('{{ __('admin.reply_min_2_characters') }}');
                                reject(new Error('{{ __('admin.reply_min_2_characters') }}'));
                                return;
                            }

                            if (reply.length > 500) {
                                Swal.showValidationMessage('{{ __('admin.reply_max_500_characters') }}');
                                reject(new Error('{{ __('admin.reply_max_500_characters') }}'));
                                return;
                            }

                            var data = {
                                status: newStatus,
                                reply: reply,
                                _token: $('meta[name="csrf-token"]').attr('content')
                            };

                            $.ajax({
                                url: '{{ url("admin/complains") }}/' + complainId + '/update-status',
                                type: 'POST',
                                data: data,
                                dataType: 'json',
                                success: function(response) {
                                    if (response.status === 'success') {
                                        resolve(reply);
                                    } else {
                                        var errorMessage = response.message || '{{ __('admin.error') }}';
                                        Swal.showValidationMessage(errorMessage);
                                        reject(new Error(errorMessage));
                                    }
                                },
                                error: function(xhr) {
                                    var errorMessage = '{{ __('admin.error') }}';
                                    if (xhr.responseJSON) {
                                        if (xhr.responseJSON.message) {
                                            errorMessage = xhr.responseJSON.message;
                                        } else if (xhr.responseJSON.errors && xhr.responseJSON.errors.reply) {
                                            errorMessage = xhr.responseJSON.errors.reply[0];
                                        } else if (xhr.responseJSON.errors && xhr.responseJSON.errors.status) {
                                            errorMessage = xhr.responseJSON.errors.status[0];
                                        }
                                    }

                                    Swal.showValidationMessage(errorMessage);
                                    reject(new Error(errorMessage));
                                }
                            });
                        });
                    }
                }).then((result) => {
                    if (result.isConfirmed && result.value) {
                        Swal.fire({
                            position: 'top-start',
                            type: 'success',
                            title: '{{ __('admin.update_successfully') }}',
                            showConfirmButton: false,
                            timer: 1500,
                            confirmButtonClass: 'btn btn-primary',
                            buttonsStyling: false,
                        });

                        // Update the select options based on new status
                        updateStatusSelectOptions(select, newStatus);

                        // Reload page to show updated data
                        setTimeout(function() {
                            location.reload();
                        }, 1500);
                    } else {
                        // Revert to old status
                        select.val(oldStatus);
                        select.data('old-status', oldStatus);
                    }
                });
            } else {
                // Update status directly
                updateStatus(complainId, newStatus, null, select, oldStatus);
            }
        });

        // Update select options based on current status
        function updateStatusSelectOptions(selectElement, currentStatus) {
            selectElement.empty();

            var pendingLabel = '{{ __('admin.pending') }}';
            var finishLabel = '{{ __('admin.finish') }}';

            if (currentStatus === 'pending') {
                selectElement.append($('<option>', { value: 'pending', text: pendingLabel, selected: true }));
                selectElement.append($('<option>', { value: 'finish', text: finishLabel }));
            } else if (currentStatus === 'finish') {
                selectElement.append($('<option>', { value: 'finish', text: finishLabel, selected: true }));
            } else {
                // If status is 'new', show new (selected) and pending option
                selectElement.append($('<option>', { value: 'new', text: '{{ __('admin.new') }}', selected: true }));
                selectElement.append($('<option>', { value: 'pending', text: pendingLabel }));
            }

            selectElement.data('current-status', currentStatus);
            selectElement.data('old-status', currentStatus);
        }

        function updateStatus(complainId, status, reply, selectElement, oldStatus) {
            return new Promise((resolve, reject) => {
                var data = {
                    status: status,
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                if (reply) {
                    data.reply = reply;
                }

                $.ajax({
                    url: '{{ url("admin/complains") }}/' + complainId + '/update-status',
                    type: 'POST',
                    data: data,
                    dataType: 'json',
                    success: function(response) {
                        Swal.fire({
                            position: 'top-start',
                            type: 'success',
                            title: response.message || '{{ __('admin.update_successfully') }}',
                            showConfirmButton: false,
                            timer: 1500,
                            confirmButtonClass: 'btn btn-primary',
                            buttonsStyling: false,
                        });

                        // Update the select options based on new status
                        updateStatusSelectOptions(selectElement, status);

                        // Reload page to show updated data
                        setTimeout(function() {
                            location.reload();
                        }, 1500);

                        resolve(response);
                    },
                    error: function(xhr) {
                        var errorMessage = xhr.responseJSON?.message || (xhr.responseJSON?.errors?.reply ? xhr.responseJSON.errors.reply[0] : '') || '{{ __('admin.error') }}';

                        Swal.fire({
                            icon: 'error',
                            title: '{{ __('admin.error') }}',
                            text: errorMessage,
                            confirmButtonClass: 'btn btn-danger',
                        });

                        // Revert to old status
                        if (oldStatus) {
                            selectElement.val(oldStatus);
                            selectElement.data('old-status', oldStatus);
                        }

                        reject(xhr);
                    }
                });
            });
        }

        $(document).on('submit', '#complain_reply_form', function (e) {
            e.preventDefault();
            var url = $(this).attr('action');
            var formData = new FormData($(this)[0]);

            $.ajax({
                url: url,
                method: 'post',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $(".send-reply-button").html(
                        '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
                    ).attr('disabled', true);
                },
                success: function () {
                    $(".send-reply-button").html("{{ __('admin.send') }}").attr('disabled', false);
                    $('#complain-reply-modal').modal('hide');
                    Swal.fire({
                        position: 'top-start',
                        type: 'success',
                        title: '{{ __('admin.complain_status_has_been_successfully_updated') }}',
                        showConfirmButton: false,
                        timer: 1500,
                        confirmButtonClass: 'btn btn-primary',
                        buttonsStyling: false,
                    });
                    setTimeout(function () {
                        location.reload();
                    }, 1500);
                },
                error: function (xhr) {
                    $(".send-reply-button").html("{{ __('admin.send') }}").attr('disabled', false);
                    $(".text-danger").remove();
                    $('.reply-form textarea').removeClass('border-danger');

                    $.each(xhr.responseJSON?.errors || {}, function (key, value) {
                        $('.reply-form textarea[name=' + key + ']').addClass('border-danger')
                            .after(`<span class="mt-5 text-danger">${value}</span>`);
                    });
                },
            });
        });

        $('#complain-reply-anchor').on('click', function () {
            $('#complain-reply-modal textarea[name="reply"]').val('');
        });

        $(document).on('click', '.delete-row', function (e) {
            e.preventDefault();
            var deleteUrl = $(this).data('url');

            Swal.fire({
                title: "{{__('admin.are_you_want_to_continue')}}",
                text: "{{__('admin.are_you_want_to_complete_the_delete_process')}}",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{__('admin.confirm')}}',
                confirmButtonClass: 'btn btn-primary',
                cancelButtonText: '{{__('admin.cancel')}}',
                cancelButtonClass: 'btn btn-danger ml-1',
                buttonsStyling: false,
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: "DELETE",
                        url: deleteUrl,
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        dataType: "json",
                        success: function (response) {
                            Swal.fire({
                                position: 'top-start',
                                type: 'success',
                                title: '{{__('admin.the_selected_has_been_successfully_deleted')}}',
                                showConfirmButton: false,
                                timer: 1500,
                                confirmButtonClass: 'btn btn-primary',
                                buttonsStyling: false,
                            }).then(() => {
                                window.location.href = '{{ route('admin.complains.index') }}';
                            });
                        },
                        error: function (xhr) {
                            Swal.fire({
                                position: 'top-start',
                                type: 'error',
                                title: xhr.responseJSON?.message || '{{__('admin.error')}}',
                                showConfirmButton: false,
                                timer: 1500,
                                confirmButtonClass: 'btn btn-primary',
                                buttonsStyling: false,
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection