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

    <form id="card-search" style="display:none;" class="card mt-3" method="POST" action="/student/search" autocomplete="off">
        {{ csrf_field() }}
        <div class="card-body">
            <div class="row">
                <div class="form-group col-md-4">
                    <label for="search">Nama Siswa/NISN</label>
                    <input type="text" class="form-control" name="search" placeholder="Nama Siswa/NISN">
                </div>
                <div class="form-group col-md-4">
                    <label>Tahun Ajaran</label>
                    <div class="input-group mb-2">
                        <select class="tb-year form-control" name="year">
                            <option value="">Semua</option>
                            @foreach ($year as $rows)
                                <option value="{{ $rows->id }}">{{ $rows->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group col-md-4">
                    <label>Kelas</label>
                    <div class="input-group mb-2">
                        <select class="tb-classroom form-control" name="classroom">
                            <option value="">Semua</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>

    <div class="card mt-3">
        <div class="card-body">
            <h2 class="card-title pt-1 float-left">Daftar Siswa</h2>
            <a href="/student/create" data-toggle="modal" data-target="#modalImport"
                class="btn btn-sm btn-primary float-right mr-2">Import Data</a>
            <a href="/student/template" class="btn btn-sm btn-primary float-right mr-2">Dwonload Template</a>
            <a href="/student/create" class="btn btn-sm btn-primary float-right mr-2">Tambah</a>
        </div>
        <div class="tb-major card-body text-center" style="overflow:scroll;">
            @if (count($row))
                <table class="table card-table">
                    <thead>
                        <tr>
                            <th scope="col">No</th>
                            <th scope="col">Nama Siswa</th>
                            <th scope="col">NIS</th>
                            <th scope="col">Kelas</th>
                            <th scope="col">Tahun Ajaran</th>
                            <th scope="col">ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            if (request('page')) {
                                $i = request('page') * 10 + 1;
                            } else {
                                $i = 1;
                            }
                        @endphp
                        @foreach ($row as $rows)
                            <tr>
                                <td>{{ $i }}</td>
                                <td>{{ $rows->name }}</td>
                                <td>{{ $rows->code }}</td>
                                <td>{{ $rows->clas->name }}</td>
                                <td>{{ $rows->year->name }}</td>
                                <td>
                                    <a href="#" class="pr-2" data-toggle="modal" data-target="#studentModal"
                                        data-detail="{{ $rows->detail() }}" data-photo="{{ url('/photo/' . $rows->photo) }}"
                                        data-url="/student/{{ $rows->id }}/edit">LIHAT</a>
                                    <a href="/student/{{ $rows->id }}/edit">EDIT</a>
                                    <a href="#" class="pl-2" data-toggle="modal" data-target="#deleteModal"
                                        data-type="1" data-id="{{ $rows->id }}"
                                        data-name="{{ $rows->name }}">HAPUS</a>
                                </td>
                            </tr>
                            @php $i++; @endphp
                        @endforeach
                    </tbody>
                </table>
                {{ $row->links() }}
            @else
                <p>Tidak ada data</a>
            @endif
        </div>
    </div>

    <!-- Modal Student -->
    <div class="modal modal-user fade" id="studentModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detail Siswa</h5>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <img src="" class="rounded" id="photo">
                        </div>

                        <div class="col-md-8" id="detail"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Kembali</button>
                    <a href="" id="edit" class="btn btn-primary">EDIT</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Alert -->
    <form method="POST" action="/student/delete" class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
        aria-hidden="true">
        {{ csrf_field() }}
        <input name="_method" type="hidden" value="DELETE">
        <input name="id" type="hidden" id="delete_id">
        <input name="type" type="hidden" id="delete_type">
        <input name="ajax" type="hidden" value="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Perhatian!</h5>
                </div>
                <div class="modal-body text-center">
                    <div id="alertDelete" class="alert alert-danger" role="alert" style="display:none;"></div>
                    Yakin mau menghapus data "<span id="delete_name"></span>" ?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Tidak</button>
                    <button type="submit" class="btn btn-primary">Ya</button>
                </div>
            </div>
        </div>
    </form>

    <!-- Modal Import Data Siswa -->
    <div class="modal fade" id="modalImport" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Import Data Siswa</h5>
                </div>
                <div class="modal-body">
                    <div class="card card-menu">
                        <div class="card-body">
                            <h2>Input Excel</h2>
                            <p>*Input dengan format .xlsx</p>
                            <form action="/student/import" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" name="import">
                                    <label class="custom-file-label">Pilih file...</label>
                                </div>
                                @if ($errors->has('import'))
                                    <p class="invalid-feedback">{{ $errors->first('import') }}</p>
                                @endif
                                <button class="btn btn-primary mt-3">Lanjut</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Kembali</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('script')
    <script type="text/javascript">
        $('.tb-year').on('change', function(e) {
            $.fn.loadData($(this).val());
        });

        $('#studentModal').on('show.bs.modal', function(event) {
            var modal = $(this);
            var button = $(event.relatedTarget);
            $('#detail').html(button.data('detail'));
            $('#photo').attr('src', button.data('photo'));
            $('#edit').attr('href', button.data('url'));
        });

        $('#deleteModal').on('show.bs.modal', function(event) {
            var modal = $(this);
            var button = $(event.relatedTarget);
            $('#delete_id').val(button.data('id'));
            $('#delete_name').html(button.data('name'));
            $('#delete_type').val(button.data('type'));
        });

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