@extends('layouts.master')

@section('content')
    <div class="header bg-primary text-white p-3 mb-3 rounded mt-3">
        <h3 class="m-0 font-weight-normal">Supplier</h3>
    </div>

    <div class="card">
        <div class="card-header">
            <h6 class="card-title">Tambah Supplier</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('supplier.store') }}" method="post">
                @csrf
                @if (isset($supplier))
                    <input type="hidden" name="id" value="{{ $supplier->id }}">
                @endif
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nama_perusahaan">Nama Perusahaan</label>
                            <input type="text" name="nama_perusahaan" placeholder="Nama Perusahaan"
                                class="form-control mb-2" value="{{ isset($supplier) ? $supplier->nama_perusahaan : '' }}" required>
                        </div>
                        <div class="form-group">
                            <label for="alamat">Alamat</label>
                            <input type="text" name="alamat" placeholder="Alamat" class="form-control mb-2"
                                value="{{ isset($supplier) ? $supplier->alamat : '' }}" required>
                        </div>
                        <div class="form-group">
                            <label for="nomor_telepon">Nomor Telepon</label>
                            <input type="text" name="nomor_telepon" placeholder="Nomor Telepon" class="form-control mb-2"
                                value="{{ isset($supplier) ? $supplier->nomor_telepon : '' }}" oninput="validatePhoneNumber(this)" required>
                            <div id="phoneWarning" class="text-danger" style="display: none;">Masukkan format nomor telepon yang benar</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nama_bank">Nama Bank</label>
                            <select name="nama_bank" id="bankSelect" class="form-control mb-2" onchange="toggleOtherBank()">
                                <option value="">Pilih Bank</option>
                                <option value="BCA" {{ isset($supplier) && $supplier->nama_bank == 'BCA' ? 'selected' : '' }}>BCA</option>
                                <option value="BRI" {{ isset($supplier) && $supplier->nama_bank == 'BRI' ? 'selected' : '' }}>BRI</option>
                                <option value="BNI" {{ isset($supplier) && $supplier->nama_bank == 'BNI' ? 'selected' : '' }}>BNI</option>
                                <option value="Mandiri" {{ isset($supplier) && $supplier->nama_bank == 'Mandiri' ? 'selected' : '' }}>Mandiri</option>
                                <option value="Bank BTN" {{ isset($supplier) && $supplier->nama_bank == 'Bank BTN' ? 'selected' : '' }}>Bank BTN</option>
                                <option value="Lainnya" {{ isset($supplier) && $supplier->nama_bank != 'BCA' && $supplier->nama_bank != 'BRI' && $supplier->nama_bank != 'BNI' && $supplier->nama_bank != 'Mandiri' && $supplier->nama_bank != 'Bank BTN' ? 'selected' : '' }}>Lainnya</option>
                            </select>
                            <div id="otherBankDiv" style="display: none;" class="mt-2">
                                <input type="text" name="other_bank" id="otherBank" class="form-control" placeholder="Masukkan nama bank lainnya" value="{{ isset($supplier) && $supplier->nama_bank != 'BCA' && $supplier->nama_bank != 'BRI' && $supplier->nama_bank != 'BNI' && $supplier->nama_bank != 'Mandiri' && $supplier->nama_bank != 'Bank BTN' ? $supplier->nama_bank : '' }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="no_rekening">No Rekening</label>
                            <input type="text" name="no_rekening" id="no_rekening" placeholder="No Rekening" class="form-control mb-2"
                                value="{{ isset($supplier) ? $supplier->no_rekening : '' }}" oninput="validateNumber(this)">
                            <div id="rekeningWarning" class="text-danger" style="display: none;">Masukkan format nomor rekening yang benar</div>
                        </div>
                        <div class="form-group">
                            <label for="email">Nama Rekening</label>
                            <input type="text" name="nama_rekening" placeholder="Nama Rekening" class="form-control mb-2"
                                value="{{ isset($supplier) ? $supplier->nama_rekening : '' }}">
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">
                    @if(isset($supplier))
                        Simpan
                    @else
                        Tambah Supplier
                    @endif
                </button>
                @if(isset($supplier))
                    <a href="{{ route('supplier') }}" class="btn btn-secondary">Kembali</a>
                @endif
            </form>
        </div>
    </div>

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

    <script>
        function toggleOtherBank() {
            var select = document.getElementById('bankSelect');
            var otherDiv = document.getElementById('otherBankDiv');
            var otherInput = document.getElementById('otherBank');
            
            if (select.value === 'Lainnya') {
                otherDiv.style.display = 'block';
                otherInput.setAttribute('required', 'required');
            } else {
                otherDiv.style.display = 'none';
                otherInput.removeAttribute('required');
                otherInput.value = '';
            }
            validateForm();
        }

        // Panggil fungsi saat halaman dimuat untuk mengecek nilai awal
        document.addEventListener('DOMContentLoaded', function() {
            toggleOtherBank();
            validateForm();
            // Nonaktifkan tombol simpan saat halaman pertama kali dimuat
            var submitButton = document.querySelector('button[type="submit"]');
            submitButton.disabled = true;
            submitButton.classList.add('btn-secondary');
            submitButton.classList.remove('btn-primary');
        });

        function validateNumber(input) {
            var warning = document.getElementById('rekeningWarning');
            var form = input.closest('form');
            var submitButton = form.querySelector('button[type="submit"]');
            
            // Cek apakah input hanya berisi angka
            if (!/^\d*$/.test(input.value)) {
                warning.style.display = 'block';
                submitButton.disabled = true;
                submitButton.classList.add('btn-secondary');
                submitButton.classList.remove('btn-primary');
            } else {
                warning.style.display = 'none';
                // Periksa apakah semua input lain valid
                var allValid = true;
                var requiredInputs = form.querySelectorAll('input[required], select[required]');
                
                requiredInputs.forEach(function(input) {
                    if (!input.value || input.value.trim() === '') {
                        allValid = false;
                    }
                });

                if (allValid) {
                    submitButton.disabled = false;
                    submitButton.classList.add('btn-primary');
                    submitButton.classList.remove('btn-secondary');
                }
            }
        }

        // Event listener untuk input No Rekening
        document.querySelector('input[name="no_rekening"]').addEventListener('input', function(e) {
            validateNumber(this);
        });

        // Event listener untuk semua input lainnya
        document.querySelectorAll('input:not([name="no_rekening"]), select').forEach(function(element) {
            element.addEventListener('input', function() {
                validateForm();
            });
            element.addEventListener('change', function() {
                validateForm();
            });
        });

        function validateForm() {
            var form = document.querySelector('form');
            var submitButton = form.querySelector('button[type="submit"]');
            var isValid = true;

            // Validasi Nama Perusahaan
            var namaPerusahaan = form.querySelector('input[name="nama_perusahaan"]');
            if (!namaPerusahaan.value || namaPerusahaan.value.trim() === '') {
                isValid = false;
            }

            // Validasi Alamat
            var alamat = form.querySelector('input[name="alamat"]');
            if (!alamat.value || alamat.value.trim() === '') {
                isValid = false;
            }

            // Validasi Nomor Telepon
            var nomorTelepon = form.querySelector('input[name="nomor_telepon"]');
            if (!nomorTelepon.value || nomorTelepon.value.trim() === '') {
                isValid = false;
            }

            // Validasi Nama Bank
            var namaBank = form.querySelector('select[name="nama_bank"]');
            if (!namaBank.value || namaBank.value === '') {
                isValid = false;
            }

            // Validasi Bank Lainnya jika dipilih
            if (namaBank.value === 'Lainnya') {
                var otherBank = form.querySelector('input[name="other_bank"]');
                if (!otherBank.value || otherBank.value.trim() === '') {
                    isValid = false;
                }
            }

            // Validasi Nomor Rekening
            var noRekening = form.querySelector('input[name="no_rekening"]');
            if (!noRekening.value || noRekening.value.trim() === '' || !/^\d*$/.test(noRekening.value)) {
                isValid = false;
            }

            // Validasi Nama Rekening
            var namaRekening = form.querySelector('input[name="nama_rekening"]');
            if (!namaRekening.value || namaRekening.value.trim() === '') {
                isValid = false;
            }

            // Update status tombol simpan
            if (isValid) {
                submitButton.disabled = false;
                submitButton.classList.add('btn-primary');
                submitButton.classList.remove('btn-secondary');
            } else {
                submitButton.disabled = true;
                submitButton.classList.add('btn-secondary');
                submitButton.classList.remove('btn-primary');
            }
        }

        function validatePhoneNumber(input) {
            var warning = document.getElementById('phoneWarning');
            var form = input.closest('form');
            var submitButton = form.querySelector('button[type="submit"]');
            
            // Cek apakah input hanya berisi angka
            if (!/^\d*$/.test(input.value)) {
                warning.style.display = 'block';
                submitButton.disabled = true;
                submitButton.classList.add('btn-secondary');
                submitButton.classList.remove('btn-primary');
            } else {
                warning.style.display = 'none';
                // Periksa apakah semua input lain valid
                var allValid = true;
                var requiredInputs = form.querySelectorAll('input[required], select[required]');
                
                requiredInputs.forEach(function(input) {
                    if (!input.value || input.value.trim() === '') {
                        allValid = false;
                    }
                });

                if (allValid) {
                    submitButton.disabled = false;
                    submitButton.classList.add('btn-primary');
                    submitButton.classList.remove('btn-secondary');
                }
            }
        }

        // Event listener untuk input Nomor Telepon
        document.querySelector('input[name="nomor_telepon"]').addEventListener('input', function(e) {
            validatePhoneNumber(this);
        });
    </script>
@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);
                }
            });

            // Cek khusus untuk bank lainnya
            if ($('#bankSelect').val() === 'Lainnya' && !$('#otherBank').val()) {
                emptyFields.push('Nama Bank Lainnya');
            }

            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