@extends('layouts.admin')
@section('content')
    <div class="card">

        <div class="card-header text-center">
            <h4>Nomination for {{ $nomination->course->title }}</h4>
        </div>

        <div class="card-body">

            <div class="form-group">
                <label><b>Nomination File : </b></label>
                <a href="{{ asset('upload/files') . '/' . $nomination->file }}" target="_blank">Download</a>
            </div>
            <div class="form-group">
                <label><b>Course Fee : </b></label>
                <span>{{ $nomination->course_fee }} TK</span>
            </div>

            <div class="form-group mt-2">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">SL</th>
                            <th scope="col">Organization</th>
                            <th scope="col">Number Of Trainee</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($nomination->nominationNominatedOrganisations as $item)
                            <tr id="row-{{ $item->id }}">
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $item->organization->name }}</td>
                                <td>
                                    <input type="text" name="number_of_trainee" id="input-{{ $item->id }}"
                                        value="{{ $item->number_of_trainee }}" disabled />
                                </td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm edit-btn"
                                        data-id="{{ $item->id }}">
                                        Edit
                                    </button>
                                    <button type="button" class="btn btn-success btn-sm update-btn"
                                        id="update-btn-{{ $item->id }}" style="display:none;"
                                        data-id="{{ $item->id }}">
                                        Update
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>
@endsection


@section('scripts')
    @parent
    <script>
        $(document).ready(function() {
            $('.edit-btn').on('click', function() {
                const id = $(this).data('id');
                const inputField = $('#input-' + id);
                const updateButton = $('#update-btn-' + id);

                inputField.prop('disabled', false);
                updateButton.show();

                $(this).hide();
            });


            $('.update-btn').on('click', function() {
                const id = $(this).data('id');
                const inputField = $('#input-' + id);
                const newValue = inputField.val();

                const updateUrl = "{{ route('number-of-nomination', ':id') }}".replace(':id', id);

                $.ajax({
                    url: updateUrl,
                    type: 'PATCH',
                    data: {
                        _token: '{{ csrf_token() }}',
                        number_of_trainee: newValue
                    },
                    success: function(response) {

                        if (response.message === 'Number of trainees updated successfully!') {

                            inputField.prop('disabled', true);

                            $('#update-btn-' + id).hide();

                            $('[data-id="' + id + '"].edit-btn').show();

                            alert('Update successful!');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('Error: ' + xhr.responseText);
                    }
                });
            });
        });
    </script>
@endsection