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

    <form id="card-search" style="display:none;" class="card form-inline mt-3" method="POST" action="/classroom/{{ $row->id }}/search" autocomplete="off">
        {{ csrf_field() }}
        <div class="card-body">
            <div class="row"> 
                <div class="form-group">
                    <input type="text" class="form-control" name="search" placeholder="Nama Siswa, NISN">
                    <button type="submit" class="btn btn-primary mr-2" style="padding-top:3px;padding-bottom:3px;"><i class="fe fe-search"></i> Cari</button>
                </div>
            </div>
        </div>
    </form>

    <div class="row mt-5">
        <div class="col-md-4">
            <div class="card card-info">
                <div class="card-body">
                    <p>Jumlah Murid</p>
                    <hr>
                    <h2>{{ $row->studentCount() }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-info">
                <div class="card-body">
                    <p>Murid Laki-Laki</p>
                    <hr>
                    <h2>{{ $row->studentGenderCount(1) }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-info">
                <div class="card-body">
                    <p>Murid Perempuan</p>
                    <hr>
                    <h2>{{ $row->studentGenderCount(2) }}</h2>
                </div>
            </div>
        </div>     
    </div>

    <div class="card mt-3">
        <div class="card-body font-purple">
            <h2 class="card-title pb-3"><strong>{{ $row->name }}</strong> <small>{{ $row->year }}</small></h2>
            <h5 class="card-subtitle">Wali Kelas: {{ $row->wali->getName() }}</h5>
        </div>
        <div class="tb-major card-body text-center" style="overflow:scroll;">
            @if(count($student))
            <table class="table card-table">
                <thead>
                    <tr>
                    <th scope="col">No</th>
                    <th scope="col">Nama Siswa</th>
                    <th scope="col">NISN</th>
                    <th scope="col">ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i = 1; @endphp
                    @foreach($student as $rows)
                    <tr>
                        <td>{{ $i }}</td>
                        <td>{{ $rows->name }}</td>
                        <td>{{ $rows->code }}</td>
                        <td>
                            <a href="#" data-toggle="modal" data-target="#studentModal" data-detail="{{ $rows->detail() }}" data-photo="{{ url('/photo/'.$rows->photo) }}" data-url="/student/{{ $rows->id }}/edit" class="pr-2">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>
            @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>
    
@endsection
@push('script')
<script type="text/javascript">

    $('#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'));
    });

    $('#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'));
    });

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