@extends('layouts.dashboard')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@endsection

@section('content')
<div class="page-content">

    <div class="heading">
        <h1 class="title">{{ __('daily_tasks') }}</h1>
        {{-- <h2 class="sub-title">יום שני, 09 פברואר 2026</h2> --}}
        <h2 class="sub-title">
            {{ now()->translatedFormat('l, d F Y') }}
        </h2>
    </div>

    <div class="participants-card">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">{{ __('total_tasks') }}</h3>
                <h4>{{ $totalTasks }}</h4>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">{{ __('completed') }}</h3>
                <h4>{{ $completedTasks }}</h4>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">{{ __('waiting') }}</h3>
                <h4>{{ $waitingTasks }}</h4>
            </div>
        </div>
    </div>

    @if(!empty($todayTasks))
        <div class="tasks-list">
            @foreach($todayTasks as $task)
                <div class="tasks-item">

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="tast{{ $task->id }}" {{ $task->status == 2 ? 'checked' : '' }}>
                    </div>

                    <div class="tasks-item-details">
                        <div class="tasks-item-heading">
                            <div>
                                <h3 class="title">
                                    {{ $task->invitation?->fullname ?? '—' }}
                                </h3>
                                <p>מנהל תפעול וניהול אתרי תיירות</p>
                            </div>
                            <p class="date">
                                @if($task->task_date)
                                    {{ \Carbon\Carbon::parse($task->task_date)->format('d.m.Y') }}
                                @endif
                            </p>
                        </div>

                        <textarea class="form-control task-note" rows="3" data-id="{{ $task->id }}" readonly >{!! $task->note !!}</textarea>

                        <div class="tasks-item-btn">
                            <button type="button" class="btn btn-outline-secondary btn-edit-note" data-id="{{ $task->id }}">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_878_329)">
                                        <path d="M9.16663 3.3332H5.66663C4.26649 3.3332 3.56643 3.3332 3.03165 3.60568C2.56124 3.84536 2.17879 4.22782 1.93911 4.69822C1.66663 5.233 1.66663 5.93307 1.66663 7.3332V14.3332C1.66663 15.7333 1.66663 16.4334 1.93911 16.9682C2.17879 17.4386 2.56124 17.821 3.03165 18.0607C3.56643 18.3332 4.26649 18.3332 5.66663 18.3332H12.6666C14.0668 18.3332 14.7668 18.3332 15.3016 18.0607C15.772 17.821 16.1545 17.4386 16.3941 16.9682C16.6666 16.4334 16.6666 15.7333 16.6666 14.3332V10.8332M6.6666 13.3332H8.06206C8.46971 13.3332 8.67353 13.3332 8.86535 13.2871C9.03541 13.2463 9.19798 13.179 9.3471 13.0876C9.5153 12.9845 9.65942 12.8404 9.94767 12.5521L17.9166 4.5832C18.607 3.89284 18.607 2.77355 17.9166 2.0832C17.2263 1.39284 16.107 1.39284 15.4166 2.0832L7.44765 10.0521C7.1594 10.3404 7.01527 10.4845 6.9122 10.6527C6.82082 10.8018 6.75348 10.9644 6.71265 11.1345C6.6666 11.3263 6.6666 11.5301 6.6666 11.9378V13.3332Z" stroke="#6938EF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_878_329">
                                            <rect width="20" height="20" fill="white"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                                <span>{{ __('edit_note') }}</span>
                            </button>

                            <button type="button" class="btn btn-outline-secondary btn-save-note d-none" data-id="{{ $task->id }}">
                                <svg width="20" height="20" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15.8333 10.8335V11.8335C15.8333 13.2336 15.8333 13.9337 15.5608 14.4685C15.3211 14.9389 14.9386 15.3213 14.4682 15.561C13.9334 15.8335 13.2334 15.8335 11.8333 15.8335H4.83325C3.43312 15.8335 2.73305 15.8335 2.19828 15.561C1.72787 15.3213 1.34542 14.9389 1.10574 14.4685C0.833252 13.9337 0.833252 13.2336 0.833252 11.8335V10.8335M12.4999 5.00016L8.33325 0.833496M8.33325 0.833496L4.16659 5.00016M8.33325 0.833496V10.8335" stroke="#6938EF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                <span>{{ __('submit') }}</span>
                                <span class="spinner d-none"></span>
                            </button>

                            <a href="{{ $task->candidate_id != 0 ? route('admin.candidates.show', $task->candidate_id) : 'javascript:void(0)' }}" class="btn btn-primary {{ $task->candidate_id == 0 ? 'disabled' : '' }}" @if($task->candidate_id == 0) aria-disabled="true" @endif>
                                <img src="{{ asset('images/p-button.svg') }}">
                                <span>{{ __('participant_bag') }}111</span>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else 
        <div class="no-tasks-card">
            <div class="card">
                <div class="card-body">
                    <img src="{{ asset('images/no-task.svg') }}">
                    <h3 class="card-title">{{ __('no_tasks_for_today') }}</h3>
                    <p class="card-text">{{ __('all_comments_today_have_already_addressed_or_no_new_tasks') }}</p>
                </div>
            </div>
        </div>
    @endif

</div>
@endsection

@section('js')

<script>
$(document).on('click', '.btn-edit-note', function () {
    var id = $(this).data('id');

    var textarea = $('.task-note[data-id="' + id + '"]');

    textarea.prop('readonly', false).focus();

    $(this).addClass('d-none');
    $('.btn-save-note[data-id="' + id + '"]').removeClass('d-none');
});

$(document).on('click', '.btn-save-note', function () {

    var btn = $(this);
    var id = $(this).data('id');
    var textarea = $('.task-note[data-id="' + id + '"]');
    var note = textarea.val();

    var spinner = btn.find('.spinner');
    var btnText = btn.find('span').first();
    var btnSvg = btn.find('svg').first();

    // UI: loading state
    btn.prop('disabled', true);
    btnText.addClass('d-none');
    btnSvg.addClass('d-none');
    spinner.removeClass('d-none');
    

    $.ajax({
        url: "{{ route('coordinator.tasks.update-note', ':id') }}".replace(':id', id),
        type: "POST",
        data: {
            _token: window.APP.csrfToken,
            note: note
        },
        success: function () {
                textarea.prop('readonly', true);
                btn.addClass('d-none');
                $('.btn-edit-note[data-id="' + id + '"]').removeClass('d-none');
        },
        error: function (xhr) {

            Swal.fire({
                title: "{{ __('update_note_error') }}",
                showConfirmButton: true,
                confirmButtonText: "{{ __('approval_button') }}",
                confirmButtonColor: '#6938EF',
                showCloseButton: true,
                imageUrl: '{{ asset("images/error.svg") }}',
                imageWidth: 36,
                imageHeight: 36,
                imageAlt: 'Error icon',
                text: xhr.responseJSON?.message || 'Error saving note',
                allowOutsideClick: false,
                customClass: {
                    popup: 'my-swal-popup',
                    title: 'my-swal-title',
                    confirmButton: 'btn btn-primary',
                    closeButton: 'my-swal-close'
                }
            }).then(() => {
                    btn.prop('disabled', false);
                    spinner.addClass('d-none');
                    btnText.removeClass('d-none');  
                    btnSvg.removeClass('d-none'); 
            });

        },
        complete: function () {                      
            btn.prop('disabled', false);
            spinner.addClass('d-none');
            btnText.removeClass('d-none');
            btnSvg.removeClass('d-none'); 
        }
    });
});
</script>


@endsection