@extends('layout.main')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    {{-- HEADER --}}
    <div class="card mb-4">

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

            <div>
                <h4 class="mb-1">
                    {{ $kelompok->nama_kelompok }}
                </h4>

                <small class="text-muted">
                    {{ $kelompok->deskripsi ?? 'Tidak ada deskripsi' }}
                </small>
            </div>

            <div class="d-flex gap-2">

                <button type="button"
                    class="btn btn-primary"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasAddAnggota">

                    <i class="ti tabler-plus me-1"></i>
                    Tambah Anggota
                </button>

                <a href="{{ route('kelompok-belajar-tani.index') }}"
                    class="btn btn-label-secondary">

                    Kembali
                </a>

            </div>

        </div>

    </div>

    {{-- TABEL --}}
    <div class="card">

        <div class="card-header border-bottom">
            <h5 class="card-title mb-0">
                Detail Anggota Kelompok
            </h5>
        </div>

        <div class="table-responsive">

            <table class="table table-hover">

                <thead class="border-top">

                    <tr>
                        <th>No</th>
                        <th>Nama Anggota</th>
                        <th>Jabatan</th>
                        <th>Telepon</th>
                        <th>Desa/Kelurahan</th>
                        <th>Actions</th>
                    </tr>

                </thead>

                <tbody>

                    @forelse($kelompok->detailAnggota as $index => $anggota)

                    <tr>

                        <td>{{ $index + 1 }}</td>

                        <td>{{ $anggota->user->name ?? '-' }}</td>

                        <td>{{ $anggota->jabatan ?? '-' }}</td>

                        <td>{{ $anggota->no_hp ?? '-' }}</td>

                        <td>{{ $anggota->alamat ?? '-' }}</td>

                        <td>

                            <div class="d-flex align-items-center">

                                {{-- EDIT --}}
                                <button type="button"
                                    class="btn btn-icon btn-text-secondary rounded-pill edit-record"
                                    data-id="{{ $anggota->id }}"
                                    data-user="{{ $anggota->user_id }}"
                                    data-jabatan="{{ $anggota->jabatan }}"
                                    data-nohp="{{ $anggota->no_hp }}"
                                    data-alamat="{{ $anggota->alamat }}">

                                    <i class="ti tabler-edit ti-md"></i>
                                </button>

                                {{-- DELETE --}}
                                <form action="{{ route('detail-anggota.destroy', $anggota->id) }}"
                                    method="POST"
                                    class="d-inline">

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                        class="btn btn-icon btn-text-secondary rounded-pill"
                                        onclick="return confirm('Yakin hapus data?')">

                                        <i class="ti tabler-trash ti-md"></i>
                                    </button>

                                </form>

                            </div>

                        </td>

                    </tr>

                    @empty

                    <tr>
                        <td colspan="6"
                            class="text-center py-4">

                            Belum ada anggota kelompok.
                        </td>
                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

{{-- OFFCANVAS ADD --}}
<div class="offcanvas offcanvas-end"
    tabindex="-1"
    id="offcanvasAddAnggota">

    <div class="offcanvas-header border-bottom">

        <h5 class="offcanvas-title">
            Tambah Anggota
        </h5>

        <button type="button"
            class="btn-close"
            data-bs-dismiss="offcanvas"></button>

    </div>

    <div class="offcanvas-body">

        <form action="{{ route('detail-anggota.store') }}"
            method="POST">

            @csrf

            <input type="hidden"
                name="kelompok_id"
                value="{{ $kelompok->id }}">

            <div class="mb-3">
                <label class="form-label">
                    Nama Anggota
                </label>

                <select name="user_id"
                    id="add_user_id"
                    class="form-select"
                    required>

                    <option value="">
                        -- Pilih Petani --
                    </option>

                    @foreach($petani as $item)

                        <option value="{{ $item->id }}"
                            data-nohp="{{ $item->profile->telepon ?? '' }}"
                            data-alamat="{{ $item->profile->desakelurahan->nama ?? '' }}">

                            {{ $item->name }}
                        </option>

                    @endforeach

                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Jabatan</label>

                <select name="jabatan" class="form-select" required>
                    <option value="">-- Pilih Jabatan --</option>
                    <option value="Ketua Kelompok">Ketua Kelompok</option>
                    <option value="Anggota Kelompok">Anggota Kelompok</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Telepon</label>

                <input type="text"
                    name="no_hp"
                    id="no_hp"
                    class="form-control"
                    disabled>
            </div>

            <div class="mb-3">
                <label class="form-label">Desa/Kelurahan</label>

                <textarea name="alamat"
                    id="alamat"
                    class="form-control"
                    rows="3"
                    disabled></textarea>
            </div>

            <button type="submit"
                class="btn btn-primary">

                Simpan
            </button>

        </form>

    </div>

