@extends('Admin.layout')

@section('content')

{{-- Select2 CSS --}}
<link
    href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
    rel="stylesheet"
/>

<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 38px;
        border: 1px solid #d9dee3;
        border-radius: 6px;
        padding-top: 4px;
    }

    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
        height: 36px;
    }

    .toast-container-custom {
        z-index: 99999;
        max-width: 100%;
    }
</style>

{{-- Success / Error Toast --}}
@if (
    session('success') ||
    session('error') ||
    $errors->any()
)
    <div
        class="position-fixed top-0 end-0 p-3 toast-container-custom"
    >
        <div
            id="pageToast"
            class="toast align-items-center text-white border-0
                {{ session('success') ? 'bg-success' : 'bg-danger' }}"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-bs-delay="3000"
            data-bs-autohide="true"
            style="min-width: 280px; max-width: 90vw;"
        >
            <div class="d-flex">

                <div class="toast-body">
                    @if (session('success'))
                        {{ session('success') }}

                    @elseif (session('error'))
                        {{ session('error') }}

                    @elseif ($errors->any())
                        {{ $errors->first() }}
                    @endif
                </div>

                <button
                    type="button"
                    class="btn-close btn-close-white me-2 m-auto"
                    data-bs-dismiss="toast"
                    aria-label="Close"
                ></button>

            </div>
        </div>
    </div>
@endif

{{-- Page Header --}}
<div class="row">
    <div class="col-12">

        <div
            class="d-flex flex-column flex-md-row
                   justify-content-between align-items-md-center
                   gap-3 mb-4"
        >
            <div>
                <h4 class="mb-1">
                    Staff Positive / Negative
                </h4>

                <p class="text-muted mb-0">
                    Add positive or negative feedback for active staff.
                </p>
            </div>

            <a
                href="{{ route('staff_feedback_list') }}"
                class="btn btn-label-primary"
            >
                <i class="ti tabler-list me-1"></i>
                Feedback List
            </a>
        </div>

    </div>
</div>

{{-- Add Form --}}
<div class="row justify-content-center">

    <div class="col-lg-6 col-md-9 col-sm-12">

        <div class="card">

            <div class="card-header border-bottom">
                <h5 class="card-title mb-0">
                    Add Staff Feedback
                </h5>
            </div>

            <div class="card-body pt-4">

                <form
                    method="POST"
                    action="{{ route('staff_feedback_store') }}"
                    id="staffFeedbackForm"
                >
                    @csrf

                    {{-- Staff --}}
                    <div class="mb-3">

                        <label
                            for="user_id"
                            class="form-label"
                        >
                            Select Staff
                            <span class="text-danger">*</span>
                        </label>

                        <select
                            name="user_id"
                            id="user_id"
                            class="form-select staff-select
                                @error('user_id') is-invalid @enderror"
                            required
                        >
                            <option value="">
                                Search and select staff
                            </option>

                            @foreach ($staffList as $staff)
                                <option
                                    value="{{ $staff->id }}"
                                    {{ old('user_id') == $staff->id
                                        ? 'selected'
                                        : '' }}
                                >
                                    {{ $staff->name }}

                                    @if (!empty($staff->email))
                                        - {{ $staff->email }}
                                    @endif
                                </option>
                            @endforeach
                        </select>

                        @error('user_id')
                            <div class="text-danger small mt-1">
                                {{ $message }}
                            </div>
                        @enderror

                        @if ($staffList->isEmpty())
                            <div class="text-danger small mt-2">
                                No active staff found.
                            </div>
                        @endif

                    </div>

                    {{-- Type --}}
                    <div class="mb-3">

                        <label
                            for="type"
                            class="form-label"
                        >
                            Type
                            <span class="text-danger">*</span>
                        </label>

                        <select
                            name="type"
                            id="type"
                            class="form-select
                                @error('type') is-invalid @enderror"
                            required
                        >
                            <option value="">
                                Select type
                            </option>

                            <option
                                value="positive"
                                {{ old('type') === 'positive'
                                    ? 'selected'
                                    : '' }}
                            >
                                Positive
                            </option>

                            <option
                                value="negative"
                                {{ old('type') === 'negative'
                                    ? 'selected'
                                    : '' }}
                            >
                                Negative
                            </option>
                        </select>

                        @error('type')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>

                    {{-- Reason --}}
                    <div class="mb-3">

                        <label
                            for="reason"
                            class="form-label"
                        >
                            Reason
                            <span class="text-danger">*</span>
                        </label>

                        <textarea
                            name="reason"
                            id="reason"
                            rows="5"
                            minlength="3"
                            maxlength="1000"
                            class="form-control
                                @error('reason') is-invalid @enderror"
                            placeholder="Enter the reason..."
                            required
                        >{{ old('reason') }}</textarea>

                        <div
                            class="d-flex justify-content-between mt-1"
                        >
                            <div>
                                @error('reason')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                                @else
                                    <small class="text-muted">
                                        Minimum 3 characters
                                    </small>
                                @enderror
                            </div>

                            <small
                                class="text-muted"
                                id="reasonCount"
                            >
                                0 / 1000
                            </small>
                        </div>

                    </div>

                    {{-- Buttons --}}
                    <div
                        class="d-flex justify-content-end gap-2"
                    >
                        <button
                            type="reset"
                            class="btn btn-label-secondary"
                            id="resetFormButton"
                        >
                            <i class="ti tabler-refresh me-1"></i>
                            Reset
                        </button>

                        <button
                            type="submit"
                            class="btn btn-primary"
                            id="submitFeedbackButton"
                            {{ $staffList->isEmpty()
                                ? 'disabled'
                                : '' }}
                        >
                            <span class="submit-text">
                                <i class="ti tabler-device-floppy me-1"></i>
                                Save Feedback
                            </span>

                            <span class="submit-loading d-none">
                                <span
                                    class="spinner-border
                                           spinner-border-sm me-1"
                                ></span>

                                Saving...
                            </span>
                        </button>
                    </div>

                </form>

            </div>
        </div>

    </div>

