@extends('admin.layout.main')
@section('content')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Setting</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="{{ route('index') }}">Dashboard</a></div>
                    <div class="breadcrumb-item">Setting</div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-end mb-3">
                            <a class="btn btn-success active" href="#" data-toggle="modal"
                                data-target="#ModalSetting">Add Data</a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped" id="table-2">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Bulan</th>
                                        <th>Tahun</th>
                                        <th>Persentase (%)</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($settings as $setting)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ DateTime::createFromFormat('!m', $setting->bulan)->format('F') }}</td>
                                            <td>{{ $setting->tahun }}</td>
                                            <td>{{ $setting->persentase }}</td>
                                            {{-- <td hidden>{{$setting->id}}</td> --}}
                                            <td>
                                                <div
                                                    class="badge {{ $setting->status == 'Active' ? 'badge-success' : 'badge-danger' }}">
                                                    {{ $setting->status }}</div>
                                            </td>
                                            <td>
                                                <label class="switch">
                                                    <input type="checkbox" @if ($setting->status === 'Active') checked @endif
                                                        data-id="{{ $setting->id }}">
                                                    <span class="slider round" data-on-text="Yes" data-off-text="No"
                                                        id="checkOnOf"></span>
                                                </label>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    @include('admin.setting.modal-add-setting')
    <script>
        $(document).ready(function() {
            const table = $('#table-2').DataTable(); // Inisialisasi DataTable

            $('#table-2').on('change', '.switch input[type="checkbox"]', function() {
                const parentRow = $(this).closest('tr');
                const csrfToken = $('meta[name="csrf-token"]').attr('content');
                const statusBadge = parentRow.find('.badge');
                const onText = $(this).next().data('on-text');
                const offText = $(this).next().data('off-text');
                const isChecked = $(this).prop('checked');
                let dataId = $(this).data("id");

                const rowData = table.row(parentRow).data(); // Dapatkan data baris dari DataTable

                $.ajax({
                    url: "{{ route('admin-setting.update', ':admin_setting') }}".replace(':admin_setting', dataId),
                    type: 'PUT',
                    data: {
                        _token: csrfToken,
                    },
                    success: function(response) {
                        Swal.fire({
                            title: response.status ? 'Berhasil!' : 'Gagal!',
                            text: response.message,
                            icon: response.status ? 'success' : 'error',
                            confirmButtonText: 'OK'
                        }).then(function() {
                            if (isChecked) {
                                // location.reload();
                                statusBadge.text(onText === 'Yes' ? 'Active' :
                                    'Nonactive');
                                statusBadge.removeClass('badge-danger').addClass(
                                    'badge-success');
                            } else {
                                statusBadge.text(offText === 'No' ? 'Nonactive' :
                                    'Active');
                                statusBadge.removeClass('badge-success').addClass(
                                    'badge-danger');
                            }
                        });
                    },
                    error: function(error) {
                        Swal.fire({
                            title:'Error!',
                            text:'Terjadi error, '+error,
                            icon:'error',
                            confirmButtonText : 'OK'
                        });
                    }
                });
            });
        });
    </script>
@endsection