@extends('index')
@section('content')

    <form id="card-search" class="card mt-3" method="POST" action="/score/check/search" autocomplete="off">
        {{ csrf_field() }}
        <div class="card-body">
            <div class="row"> 
                <div class="form-group col-md-4">
                    <label>Tahun Ajaran</label>
                    <div class="input-group mb-2">
                        <select class="form-control" name="year" id="year" required>
                            <option value="">Pilih</option>
                            @foreach($year as $rows)
                                <option value="{{ $rows->id }}" @if(session('s_year') == $rows->id) selected @endif>{{ $rows->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group col-md-4">
                    <label>Kelas</label>
                    <div class="input-group mb-3">
                        <select class="form-control" name="classroom" id="classroom" required>
                            <option value="">Pilih</option>
                            @if(session('s_search_status'))
                                @foreach($classroom as $rows)
                                    @if(Auth::user()->type == 2)
                                    @if(App\LessonDetail::where('active',1)->where('classroom_id',$rows->id)->where('user_id',Auth::id())->count())
                                    <option value="{{ $rows->id }}" @if(session('s_classroom') == $rows->id) selected @endif>{{ $rows->name }}</option>
                                    @endif
                                @else
                                    <option value="{{ $rows->id }}" @if(session('s_classroom') == $rows->id) selected @endif>{{ $rows->name }}</option>
                                @endif
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div class="form-group col-md-4">
                    <label>Semester</label>
                    <div class="input-group mb-2">
                        <select class="form-control" name="semester" id="semester">
                            <option value="">Pilih</option>
                        </select>
                    </div>
                </div>

                <div class="form-group col-md-12">
                    <label></label>
                    <button type="submit" class="btn btn-primary float-right" style="padding-top:3px;padding-bottom:3px;"><i class="fe fe-search"></i> Cari</button>
                </div>
            </div>
        </div>
    </form>

    @if(session('s_search_status'))
    <div class="card mt-3">
        
        <div class="tb-major card-body text-center" style="overflow:scroll;">
            
            <table class="table card-table">
                <thead>
                    <tr>
                    <th scope="col" width="50px">No</th>
                    <th scope="col" class="text-left">Mata Pelajaran Siswa</th>
                    <th scope="col">Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="no-background">
                        <td class="bg-full-radius"><strong>A</strong></td>
                        <td class="bg-full-radius text-left" colspan="2"><strong>MUATAN NASIONAL</strong></td>
                    </tr>
                    @php $i = 1; @endphp
                    @foreach($national as $rows)
                    <tr class="no-background">
                        <td class="bg-full-radius">{{ $i }}</td>
                        <td class="bg-full-radius text-left">{{ $rows->name }}</td>
                        <td class="bg-full-radius">{!! $rows->getScoreStatus() !!}</td>
                    </tr>
                    @php $i++; @endphp
                    @endforeach

                    <tr class="no-background">
                        <td colspan="3" height="20px"></td>
                    </tr>

                    <tr class="no-background">
                        <td class="bg-full-radius"><strong>B</strong></td>
                        <td class="bg-full-radius text-left" colspan="2"><strong>MUATAN KEWILAYAHAN</strong></td>
                    </tr>
                    @php $i = 1; @endphp
                    @foreach($area as $rows)
                    <tr class="no-background">
                        <td class="bg-full-radius">{{ $i }}</td>
                        <td class="bg-full-radius text-left">{{ $rows->name }}</td>
                        <td class="bg-full-radius">{!! $rows->getScoreStatus() !!}</td>
                    </tr>
                    @php $i++; @endphp
                    @endforeach

                    @if(count($interestc1))
                        <tr class="no-background">
                            <td colspan="3" height="20px"></td>
                        </tr>

                        <tr class="no-background">
                            <td class="bg-full-radius"><strong>C1</strong></td>
                            <td class="bg-full-radius text-left" colspan="2"><strong>DASAR BIDANG KEAHLIAN</strong></td>
                        </tr>
                        @php $i = 1; @endphp
                        @foreach($interestc1 as $rows)
                        <tr class="no-background">
                            <td class="bg-full-radius">{{ $i }}</td>
                            <td class="bg-full-radius text-left">{{ $rows->name }}</td>
                            <td class="bg-full-radius">{!! $rows->getScoreStatus() !!}</td>
                        </tr>
                        @php $i++; @endphp
                        @endforeach
                    @endif

                    @if(count($interestc2))
                        <tr class="no-background">
                            <td colspan="3" height="20px"></td>
                        </tr>

                        <tr class="no-background">
                            <td class="bg-full-radius"><strong>C2</strong></td>
                            <td class="bg-full-radius text-left" colspan="2"><strong>DASAR PROGRAM KEAHLIAN</strong></td>
                        </tr>
                        @php $i = 1; @endphp
                        @foreach($interestc2 as $rows)
                        <tr class="no-background">
                            <td class="bg-full-radius">{{ $i }}</td>
                            <td class="bg-full-radius text-left">{{ $rows->name }}</td>
                            <td class="bg-full-radius">{!! $rows->getScoreStatus() !!}</td>
                        </tr>
                        @php $i++; @endphp
                        @endforeach
                    @endif

                    @if(count($interestc3))
                        <tr class="no-background">
                            <td colspan="3" height="20px"></td>
                        </tr>

                        <tr class="no-background">
                            <td class="bg-full-radius"><strong>C3</strong></td>
                            <td class="bg-full-radius text-left" colspan="2"><strong>DASAR KOMPETENSI KEAHLIAN</strong></td>
                        </tr>
                        @php $i = 1; @endphp
                        @foreach($interestc3 as $rows)
                        <tr class="no-background">
                            <td class="bg-full-radius">{{ $i }}</td>
                            <td class="bg-full-radius text-left">{{ $rows->name }}</td>
                            <td class="bg-full-radius">{!! $rows->getScoreStatus() !!}</td>
                        </tr>
                        @php $i++; @endphp
                        @endforeach
                    @endif
                </tbody>
            </table>
            
        </div>
    </div>
    @endif

    
@endsection
@push('script')
<script type="text/javascript">

    $('#year').on('change', function(e) {
        $.fn.loadClass($(this).val());
    });

    // $('#classroom').on('change', function(e) {
    //     $.fn.loadLesson($(this).val());
    // });

    $.fn.loadClass = function(id = null) {
        $.ajax({
            type: "POST",
            trigger: 'manual',
            cache: false,
            url: "/classroom/check/ajax",
            data: {
                id: id
            },
            dataType: "html",
            beforeSend: function() {
                $('#classroom').html('<option value="">Loading...</option>');
            },
            complete: function() {},
            success: function(html) {
                $('#lesson').html('<option value="">Pilih</option>');
                $('#classroom').html('<option value="">Pilih</option>');
                $('#classroom').append(html);
            }
        });
    }

    $('#classroom').on('change', function(e) {
            $.fn.loadSemester($(this).val());
        });

        $.fn.loadSemester = function(id = null) {
            $.ajax({
                type: "POST",
                trigger: 'manual',
                cache: false,
                url: "/lesson/semester/ajax",
                data: {
                    id: id
                },
                dataType: "html",
                beforeSend: function() {
                    $('#semester').html('<option value="">Loading...</option>');
                },
                complete: function() {},
                success: function(html) {
                    $('#semester').html('<option value="">Pilih</option>');
                    $('#semester').append(html);
                }
            });
        }

    // $.fn.loadLesson = function(id = null) {
    //     $.ajax({
    //         type: "POST",
    //         trigger: 'manual',
    //         cache: false,
    //         url: "/lesson/select/ajax",
    //         data: {
    //             id: id
    //         },
    //         dataType: "html",
    //         beforeSend: function() {
    //             $('#lesson').html('<option value="">Loading...</option>');
    //         },
    //         complete: function() {},
    //         success: function(html) {
    //             $('#lesson').html('<option value="">Pilih</option>');
    //             $('#lesson').append(html);
    //         }
    //     });
    // }
</script>
@endpush