@extends('layouts.app')

@section('title', __('accounting-reports::lang.add_cheque_book'))

@section('content')
<section class="content-header">
    <h1>@lang('accounting-reports::lang.add_cheque_book')</h1>
</section>

<section class="content">
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            {{ session('error') }}
        </div>
    @endif
    
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    
    {!! Form::open(['url' => route('accounting-reports.cheque-books.store'), 'method' => 'post', 'id' => 'add_cheque_book_form']) !!}
    <div class="box box-solid">
        <div class="box-header with-border">
            <h3 class="box-title">@lang('accounting-reports::lang.cheque_book_details')</h3>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('account_id', __('accounting-reports::lang.bank_account') . ':*') !!}
                        {!! Form::select('account_id', $accounts, $selectedAccountId, [
                            'class' => 'form-control select2', 
                            'placeholder' => __('messages.please_select'), 
                            'style' => 'width:100%', 
                            'id' => 'account_id'
                        ]) !!}
                        <span class="help-block text-danger" id="account_id_error" style="display:none;"></span>
                        @error('account_id')
                            <span class="help-block text-danger">{{ $message }}</span>
                        @enderror
                        @if(empty($accounts))
                            <span class="help-block text-warning">
                                <i class="fa fa-exclamation-triangle"></i> 
                                @lang('accounting-reports::lang.no_bank_accounts_found')
                            </span>
                        @endif
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('book_name', __('accounting-reports::lang.book_name') . ':*') !!}
                        {!! Form::text('book_name', old('book_name'), ['class' => 'form-control', 'placeholder' => __('accounting-reports::lang.book_name')]) !!}
                        <p class="help-block">@lang('accounting-reports::lang.example'): Book 1, Book A, etc.</p>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('book_number', __('accounting-reports::lang.book_number') . ':') !!}
                        {!! Form::text('book_number', old('book_number'), ['class' => 'form-control', 'placeholder' => __('accounting-reports::lang.book_number')]) !!}
                        <p class="help-block">@lang('accounting-reports::lang.book_number_from_bank')</p>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                        {!! Form::select('location_id', $locations, old('location_id'), [
                            'class' => 'form-control select2', 
                            'placeholder' => __('messages.please_select'), 
                            'style' => 'width:100%'
                        ]) !!}
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('start_cheque_no', __('accounting-reports::lang.start_cheque_no') . ':*') !!}
                        {!! Form::text('start_cheque_no', old('start_cheque_no'), [
                            'class' => 'form-control', 
                            'placeholder' => __('accounting-reports::lang.example') . ': 0001', 
                            'id' => 'start_cheque_no'
                        ]) !!}
                        <p class="help-block">@lang('accounting-reports::lang.starting_cheque_number')</p>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('end_cheque_no', __('accounting-reports::lang.end_cheque_no') . ':*') !!}
                        {!! Form::text('end_cheque_no', old('end_cheque_no'), [
                            'class' => 'form-control', 
                            'placeholder' => __('accounting-reports::lang.example') . ': 0030', 
                            'id' => 'end_cheque_no'
                        ]) !!}
                        <p class="help-block">@lang('accounting-reports::lang.ending_cheque_number')</p>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="alert alert-info" id="total_cheques_info" style="display: none;">
                        <strong>@lang('accounting-reports::lang.total_cheques'):</strong> <span id="total_cheques_count">0</span>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('issue_date', __('accounting-reports::lang.issue_date') . ':') !!}
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                            {!! Form::text('issue_date', old('issue_date', @format_date('now')), ['class' => 'form-control date-picker', 'readonly']) !!}
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('expiry_date', __('accounting-reports::lang.expiry_date') . ':') !!}
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                            {!! Form::text('expiry_date', old('expiry_date'), ['class' => 'form-control date-picker', 'readonly']) !!}
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        {!! Form::label('notes', __('accounting-reports::lang.description') . ':') !!}
                        {!! Form::textarea('notes', old('notes'), ['class' => 'form-control', 'rows' => '3', 'placeholder' => __('accounting-reports::lang.description')]) !!}
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                {!! Form::checkbox('generate_entries', '1', old('generate_entries', true)) !!}
                                @lang('accounting-reports::lang.generate_all_entries')
                                <p class="help-block">@lang('accounting-reports::lang.generate_all_entries_help')</p>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <button type="submit" class="btn btn-primary" id="submit_btn">
                <i class="fa fa-save"></i> @lang('messages.save')
            </button>
            <a href="{{ route('accounting-reports.cheque-books.index') }}" class="btn btn-default">
                <i class="fa fa-times"></i> @lang('messages.cancel')
            </a>
        </div>
    </div>
    {!! Form::close() !!}
</section>

