@extends('layouts.app')

@section('content')
<div class="content">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        @component('components.breadcrumb', [
            'links' => [['name' => 'Assignment', 'url' => ''], ['name' => 'Assignments', 'url' => '']],
        ])
        @endcomponent

        @can('exam_assignment_index')
            <a href="{{ route('assignments.create') }}" class="btn btn-outline-primary btn-sm radius-8">New Assignment</a>
        @endcan

    </div>
    <div class="card bg-white shadow-sm">



        <div class="d-flex align-items-center align-content-center gap-3 mb-3">

            <span class="text-secondary fw-medium p-2"><i class="ri-eye-line"></i> Show</span>

            <form method="GET" action="{{ route('assignments.index') }}" class="d-flex align-items-center gap-2"
                id="filtersForm">

                {{-- Per Page --}}
                <select name="per_page" id="per_page" class="form-select form-select-sm w-auto"
                    onchange="document.getElementById('filtersForm').submit()">
                    @foreach ([5, 10, 25, 50, 100, 150] as $count)
                        <option value="{{ $count }}" {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                            {{ $count }}
                        </option>
                    @endforeach
                </select>

                {{-- <input type="text" class="form-control" name="search_title" value="{{ $searchTitle }}"
                    placeholder="Search by title">

                <button type="submit" class="btn btn-outline-primary btn-sm radius-8">Search</button> --}}


                {{-- Search --}}
                <input type="text" class="form-control form-control-sm w-auto" name="search"
                    value="{{ request('search') }}" placeholder="Search Assignment">




                {{-- Status --}}
                <select class="form-select" name="search_status"
                    onchange="document.getElementById('filtersForm').submit()">
                    <option value="">Status</option>
                    <option value="1" {{ request('search_status') == '1' ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ request('search_status') == '0' ? 'selected' : '' }}>Deactivated</option>
                </select>



                {{-- Category --}}
                {{-- <select class="form-select" name="search_category"
                    onchange="document.getElementById('filtersForm').submit()">
                    <option value="">All Categories</option>
                    @foreach ($categories as $category)
                    <option value="{{ $category->id }}" {{ request('search_category')==$category->id ? 'selected' : ''
                        }}>
                        {{ $category->name_en }}
                    </option>
                    @endforeach
                </select> --}}

                {{-- Track --}}
                {{-- <select class="form-select" name="search_track"
                    onchange="document.getElementById('filtersForm').submit()">
                    <option value="">All Tracks</option>
                    @foreach ($tracks as $track)
                    <option value="{{ $track->id }}" {{ request('search_track')==$track->id ? 'selected' : '' }}>
                        {{ $track->name_en }}
                    </option>
                    @endforeach
                </select> --}}

                {{-- Clear Filters --}}
                <button type="button" class="btn btn-outline-danger btn-sm radius-8"
                    onclick="document.querySelectorAll('#filtersForm input, #filtersForm select').forEach(el => el.value = ''); document.getElementById('filtersForm').submit();">
                    Clear
                </button>
            </form>

        </div>



        <div class="card-body p-3">
            <div class="table-responsive">


                <table class="table table-bordered table-sm table bordered-table sm-table mb-0 text-center"
                    id="assignmentsTable">
                    <thead>
                        <tr>
                            <th class="text-center">ID</th>
                            <th class="text-center">Assignment Name</th>
                            <th class="text-center">Student / Group Name</th>
                            <th class="text-center">Level</th>
                            <th class="text-center">Group / Private</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Created Date</th>
                            @canany(['exam_assignment_edit', 'exam_assignment_destroy'])
                            <th class="text-center">Actions</th>
                            @endcan
                        </tr>
                    </thead>
                    <tbody>
                        {{-- @dd($assignments) --}}
                        @forelse ($assignments as $assignment)
                        <tr data-id="{{ $assignment->id }}">
                            <td>{{ $assignment->id }}</td>
                            <td>{{ $assignment->title }}</td>

                            <td>
                                @php
                                    $firstSchedule = $assignment->staffScheduled;
                                @endphp

                                {{-- @dd($firstSchedule ) --}}

                                @if ($firstSchedule && $firstSchedule?->trackType?->slug === 'private')
                                    @php
                                        $firstStudent = $firstSchedule?->courseStudent?->first()?->student;
                                    @endphp

                                    {{ $firstStudent?->first_name ?? '' }} {{ $firstStudent?->last_name ?? '' }}
                                @else
                                    {{ $assignment->staffScheduled->trackType->name ?? '' }}
                                @endif
                            </td>

                            <td>{{ $assignment->staffScheduled->trackLevel->name_en ?? '' }}</td>


                            <td>
                                {{ $assignment->staffScheduled->trackType->name ?? '' }}
                            </td>

                            <td>
                                <span
                                    class="badge status-badge {{ $assignment->is_active ? 'bg-primary' : 'bg-danger' }}">
                                    {{ $assignment->is_active ? 'Active' : 'Deactivated' }}
                                </span>
                            </td>

                            <td>{{ $assignment->created_at ?? '' }}</td>
                            @canany(['exam_assignment_edit', 'exam_assignment_destroy'])
                            <td>
                                <a href="{{ route('assignments.submitted.students', $assignment->id) }}"
                                    class="btn btn-outline-primary btn-sm radius-8"> Answers</a>

                                @can('exam_assignment_edit')
                                    <a href="{{ route('assignments.edit', $assignment->id) }}"
                                        class="btn btn-outline-primary btn-sm radius-8"> Edit</a>
                                @endcan
                                @can('exam_assignment_destroy')
                                    <button class="btn btn-outline-danger btn-sm radius-8 deleteBtn"
                                        data-id="{{ $assignment->id }}">Delete</button>
                                @endcan
                            </td>
                            @endcan
                        </tr>

                        @empty
                        <td colspan="10" class="text-center">No Assignments</td>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="m-2">
                <div>
                    {{ $assignments->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                </div>
            </div>
            <a href="{{ route('assignments.previous') }}" class="btn btn-outline-primary btn-sm radius-8">
                Show All Previous Assignments
            </a>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="deleteForm">
                @csrf
                @method('DELETE')
                <div class="modal-header">
                    <div class="modal-title">Confirm Delete</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this assignment?
                    <input type="hidden" id="deleteId" name="id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            // open edit modal
            $(document).on('click', '.editBtn', function () {
                let tr = $(this).closest('tr');
                let id = tr.data('id');

                $('#editId').val(id);
                $('#edit_title').val(tr.find('td:eq(1)').text());
                $('#edit_start_date').val(tr.find('td:eq(2)').text());
                $('#edit_end_date').val(tr.find('td:eq(3)').text());
                $('#edit_description').val('');

                $('#editModal').modal('show');
            });

            // submit update
            $('#editForm').submit(function (e) {
                e.preventDefault();
                let id = $('#editId').val();
                let formData = $(this).serialize();

                $.ajax({
                    url: "/dashboard/assignments/" + id,
                    type: "POST",
                    data: formData,
                    success: function (res) {
                        let tr = $('#assignmentsTable').find('tr[data-id="' + id + '"]');
                        tr.find('td:eq(1)').text(res.assignment.title);
                        tr.find('td:eq(2)').text(res.assignment.start_at);
                        tr.find('td:eq(3)').text(res.assignment.end_at);
                        tr.find('td:eq(4)').text(res.assignment.submission_type);

                        $('#editModal').modal('hide');
                        toastr.success('success');

                    },
                    error: function (xhr) {
                        toastr.error(xhr.message);

                    }
                });
            });

            // open delete modal
            $(document).on('click', '.deleteBtn', function () {
                let id = $(this).data('id');
                $('#deleteId').val(id);
                $('#deleteModal').modal('show');
            });

            // confirm delete
            $('#deleteForm').submit(function (e) {
                e.preventDefault();
                let id = $('#deleteId').val();

                $.ajax({
                    // url: "assignments/" + id,
                    url: "{{ route('assignments.destroy', '') }}/" + id,

                    type: "DELETE",
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (res) {
                        if (res.success == false) {
                           
                            toastr.error('This assignment cannot be delete because it already has submissions.');
                            
                        } else {
                             toastr.success(res.message || 'success');
                            $('#assignmentsTable').find('tr[data-id="' + id + '"]').remove();
                            location.reload();
                        }
                        $('#deleteModal').modal('hide');
                    },
                    error: function (xhr) {
                        console.log(xhr.message);

                        toastr.error(xhr.message);

                    }
                });
            });
        });
    </script>
@endpush