@extends('app')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-md-6">
                    <div class="row justify-content-start align-items-center">
                        <div class="col-auto">
                            <h1 class="m-0">Caj Pengurusan</h1>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-hover" data-toggle="modal" data-target="#createModal">Tambah
                                Baru</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Tanggal syawal</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <!-- Data Table -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr class="text-center">
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Bil</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Nama Caj</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Jumlah Caj(RM)</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Caj Peratus (%)</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Tindakan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($cajs as $caj)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td class="text-center">{{ $caj->name }}</td>
                                        <td class="text-center">{{ $caj->jumlah_caj }}</td>
                                        <td class="text-center">{{ $caj->caj_peratusan }}</td>
                                        <td class="text-center">
                                            <label class="custom-switch">
                                                <input id="switch-status-{{ $caj->id }}" class="switch-status"
                                                    type="checkbox" {{ $caj->status ? 'checked' : '' }}
                                                    data-id="{{ $caj->id }}">
                                                <span class="slider"></span>
                                            </label>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Data Table -->
    </div>

    @include('admin.caj_pengurus.crud.create')

    @if (session('success'))
        <script>
            Swal.fire({
                title: 'Sukses!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    <script>
        document.querySelectorAll('.switch-status').forEach(function(element) {
            element.addEventListener('change', function() {
                let status = this.checked ? 1 : 0;
                let cajId = this.getAttribute('data-id');
                axios.put(`/cajpengurusan/${cajId}/update-status`, {
                        status: status
                    })
                    .then(function(response) {
                        Swal.fire({
                            title: 'Sukses!',
                            text: response.data.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                    })
                    .catch(function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Gagal memperbarui status caj pengurusan. Silakan coba lagi.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    });
            });
        });
    </script>
@endsection