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

@section('content')
{!! Form::model($model, ['class'=>'form-horizontal']) !!}
@include('_version_02.commons.layouts.partials._alert')

@php
    $starting_date = $model->starting_date ? date('m-Y', strtotime($model->starting_date)) : '';
    $ending_date   = $model->ending_date   ? date('m-Y', strtotime($model->ending_date))   : '';

    $roomType = old('room_type', $model->room_type ?? 'single');

    $ids = strlen($model->subsidize_tenant_id ?? '') > 1 ? json_decode($model->subsidize_tenant_id, true) : [];
    if (!is_array($ids)) $ids = [];
    $ids = array_values(array_map('strval', $ids)); // ALWAYS string ids

    $tenantOptionsUrl = action('UMeterSubsidiariesController@getTenantOptions');
@endphp

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

<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>

    {{-- Code + Name --}}
    <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>

    {{-- Amount + Implementation Date --}}
    <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>

    {{-- Month range --}}
    <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', App\PowerMeterModel\MeterInvoice::previous_one_year_combobox(), null, ['class'=>'form-control','autofocus','id'=>'starting_date']) !!}
                    {!! $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', App\PowerMeterModel\MeterInvoice::next_one_year_combobox(), null, ['class'=>'form-control','id'=>'ending_date']) !!}
                    {!! $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>

    {{-- Room Type --}}
    <div class="row">
        <div class="col-md-12">
            <div class="form-group{{ $errors->has('room_type') ? ' has-error' : '' }}">
                {!! Form::label('room_type', App\Language::trans('Room Type'), ['class'=>'control-label col-md-4']) !!}
                <div class="col-md-8">
                    {!! Form::select(
                        'room_type',
                        App\Setting::room_type_combobox(),
                        $roomType,
                        ['class'=>'form-control','autofocus','onchange'=>'init_room_type_subsidize_handle(this)','id'=>'room_type']
                    ) !!}
                    {!! $errors->first('room_type', '<label for="room_type" class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
    </div>

    {{-- Room type message row --}}
    <div class="row" id="room_type_msg_row" style="display:none;">
        <div class="col-md-12">
            <div class="alert alert-info" style="padding:10px 12px; margin:0 0 12px 0;">
                <span id="room_type_msg_text">Changing room type...</span>
            </div>
        </div>
    </div>

    {{-- Subsidize Tenant List --}}
    <div class="row">
        <div class="col-md-12">
            <div class="form-group {!! $errors->first('subsidize_tenant_id') ? 'has-error' : '' !!}">
                <label class="control-label col-md-12">{{ App\Language::trans('Subsidize Tenant List') }}</label>

                <div class="col-sm-10" id="tenant_box" style="position:relative;">

                    <div id="tenant_error"
                         class="alert alert-danger"
                         style="display:none; padding:12px 12px; margin-bottom:12px; line-height:1.4;">
                        Failed to load tenant list. Please try again.
                    </div>

                    <div id="tenant_loader"
                         style="display:none; position:absolute; inset:0; background:rgba(255,255,255,0.75); z-index:10; border:1px solid rgba(0,0,0,.05); border-radius:4px;">
                        <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;">
                            <i class="fa fa-spinner fa-spin" style="font-size:20px;"></i>
                            <div id="tenant_loader_text" style="margin-top:8px; font-size:12px; color:#555; line-height:1.4;">
                                Loading tenant list...
                            </div>
                        </div>
                    </div>

                    <select id="subsidize_tenant_id"
                            name="subsidize_tenant_id[]"
                            multiple="multiple"
                            style="width:100%"
                            class="form-control"></select>

                    {!! $errors->first('subsidize_tenant_id', '<label class="help-block error">:message</label>') !!}
                </div>
            </div>
        </div>
    </div>

    {{-- Remark --}}
    <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')

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

@section('script')
<script type="text/javascript">
    window.__tenantOptionsUrl = @json($tenantOptionsUrl);
    window.__initialRoomType  = @json($roomType);
    window.__initialIds       = @json($ids);

    window.__tenantReqToken   = 0;
    window.__tenantLoading    = false;

    function restoreMonthValues(){
        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);
    }

    function setFooterSaveDisabled(disabled){
        // cover both button + input submit
        var $btn = $('button[type="submit"], input[type="submit"]').filter(':visible');
        $btn.prop('disabled', !!disabled);

        // fallback for <a> style buttons
        $('a.btn').filter(function(){
            return ($(this).text() || '').trim().toLowerCase() === 'save';
        }).toggleClass('disabled', !!disabled)
          .attr('aria-disabled', !!disabled)
          .css('pointer-events', disabled ? 'none' : '');
    }

    function showRoomTypeMsg(msg){
        $('#room_type_msg_text').text(msg || 'Changing room type...');
        $('#room_type_msg_row').show();
    }
    function hideRoomTypeMsg(){
        $('#room_type_msg_row').hide();
    }

    function showTenantLoader(text){
        $('#tenant_error').hide();
        $('#tenant_loader_text').text(text || 'Loading tenant list...');
        $('#tenant_loader').show();

        window.__tenantLoading = true;
        setFooterSaveDisabled(true);

        // disable inputs while loading
        $('#subsidize_tenant_id').prop('disabled', true);
        $('#room_type').prop('disabled', true);
    }

    function hideTenantLoader(){
        $('#tenant_loader').hide();

        window.__tenantLoading = false;
        setFooterSaveDisabled(false);

        $('#subsidize_tenant_id').prop('disabled', false);
        $('#room_type').prop('disabled', false);
    }

    function showTenantError(msg){
        $('#tenant_error').text(msg || 'Failed to load tenant list. Please try again.').show();
    }

    function destroyMultiSelect(){
        try { $('#subsidize_tenant_id').multiselect('destroy'); } catch (e) {}
    }

    /**
     * ✅ Fix 1: Always show checkbox (tick/untick) for both initial + roomType change
     * ✅ Fix 2: Click anywhere on the "select/button" will open dropdown (not only click on selected text)
     *          and prevent auto scroll-to-bottom when clicking selected items
     */
    function initMultiSelect(){
        destroyMultiSelect();

        $('#subsidize_tenant_id').multiselect({
            columns: 1,
            search : true,
            showCheckbox: true, // IMPORTANT: always show tick box
            texts: {
                placeholder     : 'Select options',
                search          : 'Search by name...',
                selectedOptions : ' selected',
                selectAll       : 'Select all',
                unselectAll     : 'Unselect all',
                noneSelected    : 'None Selected'
            },
            selectAll: true,
            selectGroup: true,
            minHeight: 260,
            maxHeight: null,
            maxWidth: null,
            maxPlaceholderWidth: null,
            maxPlaceholderOpts: 10,
            optionAttributes: [],
            minSelect: false,
            maxSelect: false
        });

        // some versions need extra refresh
        try { $('#subsidize_tenant_id').multiselect('reload'); } catch (e) {}
        try { $('#subsidize_tenant_id').multiselect('rebuild'); } catch (e) {}

        // 🔧 UX FIX: ensure clicking on button / selected area opens dropdown (and does NOT jump to bottom)
        bindMultiselectOpenBehavior();
        ensureSearchUsable();
    }

    function bindMultiselectOpenBehavior(){
        // plugin usually wraps with .ms-options-wrap and a button inside
        var $wrap = $('#tenant_box').find('.ms-options-wrap');
        if (!$wrap.length) return;

        var $btn = $wrap.find('> button');
        var $panel = $wrap.find('> .ms-options');

        // Remove old bindings (avoid duplicate after rebuild)
        $btn.off('click.__msOpenFix');
        $wrap.off('mousedown.__msOpenFix');

        // 1) Clicking the button always opens dropdown at current scroll position
        $btn.on('click.__msOpenFix', function(){
            // after plugin toggles, keep panel at top (avoid auto-scroll to bottom)
            setTimeout(function(){
                if ($panel.is(':visible')) {
                    try { $panel.scrollTop(0); } catch(e){}
                    // focus search for fast typing
                    var $s = $panel.find('input[type="search"], input.ms-search');
                    if ($s.length) $s.focus();
                }
            }, 0);
        });

        // 2) Prevent “mousedown on selected text” causing strange scroll / focus jump
        //    (Allow normal clicking, but prevent browser from selecting text and jumping)
        $wrap.on('mousedown.__msOpenFix', 'button, .ms-options, .ms-search, input', function(e){
            // do nothing special; just keep default
        });

        // 3) When dropdown is open, clicking on already-selected option should NOT scroll the page
        //    (Some browsers jump when focusing hidden inputs)
        $panel.off('click.__msOptionFix').on('click.__msOptionFix', 'label, input[type="checkbox"]', function(e){
            e.stopPropagation(); // keep within panel
        });
    }

    function ensureSearchUsable(){
        setTimeout(function(){
            var $wrap = $('#tenant_box').find('.ms-options-wrap');
            if (!$wrap.length) return;

            var $panel = $wrap.find('> .ms-options');
            var $search = $panel.find('input[type="search"], input.ms-search');

            // If search missing, try one more rebuild
            if (!$search.length) {
                try { $('#subsidize_tenant_id').multiselect('rebuild'); } catch (e) {}
                $wrap = $('#tenant_box').find('.ms-options-wrap');
                $panel = $wrap.find('> .ms-options');
                $search = $panel.find('input[type="search"], input.ms-search');
            }
        }, 50);
    }

    function applySelected($select, selectedIds){
        selectedIds = (selectedIds || []).map(String);

        $select.find('option').prop('selected', false);

        selectedIds.forEach(function(id){
            $select.find('option[value="' + id.replace(/"/g, '\\"') + '"]').prop('selected', true);
        });

        $select.val(selectedIds);
    }

    function loadTenantOptions(roomType, selectedIds, opts){
        opts = opts || {};
        selectedIds = (selectedIds || []).map(String);

        var $select = $('#subsidize_tenant_id');
        var token = ++window.__tenantReqToken;

        if (opts.reason === 'change_room_type') {
            showRoomTypeMsg('Changing room type… Loading tenant list.');
        } else {
            hideRoomTypeMsg();
        }

        showTenantLoader('Loading tenant list...');
        destroyMultiSelect();

        $.ajax({
            url: window.__tenantOptionsUrl,
            method: 'GET',
            dataType: 'json',
            data: { room_type: roomType },
            success: function(items){
                if (token !== window.__tenantReqToken) return;

                if (!Array.isArray(items)) items = [];

                showTenantLoader('Rendering options...');
                $select.empty();

                items.forEach(function(item){
                    var id = String(item.id ?? '');
                    var text = item.text ?? item.name ?? id;
                    if (!id) return;
                    $select.append(new Option(text, id, false, false));
                });

                showTenantLoader('Applying selected tenant(s)...');
                applySelected($select, selectedIds);

                showTenantLoader('Preparing multi-select...');
                initMultiSelect();

                // ensure UI reflects the selected state + tick boxes
                try { $('#subsidize_tenant_id').multiselect('reload'); } catch (e) {}
                try { $('#subsidize_tenant_id').multiselect('rebuild'); } catch (e) {}
                bindMultiselectOpenBehavior();

                hideTenantLoader();
                hideRoomTypeMsg();

                console.log('[Tenant] roomType=', roomType,
                    'options=', $select.find('option').length,
                    'selected=', $select.val()
                );
            },
            error: function(xhr){
                if (token !== window.__tenantReqToken) return;

                hideTenantLoader();
                showTenantError('Failed to load tenant list (HTTP ' + xhr.status + ').');
                hideRoomTypeMsg();

                console.error('[Tenant] Ajax failed', xhr.status, xhr.responseText);

                // keep UI usable even if failed
                initMultiSelect();
                bindMultiselectOpenBehavior();
                $('#room_type').prop('disabled', false);
            }
        });
    }

    function init_room_type_subsidize_handle(el){
        var roomType = $(el).val() || 'single';

        // keep current selected before reload (if same ids exist across types)
        var currentSelected = $('#subsidize_tenant_id').val() || [];

        $('#room_type').prop('disabled', true);
        loadTenantOptions(roomType, currentSelected, {reason:'change_room_type'});
    }

    $(function () {
        restoreMonthValues();
        $(".input-daterange").datepicker({ format: "dd-mm-yyyy" });

        // disable save until initial tenant list loaded
        setFooterSaveDisabled(true);

        // initial load
        loadTenantOptions(window.__initialRoomType, window.__initialIds, {reason:'initial'});
    });
</script>
@stop