@extends('layouts.main')
@section('content')
    <script>
        $(document).ready(function() {

            $("#bulan").select2();

            $('#tambahModal').click(function() {
                $('#ModalSetting').modal('show');
            });

            $('#buttonTanya').click(function() {
                $('#ModalSetting').modal('hide');
                $('#modalTanya').modal('show');
            });

            $('#closeModal').click(function() {
                $('#ModalSetting').modal('show');
                $('#modalTanya').modal('hide');
            });

            $('#formTambahSetting').on('submit', function(e) {
                e.preventDefault();

                let form = this;


                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                let formData = new FormData(this);

                Swal.fire({
                    html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/etwtznjn.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon><div class="mt-4 pt-2 fs-15"><h4>Form Anda sedang diproses!</h4><p class="text-muted mx-4 mb-0">Mohon tunggu...</p></div></div>',
                    allowEscapeKey: false,
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                if (formData) {
                    $.ajax({
                        type: 'POST',
                        url: "{{ route('admin-setting.store') }}",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            Swal.fire({
                                title: response.status ? 'Berhasil!' : 'Gagal!',
                                text: response.message,
                                icon: response.status ? 'success' : 'error',
                                confirmButtonText: 'OK',
                                position: 'center',
                            }).then(function() {
                                Swal.close();
                                if (response.status) {
                                    location.reload();
                                }
                                console.log(response);
                            });
                        },
                        error: function(error) {
                            console.log(error.responseText)

                            var response = JSON.parse(error.responseText);

                            var errorMessage = '';

                            for (var key in response.errors) {
                                if (response.errors.hasOwnProperty(key)) {
                                    errorMessage += response.errors[key][0] + '<br>';
                                }
                            }
                            Swal.fire({
                                position: 'center',
                                icon: 'error',
                                title: 'Terjadi Kesalahan',
                                html: errorMessage,
                                showConfirmButton: true
                            });
                        }
                    });
                }
            });

            const table = $('#table-5').DataTable(); // Inisialisasi DataTable

            $('#table-5').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

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }
                });

                $.ajax({
                    url: "{{ route('admin-setting.active-setting') }}",
                    type: 'PUT',
                    data: {
                        id: dataId,
                    },
                    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>
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Kebijakan Keuntungan</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="{{ route('admin.index') }}">Dashboard</a></div>
                    <div class="breadcrumb-item">Kebijakan Keuntungan</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="#" id="tambahModal">Tambah Data Kebijakan</a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped" id="table-5">
                                <thead>
                                    <tr>
                                        <th class="text-center">
                                            #
                                        </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('n', $setting->bulan)->format('F') }}</td>
                                            <td>{{ $setting->tahun }}</td>
                                            <td>{{ $setting->persentase }}</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')
    @include('admin.setting.modal-tanya')
@endsection