@extends('layout.main')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    
    {{-- SUMMARY --}}
    <div class="row g-6 mb-6">
        
        <div class="col-sm-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Total Kelompok</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">
                                    {{ number_format($summary['total_kelompok'] ?? 0) }}
                                </h4>
                            </div>
                            <small class="mb-0">Kelompok</small>
                        </div>

                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-primary">
                                <i class="icon-base ti tabler-users-group icon-26px"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Kelompok Aktif</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">
                                    {{ number_format($summary['aktif'] ?? 0) }}
                                </h4>
                            </div>
                            <small class="mb-0">Aktif</small>
                        </div>

                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-success">
                                <i class="icon-base ti tabler-check icon-26px"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Kelompok Nonaktif</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">
                                    {{ number_format($summary['nonaktif'] ?? 0) }}
                                </h4>
                            </div>
                            <small class="mb-0">Nonaktif</small>
                        </div>

                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-danger">
                                <i class="icon-base ti tabler-x icon-26px"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <form method="GET" action="{{ route('kelompok-belajar-tani.index') }}" id="formFilterData"></form>

    <div class="card mb-4">

        {{-- HEADER --}}
        <div class="card-header border-bottom d-flex flex-column flex-md-row justify-content-between align-items-center pt-4 pb-3">
            <h5 class="card-title mb-2 mb-md-0">
                Data Kelompok Belajar Petani
            </h5>

            <div class="d-flex gap-2">
                <button type="button"
                    class="btn btn-label-secondary"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseFilter">

                    <i class="ti tabler-filter me-1"></i> Filter
                </button>

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

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

        {{-- FILTER --}}
        <div class="collapse {{ request()->filled('status') ? 'show' : '' }}"
            id="collapseFilter">

            <div class="card-body border-bottom bg-lighter pt-4 pb-4">

                <div class="row g-3 align-items-end">

                    <div class="col-md-4">
                        <label class="form-label">Status</label>

                        <select name="status"
                            form="formFilterData"
                            class="form-select form-select-sm">

                            <option value="">Semua Status</option>

                            <option value="aktif"
                                {{ request('status') == 'aktif' ? 'selected' : '' }}>
                                Aktif
                            </option>

                            <option value="nonaktif"
                                {{ request('status') == 'nonaktif' ? 'selected' : '' }}>
                                Nonaktif
                            </option>
                        </select>
                    </div>

                    <div class="col-md-3 d-flex gap-2">
                        <button type="submit"
                            form="formFilterData"
                            class="btn btn-sm btn-primary w-100">

                            Terapkan
                        </button>

                        @if(request()->filled('status') || request()->filled('search'))
                            <a href="{{ route('kelompok-belajar-tani.index') }}"
                                class="btn btn-sm btn-label-danger">

                                <i class="ti tabler-refresh"></i>
                            </a>
                        @endif
                    </div>

                </div>

            </div>
        </div>

        {{-- SEARCH --}}
        <div class="card-body border-bottom pt-3 pb-3">

            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">

                <div class="d-flex align-items-center">
                    <label class="me-2 text-nowrap text-muted">
                        Show
                    </label>

                    <select name="per_page"
                        form="formFilterData"
                        class="form-select form-select-sm w-auto"
                        onchange="document.getElementById('formFilterData').submit()">

                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>
                            10
                        </option>

                        <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>
                            25
                        </option>

                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>
                            50
                        </option>
                    </select>

                    <label class="ms-2 text-nowrap text-muted">
                        entries
                    </label>
                </div>

                <div class="input-group input-group-sm w-auto"
                    style="min-width: 250px;">

                    <input type="text"
                        name="search"
                        form="formFilterData"
                        class="form-control"
                        placeholder="Cari kelompok..."
                        value="{{ request('search') }}">

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

                        <i class="ti tabler-search"></i>
                    </button>
                </div>

            </div>
        </div>

        {{-- TABLE --}}
        <div class="table-responsive text-nowrap">

            <table class="table table-hover">

                <thead class="border-top">
                    <tr>
                        <th>No</th>
                        <th>Informasi Kelompok Belajar</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>

                    @forelse($kelompok as $index => $item)

                    <tr>

                        <td>
                            {{ $kelompok->firstItem() + $index }}
                        </td>

                        <td>
                            <div class="d-flex justify-content-start align-items-center">

                                <div class="avatar-wrapper me-3">
                                    <div class="avatar avatar-sm">
                                        <span class="avatar-initial rounded-circle bg-label-primary">
                                            {{ strtoupper(substr($item->nama_kelompok, 0, 2)) }}
                                        </span>
                                    </div>
                                </div>

                                <div class="d-flex flex-column">

                                    <span class="fw-medium text-heading">
                                        {{ $item->nama_kelompok }}
                                    </span>

                                    <small class="text-muted text-truncate"
                                        style="max-width: 250px;">

                                        {{ $item->deskripsi ?? 'Tidak ada deskripsi' }}
                                    </small>

                                </div>

                            </div>
                        </td>

                        <td>

                            @php
                                $color = $item->status == 'aktif'
                                    ? 'bg-label-success'
                                    : 'bg-label-danger';
                            @endphp

                            <span class="badge {{ $color }}">
                                {{ ucfirst($item->status) }}
                            </span>

                        </td>

                        <td>

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

                                <a href="javascript:;"
                                    class="btn btn-icon btn-text-secondary rounded-pill edit-record"
                                    data-id="{{ $item->id }}"
                                    title="Edit">

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

                                <form action="{{ route('kelompok-belajar-tani.destroy', $item->id) }}"
                                    method="POST"
                                    class="d-inline form-delete"
                                    data-name="{{ $item->nama_kelompok }}">

                                    @csrf
                                    @method('DELETE')

                                    <button type="button"
                                        class="btn btn-icon btn-text-secondary rounded-pill btn-delete"
                                        title="Delete">

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

                                </form>

                            </div>

                        </td>

                    </tr>

                    @empty

                    <tr>
                        <td colspan="4" class="text-center py-4">
                            Data tidak ditemukan.
                        </td>
                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

        {{-- PAGINATION --}}
        <div class="card-footer d-flex justify-content-center justify-content-md-end border-top pt-4 pb-4">
            {{ $kelompok->appends(request()->query())->links('pagination::bootstrap-5') }}
        </div>

    </div>
