@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 Transaction</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-transactions.index') }}">Bank Transactions</a></li>
                    <li class="breadcrumb-item active">Add Bank Transaction</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 Transaction</h3>
            </div>

            <form action="{{ route('admin.bank-transactions.store') }}" method="POST" id="addBankTransactionForm">
                @csrf
                <div class="card-body">
                    <div class="row">

                        <!-- Bank Account -->
                        <div class="col-md-6 mb-3">
                            <label for="bank_account_id">Bank Account</label>
                            <select name="bank_account_id" id="bank_account_id" class="form-control select2" required>
                                <option value="">Select Bank Account</option>
                                @foreach($accounts as $account)
                                    <option value="{{ $account->id }}" {{ old('bank_account_id') == $account->id ? 'selected' : '' }}>
                                        {{ $account->display_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('bank_account_id')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

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

                        <!-- Description -->
                        <div class="col-md-12 mb-3">
                            <label for="description">Description</label>
                            <textarea name="description" id="description" rows="3" class="form-control"
                                      placeholder="Enter transaction description">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Debit -->
                        <div class="col-md-4 mb-3">
                            <label for="debit">Debit (Outflow)</label>
                            <input type="number" step="0.01" name="debit" id="debit" class="form-control"
                                   placeholder="0.00" value="{{ old('debit') }}">
                            @error('debit')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Credit -->
                        <div class="col-md-4 mb-3">
                            <label for="credit">Credit (Inflow)</label>
                            <input type="number" step="0.01" name="credit" id="credit" class="form-control"
                                   placeholder="0.00" value="{{ old('credit') }}">
                            @error('credit')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

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

                        <!-- Cheque No -->
                        <div class="col-md-6 mb-3">
                            <label for="cheque_no">Cheque No</label>
                            <input type="text" name="cheque_no" id="cheque_no" class="form-control"
                                   placeholder="Enter cheque number (if any)" value="{{ old('cheque_no') }}">
                            @error('cheque_no')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Reference No -->
                        <div class="col-md-6 mb-3">
                            <label for="reference_no">Reference No</label>
                            <input type="text" name="reference_no" id="reference_no" class="form-control"
                                   placeholder="Enter reference number (if any)" value="{{ old('reference_no') }}">
                            @error('reference_no')
                                <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-transactions.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 () {
    $('#bank_account_id').select2({ placeholder: 'Select Bank Account' });

    $('#addBankTransactionForm').validate({
        rules: {
            bank_account_id: { required: true },
            transaction_date: { required: true, date: true },
            debit: { number: true, min: 0 },
            credit: { number: true, min: 0 },
            balance: { number: true, min: 0 }
        },
        messages: {
            bank_account_id: "Please select a bank account",
            transaction_date: "Please select a valid date",
            debit: { number: "Debit must be a number", min: "Debit cannot be negative" },
            credit: { number: "Credit must be a number", min: "Credit cannot be negative" },
            balance: { number: "Balance must be a number", min: "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