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

    <form id="card-search" style="display:none;" class="card mt-3" method="post" action="/ekstrakulikuler/search"
        autocomplete="off">
        {{ csrf_field() }}
        <div class="card-body">
            <div class="row">
                <div class="form-group col-md-4">
                    <label for="search">Nama Ekstrakulikuler</label>
                    <input type="text" class="form-control" name="search" placeholder="Nama Ekstrakulikuler">
                </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 Ekstrakulikuler</h2>
            <a href="#" class="btn btn-sm btn-primary float-right" onclick="tambah()">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 Kelas</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>
                                    <a href="#" data-toggle="modal" onclick="edit({{ $rows->id }})">EDIT</a>
                                </td>
                            </tr>
                            @php $i++; @endphp
                        @endforeach
                    </tbody>
                </table>
                {{ $row->links() }}
            @else
                <p>Tidak ada data</a>
            @endif
        </div>
    </div>

    <!-- Modal Create Classroom -->
    <form class="modal fade" method="POST" action="/ekstrakulikuler" id="createEskul" tabindex="-1" role="dialog"
        aria-hidden="true">
        <div class="modal-dialog">
            {{ csrf_field() }}
            <input name="ajax" type="hidden" value="true">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ekstrakulikuler</h5>
                </div>
                <div class="modal-body">
                    <div id="alertCompetency" class="alert alert-danger" role="alert" style="display:none;"></div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label>Nama Ekstrakulikuler <span class="required">*</span></label>
                            <div class="input-group">
                                <input type="hidden" name="id" id="eskul_id" class="form-control">
                                <input autofocus required type="text" name="name" id="eskul_name"
                                    class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-light">Kembali</button>
                    <button type="submit" class="btn btn-primary">Proses</button>
                </div>
            </div>
        </div>
    </form>

    <!-- Modal Alert -->
    <form method="POST" action="/classroom/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">
        $(document).ready(function() {
            $.fn.loadData('majorselect');
        });

        function tambah() {
            $("#eskul_id").val('');
            $("#eskul_name").val('');
            $("#createEskul").modal('show');
        }

        function edit(id_eskul) {
            console.log(id_eskul);
            $.ajax({
                url: "/ekstrakulikuler/" + id_eskul + "/ajax",
                type: "GET",
                success: function(data) {
                    $("#eskul_id").val(data['id']);
                    $("#eskul_name").val(data['name']);
                    $("#createEskul").modal('show');
                }
            });
        }
    </script>
@endpush