@extends('portal.layouts.app', [
    'class' => '',
    'elementActive' => ''
])

@section('title', 'Schedule Job Interviews')

@section('content')
<div id="content-page" class="content-page">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="iq-card shadow-sm">
                    <div class="iq-card-header d-flex justify-content-between align-items-center bg-primary text-white">
                        <h5 class="mb-0">Schedule Job Interviews</h5>
                    </div>

                    <div class="iq-card-body">
                        <form id="scheduleForm" class="autosubmit" method="POST" action="{{ route('savejobinterviewschedule', $job->uuid) }}">
                            @csrf

                            {{-- Interview Date and Time --}}
                            <div class="form-group">
                                <label for="interview_date" class="font-weight-bold text-dark">Select Interview Date & Time</label>
                                <input type="datetime-local" name="interview_date" id="interview_date" class="form-control" required>
                            </div>

                            <hr>

                            {{-- Applications List --}}
                            <h6 class="font-weight-bold text-dark mb-3">Select Candidates</h6>

                            @if($applications->count())
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover datatable">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>
                                                    <input type="checkbox" id="selectAll"> All
                                                </th>
                                                <th>Candidate Name</th>
                                                <th>Email</th>
                                                <th>Phone</th>
                                                {{-- <th>Experience</th> --}}
                                                <th>Skills</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($applications as $app)
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" name="application_ids[]" value="{{ $app->id }}" class="app-checkbox">
                                                    </td>
                                                    <td>{{ $app->candidate->user->name ?? 'N/A' }}</td>
                                                    <td>{{ $app->candidate->user->email ?? 'N/A' }}</td>
                                                    <td>{{ $app->candidate->user->phone ?? 'N/A' }}</td>
                                                    {{-- <td>{{ $app->experience ?? 'N/A' }} years</td> --}}
                                                    <td>{{ $app->candidate->skills ?? 'N/A' }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <div class="text-right mt-3">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fa fa-calendar"></i> Schedule Interviews
                                    </button>
                                </div>
                            @else
                                <div class="alert alert-info">
                                    No applications available for scheduling interviews.
                                </div>
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('script')
<script src="{{ asset('portal/js/formsubmission.js') }}"></script>
<script>
    // Select All checkbox toggle
    document.getElementById('selectAll')?.addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.app-checkbox');
        checkboxes.forEach(cb => cb.checked = this.checked);
    });

    // Simple form validation
    document.getElementById('scheduleForm')?.addEventListener('submit', function(e) {
        const checked = document.querySelectorAll('.app-checkbox:checked').length;
        if (checked === 0) {
            e.preventDefault();
            alert('Please select at least one candidate to schedule.');
        }
    });
</script>
@endsection