@extends('layouts.master')

@section('content')
    <style>
        .modal-header .close {
            color: white !important;
            opacity: 1;
        }
        .modal-header .close:hover {
            color: #f8f9fa !important;
            opacity: 0.8;
        }
    </style>

    <div class="header bg-primary text-white p-3 mb-3 rounded mt-3">
        <h3 class="m-0 font-weight-normal">Rekening</h3>
    </div>

    <div class="card mb-3">
        <div class="card-header">
            <h6 class="card-title">Tambah Rekening</h6>
        </div>
        <div class="card-body">
            <form action="{{ isset($rekening) ? route('rekening.update', $rekening->id) : route('rekening.store') }}" method="post">
                @csrf
                @if(isset($rekening))
                    @method('PUT')
                @endif
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="jenis_bank">Jenis Bank</label>
                            <input type="text" name="jenis_bank" placeholder="Jenis Bank" class="form-control mb-3"
                                value="{{ isset($rekening) ? $rekening->jenis_bank : '' }}" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nomor_rekening">Nomor Rekening</label>
                            <input type="text" name="nomor_rekening" placeholder="Nomor Rekening" class="form-control mb-3"
                                value="{{ isset($rekening) ? $rekening->nomor_rekening : '' }}" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nama_rekening">Nama Rekening</label>
                            <input type="text" name="nama_rekening" placeholder="Nama Rekening" class="form-control mb-3"
                                value="{{ isset($rekening) ? $rekening->nama_rekening : '' }}" required>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">
                    @if(isset($rekening))
                        Simpan
                    @else
                        Tambah Rekening
                    @endif
                </button>
                @if(isset($rekening))
                    <a href="{{ route('rekening') }}" class="btn btn-secondary">Kembali</a>
                @endif
            </form>
        </div>
    </div>

    @if(!isset($rekening))
    <div class="card">
        <div class="card-header">
            <h6 class="card-title">Daftar Rekening</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('rekening') }}" method="get" class="mb-3">
                <div class="row g-2 align-items-center">
                    <div class="col-md-2">
                        <input type="text" name="search" class="form-control" placeholder="Cari Rekening" value="{{ request('search') }}">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary">Cari</button>
                        <a href="{{ route('rekening') }}" class="btn btn-secondary">Reset</a>
                    </div>
                </div>
            </form>
            <table class="table" id="daftarTabel">
                <thead>
                    <tr>
                        <th>Jenis Bank</th>
                        <th>Nomor Rekening</th>
                        <th>Nama Rekening</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @if (isset($rekenings) && count($rekenings) > 0)
                        @foreach ($rekenings as $rekening)
                            <tr>
                                <td>{{ $rekening->jenis_bank }}</td>
                                <td>{{ $rekening->nomor_rekening }}</td>
                                <td>{{ $rekening->nama_rekening }}</td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="{{ route('rekening.edit', $rekening->id) }}" class="btn btn-warning btn-action" data-toggle="tooltip" title="Edit Rekening">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <a href="{{ route('rekening.destroy', $rekening->id) }}" class="btn btn-danger btn-action" data-toggle="tooltip" title="Hapus Rekening"
                                            onclick="return confirm('Apakah anda yakin ingin menghapus rekening ini?')">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="4" class="text-center">Rekening tidak ditemukan</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
    @endif
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();

        // Validasi form sebelum submit
        $('form').on('submit', function(e) {
            e.preventDefault();
            
            let emptyFields = [];
            let form = $(this);
            
            // Cek setiap input yang required
            form.find('input[required], select[required]').each(function() {
                if (!$(this).val()) {
                    let fieldName = $(this).attr('name');
                    let label = form.find('label[for="' + fieldName + '"]').text();
                    emptyFields.push(label);
                }
            });

            if (emptyFields.length > 0) {
                // Tampilkan popup error
                Swal.fire({
                    icon: 'error',
                    title: 'Form Belum Lengkap',
                    html: 'Mohon lengkapi field berikut:<br>' + emptyFields.join('<br>'),
                    confirmButtonText: 'OK'
                });
                return false;
            }

            // Jika semua valid, submit form
            form.unbind('submit').submit();
        });

        if (window.location.search.includes('search')) {
            setTimeout(function() {
                var tabel = document.getElementById('daftarTabel');
                if (tabel) {
                    tabel.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }, 300);
        }
    });
</script>
@endsection