@extends('student.main')

@section('title', 'Praktik Kerja Lapangan')

@section('content')
<div class="page-body mt-lg-4 mt-2">
    <div class="container">
        <div class="row g-xl-4 g-lg-3 g-2 row-deck justify-content-start">
            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-body">

                        <x-student.card-title title="Praktik Kerja Lapangan"
                            subtitle="Daftar Pengajuan Praktik Kerja Lapangan Mahasiswa" />

                        <div class="row">
                            <div class="col-12">
                                @if ($message = Session::get('success'))
                                <x-alert message="{{ $message }}" colorClass="success" />
                                @endif
                            </div>
                            <div class="col-12">
                                @if ($message = Session::get('failed'))
                                <x-alert message="{{ $message }}" colorClass="danger" />
                                @endif
                            </div>
                        </div>

                        <div class="row my-2">
                            <div
                                class="col-md-12 d-flex justify-content-start justify-content-md-end justify-content-lg-end">
                                <x-anchor text="Tambah" classColor="success me-1"
                                    url="{{ route('students.final.work-practice.create') }}"
                                    classIcon="fa fa-plus me-1" />
                                <x-student.button.button text="Hapus" className="danger delete-proposal disabled"
                                    type="button" classIcon="fa fa-trash me-1" />
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="myTable" class="table table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th width="20">#</th>
                                        <th>Periode</th>
                                        <th>Tanggal Mulai</th>
                                        <th>Tanggal Selesai</th>
                                        <th>Nama Perusahaan</th>
                                        <th>Status</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($data as $key => $item)
                                    <tr>
                                        <td>
                                            <input type="checkbox" class="ids" value="{{ $item->rand_id }}">
                                        </td>
                                        <td>{{ $item->period?->title }}</td>
                                        <td>{{ $item->start_date }}</td>
                                        <td>{{ $item->end_date }}</td>
                                        <td>{{ $item->company_name }}</td>
                                        <td>{{ uc_words($item->status) }}</td>
                                        <td>
                                            <x-anchor classColor="primary" text="Detail" classIcon="fa fa-eye me-1"
                                                url="{{ route('students.final.work-practice.detail', $item->rand_id) }}" />
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="7" class="text-center">
                                            Tidak ada data.
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<x-student.form action="{{ route('students.final.work-practice.deletes') }}" method="post">
    <x-input name="workPracticeIds" id="workPracticeIds" type="text" class="d-none" />
    <x-student.button.button className="d-none submit-delete" />
</x-student.form>
@endsection

@push('custom-script')
<script type="text/javascript">
    $(document).ready(function(){
            var ids = []

            function checkButton(ids) {
                if (ids.length > 0) {
                    $('.delete-proposal').removeClass('disabled');
                }else{
                    $('.delete-proposal').addClass('disabled');
                }
            }

            function removeItem(array, value) {
                var index = array.indexOf(value);
                if (index !== -1) {
                    ids.splice(index, 1);
                }
            }

            $('.ids').on('click', function () {
                var value = $(this).val();
                if (ids.includes(value)) {
                    removeItem(ids, value);
                }else{
                    ids.push(value);
                }

                checkButton(ids);
                 
                $('#workPracticeIds').val(JSON.stringify( ids ))
            });

            $('.delete-proposal').on('click', function(){
                $('.submit-delete').click()
            })
        })
</script>
@endpush