@extends('layouts.default')

@section('content')

    <!--begin::Dashboard-->
    <!--begin::Row-->
    <div class="row">

        <div class="col-lg-12 col-xxl-4 order-1 order-xxl-2">
            <!--begin::Card-->
            <div class="card card-custom gutter-b example example-compact">
                <div class="card-header">
                    <h3 class="card-title">Service Charge Detail</h3>
                </div>

                <div class="card-body">
                    <div class="mb-1">

                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Building:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control form-control-solid" value="{{$serviceCharge->building->name}}"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Flat Number:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control form-control-solid" value="{{$serviceCharge->flat->flat_number}}"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Year & Month:</label>
                            <div class="col-lg-3">
                                <input type="text" class="form-control form-control-solid" value="{{getMonth($charge_month)}}"  />
                            </div>
                            <div class="col-lg-3">
                                <input type="text" class="form-control form-control-solid" value="{{$charge_year}}"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Amount Receive Date:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control form-control-solid" value="{{$serviceCharge->received_date}}"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Amount:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control form-control-solid" value="{{$serviceCharge->amount}}"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Paid By:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control form-control-solid" value="{{$serviceCharge->paid_by}}"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Memo Number:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control form-control-solid" value="{{$serviceCharge->memo_number}}"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Remarks:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control form-control-solid" value="{{$serviceCharge->remarks}}"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">status:</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control form-control-solid" value="{{$serviceCharge->status}}"  />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Attachment:</label>
                            <div class="col-lg-6">
                                @if(!empty($serviceCharge->attachment))
                                    <a href="{{route('service-charges.download', $token)}}">Download</a>
                                @endif
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--end::Card-->
        </div>
    </div>
    <!--end::Row-->


@endsection

@push('scripts')
    <script>
        $('#building').change(function (){
            if ($(this).val() != ''){
                buildingId = $(this).val();
                $.get( "{{route('flats.list')}}", {building_id : buildingId}, function(data) {
                    if (data != '') {
                        optionHtml = '<option value="">--Please Select--</option>';
                        for(i in data) {
                            row = data[i];
                            optionHtml += '<option value="'+i+'">'+row+'</option>';
                        }
                        $("#flat-id").html(optionHtml);
                    }
                });
            }

        });

        $('#flat-id').change(function (){
            if ($(this).val() != ''){
                flatId = $(this).val();
                $.get( '{{url('flats/get-flat')}}'+'/'+flatId, function(data) {
                    flatHtml = '';
                    if (data != '') {
                        flatHtml = '<p>Flat Number: '+data.flat_number+'</p>';
                        flatHtml += '<p>Flat Owner: '+data.owner_name+'</p>';
                        flatHtml += '<p>Floor: '+data.floor+'</p>';
                    }

                    $('#flat-info').html(flatHtml);
                });
            }



        });
    </script>
@endpush