</div>

{{-- jQuery --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

{{-- Select2 JS --}}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function () {

    /*
    |--------------------------------------------------------------------------
    | Searchable staff dropdown
    |--------------------------------------------------------------------------
    */

    $('.staff-select').select2({
        placeholder: 'Type staff name or email',
        allowClear: true,
        width: '100%'
    });


    /*
    |--------------------------------------------------------------------------
    | Show session toast
    |--------------------------------------------------------------------------
    */

    const pageToastElement =
        document.getElementById('pageToast');

    if (pageToastElement) {
        const pageToast =
            bootstrap.Toast.getOrCreateInstance(
                pageToastElement,
                {
                    delay: 3000,
                    autohide: true
                }
            );

        pageToast.show();
    }


    /*
    |--------------------------------------------------------------------------
    | Reason character counter
    |--------------------------------------------------------------------------
    */

    function updateReasonCount() {
        const reasonValue =
            $('#reason').val() || '';

        $('#reasonCount').text(
            reasonValue.length + ' / 1000'
        );
    }

    updateReasonCount();

    $('#reason').on('input', function () {
        updateReasonCount();
    });


    /*
    |--------------------------------------------------------------------------
    | Reset form
    |--------------------------------------------------------------------------
    */

    $('#resetFormButton').on('click', function () {

        setTimeout(function () {

            $('#user_id')
                .val('')
                .trigger('change');

            $('#type').val('');

            $('#reason').val('');

            updateReasonCount();

        }, 0);
    });


    /*
    |--------------------------------------------------------------------------
    | Prevent duplicate submission
    |--------------------------------------------------------------------------
    */

    $('#staffFeedbackForm').on('submit', function () {

        const form = this;

        if (!form.checkValidity()) {
            return;
        }

        const submitButton =
            $('#submitFeedbackButton');

        submitButton.prop('disabled', true);

        submitButton
            .find('.submit-text')
            .addClass('d-none');

        submitButton
            .find('.submit-loading')
            .removeClass('d-none');
    });

});
</script>

@endsection