@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">Bank</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;">Logo</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Nama Bank</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Butiran</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Tindakan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($banks as $bank)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td class="text-center"><img src="{{ $bank->logo }}" alt="Logo Bank"
                                                style=" width: 122px; height: 58px;"></td>
                                        <td class="text-center">{{ $bank->bank }}</td>
                                        <td class="text-center">{{ $bank->keterangan }}</td>
                                        <td class="text-center">
                                            <label class="custom-switch">
                                                <input id="switch-status {{ $bank->id }}" class="switch-status"
                                                    type="checkbox" {{ $bank->status ? 'checked' : '' }}
                                                    data-id="{{ $bank->id }}">
                                                <span class="slider"></span>
                                            </label>
                                        </td>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Data Table -->
    </div>

    @include('admin.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.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.switch-status').forEach(function(element) {
                element.addEventListener('change', function() {
                    let status = this.checked ? 1 : 0;
                    let bankId = this.getAttribute('data-id');
                    axios.put(`/bank/${bankId}/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