</div>

{{-- OFFCANVAS EDIT --}}
<div class="offcanvas offcanvas-end"
    tabindex="-1"
    id="offcanvasEditAnggota">

    <div class="offcanvas-header border-bottom">

        <h5 class="offcanvas-title">
            Edit Anggota
        </h5>

        <button type="button"
            class="btn-close"
            data-bs-dismiss="offcanvas"></button>

    </div>

    <div class="offcanvas-body">

        <form id="formEditAnggota"
            method="POST">

            @csrf
            @method('PUT')

            <div class="mb-3">
                <label class="form-label">
                    Nama Anggota
                </label>

                <select name="user_id"
                    id="edit_user_id"
                    class="form-select"
                    required>

                    <option value="">
                        -- Pilih Petani --
                    </option>

                    @foreach($petani as $item)

                       <option value="{{ $item->id }}"
                            data-nohp="{{ $item->profile->telepon ?? '' }}"
                            data-alamat="{{ $item->profile->desakelurahan->nama ?? '' }}">

                            {{ $item->name }}
                        </option>

                    @endforeach

                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Jabatan</label>

                <select name="jabatan" id="edit_jabatan" class="form-select">
                    <option value="">-- Pilih Jabatan --</option>
                    <option value="Ketua Kelompok">Ketua Kelompok</option>
                    <option value="Anggota Kelompok">Anggota Kelompok</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Telepon</label>

                <input type="text"
                    name="no_hp"
                    id="edit_nohp"
                    class="form-control"
                    disabled>
            </div>

            <div class="mb-3">
                <label class="form-label">Desa/Kelurahan</label>

                <textarea name="alamat"
                    id="edit_alamat"
                    class="form-control"
                    rows="3"
                    disabled></textarea>
            </div>

            <button type="submit"
                class="btn btn-primary">

                Update
            </button>

        </form>

    </div>

</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {

    const offcanvasEdit =
        new bootstrap.Offcanvas(
            document.getElementById('offcanvasEditAnggota')
        );

    // AUTO ISI NO HP & ALAMAT SAAT TAMBAH
    $('#add_user_id').on('change', function () {
        let selected = $(this).find(':selected');

        $('#no_hp').val(selected.data('nohp') || '');
        $('#alamat').val(selected.data('alamat') || '');
    });

    // AUTO ISI NO HP & ALAMAT SAAT EDIT GANTI PETANI
    $('#edit_user_id').on('change', function () {
        let selected = $(this).find(':selected');

        $('#edit_nohp').val(selected.data('nohp') || '');
        $('#edit_alamat').val(selected.data('alamat') || '');
    });

    // BUKA OFFCANVAS EDIT
    $(document).on('click', '.edit-record', function () {

        let id = $(this).data('id');

        $('#edit_user_id').val($(this).data('user')).trigger('change');
        $('#edit_jabatan').val($(this).data('jabatan'));

        $('#formEditAnggota').attr(
            'action',
            `/detail-anggota/${id}`
        );

        offcanvasEdit.show();
    });

});
</script>
@endpush