@extends('admin.default')

@section('css')
<style>
    .error {
        color: red;
        font-size: 0.875em;
    }
    .is-invalid {
        border-color: #dc3545;
    }
    .is-valid {
        border-color: #28a745;
    }
    .invalid-feedback {
        color: #dc3545;
        font-size: 0.875em;
    }

    .select2-container .select2-selection--single {
        height: 38px !important;
        padding: 6px 12px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 24px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }
</style>
@endsection

@section('content')
<!-- Page Header -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Add Bank Account</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"><a href="{{ route('admin.bank-accounts.index') }}">Bank Accounts</a></li>
                    <li class="breadcrumb-item active">Add Bank Account</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Content -->
<div class="content">
    <div class="container-fluid">
        @include('include.messages')

        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">Add Bank Account</h3>
            </div>

            <form action="{{ route('admin.bank-accounts.store') }}" method="POST" id="addBankAccountForm">
                @csrf
                <div class="card-body">
                    <div class="row">
                        
                        <!-- Account Type -->
                        <div class="col-md-6 mb-3">
                            <label for="account_type">Account Type</label>
                            <select name="account_type" id="account_type" class="form-control select2" required>
                                <option value="">Select Type</option>
                                <option value="donation" {{ old('account_type') == 'donation' ? 'selected' : '' }}>Donation</option>
                                <option value="zakat" {{ old('account_type') == 'zakat' ? 'selected' : '' }}>Zakat</option>
                            </select>
                            @error('account_type')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Account Name -->
                        <div class="col-md-6 mb-3">
                            <label for="account_name">Account Name</label>
                            <input type="text" name="account_name" id="account_name" class="form-control" 
                                   placeholder="Enter account name" value="{{ old('account_name') }}" required>
                            @error('account_name')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Account Number -->
                        <div class="col-md-6 mb-3">
                            <label for="account_number">Account Number</label>
                            <input type="text" name="account_number" id="account_number" class="form-control" 
                                   placeholder="Enter account number" value="{{ old('account_number') }}" required>
                            @error('account_number')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Bank Name -->
                        <div class="col-md-6 mb-3">
                            <label for="bank_name">Bank Name</label>
                            <input type="text" name="bank_name" id="bank_name" class="form-control" 
                                   placeholder="Enter bank name" value="{{ old('bank_name') }}" required>
                            @error('bank_name')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Currency -->
                        <div class="col-md-4 mb-3">
                            <label for="currency">Currency</label>
                            <input type="text" name="currency" id="currency" class="form-control" 
                                   placeholder="e.g. PKR" value="{{ old('currency', 'PKR') }}" required>
                            @error('currency')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Address -->
                        <div class="col-md-8 mb-3">
                            <label for="address">Branch Address</label>
                            <input type="text" name="address" id="address" class="form-control" 
                                   placeholder="Enter branch address" value="{{ old('address') }}">
                            @error('address')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- From Date -->
                        <div class="col-md-6 mb-3">
                            <label for="from_date">From Date</label>
                            <input type="date" name="from_date" id="from_date" class="form-control"
                                   value="{{ old('from_date') }}">
                            @error('from_date')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- To Date -->
                        <div class="col-md-6 mb-3">
                            <label for="to_date">To Date</label>
                            <input type="date" name="to_date" id="to_date" class="form-control"
                                   value="{{ old('to_date') }}">
                            @error('to_date')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Opening Balance -->
                        <div class="col-md-6 mb-3">
                            <label for="opening_balance">Opening Balance</label>
                            <input type="number" step="0.01" name="opening_balance" id="opening_balance" class="form-control" 
                                   placeholder="Enter opening balance" value="{{ old('opening_balance') }}">
                            @error('opening_balance')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Closing Balance -->
                        <div class="col-md-6 mb-3">
                            <label for="closing_balance">Closing Balance</label>
                            <input type="number" step="0.01" name="closing_balance" id="closing_balance" class="form-control" 
                                   placeholder="Enter closing balance" value="{{ old('closing_balance') }}">
                            @error('closing_balance')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save
                    </button>
                    <a href="{{ route('admin.bank-accounts.index') }}" class="btn btn-default">
                        <i class="fas fa-times-circle"></i> Cancel
                    </a>
                </div>
            </form>

        </div>
    </div>
</div>
@endsection

@section('js')
<script>
$(document).ready(function () {
    $('#account_type').select2({ placeholder: 'Select Type' });

    $('#addBankAccountForm').validate({
        rules: {
            account_type: { required: true },
            account_name: { required: true },
            account_number: { required: true },
            bank_name: { required: true },
            currency: { required: true },
            opening_balance: { number: true, min: 0 },
            closing_balance: { number: true, min: 0 }
        },
        messages: {
            account_type: "Please select account type",
            account_name: "Please enter account name",
            account_number: "Please enter account number",
            bank_name: "Please enter bank name",
            currency: "Please enter currency",
            opening_balance: {
                number: "Opening balance must be numeric",
                min: "Opening balance cannot be negative"
            },
            closing_balance: {
                number: "Closing balance must be numeric",
                min: "Closing balance cannot be negative"
            }
        },
        errorElement: "label",
        errorClass: "is-invalid text-danger",
        validClass: "is-valid",
        highlight: function (element, errorClass, validClass) {
            $(element).addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    });
});
</script>
@endsection