@extends('template')

@section('title', 'Jenis Mutasi')

@section('content')
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">

                <h4 class="mb-3">Kelola Jenis Mutasi</h4>

                <!-- TAMBAH -->
                {{-- <button class="mb-3 btn btn-primary btn-sm" data-toggle="modal" data-target="#modalTambah">
                    + Tambah Jenis
                </button> --}}

                <!-- TABLE -->
                <div class="shadow-sm card table-card">

    <div class="card-body border-bottom">
        <div class="d-flex justify-content-between align-items-center">

            {{-- <h5 class="mb-0 fw-bold">
                Jenis Mutasi
            </h5> --}}

            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalTambah">
                <i class="la la-plus"></i> Tambah
            </button>

        </div>
    </div>

    <div class="p-0 card-body">
        <div class="table-responsive">
            <table class="table mb-0 table-standard">
                <thead>
                    <tr>
                        <th width="60" class="text-center">No</th>
                        <th>Nama</th>
                        <th>Tipe</th>
                        <th width="120" class="text-center">Aksi</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($data as $i => $item)
                        <tr>
                            <td class="text-center">{{ $i + 1 }}</td>
                            <td>{{ $item->nama }}</td>
                            <td>
                                <span class="badge badge-secondary">
                                    {{ ucfirst($item->tipe) }}
                                </span>
                            </td>

                            <td class="text-center">

                                {{-- EDIT --}}
                                <button class="btn btn-warning btn-sm"
                                    data-toggle="modal"
                                    data-target="#modalEdit"
                                    data-id="{{ $item->id }}"
                                    data-nama="{{ $item->nama }}"
                                    data-tipe="{{ $item->tipe }}"
                                    title="Edit">

                                    <i class="la la-edit"></i>
                                </button>

                                {{-- DELETE --}}
                                <button class="btn btn-danger btn-sm"
                                    data-toggle="modal"
                                    data-target="#modalHapus"
                                    data-id="{{ $item->id }}"
                                    title="Hapus">

                                    <i class="la la-trash"></i>
                                </button>

                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="py-4 text-center text-muted">
                                Belum ada data jenis mutasi
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

            </div>
        </div>
    </div>

    {{-- MODAL TAMBAH --}}
    <div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <form method="POST" action="{{ route('jenis-mutasi.store') }}">
                @csrf

                <div class="modal-header modal-header-clean">
                    <h6 class="modal-title">
                        <i class="mr-1 la la-plus-circle text-muted"></i>
                        Tambah Jenis Mutasi
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="form-group">
                        <label>Nama Jenis</label>
                        <input type="text" name="nama" class="form-control" placeholder="Contoh: Panen / Mati">
                    </div>

                    <div class="form-group">
                        <label>Tipe</label>
                        <select name="tipe" class="form-control">
                            <option value="tambah">Tambah</option>
                            <option value="kurang">Kurang</option>
                            <option value="transfer">Transfer</option>
                        </select>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button class="btn btn-primary">
                        <i class="la la-save"></i> Simpan
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>

    {{-- MODAL EDIT --}}
    <div class="modal fade" id="modalEdit" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <form method="POST" id="formEdit">
                @csrf
                @method('PUT')

                <div class="modal-header modal-header-clean">
                    <h6 class="modal-title">
                        <i class="la la-edit"></i> Edit Jenis Mutasi
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="form-group">
                        <label>Nama Jenis</label>
                        <input type="text" name="nama" id="editNama" class="form-control">
                    </div>

                    <div class="form-group">
                        <label>Tipe</label>
                        <select name="tipe" id="editTipe" class="form-control">
                            <option value="tambah">Tambah</option>
                            <option value="kurang">Kurang</option>
                            <option value="transfer">Transfer</option>
                        </select>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button class="btn btn-primary">
                        <i class="la la-save"></i> Update
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>

    {{-- MODAL HAPUS --}}
    <div class="modal fade" id="modalHapus" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">

            <form method="POST" id="formHapus">
                @csrf
                @method('DELETE')

                <div class="modal-header modal-header-clean">
                    <h6 class="modal-title">
                        <i class="la la-trash"></i> Hapus Data
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="text-center modal-body">
                    <p class="mb-0">Yakin ingin menghapus data ini?</p>
                </div>

                <div class="modal-footer justify-content-center">
                    <button class="btn btn-secondary btn-sm" data-dismiss="modal">Batal</button>
                    <button class="btn btn-danger btn-sm">
                        <i class="la la-trash"></i> Hapus
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
$('#modalEdit').on('show.bs.modal', function(e){
    let btn = $(e.relatedTarget);

    $('#formEdit').attr('action', '/jenis-mutasi/' + btn.data('id'));
    $('#editNama').val(btn.data('nama'));
    $('#editTipe').val(btn.data('tipe'));
});

$('#modalHapus').on('show.bs.modal', function(e){
    let btn = $(e.relatedTarget);
    $('#formHapus').attr('action', '/jenis-mutasi/' + btn.data('id'));
});
</script>
@endsection