@extends('app.master')
@section('title',$title)
@section('breadcrumb')       
    @include('app.layouts.rent.breadcrumb',[
        'pageTitle' => $title,
        'lists' => [
            [
                'link'  => '#',
                'name'  => 'Payment Manangement',
            ],
            [
                'link'  => 'payments.houserent',
                'name'  => 'House Rents',
            ],
            [
                'link'  => '#',
                'name'  => $title, 
            ]
        ]
    ])
@endsection
@section('content')
<div class="col-md-12">
    <div class="card">
        <div class="card-header tx-medium bd-0 tx-white bg-indigo">@yield('title')</div>
        
        <div class="card-body">
            @include('app.layouts.alert')
            <form id="paymentUpdate" method="POST" action="{{ route('payments.update') }}">
                @csrf
                <div class="row">
                    <div class="col-md-4">
                        <div class="row mb-3">
                            <label for="tenant_id" class="col-md-3 col-form-label text-md-end">{{ __('Tenants') }}</label>
        
                            <div class="col-md-7">
                                <select id="tenant_id" class="form-control select2 @error('tenant_id') is-invalid @enderror" name="tenant_id" data-placeholder="Choose one" required>
                                    @foreach($tenants as $key => $tenant)
                                    <option value="{{ $key }}">{{ $tenant }}</option>
                                    @endforeach
                                </select>
                                <div id="slErrorContainer"></div>
        
                                @error('tenant_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <label for="tenant_house_id" class="col-md-3 col-form-label text-md-end">{{ __('Houses') }}</label>
        
                            <div class="col-md-7">
                                <select id="tenant_house_id" class="form-control select2 @error('tenant_house_id') is-invalid @enderror" name="tenant_house_id" data-placeholder="Choose one" required>
                                    <option value="0">None</option>
                                </select>
                                <div id="slErrorContainer"></div>
        
                                @error('tenant_house_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="type" class="col-md-3 col-form-label text-md-end">{{ __('Payment Method') }}</label>
        
                            <div class="col-md-7">
                                <select id="paymentType" class="form-control" name="type" data-placeholder="Choose one" required>
                                    @foreach($types as $key => $type)
                                    <option value="{{ $key }}" {{ $key == 0 ? 'disabled selected' : '' }}>{{ $type }}</option>
                                    @endforeach
                                </select>
                                @error('type')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                    </div>
                    <div class="col-md-4">
                        <div class="row mb-3">
                            <label for="year" class="col-md-3 col-form-label text-md-end">{{ __('Year') }}</label>
        
                            <div class="col-md-7">
                                <input id="year" type="number" class="form-control @error('year') is-invalid @enderror" name="year" value="{{ date('Y') }}" required placeholder="{{ __('Year') }}">
        
                                @error('year')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        

                        <div class="row mb-3">
                            <label for="month" class="col-md-3 col-form-label text-md-end">{{ __('Month') }}</label>
        
                            <div class="col-md-7">
                                <select id="month" class="form-control select2" name="month" data-placeholder="Choose one" required>
                                    @foreach($months as $key => $month)
                                    <option value="{{ $key }}">{{ $month }}</option>
                                    @endforeach
                                </select>
                                @error('month')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                    </div>
                    <div class="col-md-4">
                        <div class="row mb-3">
                            <label for="sf" class="col-md-3 col-form-label text-md-end">{{ __('Square Feet') }}</label>
        
                            <div class="col-md-7">
                                <input id="sf" type="number" class="form-control @error('sf') is-invalid @enderror" name="sf" value="0.00" required placeholder="{{ __('Square Feet') }}" readonly>
        
                                @error('sf')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="ppsf" class="col-md-3 col-form-label text-md-end">{{ __('Price/Square Feet') }}</label>
        
                            <div class="col-md-7">
                                <input id="ppsf" type="number" class="form-control @error('ppsf') is-invalid @enderror" name="ppsf" value="0.00" required placeholder="{{ __('Price/Square Feet') }}" readonly>
        
                                @error('ppsf')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row mb-3">
                            
                            <label for="button" class="col-md-1 col-form-label text-md-end"></label>
                            <div class="col-md-12">
                                {!! stickyAlert() !!}
                                {!! htmlAlert() !!}
                                <table id="{{ $unique }}" class="table table-bordered row-bordered cell-bordered" width="100%">
                                    <thead>
                                        <tr>
                                            <th class="wd-5p"></th>
                                            <th class="wd-5p">Sl.</th>
                                            <th class="wd-10p">Rent Head</th>
                                            <th class="wd-10p">Month/Year</th>
                                            <th class="wd-5p">SF</th>
                                            <th class="wd-5p">P.P.S.F</th>
                                            <th class="wd-5p">Unit</th>
                                            <th class="wd-5p">P.P.U</th>
                                            <th class="wd-5p">Amount</th>
                                            <th class="wd-5p">Status</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th class="wd-5p"></th>
                                            <th class="wd-5p">Sl.</th>
                                            <th class="wd-10p">Rent Head</th>
                                            <th class="wd-10p">Month/Year</th>
                                            <th class="wd-5p">SF</th>
                                            <th class="wd-5p">P.P.S.F</th>
                                            <th class="wd-5p">Unit</th>
                                            <th class="wd-5p">P.P.U</th>
                                            <th class="wd-5p">Amount</th>
                                            <th class="wd-5p">Status</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="button" class="col-md-1 col-form-label text-md-end"></label>
                            <div class="col-md-12">
                                <table id="summary-{{ $unique }}" class="table" width="100%">
                                    <thead>
                                        <tr>
                                            <th class="wd-5p"></th>
                                            <th class="wd-10p"></th>
                                            <th class="wd-5p"></th>
                                            <th class="wd-5p"></th>
                                            <th class="wd-5p"></th>
                                            <th class="wd-5p"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="5" align="right" class="wd-5p" style="vertical-align: middle;">Arrear</td>
                                            <td colspan="1" align="right" class="wd-10p">
                                                <strong id="arrear{{ $unique }}">0.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" align="right" class="wd-5p" style="vertical-align: middle;">Total</td>
                                            <td colspan="1" align="right" class="wd-10p">
                                                <strong id="amount{{ $unique }}">0.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" align="right" class="wd-5p" style="vertical-align: middle;">Paid</td>
                                            <td colspan="1" align="right" class="wd-10p">
                                                <strong id="paid{{ $unique }}">0.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" align="right" class="wd-5p" style="vertical-align: middle;">Due</td>
                                            <td colspan="1" align="right" class="wd-10p">
                                                <strong id="due{{ $unique }}">0.00</strong>
                                            </td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row mb-3">
                            {{-- <label for="button" class="col-md-1 col-form-label text-md-end"></label> --}}
                            <div class="col-md-2">
                                <button type="button" onclick="paymentRentSubmit()" class="btn btn-primary">
                                    {{ __('Save') }}
                                    <span id="spinner" class="spinner-border-sm " role="status" aria-hidden="true"></span>
                                </button>
                                <button type="reset" class="btn btn-warning">
                                    {{ __('Reset') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                                  
            </form>
        </div>
        <div class="card-footer bd-t tx-right">
            {!! poweredBy() !!}
        </div>
    </div>
</div>
<!-- row -->
@endsection
@section('script')
@include('rent.payments.ajax.create')
@endsection