@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <h4 class="mb-4 mt-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
            Add New Saving Product
        </h4>
        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <form action="{{ route('saving-product.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mt-2 grid gap-2 mb-3 md:grid-cols-2">
                <label class="block mb-4 mr-3 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">*Product Name</span>
                    <input
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
      @error('name')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
      focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                        name="name" value="{{ old('name') }}" placeholder="Name">
                    @error('name')
                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </label>
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">*Product Short Name</span>
                    <input
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
      @error('short_name')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
      focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                        name="short_name" value="{{ old('short_name') }}" placeholder="Short Name">
                    @error('short_name')
                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </label>
                </div>
                {{-- <div class="mt-2 grid gap-2 mb-8 md:grid-cols-2"> --}}
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">*Minimum Opening Balance</span>
                    <input type="number" min="0"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
            @error('min_opening_balance')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
            focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                        name="min_opening_balance" value="{{ old('min_opening_balance') }}" placeholder="minimum opening balance">
                    @error('min_opening_balance')
                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </label>
                <div class="mt-2 grid gap-2 mb-3 md:grid-cols-2">
                    <label class="block mb-4 mr-3 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">Lock In Type</span>
                        <select name="lock_in_period_type"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                        >
                            <option name="days">Days</option>
                            <option name="months">Months</option>
                            <option name="Years">Years</option>
                        </select>
                        @error('lock_in_period_type')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Lock in Period Count</span>
                        <input type="number" min="0"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                            @error('lock_in_period_count')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                            focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                            name="lock_in_period_count" value="{{ old('lock_in_period_count') }}" placeholder="Lock in Period Count">
                        @error('lock_in_period_count')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                    <div class="">
                        <label class=" block mb-4 text-sm items-center dark:text-gray-400">
                            <input
                              type="checkbox"
                              name="apply_withdrawal_fee"
                              id="apply_withdraw"
                              value="0"
                              class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                            />
                            <span class="ml-2">
                                Apply Withdrawal Fees
                            </span>
                          </label>
                        </div>
                        <div class="">
                            <label class=" block mb-4 text-sm items-center dark:text-gray-400">
                                <input
                                  type="checkbox"
                                  name="enforce_min_balance"
                                  value="0"
                                  id="enforce"
                                  class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                                />
                                <span class="ml-2">
                                    Enforce Minimum Balance
                                </span>
                              </label>
                              <label class="block mb-4 text-sm minbal" style="display: none">
                                <span class="text-gray-700 dark:text-gray-400">*Minimum Balance</span>
                                <input type="number" min="0"
                                    class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                                    @error('min_balance')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                                    focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                                    name="min_balance" value="{{ old('min_balance') }}" placeholder="Minimum Balance">
                                @error('min_balance')
                                    <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </label>
                            </div>
                            <div class="">
                                <label class=" block mb-4 text-sm items-center dark:text-gray-400">
                                    <input
                                      type="checkbox"
                                      name="is_overdraft_allowed"
                                      id="overdraft"
                                      value="0"
                                      class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                                    />
                                    <span class="ml-2">
                                       Is Overdraft Allowed
                                    </span>
                                  </label>
                                  <label class="block mb-4 text-sm over-draft" style="display: none">
                                    <span class="text-gray-700 dark:text-gray-400">*Overdraft Limit</span>
                                    <input type="number" min="0"
                                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                                        @error('overdraft_limit')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                                        name="overdraft_limit" value="{{ old('overdraft_limit') }}" placeholder="Overdraft Limit">
                                    @error('overdraft_limit')
                                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </label>
                                <label class="block mb-4 text-sm over-draft" style="display: none">
                                    <span class="text-gray-700 dark:text-gray-400">*Interest Rate</span>
                                    <input type="number" min="0"
                                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                                        @error('overdraft_interest_rate')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                                        name="overdraft_interest_rate" value="{{ old('overdraft_interest_rate') }}" placeholder="Interest Rate">
                                    @error('overdraft_interest_rate')
                                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                                    @enderror
                                </label>
                                </div>
                        
                </div>
                <label class="block mb-4 text-sm " >
                    <span class="text-gray-700 dark:text-gray-400">*Product Description</span>
                    <textarea  class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray" 
            rows="10" name="description" placeholder="Enter description content.">{{ old('description') }}</textarea>
                    
                    @error('description')
                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </label>
                

                <div class="flex justify-end mt-6">
                    <button
                        class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
                        type="submit">{{ __('Submit Saving Product') }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{asset('js/custom.js')}}"></script>
    
    @endpush('scripts')