</div>


{{-- OFFCANVAS ADD --}}
<div
    class="offcanvas offcanvas-end"
    tabindex="-1"
    id="offcanvasAddKelompok"
    aria-labelledby="offcanvasAddKelompokLabel">

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

        <h5 id="offcanvasAddKelompokLabel"
            class="offcanvas-title">

            Tambah Kelompok Belajar Petani
        </h5>

        <button type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"></button>
    </div>

    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">

        <form id="formAddKelompok"
            action="{{ route('kelompok-belajar-tani.store') }}"
            method="POST">

            @csrf

            {{-- NAMA KELOMPOK --}}
            <div class="mb-4 form-control-validation">

                <label class="form-label">
                    Nama Kelompok
                    <span class="text-danger">*</span>
                </label>

                <input type="text"
                    name="nama_kelompok"
                    class="form-control"
                    placeholder="Masukkan nama kelompok...">
            </div>

            {{-- STATUS --}}
            <div class="mb-4 form-control-validation">

                <label class="form-label">
                    Status
                    <span class="text-danger">*</span>
                </label>

                <select name="status"
                    class="form-select">

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

                    <option value="aktif">
                        Aktif
                    </option>

                    <option value="nonaktif">
                        Nonaktif
                    </option>

                </select>
            </div>

            {{-- DESKRIPSI --}}
            <div class="mb-4 form-control-validation">

                <label class="form-label">
                    Deskripsi
                </label>

                <textarea name="deskripsi"
                    class="form-control"
                    rows="4"
                    placeholder="Masukkan deskripsi kelompok..."></textarea>
            </div>

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

                Simpan
            </button>

            <button type="reset"
                class="btn btn-label-danger"
                data-bs-dismiss="offcanvas">

                Batal
            </button>

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

{{-- OFFCANVAS EDIT --}}
<div
    class="offcanvas offcanvas-end"
    tabindex="-1"
    id="offcanvasEditKelompok"
    aria-labelledby="offcanvasEditKelompokLabel">

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

        <h5 id="offcanvasEditKelompokLabel"
            class="offcanvas-title">

            Edit Kelompok Belajar Petani
        </h5>

        <button type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"></button>
    </div>

    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">

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

            @csrf
            @method('PUT')

            <input type="hidden"
                id="edit-id">

            {{-- NAMA KELOMPOK --}}
            <div class="mb-4 form-control-validation">

                <label class="form-label">
                    Nama Kelompok
                    <span class="text-danger">*</span>
                </label>

                <input type="text"
                    name="nama_kelompok"
                    id="edit-nama_kelompok"
                    class="form-control"
                    placeholder="Masukkan nama kelompok...">
            </div>

            {{-- STATUS --}}
            <div class="mb-4 form-control-validation">

                <label class="form-label">
                    Status
                    <span class="text-danger">*</span>
                </label>

                <select name="status"
                    id="edit-status"
                    class="form-select">

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

                    <option value="aktif">
                        Aktif
                    </option>

                    <option value="nonaktif">
                        Nonaktif
                    </option>

                </select>
            </div>

            {{-- DESKRIPSI --}}
            <div class="mb-4 form-control-validation">

                <label class="form-label">
                    Deskripsi
                </label>

                <textarea name="deskripsi"
                    id="edit-deskripsi"
                    class="form-control"
                    rows="4"
                    placeholder="Masukkan deskripsi kelompok..."></textarea>
            </div>

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

                Simpan Perubahan
            </button>

            <button type="button"
                class="btn btn-label-danger"
                data-bs-dismiss="offcanvas">

                Batal
            </button>

        </form>

    </div>
