@extends('layouts.master')
@section('title', 'Add Savings')

@section('page-header')
<header class="header bg-ui-general">
    <div class="header-info">
        <h1 class="header-title">
            <strong>New Savings</strong>
        </h1>
    </div>

    <div class="header-action">
        <nav class="nav">
            <a class="nav-link" href="{{ route('savings.index') }}">
                Savings List
            </a>
            <a class="nav-link active" href="{{ route('savings.create') }}">
                <i class="fa fa-plus"></i>
                New Savings
            </a>
        </nav>
    </div>
</header>
@endsection

@section('content')
<div class="col-md-12">
    <form class="card" action="{{ route('savings.store') }}" method="POST">
        @csrf
        <h4 class="card-title fw-400">Savings Information</h4>

        <div class="card-body">

            {{-- Customer --}}
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Customer <span class="text-danger">*</span></label>
                        <select name="customer_id"
                            class="form-control {{ $errors->has('customer_id') ? 'is-invalid' : '' }}"
                            data-provide="selectpicker" data-live-search="true" data-size="10" required>
                            <option value="">Select Customer</option>
                            @foreach($customers as $customer)
                            <option value="{{ $customer->id }}"
                                {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                                {{ $customer->name }} ({{ $customer->mobile_no }}) {{ $customer->account_no }}
                            </option>
                            @endforeach
                        </select>
                        @if($errors->has('customer_id'))
                        <div class="invalid-feedback">{{ $errors->first('customer_id') }}</div>
                        @endif
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Total Savings</label>
                        <input type="text" id="total_savings" class="form-control" value="0.00" disabled>
                    </div>
                </div>


                {{-- Bank Account --}}
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Bank Account <span class="text-danger">*</span></label>
                        <select name="bank_account_id" class="form-control" required>
                            @foreach(App\BankAccount::all() as $account)
                            <option value="{{ $account->id }}">{{ $account->name }}</option>
                            @endforeach
                        </select>
                        @error('bank_account_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            {{-- Amount & Date --}}
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Amount <span class="text-danger">*</span></label>
                        <input type="number" step="0.01" name="amount"
                            class="form-control {{ $errors->has('amount') ? 'is-invalid' : '' }}"
                            placeholder="Enter Amount" value="{{ old('amount') }}" required>
                        @error('amount')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label>Deposit Date <span class="text-danger">*</span></label>
                        <input type="text" data-provide="datepicker" data-date-today-highlight="true"
                            data-orientation="bottom" data-date-format="yyyy-mm-dd" data-date-autoclose="true"
                            class="form-control" name="deposit_date" placeholder="Deposit Date"
                            value="{{ old('deposit_date', date('Y-m-d')) }}" required>
                        @error('deposit_date')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

        </div>

        <footer class="card-footer text-right">
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-save"></i> Add Savings
            </button>
        </footer>
    </form>
</div>
@endsection

@section('styles')
<style>
    /* Optional custom styles */

</style>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // When customer select changes
    $('select[name="customer_id"]').change(function() {
        var customerId = $(this).val();
        if(customerId) {
            $.get('/back/savings/customer-savings/' + customerId, function(data) {
                // data should return total_savings
                var total = parseFloat(data.total_savings) || 0;
                $('#total_savings').val(total.toFixed(2));
            });
        } else {
            $('#total_savings').val('0.00');
        }
    });
});
</script>

@endsection
