@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        {{-- button save --}}
                        <button class="btn btn-primary mb-0"
                            onclick="event.preventDefault(); document.getElementById('norek-form').submit();">
                            <i class="fas fa-floppy-disk me-1"></i>
                            <span class="font-weight-bold">Simpan</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ url($url_menu) }}" id="norek-form">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Tambah {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            @if ($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            @endif

                            <div class="row">

                                {{-- Jenis Rekening --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="jenis" class="form-control-label">
                                            Jenis <span class="text-danger">*</span>
                                        </label>

                                        <select class="form-select" id="jenis" name="jenis" required>
                                            <option value="Vendor" {{ old('jenis') == 'Vendor' ? 'selected' : '' }}>
                                                Vendor
                                            </option>
                                            <option value="Non-Vendor" {{ old('jenis') == 'Non-Vendor' ? 'selected' : '' }}>
                                                Non-Vendor
                                            </option>
                                        </select>

                                        @error('jenis')
                                            <p class="text-danger text-xs mt-1">
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Bank --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="bank_vendor_id" class="form-control-label">
                                            Bank <span class="text-danger">*</span>
                                        </label>

                                        <select class="form-select select2-bank" id="bank_vendor_id" name="bank_vendor_id"
                                            required style="width: 100%;">

                                            <option value="">-- Pilih Bank --</option>

                                            @foreach ($banks as $bank)
                                                <option value="{{ $bank->id }}"
                                                    {{ old('bank_vendor_id') == $bank->id ? 'selected' : '' }}>
                                                    {{ $bank->nama }}
                                                </option>
                                            @endforeach
                                        </select>

                                        @error('bank_vendor_id')
                                            <p class="text-danger text-xs mt-1">
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Wrapper Vendor (Hanya muncul jika jenis = Vendor) --}}
                                <div class="col-md-6" id="wrapper-vendor" style="display: none;">
                                    <div class="form-group">
                                        <label for="vendor_id" class="form-control-label">Vendor <span
                                                class="text-danger">*</span></label>
                                        <select class="form-control" id="vendor_id" name="vendor_id" style="width: 100%;">
                                            <option value="">-- Pilih Vendor --</option>
                                        </select>
                                        @error('vendor_id')
                                            <p class="text-danger text-xs mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Wrapper Nama Pemilik (Hanya muncul jika jenis = Non-Vendor) --}}
                                <div class="col-md-6" id="wrapper-non-vendor" style="display: none;">
                                    <div class="form-group">
                                        <label for="nama_pemilik" class="form-control-label">Nama Pemilik <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="nama_pemilik" name="nama_pemilik"
                                            value="{{ old('nama_pemilik') }}" maxlength="255">
                                        @error('nama_pemilik')
                                            <p class="text-danger text-xs mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- No Rekening --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="norek" class="form-control-label">No Rekening <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="norek" name="norek"
                                            value="{{ old('norek') }}" maxlength="50" required>
                                        @error('norek')
                                            <p class="text-danger text-xs mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Nama Rekening --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="nama_rekening" class="form-control-label">Nama Rekening <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="nama_rekening"
                                            name="nama_rekening" value="{{ old('nama_rekening') }}" maxlength="255"
                                            required>
                                        @error('nama_rekening')
                                            <p class="text-danger text-xs mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Nickname --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="nickname" class="form-control-label">Nickname <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="nickname" name="nickname"
                                            value="{{ old('nickname') }}" maxlength="255" required>
                                        @error('nickname')
                                            <p class="text-danger text-xs mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Tipe Bank --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="tipe_bank" class="form-control-label">Tipe Bank <span
                                                class="text-danger">*</span></label>
                                        <select class="form-select" id="tipe_bank" name="tipe_bank" required>
                                            <option value="non_virtual"
                                                {{ old('tipe_bank', 'non_virtual') == 'non_virtual' ? 'selected' : '' }}>
                                                Non Virtual</option>
                                            <option value="virtual" {{ old('tipe_bank') == 'virtual' ? 'selected' : '' }}>
                                                Virtual</option>
                                        </select>
                                        @error('tipe_bank')
                                            <p class="text-danger text-xs mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Currency --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="currency" class="form-control-label">
                                            Currency <span class="text-danger">*</span>
                                        </label>

                                        <select class="form-select" id="currency" name="currency" required
                                            style="width: 100%;">
                                            <option value="">-- Pilih Currency --</option>

                                            @foreach ($currency_options as $cur)
                                                <option value="{{ $cur->value }}"
                                                    {{ old('currency', 'IDR') == $cur->value ? 'selected' : '' }}>
                                                    {{ $cur->name }}
                                                </option>
                                            @endforeach
                                        </select>

                                        @error('currency')
                                            <p class="text-danger text-xs mt-1">
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Email --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email" class="form-control-label">Email</label>
                                        <input type="email" class="form-control" id="email" name="email"
                                            value="{{ old('email') }}" maxlength="255">
                                        @error('email')
                                            <p class="text-danger text-xs mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Jenis Biaya --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="jenis_biaya" class="form-control-label">Jenis Biaya <span
                                                class="text-danger">*</span></label>
                                        <select class="form-select" id="jenis_biaya" name="jenis_biaya" required>
                                            <option value="BEN"
                                                {{ old('jenis_biaya', 'BEN') == 'BEN' ? 'selected' : '' }}>BEN</option>
                                            <option value="OUR" {{ old('jenis_biaya') == 'OUR' ? 'selected' : '' }}>OUR
                                            </option>
                                        </select>
                                        @error('jenis_biaya')
                                            <p class="text-danger text-xs mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Default --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="default" class="form-control-label">
                                            Default <span class="text-danger">*</span>
                                        </label>

                                        <select class="form-select" id="default" name="default" required>
                                            <option value="1" {{ old('default', '1') == '1' ? 'selected' : '' }}>
                                                Yes
                                            </option>

                                            <option value="0" {{ old('default', '1') == '0' ? 'selected' : '' }}>
                                                No
                                            </option>
                                        </select>
                                    </div>
                                </div>


                                {{-- Alamat --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="alamat" class="form-control-label">
                                            Alamat Bank
                                        </label>

                                        <textarea class="form-control" id="alamat" name="alamat" rows="3" placeholder="Masukkan alamat bank">{{ old('alamat') }}</textarea>

                                        @error('alamat')
                                            <p class="text-danger text-xs mt-1">
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--single {
            height: 42px !important;
            padding: 6px 12px;
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 28px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px;
        }
    </style>
@endpush

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            function toggleJenis() {
                var jenis = $('#jenis').val();

                if (jenis === 'Vendor') {
                    $('#wrapper-vendor').show();
                    $('#vendor_id').prop('required', true);
                    $('#wrapper-non-vendor').hide();
                    $('#nama_pemilik').prop('required', false).val('');
                } else {
                    $('#wrapper-vendor').hide();
                    $('#vendor_id').prop('required', false).val(null).trigger('change');
                    $('#wrapper-non-vendor').show();
                    $('#nama_pemilik').prop('required', true);
                }
            }
            toggleJenis();
            $('#jenis').change(function() {
                toggleJenis();
            });
            $('.select2-bank').select2({
                placeholder: '-- Pilih Bank --',
                allowClear: true,
                width: '100%'
            });
            // Initialize Select2 for Vendor with Ajax
            $('#vendor_id').select2({
                placeholder: '-- Ketik untuk mencari vendor --',
                allowClear: true,
                ajax: {
                    url: '{{ route('master.msnovn.searchVendor') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term // search term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                minimumInputLength: 2 // Mulai search setelah 2 karakter
            });

            // Set old value if exists (for validation errors)
            @if (old('vendor_id'))
                var oldVendorId = '{{ old('vendor_id') }}';
                $.ajax({
                    url: '{{ route('master.msnovn.searchVendor') }}',
                    data: {
                        q: oldVendorId
                    },
                    dataType: 'json'
                }).then(function(data) {
                    if (data.length > 0) {
                        var option = new Option(data[0].text, data[0].id, true, true);
                        $('#vendor_id').append(option).trigger('change');
                    }
                });
            @endif

        });
    </script>
@endpush