@extends('_version_02.commons.layouts.admin')

@section('content')
{!! Form::model($model, ['class'=>'form-horizontal']) !!}
@include('_version_02.commons.layouts.partials._alert')
@php
    $savedIds = App\Support\SubsidyRecipientSelection::decode($model->subsidize_tenant_id ?: '[]');
    $selectionError = null;
    $ids = $savedIds;
    if (old('subsidize_tenant_ids_json') !== null || old('subsidize_tenant_count') !== null || old('subsidy_form_complete') !== null) {
        try {
            $ids = App\Support\SubsidyRecipientSelection::fromInput(array(
                'subsidize_tenant_ids_json' => old('subsidize_tenant_ids_json'),
                'subsidize_tenant_count' => old('subsidize_tenant_count'),
                'subsidy_form_complete' => old('subsidy_form_complete'),
            ));
        } catch (\InvalidArgumentException $e) {
            $selectionError = 'The previous selection was incomplete. The saved selection is shown below.';
        }
    }
    // Render only the canonical IDs. Directory data is loaded in bounded AJAX pages.
    $selectedRoomType = old('room_type', $model->room_type ?: 'single');
    if (!in_array($selectedRoomType, array('single', 'twin', 'quad'), true)) { $selectedRoomType = 'single'; }
    $revision = $model->exists ? App\Support\SubsidyRecipientSelection::revision($model->getAttributes()) : 'new';
@endphp
<input type="hidden" name="subsidy_revision" value="{{ old('subsidy_revision', $revision) }}">
@if($selectionError)<div class="alert alert-warning">{{ $selectionError }}</div>@endif

