@extends('layouts.master')
@section('page_title', 'ID Cards')
@section('content')
<div class="card">
    <div class="card-header header-elements-inline">
        <h6 class="card-title font-weight-bold"><i class="icon-vcard mr-2"></i> Generate ID Cards</h6>
        {!! Qs::getPanelOptions() !!}
    </div>
    <div class="card-body">
        @if ($errors->any())
            <div class="alert alert-danger">@foreach ($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>
        @endif

        <ul class="nav nav-tabs nav-tabs-highlight">
            <li class="nav-item"><a href="{{ route('idcards.index', ['type' => 'student']) }}" class="nav-link {{ $type == 'student' ? 'active' : '' }}">Students</a></li>
            <li class="nav-item"><a href="{{ route('idcards.index', ['type' => 'staff']) }}" class="nav-link {{ $type == 'staff' ? 'active' : '' }}">Staff</a></li>
        </ul>

        <form method="get" action="{{ route('idcards.index') }}" class="mt-3">
            <input type="hidden" name="type" value="{{ $type }}">
            <div class="row">
                @if($type == 'student')
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="font-weight-bold">Class:</label>
                            <select required onchange="getClassSections(this.value)" id="my_class_id" name="class_id" class="form-control select">
                                <option value="">Select class</option>
                                @foreach($my_classes as $c)
                                    <option value="{{ $c->id }}" {{ $class_id == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="font-weight-bold">Section (optional):</label>
                            <select id="section_id" name="section_id" data-placeholder="All sections" class="form-control select">
                                <option value="">All sections</option>
                                @foreach($sections->where('my_class_id', $class_id) as $s)
                                    <option value="{{ $s->id }}" {{ $section_id == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                @else
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="font-weight-bold">Staff type:</label>
                            <select name="role" class="form-control">
                                <option value="">All staff</option>
                                @foreach($staff_types as $t)
                                    <option value="{{ $t }}" {{ $role == $t ? 'selected' : '' }}>{{ ucwords(str_replace('_', ' ', $t)) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                @endif
                <div class="col-md-3 mt-4"><button type="submit" class="btn btn-primary mt-1">Show List <i class="icon-paperplane ml-2"></i></button></div>
            </div>
        </form>
    </div>
</div>

@if(!is_null($people))
<div class="card">
    <div class="card-body">
        @if($people->isEmpty())
            <p class="text-muted text-center mb-0">No {{ $type == 'student' ? 'students' : 'staff' }} found.</p>
        @else
        <form method="post" action="{{ route('idcards.print') }}" target="_blank">
            @csrf
            <input type="hidden" name="type" value="{{ $type }}">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <label class="mb-0 font-weight-semibold"><input type="checkbox" id="idc-all" checked> Select all ({{ $people->count() }})</label>
                <button type="submit" class="btn btn-success"><i class="icon-printer mr-2"></i> Generate ID Cards</button>
            </div>
            <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead><tr><th style="width:40px"></th><th>Photo</th><th>Name</th><th>{{ $type == 'student' ? 'ADM No' : 'Staff ID' }}</th><th>{{ $type == 'student' ? 'Class' : 'Type' }}</th></tr></thead>
                <tbody>
                @foreach($people as $p)
                    @php $uid = $type == 'student' ? $p->user_id : $p->id; @endphp
                    <tr>
                        <td><input type="checkbox" class="idc-one" name="ids[]" value="{{ $uid }}" checked></td>
                        <td><img class="rounded-circle" style="height: 36px; width: 36px; object-fit: cover;" src="{{ $type == 'student' ? $p->user->photo : $p->photo }}" alt=""></td>
                        <td>{{ $type == 'student' ? $p->user->name : $p->name }}</td>
                        <td>{{ $type == 'student' ? $p->adm_no : $p->card_code }}</td>
                        <td>{{ $type == 'student' ? trim(optional($p->my_class)->name.' '.optional($p->section)->name) : ucwords(str_replace('_', ' ', $p->user_type)) }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            </div>
            <p class="text-muted font-size-sm mb-0">Opens a print-ready page (9 cards per A4 sheet, fronts then backs). Use your browser's Print button, with "Background graphics" switched on.</p>
        </form>
        <script>
            document.getElementById('idc-all').addEventListener('change', function () {
                document.querySelectorAll('.idc-one').forEach(function (c) { c.checked = document.getElementById('idc-all').checked; });
            });
        </script>
        @endif
    </div>
</div>
@endif
@endsection