@extends('layouts.master')
@section('title', 'New DPS')

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

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

@section('content')
<div class="col-md-12">
    <form class="card" action="{{ route('dps.store') }}" method="POST">
        @csrf
        <h4 class="card-title fw-400"> DPS 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(key: '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>

                {{-- Duration --}}
                <div class="col-md-6">
                    <div class="form-group">
                       <label>Duration (Years)</label>
                        <input type="number" min="1" step="1" id="duration_years"
                   class="form-control"
                   placeholder="Enter number of years">
                        @error('duration_years')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

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

                <div class="col-md-6">
                    <div class="form-group">
                        <label>Duration (Months) <span class="text-danger">*</span></label>
                         <input type="number" name="duration_months" id="duration_months"
                            class="form-control"
                            placeholder="e.g. 12, 24, 36"
                            value="{{ old('duration_months') }}"
                            required>
                        @error('duration_months')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

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

                <div class="col-md-6">
                    <div class="form-group">
                        <label>Interest Type <span class="text-danger">*</span></label>
                        <select name="interest_type"
                                class="form-control {{ $errors->has('interest_type') ? 'is-invalid' : '' }}"
                                required>
                            <option value="">Select Type</option>
                            <option value="daily" {{ old('interest_type') == 'daily' ? 'selected' : '' }}>Daily</option>
                            <option value="weekly" {{ old('interest_type') == 'weekly' ? 'selected' : '' }}>Weekly</option>
                            <option value="monthly" {{ old('interest_type') == 'monthly' ? 'selected' : '' }}>Monthly</option>
                        </select>
                        @error('interest_type')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            {{-- Dates --}}
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Start 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="start_date"
                        placeholder="Start Date" autocomplete="off" value="{{ request('start_date', date('Y-m-d')) }}" required>
                    </div>
                </div>
            </div>

        </div>

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

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

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const yearsInput = document.getElementById('duration_years');
        const monthsInput = document.getElementById('duration_months');

        yearsInput.addEventListener('input', function () {
            let years = parseInt(this.value);
            if (!isNaN(years) && years > 0) {
                monthsInput.value = years * 12;
            } else {
                monthsInput.value = '';
            }
        });
    });
</script>

@endsection
