@extends('layouts.app')

@section('title', 'Bank Details')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Bank Details</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Bank Details</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Bank Details Form</h3>
                    </div>

                    <form id="bankForm" action="{{ route('bank.detail.store') }}" method="POST">
                        @csrf

                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Account Holder Name <span class="text-danger">*</span></label>
                                        <input type="text" name="account_holder_name" class="form-control" value="{{ old('account_holder_name', $bankDetail->account_holder_name ?? '') }}" placeholder="Account Holder Name" required><br>
                                        <input type="text" name="account_holder_name_ar" class="form-control" value="{{ old('account_holder_name_ar', $bankDetail->account_holder_name_ar ?? '') }}" placeholder="Account Holder Name In Arabic" required>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Bank Name <span class="text-danger">*</span></label>
                                        <input type="text" name="bank_name" class="form-control" value="{{ old('bank_name', $bankDetail->bank_name ?? '') }}" placeholder="Bank Name" required><br>
                                        <input type="text" name="bank_name_ar" class="form-control" value="{{ old('bank_name_ar', $bankDetail->bank_name_ar ?? '') }}" placeholder="Bank Name In Arabic" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Bank Account Number <span class="text-danger">*</span></label>
                                        <input type="text" name="BAN" class="form-control" value="{{ old('BAN', $bankDetail->BAN ?? '') }}" required>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Bank Branch Name <span class="text-danger">*</span></label>
                                        <input type="text" name="bank_branch_name" class="form-control" value="{{ old('bank_branch_name', $bankDetail->bank_branch_name ?? '') }}" placeholder="Bank Branch Name" required><br>
                                        <input type="text" name="bank_branch_name_ar" class="form-control" value="{{ old('bank_branch_name_ar', $bankDetail->bank_branch_name_ar ?? '') }}" placeholder="Bank Branch Name In Arabic" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Mobile Number <span class="text-danger">*</span></label>
                                        <!-- Prefix Qatar Country Code +974 -->
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">+974</span>
                                            </div>
                                            <input type="text" name="mobile_number" class="form-control"
                                                value="{{ old('mobile_number', $bankDetail->mobile_number ?? '') }}" required
                                                minlength="8" maxlength="8" pattern="^[0-9]+$"
                                                placeholder="Enter your 8-digit mobile number" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>IFSC Code <span class="text-danger">*</span></label>
                                        <input type="text" name="ifsc_code" class="form-control" value="{{ old('ifsc_code', $bankDetail->ifsc_code ?? '') }}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Account Type <span class="text-danger">*</span></label>
                                        <select class="custom-select select2" name="account_type" required>
                                            <option value=""></option>
                                            <option value="savings" {{ (old('account_type', $bankDetail->account_type ?? '') == 'savings') ? 'selected' : '' }}>Savings (الادخار)</option>
                                            <option value="current" {{ (old('account_type', $bankDetail->account_type ?? '') == 'current') ? 'selected' : '' }}>Current (حاضِر)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <a href="{{route('admin.dashboard')}}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">Save Bank Details</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script src="{{asset('js/jquery.validate.min.js')}}"></script>
<script src="{{asset('js/additional-methods.min.js')}}"></script>
<script src="{{asset('js/gijgo.min.js" type="text/javascript')}}"></script>
<link href="{{asset('css/gijgo.min.css')}}" rel="stylesheet" type="text/css" />
<script>
    $(document).ready(function() {
        // Trim all input values on form submit
        $('#bankForm').on('submit', function() {
            $(this).find('input[type="text"], input[type="tel"], input[type="email"], textarea').each(function() {
                $(this).val($.trim($(this).val()));
            });
        });
        $(this).val($.trim($(this).val()));

        $('#bankForm').validate({
            rules: {
                account_holder_name: {
                    required: true,
                    maxlength: 100
                },
                account_holder_name_ar: {
                    required: true                    
                },
                bank_name: {
                    required: true,
                    maxlength: 100
                },
                bank_name_ar: {
                    required: true,
                    maxlength: 100
                },
                bank_branch_name: {
                    required: true,
                    maxlength: 100
                },
                bank_branch_name_ar: {
                    required: true
                },
                BAN: {
                    required: true,
                    maxlength: 34
                },
                account_type: {
                    required: true
                },
                mobile_number: {
                    required: true,
                    digits: true,
                    minlength: 8,
                    maxlength: 8
                },
                ifsc_code: {
                    required: true,
                    minlength: 10,
                    maxlength: 15
                }
            },
            messages: {
                account_holder_name: {
                    required: "Please enter the account holder's name",
                    maxlength: "Account holder name cannot exceed 100 characters"
                },
                account_holder_name_ar: {
                    required: "Please enter the account holder's name in arabic"
                },
                bank_name: {
                    required: "Please enter the bank name",
                    maxlength: "Bank name cannot exceed 100 characters"
                },
                bank_name_ar: {
                    required: "Please enter the bank name in arabic",
                    maxlength: "Bank name cannot exceed 100 characters"
                },
                bank_branch_name: {
                    required: "Please enter the bank branch name",
                    maxlength: "Bank branch name cannot exceed 100 characters"
                },
                bank_branch_name_ar: {
                    required: "Please enter the bank branch name in arabic"
                },
                BAN: {
                    required: "Please enter the Bank Account Number",
                    maxlength: "Bank Account Number cannot exceed 34 characters"
                },
                account_type: {
                    required: "Please select an account type"
                },
                mobile_number: {
                    required: "Please enter a mobile number",
                    digits: "Mobile number must be numeric",
                    minlength: "Mobile number must be 8 digits after +974",
                    maxlength: "Mobile number cannot exceed 8 digits"
                },
                ifsc_code: {
                    required: "Please enter a IFSC code",
                    minlength: "IFSC code must be at least 10 digits",
                    maxlength: "IFSC code cannot exceed 15 digits"
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

        $('.select2').select2();
    });
</script>
@endsection