</div>
@endsection

@push('scripts')
<script>
'use strict';

$(document).ready(function () {

    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil',
            text: "{{ session('success') }}",
            timer: 2000,
            showConfirmButton: false
        });
    @endif

    $(document).on('click', '.btn-delete', function (e) {

        e.preventDefault();

        const form = $(this).closest('.form-delete');
        const name = form.data('name');
        const url = form.attr('action');
        const formData = new FormData(form[0]);

        Swal.fire({
            title: 'Hapus Data?',
            text: `Yakin ingin menghapus "${name}" ?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal',
            customClass: {
                confirmButton: 'btn btn-danger me-3',
                cancelButton: 'btn btn-label-secondary'
            },
            buttonsStyling: false
        }).then(function (result) {

            if (result.value) {

                fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {

                    if (data.status === 'success') {

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: data.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.reload();
                        });
                    }
                })
                .catch(error => {

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: 'Terjadi kesalahan saat menghapus data.'
                    });

                });

            }

        });

    });

});
</script>

<script>
'use strict';

$(document).ready(function () {

    // VALIDATION STYLE
    $.validator.setDefaults({
        errorElement: 'div',

        errorPlacement: function (error, element) {

            error.addClass('invalid-feedback');

            element.closest('.form-control-validation')
                .append(error);
        },

        highlight: function (element) {
            $(element).addClass('is-invalid');
        },

        unhighlight: function (element) {
            $(element).removeClass('is-invalid');
        }
    });

    // OFFCANVAS
    const offcanvasAddKelompok =
        new bootstrap.Offcanvas(
            document.getElementById('offcanvasAddKelompok')
        );

    // VALIDATE FORM
    $('#formAddKelompok').validate({

        rules: {
            nama_kelompok: {
                required: true
            },

            status: {
                required: true
            }
        },

        messages: {
            nama_kelompok: {
                required: 'Nama kelompok wajib diisi'
            },

            status: {
                required: 'Status wajib dipilih'
            }
        },

        submitHandler: function (form) {

            $.ajax({

                url: $(form).attr('action'),

                type: 'POST',

                data: $(form).serialize(),

                success: function (response) {

                    offcanvasAddKelompok.hide();

                    form.reset();

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message,
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {

                        window.location.reload();
                    });
                },

                error: function (xhr) {

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: xhr.responseJSON?.message
                            || 'Terjadi kesalahan'
                    });
                }
            });
        }
    });

});
</script>

<script>
'use strict';

$(document).ready(function () {

    // OFFCANVAS EDIT
    const offcanvasEditKelompok =
        new bootstrap.Offcanvas(
            document.getElementById('offcanvasEditKelompok')
        );

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

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

        // reset validation
        const editForm = $('#formEditKelompok');

        editForm.validate().resetForm();

        editForm.find('.is-invalid')
            .removeClass('is-invalid');

        $.get(`/kelompok-belajar-tani/${id}`, function (response) {

            const data = response.data;

            $('#edit-id').val(data.id);

            $('#edit-nama_kelompok')
                .val(data.nama_kelompok);

            $('#edit-status')
                .val(data.status);

            $('#edit-deskripsi')
                .val(data.deskripsi);

            offcanvasEditKelompok.show();
        });

    });

    // VALIDATE EDIT FORM
    $('#formEditKelompok').validate({

        rules: {
            nama_kelompok: {
                required: true
            },

            status: {
                required: true
            }
        },

        messages: {
            nama_kelompok: {
                required: 'Nama kelompok wajib diisi'
            },

            status: {
                required: 'Status wajib dipilih'
            }
        },

        submitHandler: function (form) {

            const id = $('#edit-id').val();

            $.ajax({

                url: `/kelompok-belajar-tani/${id}`,

                type: 'POST',

                data: $(form).serialize(),

                success: function (response) {

                    offcanvasEditKelompok.hide();

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message,
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {

                        window.location.reload();
                    });

                },

                error: function (xhr) {

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: xhr.responseJSON?.message
                            || 'Terjadi kesalahan'
                    });

                }

            });

        }

    });

});
</script>
@endpush