<section class="hk-sec-wrapper">
    <h5 class="hk-sec-title">{{ App\Language::trans('Information') }}</h5><hr>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group{{ $errors->has('status') ? ' has-error' : '' }}">
                {!! Form::label('status', App\Language::trans('Status'), ['class'=>'control-label col-md-4']) !!}
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="status_on" name="status" value="1" {{ old('status', $model->status ?? 1) == 1 ? 'checked' : '' }} class="custom-control-input">
                                <label class="custom-control-label" for="status_on">{{ App\ExtendModel::status_true_word() }}</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="status_off" name="status" value="0" {{ old('status', $model->status ?? 1) == 0 ? 'checked' : '' }} class="custom-control-input">
                                <label class="custom-control-label" for="status_off">{{ App\ExtendModel::status_false_word() }}</label>
                            </div>
                        </div>
                    </div>
                    {!! $errors->first('status', '<label for="status" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
    </div>

    {{-- 
    <div class="row">
        <div class="col-md-6">
            <div class="form-group{{ $errors->has('is_sudsidy_distribute_directly') ? ' has-error' : '' }}">
                {!! Form::label('is_sudsidy_distribute_directly', App\Language::trans('Is Distribute Complementary Directly For First Month ?'), ['class'=>'control-label col-md-12']) !!}
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="is_sudsidy_distribute_directly_on" name="is_sudsidy_distribute_directly" value="1" class="custom-control-input">
                                <label class="custom-control-label" for="is_sudsidy_distribute_directly_on">{{ App\ExtendModel::status_true_word() }}</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="is_sudsidy_distribute_directly_off" name="is_sudsidy_distribute_directly" value="0" class="custom-control-input">
                                <label class="custom-control-label" for="is_sudsidy_distribute_directly_off">{{ App\ExtendModel::status_false_word() }}</label>
                            </div>
                        </div>
                    </div>
                    {!! $errors->first('is_sudsidy_distribute_directly', '<label for="is_sudsidy_distribute_directly" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
    </div>
    --}}

    <div class="row">
        <div class="col-md-6">
            <div class="form-group{{ $errors->has('code') ? ' has-error' : '' }}">
                {!! Form::label('code', App\Language::trans('Code'), ['class'=>'control-label col-md-4']) !!}
                <div class="col-md-8">
                    {!! Form::text('code', null, ['class'=>'form-control']) !!}
                    {!! $errors->first('code', '<label for="code" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                {!! Form::label('text', App\Language::trans('Name'), ['class'=>'control-label col-md-4']) !!}
                <div class="col-md-8">
                    {!! Form::text('name', null, ['class'=>'form-control']) !!}
                    {!! $errors->first('name', '<label for="name" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-6">
            <div class="form-group{{ $errors->has('amount') ? ' has-error' : '' }}">
                {!! Form::label('amount', App\Language::trans('Amount'), ['class'=>'control-label col-md-4']) !!}
                <div class="col-md-8">
                    {!! Form::number('amount', null, ['min'=>1,'max'=>9999,'step'=>'0.01','class'=>'form-control']) !!}
                    {!! $errors->first('amount', '<label for="amount" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group{{ $errors->has('implementation_date') ? ' has-error' : '' }}">
                {!! Form::label('implementation_date', App\Language::trans('Implementation Date'), ['class'=>'control-label col-md-4']) !!}
                <div class="col-md-8">
                    {!! Form::select('implementation_date', App\Setting::select_days_combobox(), null, ['class'=>'form-control']) !!}
                    {!! $errors->first('implementation_date', '<label for="month_ended" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
    </div>

    @php
        $starting_date = old('starting_date', $model->starting_date ? date('m-Y' , strtotime($model->starting_date)) : '');
        $ending_date   = old('ending_date', $model->ending_date ? date('m-Y' , strtotime($model->ending_date)) : '');
        $startingOptions = App\PowerMeterModel\MeterInvoice::previous_one_year_combobox();
        $endingOptions = App\PowerMeterModel\MeterInvoice::next_one_year_combobox();
        if (preg_match('/^(0[1-9]|1[0-2])-[0-9]{4}$/D', $starting_date)) { $startingOptions[$starting_date] = $starting_date; }
        if (preg_match('/^(0[1-9]|1[0-2])-[0-9]{4}$/D', $ending_date)) { $endingOptions[$ending_date] = $ending_date; }

    @endphp
    <input type="hidden" id="end_date_value" value="{{ $ending_date }}">
    <input type="hidden" id="start_date_value" value="{{ $starting_date }}">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group{{ $errors->has('starting_date') ? ' has-error' : '' }}">
                {!! Form::label('starting_date', App\Language::trans('From Month'), ['class'=>'control-label col-md-4']) !!}
                <div class="col-md-8">
                    {!! Form::select('starting_date', $startingOptions, $starting_date ?: null, ['class'=>'form-control','autofocus','id'=>'starting_date','aria-describedby'=>'subsidy-starting-error']) !!}
                    <span id="subsidy-starting-error" class="help-block error" role="alert" style="display:none"></span>
                    {!! $errors->first('starting_date', '<label for="starting_date" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group{{ $errors->has('ending_date') ? ' has-error' : '' }}">
                {!! Form::label('ending_date', App\Language::trans('To Month'), ['class'=>'control-label col-md-4']) !!}
                <div class="col-md-8">
                    {!! Form::select('ending_date', $endingOptions, $ending_date ?: null, ['class'=>'form-control','id'=>'ending_date','aria-describedby'=>'subsidy-ending-error']) !!}
                    <span id="subsidy-ending-error" class="help-block error" role="alert" style="display:none"></span>
                    {!! $errors->first('ending_date', '<label for="ending_date" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
    </div>

    <h5 class="hk-sec-title mt-20">{{ App\Language::trans('Beneficial Selection') }}</h5><hr>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group{{ $errors->has('room_type') ? ' has-error' : '' }}">
                <div class="col-md-4 subsidy-room-type-label">
                    {!! Form::label('room_type', App\Language::trans('Room Type'), ['class'=>'control-label']) !!}
                    <span id="subsidy-room-type-help" class="subsidy-room-type-help">
                        <button type="button" class="subsidy-info-toggle" aria-label="About room type and tenant selections" aria-expanded="false" aria-controls="subsidy-room-type-info">i</button>
                        <span id="subsidy-room-type-info" class="subsidy-info-panel" role="note" style="display:none">
                            <button type="button" class="subsidy-info-close" aria-label="Close room type information">&times;</button>
                            <strong>Room type and selections</strong>
                            <span>Changing room type keeps your selections. Unselect a tenant explicitly to remove them. <strong id="subsidy-selection-count">{{ count($ids) }}</strong> tenants selected across all room types.</span>
                            <span>Newly added tenants must belong to the chosen room type. Previously saved tenants remain selected until you remove them.</span>
                        </span>
                    </span>
                </div>
                <div class="col-md-8">
                    {!! Form::select('room_type', App\Setting::room_type_combobox(), $selectedRoomType, ['class'=>'form-control','autofocus','id'=>'room_type']) !!}
                    {!! $errors->first('room_type', '<label for="room_type" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
    </div>

    {!! $errors->first('subsidize_tenant_id', '<div class="alert alert-danger">:message</div>') !!}

    <div class="row">
        <div class="col-md-12">
            <div class="form-group{{ $errors->has('subsidize_tenant_id') ? ' has-error' : '' }}">
                <label for="subsidy-recipient-toggle" class="control-label col-md-12">{{ App\Language::trans('Subsidize Tenant List') }}</label>
                <div class="col-sm-10" id="subsidy-recipient-picker"
                     data-options-url="{{ action('UMeterSubsidiariesController@getTenantOptions') }}"
                     data-names-url="{{ action('UMeterSubsidiariesController@getTenantNamesByIds') }}">
                    <button type="button" id="subsidy-recipient-toggle" class="form-control subsidy-recipient-toggle" data-action="toggle" aria-expanded="false" aria-controls="subsidy-recipient-panel">
                        <span data-role="summary">{{ count($ids) }} tenants selected</span><span class="caret" aria-hidden="true"></span>
                    </button>
                    <div id="subsidy-recipient-panel" class="subsidy-recipient-panel" data-role="panel" style="display:none">
                        <div class="subsidy-recipient-toolbar">
                            <div class="btn-group" role="group" aria-label="Tenant list">
                                <button type="button" class="btn btn-light btn-sm active" data-action="directory" aria-pressed="true">Available tenants</button>
                                <button type="button" class="btn btn-light btn-sm" data-action="selected" aria-pressed="false">Selected (<span data-role="selected-count">{{ count($ids) }}</span>)</button>
                            </div>
                            <label class="sr-only" for="subsidy-recipient-search">Search tenants by name or member ID</label>
                            <input type="search" id="subsidy-recipient-search" class="form-control" data-role="search" placeholder="Search name or member ID" autocomplete="off">
                        </div>
                        <div class="subsidy-recipient-actions">
                            <button type="button" class="btn btn-light btn-sm" data-action="select-page" disabled>Select this page</button>
                            <button type="button" class="btn btn-light btn-sm" data-action="remove-page" disabled>Remove selected on this page</button>
                        </div>
                        <div class="alert alert-warning" data-role="error" role="alert" style="display:none"></div>
                        <button type="button" class="btn btn-light btn-sm" data-action="retry" style="display:none">Retry loading</button>
                        <p class="help-block text-muted" data-role="names-status" style="display:none"></p>
                        <div class="subsidy-recipient-rows" data-role="rows" aria-busy="false"></div>
                        <div class="subsidy-recipient-pagination">
                            <span data-role="status" role="status" aria-live="polite"></span>
                            <div class="btn-group" role="group" aria-label="Tenant pages">
                                <button type="button" class="btn btn-light btn-sm" data-action="previous" disabled>Previous</button>
                                <button type="button" class="btn btn-light btn-sm" data-action="next" disabled>Next</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">       
        <div class="col-md-12">
            <div class="form-group{{ $errors->has('remark') ? ' has-error' : '' }}">
                {!! Form::label('remark', App\Language::trans('Remark'), ['class'=>'control-label col-md-12']) !!}
                <div class="col-md-12">
                    {!! Form::text('remark', null, ['class'=>'form-control']) !!}
                    {!! $errors->first('remark', '<label for="remark" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
    </div>
</section>

@include('_version_02.commons.layouts.partials._form_floaring_footer_standard')

{{-- One JSON input avoids PHP max_input_vars truncating large selections. --}}
<input type="hidden" id="subsidy-recipients-json" name="subsidize_tenant_ids_json" value="">
<input type="hidden" id="subsidy-recipients-count" name="subsidize_tenant_count" value="">
<input type="hidden" id="subsidy-form-complete" name="subsidy_form_complete" value="0">
<noscript><div class="alert alert-danger">Enable JavaScript and reload before saving this subsidy.</div></noscript>

{!! Form::close() !!}
@stop

@section('script')
<style>
    .subsidy-room-type-label { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
    .subsidy-room-type-label > label { margin-bottom:0; }
    .subsidy-room-type-help { position:relative; display:inline-block; line-height:1.5; }
    .subsidy-info-toggle { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; padding:0; border:1px solid #607d8b; border-radius:50%; background:#fff; color:#426475; font-weight:bold; font-family:Georgia,serif; cursor:pointer; }
    .subsidy-info-toggle:focus { outline:2px solid #00a1b8; outline-offset:2px; }
    .subsidy-info-panel { position:absolute; top:27px; left:-82px; z-index:1050; width:340px; max-width:calc(100vw - 55px); padding:13px 15px; border:1px solid #d6d9da; border-radius:4px; background:#fff; box-shadow:0 3px 12px rgba(0,0,0,.15); color:#536878; font-size:13px; font-weight:normal; }
    .subsidy-info-panel > strong { display:block; padding-right:20px; margin-bottom:7px; color:#324148; }
    .subsidy-info-panel > span { display:block; margin-top:6px; }
    .subsidy-info-close { position:absolute; top:5px; right:7px; padding:2px 5px; border:0; background:transparent; color:#536878; font-size:20px; cursor:pointer; }
    #subsidy-starting-error, #subsidy-ending-error { color:#c0392b; font-size:13px; margin-top:5px; }
    #subsidy-recipient-picker .subsidy-recipient-toggle { display:flex; align-items:center; justify-content:space-between; height:auto; min-height:38px; text-align:left; }
    #subsidy-recipient-picker .subsidy-recipient-panel { margin-top:4px; padding:12px; border:1px solid #d6d9da; border-radius:4px; background:#fff; }
    #subsidy-recipient-picker .subsidy-recipient-toolbar .form-control { margin-top:10px; }
    #subsidy-recipient-picker .subsidy-recipient-actions { margin:10px 0; }
    #subsidy-recipient-picker .subsidy-recipient-actions .btn { margin-bottom:4px; }
    #subsidy-recipient-picker .subsidy-recipient-rows { max-height:320px; overflow-y:auto; border-top:1px solid #eee; border-bottom:1px solid #eee; }
    #subsidy-recipient-picker .subsidy-tenant-row { display:flex; align-items:flex-start; margin:0; padding:9px 6px; font-weight:normal; cursor:pointer; border-bottom:1px solid #f3f3f3; }
    #subsidy-recipient-picker .subsidy-tenant-row:hover { background:#f5f7f8; }
    #subsidy-recipient-picker .subsidy-tenant-row input { flex:none; margin-top:4px; margin-right:10px; }
    #subsidy-recipient-picker .subsidy-tenant-row span { overflow-wrap:break-word; min-width:0; }
    #subsidy-recipient-picker .subsidy-recipient-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:10px; }
    #subsidy-recipient-picker .subsidy-empty { padding:15px 6px; margin:0; }
    #subsidy-recipient-picker [data-role="names-status"] { margin:8px 0; font-size:12px; }
</style>
<script type="application/json" id="subsidy-recipient-initial-ids">{!! json_encode(array_values($ids), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
<script type="text/javascript">
    // The shared footer still calls the old three-widget toggler after this section.
    // This page handles room changes through the single paged control instead.
    window.init_room_type_subsidize_handle = function () {};
    window.init_meter_susidy_ui = function () {};
    $(function () {
        var starting_date_value = $('#start_date_value').val();
        var ending_date_value = $('#end_date_value').val();
        if (starting_date_value) { $('#starting_date').val(starting_date_value); }
        if (ending_date_value) { $('#ending_date').val(ending_date_value); }
        if ($.fn.datepicker) { $('.input-daterange').datepicker({ format: 'dd-mm-yyyy' }); }
    });
</script>
<script src="{{ asset('js/subsidy-recipient-picker.js') }}?v=20260922-form2"></script>
@stop