@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">Akaun Bank Tabung Masjid</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;">Masjid</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Nama Bank</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">No.Akaun</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Tindakan</th>
                                </tr>
                            </thead>
                            <tbody>
                            <tbody>
                                @foreach ($accounts as $bankAccount)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td class="text-center">{{ $bankAccount->masjid->nama_mesjid }}</td>
                                        <td class="text-center">{{ $bankAccount->bank->bank }}</td>
                                        <td class="text-center">{{ $bankAccount->account_number }}</td>
                                        <td class="text-center">
                                            <label class="custom-switch">
                                                <input id="switch-status {{ $bankAccount->id }}" class="switch-status"
                                                    type="checkbox" {{ $bankAccount->status ? 'checked' : '' }}
                                                    data-id="{{ $bankAccount->id }}">
                                                <span class="slider"></span>
                                            </label>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Data Table -->
    </div>

    @include('admin.akun_bank.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 accountId = this.getAttribute('data-id');
                axios.put(`/accountbank/${accountId}/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 Bank. Silakan coba lagi.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    });
            });
        });
    </script>
@endsection