@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        // Initialize select2 - Standard UltimatePOS pattern
        $('.select2').select2({
            width: '100%'
        });
        
        // CRITICAL: Sync select2 value to native select on change
        // This ensures the value is always in the native select element
        $('#account_id').on('select2:select select2:change', function(e) {
            var selectedValue = $(this).val();
            // Force sync to native select
            this.value = selectedValue;
            // Clear any error messages
            $('#account_id_error').hide();
            $(this).closest('.form-group').removeClass('has-error');
        });
        
        // Initialize date picker
        if (typeof datepicker_params !== 'undefined') {
            $('.date-picker').datepicker(datepicker_params);
        } else if (typeof datepicker_date_format !== 'undefined') {
            $('.date-picker').datepicker({
                autoclose: true,
                format: datepicker_date_format
            });
        } else {
            $('.date-picker').datepicker({
                autoclose: true,
                format: 'dd/mm/yyyy'
            });
        }
        
        // Calculate total cheques
        function calculateTotal() {
            var start = parseInt($('#start_cheque_no').val()) || 0;
            var end = parseInt($('#end_cheque_no').val()) || 0;
            
            if (start > 0 && end > 0 && end >= start) {
                var total = end - start + 1;
                $('#total_cheques_count').text(total);
                $('#total_cheques_info').show();
            } else {
                $('#total_cheques_info').hide();
            }
        }
        
        $('#start_cheque_no, #end_cheque_no').on('keyup change', function() {
            calculateTotal();
        });
        
        // Form submission - Standard UltimatePOS pattern with select2 fix
        $('#add_cheque_book_form').on('submit', function(e) {
            e.preventDefault();
            
            var $form = $(this);
            var $submitBtn = $('#submit_btn');
            var originalBtnHtml = $submitBtn.html();
            
            // CRITICAL: Ensure account_id is synced from select2 to native select before serialization
            var $accountField = $('#account_id');
            var accountId = null;
            
            // Get value from select2 first
            if ($accountField.hasClass('select2-hidden-accessible')) {
                accountId = $accountField.select2('val');
            }
            
            // Fallback to native select value
            if (!accountId || accountId == '' || accountId == null) {
                accountId = $accountField.val();
            }
            
            // Final fallback - get from native DOM
            if (!accountId || accountId == '' || accountId == null) {
                var nativeSelect = document.getElementById('account_id');
                if (nativeSelect) {
                    accountId = nativeSelect.value;
                }
            }
            
            // Validate account_id
            accountId = parseInt(accountId);
            if (!accountId || accountId <= 0 || isNaN(accountId)) {
                $('#account_id_error').text('{!! __("accounting-reports::lang.bank_account") !!} {!! __("lang_v1.is_required") !!}').show();
                $accountField.closest('.form-group').addClass('has-error');
                $accountField.focus();
                if ($accountField.hasClass('select2-hidden-accessible')) {
                    $accountField.select2('open');
                }
                toastr.error('{!! __("accounting-reports::lang.bank_account") !!} {!! __("lang_v1.is_required") !!}');
                return false;
            }
            
            // CRITICAL: Force set value in native select element
            // This ensures serialize() will capture it
            var nativeSelect = document.getElementById('account_id');
            if (nativeSelect) {
                nativeSelect.value = accountId;
                // Also ensure the option is selected
                var option = nativeSelect.querySelector('option[value="' + accountId + '"]');
                if (option) {
                    option.selected = true;
                }
            }
            
            // Also update jQuery val
            $accountField.val(accountId);
            
            // Validate other required fields
            var bookName = $('#book_name').val().trim();
            if (!bookName) {
                toastr.error('{!! __("accounting-reports::lang.book_name") !!} {!! __("lang_v1.is_required") !!}');
                $('#book_name').focus();
                return false;
            }
            
            var startCheque = $('#start_cheque_no').val().trim();
            var endCheque = $('#end_cheque_no').val().trim();
            
            if (!startCheque || !endCheque) {
                toastr.error('{!! __("accounting-reports::lang.start_cheque_no") !!} {!! __("lang_v1.is_required") !!}');
                return false;
            }
            
            var startNo = parseInt(startCheque);
            var endNo = parseInt(endCheque);
            
            if (startNo <= 0 || endNo <= 0) {
                toastr.error('{!! __("accounting-reports::lang.start_cheque_no") !!} must be greater than 0');
                return false;
            }
            
            if (startNo >= endNo) {
                toastr.error('{!! __("accounting-reports::lang.start_cheque_no_must_be_less_than_end") !!}');
                return false;
            }
            
            // Disable submit button - Use UltimatePOS helper
            __disable_submit_button($submitBtn);
            
            // Serialize form data - Standard UltimatePOS pattern
            var formData = $form.serialize();
            
            // Submit via AJAX - Standard UltimatePOS pattern
            $.ajax({
                method: 'POST',
                url: $form.attr('action'),
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.msg);
                        setTimeout(function() {
                            window.location.href = response.redirect || '{{ route("accounting-reports.cheque-books.index") }}';
                        }, 1000);
                    } else {
                        $submitBtn.prop('disabled', false).html(originalBtnHtml);
                        toastr.error(response.msg || '{!! __("messages.something_went_wrong") !!}');
                    }
                },
                error: function(xhr) {
                    $submitBtn.prop('disabled', false).html(originalBtnHtml);
                    
                    var errorMsg = '{!! __("messages.something_went_wrong") !!}';
                    
                    if (xhr.status === 422) {
                        if (xhr.responseJSON) {
                            if (xhr.responseJSON.errors) {
                                var errors = xhr.responseJSON.errors;
                                $.each(errors, function(key, value) {
                                    var errorText = Array.isArray(value) ? value[0] : value;
                                    if (key === 'account_id') {
                                        $('#account_id_error').text(errorText).show();
                                        $('#account_id').closest('.form-group').addClass('has-error');
                                    }
                                    toastr.error(errorText);
                                });
                                return;
                            } else if (xhr.responseJSON.msg) {
                                errorMsg = xhr.responseJSON.msg;
                            }
                        }
                    } else if (xhr.status === 419) {
                        errorMsg = '{!! __("messages.session_expired") !!}';
                        toastr.error(errorMsg);
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                        return;
                    } else if (xhr.responseJSON && xhr.responseJSON.msg) {
                        errorMsg = xhr.responseJSON.msg;
                    }
                    
                    toastr.error(errorMsg);
                }
            });
            
            return false;
        });
    });
</script>
@endsection