@extends('layouts.main')

@section('title')
    {{ __('Commission Configuration') }}
@endsection

@section('page-title')
    <div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h4>@yield('title')</h4>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <section class="section">
        <div class="row">
            {{-- Listing First --}}
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <table class="table table-striped"
                                    id="table_list" data-toggle="table" data-url="{{ route('commission-config.list') }}"
                                    data-click-to-select="false" data-side-pagination="server" data-pagination="true"
                                    data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true"
                                    data-search-align="right" data-toolbar="#toolbar" data-show-columns="true"
                                    data-show-refresh="true" data-trim-on-search="false" data-responsive="true"
                                    data-sort-name="id" data-sort-order="desc" data-pagination-successively-size="3"
                                    data-query-params="queryParams" data-row-style="rowStyle">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th scope="col" data-field="id" data-sortable="true"> {{ __('ID') }}</th>
                                            <th scope="col" data-field="customer_name" data-align="center" data-sortable="false"> {{ __('Customer Name') }} </th>
                                            <th scope="col" data-field="customer_email" data-align="center" data-sortable="false"> {{ __('Customer Email') }} </th>
                                            <th scope="col" data-field="package_name" data-align="center" data-sortable="false"> {{ __('Package Name') }} </th>
                                            <th scope="col" data-field="start_date" data-align="center" data-sortable="true"> {{ __('Start Date') }} </th>
                                            <th scope="col" data-field="end_date" data-align="center" data-sortable="true"> {{ __('End Date') }} </th>
                                            <th scope="col" data-field="rental_commission_percentage" data-align="center" data-sortable="true" data-formatter="commissionFormatter"> {{ __('Rental Commission (%)') }} </th>
                                            <th scope="col" data-field="sale_commission_percentage" data-align="center" data-sortable="true" data-formatter="commissionFormatter"> {{ __('Sale Commission (%)') }} </th>
                                            <th scope="col" data-field="notes" data-align="center" data-sortable="false" data-formatter="notesFormatter"> {{ __('Notes') }} </th>
                                            <th scope="col" data-field="commission_configured" data-align="center" data-sortable="true" data-formatter="statusFormatter"> {{ __('Status') }} </th>
                                            @if (has_permissions('delete', 'package'))
                                                <th scope="col" data-field="operate" data-align="center" data-valign="middle" data-sortable="false" data-events="actionEvents"> {{ __('Action') }}</th>
                                            @endif
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Form Below Listing --}}
            @if (has_permissions('create', 'package'))
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>{{ __('Manual Assignment') }}</h5>
                            <small class="text-muted">{{ __('Use this form to manually assign commission configuration to a customer') }}</small>
                        </div>
                        <div class="card-body">
                            {!! Form::open(['route' => 'commission-config.store', 'data-parsley-validate', 'class' => 'create-form', 'data-success-function'=> "formSuccessFunction"]) !!}
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="customer_id" class="form-label">{{ __('Select Customer') }} <span class="text-danger">*</span></label>
                                    <select id="customer_id" name="customer_id" class="form-control select2-ajax" style="width: 100%" required></select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="package_id" class="form-label">{{ __('Select Package (Lex Managed Listing)') }} <span class="text-danger">*</span></label>
                                    <select id="package_id" name="package_id" class="form-control select2-ajax" style="width: 100%" required></select>
                                    <small class="form-text text-muted">{{ __('Only Lex Managed Listing packages are available') }}</small>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="rental_commission_percentage" class="form-label">{{ __('Rental Commission (%)') }} <span class="text-danger">*</span></label>
                                    {{ Form::number('rental_commission_percentage', '50', [
                                        'class' => 'form-control',
                                        'placeholder' => trans('Percentage of first month rent'),
                                        'data-parsley-required' => 'true',
                                        'id' => 'rental_commission_percentage',
                                        'min' => '0',
                                        'max' => '100',
                                        'step' => '0.01'
                                    ])}}
                                    <small class="form-text text-muted">{{ __('Commission percentage for rental properties (e.g., 50% of first month rent)') }}</small>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="sale_commission_percentage" class="form-label">{{ __('Sale Commission (%)') }} <span class="text-danger">*</span></label>
                                    {{ Form::number('sale_commission_percentage', '5', [
                                        'class' => 'form-control',
                                        'placeholder' => trans('Percentage of sale price'),
                                        'data-parsley-required' => 'true',
                                        'id' => 'sale_commission_percentage',
                                        'min' => '0',
                                        'max' => '100',
                                        'step' => '0.01'
                                    ])}}
                                    <small class="form-text text-muted">{{ __('Commission percentage for property sales (e.g., 5% of total property sale price)') }}</small>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="start_date" class="form-label">{{ __('Start Date') }}</label>
                                    {{ Form::date('start_date', now()->format('Y-m-d'), [
                                        'class' => 'form-control',
                                        'id' => 'start_date',
                                        'min' => now()->format('Y-m-d')
                                    ])}}
                                    <small class="form-text text-muted">{{ __('Plan activation date (defaults to today)') }}</small>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="notes" class="form-label">{{ __('Notes') }}</label>
                                    {{ Form::textarea('notes', '', [
                                        'class' => 'form-control',
                                        'placeholder' => trans('Additional notes'),
                                        'id' => 'notes',
                                        'rows' => '3'
                                    ])}}
                                </div>
                                <div class="col-12">
                                    {{ Form::submit(trans('Save Configuration'), ['class' => 'btn btn-primary']) }}
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- EDIT MODAL - Accept Request / Edit Configuration -->
        <div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="myModalLabel1">{{ __('Configure Commission') }}</h5>
                        <button type="button" class="btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('commission-config.store') }}" class="commission-config-form" method="POST" data-parsley-validate>
                        <div class="modal-body">
                            {{ csrf_field() }}
                            <input type="hidden" id="edit-commission-id" name="commission_id">
                            <input type="hidden" id="edit-customer-id" name="customer_id">
                            <input type="hidden" id="edit-package-id" name="package_id">
                            <input type="hidden" id="edit-user-package-id" name="user_package_id">
                            <div class="row">
                                <div class="col-12 form-group mandatory">
                                    <label class="form-label">{{ __('Customer') }}</label>
                                    <input type="text" id="edit-customer-name" class="form-control" readonly>
                                </div>
                                <div class="col-12 form-group mandatory">
                                    <label class="form-label">{{ __('Package') }}</label>
                                    <input type="text" id="edit-package-name" class="form-control" readonly>
                                </div>
                                <div class="col-12 form-group mandatory">
                                    {{ Form::label('edit-rental_commission_percentage', __('Rental Commission (%)'), ['class' => 'form-label']) }}
                                    {{ Form::number('rental_commission_percentage', '', [
                                        'class' => 'form-control',
                                        'data-parsley-required' => 'true',
                                        'id' => 'edit-rental_commission_percentage',
                                        'min' => '0',
                                        'max' => '100',
                                        'step' => '0.01'
                                    ])}}
                                </div>
                                <div class="col-12 form-group mandatory">
                                    {{ Form::label('edit-sale_commission_percentage', __('Sale Commission (%)'), ['class' => 'form-label']) }}
                                    {{ Form::number('sale_commission_percentage', '', [
                                        'class' => 'form-control',
                                        'data-parsley-required' => 'true',
                                        'id' => 'edit-sale_commission_percentage',
                                        'min' => '0',
                                        'max' => '100',
                                        'step' => '0.01'
                                    ])}}
                                </div>
                                <div class="col-12 form-group" id="start-date-group">
                                    {{ Form::label('edit-start_date', __('Start Date'), ['class' => 'form-label']) }}
                                    {{ Form::date('start_date', '', [
                                        'class' => 'form-control',
                                        'id' => 'edit-start_date'
                                    ])}}
                                    <small class="form-text text-muted">{{ __('Plan activation date (leave empty to activate immediately)') }}</small>
                                </div>
                                <div class="col-12 form-group">
                                    {{ Form::label('edit-notes', __('Notes'), ['class' => 'form-label']) }}
                                    {{ Form::textarea('notes', '', [
                                        'class' => 'form-control',
                                        'id' => 'edit-notes',
                                        'rows' => '3'
                                    ])}}
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal" data-bs-dismiss="modal">{{ __('Close') }}</button>
                            <button type="submit" class="btn btn-primary waves-effect waves-light">{{ __('Save') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('style')
    <style>
        /* Status badges should have pointer cursor when clickable */
        .clickable-status {
            cursor: pointer !important;
        }
        .clickable-status:hover {
            opacity: 0.85;
            transform: scale(1.05);
            transition: all 0.2s ease;
        }
        /* Align all table cells vertically in middle */
        #table_list tbody tr td {
            vertical-align: middle !important;
        }

        #table_list tbody tr td.operate {
            cursor: default;
        }

        /* Center the renew button vertically if needed */
        .renew-plan-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            vertical-align: middle;
        }
    </style>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            function initSelect2(selector, url, placeholder){
                $(selector).select2({
                    placeholder: placeholder,
                    allowClear: true,
                    width: 'resolve',
                    theme: 'bootstrap-5',
                    ajax: {
                        url: url,
                        dataType: 'json',
                        delay: 250,
                        cache: true,
                        data: function(params){
                            return {
                                q: params.term || '',
                                page: params.page || 1,
                                per_page: 20
                            };
                        },
                        processResults: function (data, params) {
                            params.page = params.page || 1;
                            return {
                                results: data.results || [],
                                pagination: {
                                    more: data.pagination && data.pagination.more ? true : false
                                }
                            };
                        }
                    },
                    minimumInputLength: 0
                });
            }

            initSelect2('#customer_id', '{{ route('select2.customers') }}', '{{ __('Search customers...') }}');
            
            // Custom select2 for managed listing packages only
            $('#package_id').select2({
                placeholder: '{{ __('Search packages...') }}',
                allowClear: true,
                width: 'resolve',
                theme: 'bootstrap-5',
                ajax: {
                    url: '{{ route('select2.packages') }}',
                    dataType: 'json',
                    delay: 250,
                    cache: true,
                    data: function(params){
                        return {
                            q: params.term || '',
                            page: params.page || 1,
                            per_page: 20,
                            managed_listing_only: 1
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.results || [],
                            pagination: {
                                more: data.pagination && data.pagination.more ? true : false
                            }
                        };
                    }
                },
                minimumInputLength: 0
            });
        });

        function queryParams(p) {
            return {
                sort: p.sort,
                order: p.order,
                offset: p.offset,
                limit: p.limit,
                search: p.search,
            };
        }

        // REMOVED: Row click functionality - no longer needed
        // Only status badges and action buttons should open modal

        // Handle click on status badges (Pending Request or Configured)
        $(document).on('click', '.clickable-status', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const rowIndex = $(this).data('row-index');
            const row = $('#table_list').bootstrapTable('getData')[rowIndex];
            
            if (row) {
                console.log('Status badge clicked, opening modal for row:', row);
                openEditModal(row);
            }
        });

        function openEditModal(row) {
            // Set hidden fields
            if (row.commission_id) {
                $("#edit-commission-id").val(row.commission_id);
            } else {
                $("#edit-commission-id").val('');
            }
            $("#edit-customer-id").val(row.customer_id);
            $("#edit-package-id").val(row.package_id);
            
            // Set display fields
            $("#edit-customer-name").val(row.customer_name + ' (' + row.customer_email + ')');
            $("#edit-package-name").val(row.package_name);
            
            // Set commission values (use existing or default)
            $("#edit-rental_commission_percentage").val(row.rental_commission_percentage || '50');
            $("#edit-sale_commission_percentage").val(row.sale_commission_percentage || '5');
            $("#edit-notes").val(row.notes || '');
            
            // Handle start date field visibility
            if (row.is_pending_request) {
                // Show start date field for pending requests (required for acceptance)
                $("#start-date-group").show();
                $("#edit-start_date").val('{{ now()->format('Y-m-d') }}');
                $("#myModalLabel1").text('{!! __('Accept Request & Configure Commission') !!}');
            } else if (row.commission_configured) {
                // Hide start date for configured commissions (already set)
                $("#start-date-group").show();
                if (row.start_date) {
                    var startDate = row.start_date.split(' ')[0];  // Extract date part
                    $("#edit-start_date").val(startDate);
                } else {
                    $("#edit-start_date").val('');
                }
                $("#myModalLabel1").text('{!! __('Edit Commission Configuration') !!}');
            }
            
            // Unbind any existing handlers on the form to prevent conflicts
            $('#editModal .commission-config-form').off('submit');
            
            // Show modal - try Bootstrap 5 first, then fallback to Bootstrap 3/4
            var modal = $('#editModal');
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                var bsModal = new bootstrap.Modal(modal[0]);
                bsModal.show();
            } else {
                modal.modal('show');
            }
        }

        // Formatters
        function commissionFormatter(value, row, index) {
            console.log('Commission formatter called', {
                value: value,
                is_expired: row.is_expired,
                commission_configured: row.commission_configured,
                rental_rate: row.rental_commission_percentage,
                sale_rate: row.sale_commission_percentage
            });
            
            // Show commission rates for configured AND expired packages
            if ((row.commission_configured || row.is_expired) && value != null && value !== '') {
                return value + '%';
            }
            return '<span class="text-muted">-</span>';
        }

        function notesFormatter(value, row, index) {
            if (value && value.trim() !== '') {
                return value.length > 50 ? value.substring(0, 50) + '...' : value;
            }
            return '<span class="text-muted">-</span>';
        }

        function statusFormatter(value, row, index) {
            // Make status badges clickable (except for expired - they use Renew button)
            if (row.is_expired) {
                return '<span class="badge bg-danger">Expired</span>';
            }
            if (row.commission_configured) {
                return '<span class="badge bg-success clickable-status" style="cursor: pointer;" data-row-index="' + index + '">Configured</span>';
            }
            if (row.is_pending_request) {
                return '<span class="badge bg-warning clickable-status" style="cursor: pointer;" data-row-index="' + index + '">Pending Request</span>';
            }
            return '<span class="badge bg-secondary">Not Set</span>';
        }

        window.actionEvents = {
            'click .delete_btn': function(e, value, row, index) {
                e.stopPropagation(); // Prevent row click
                return false;
            },
            'click .renew-plan-btn': function(e, value, row, index) {
                e.stopPropagation(); // Prevent row click
                
                const userPackageId = $(e.currentTarget).data('id');
                const customerId = $(e.currentTarget).data('customer-id');
                const packageId = $(e.currentTarget).data('package-id');
                const rentalCommission = $(e.currentTarget).data('rental-commission');
                const saleCommission = $(e.currentTarget).data('sale-commission');
                
                console.log('Renew button clicked', {
                    userPackageId,
                    customerId,
                    packageId,
                    rentalCommission,
                    saleCommission
                });
                
                // Show confirmation dialog
                Swal.fire({
                    title: '{{ __('Renew Lex Managed Plan') }}',
                    text: '{{ __('Do you want to renew this Lex Managed subscription for the customer?') }}',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '{{ __('Yes, Renew') }}',
                    cancelButtonText: '{{ __('Cancel') }}'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Open the commission config form with pre-filled data
                        openRenewForm(row, userPackageId, customerId, packageId, rentalCommission, saleCommission);
                    }
                });
                
                return false;
            }
        }

        // Function to open renewal form with pre-filled data
        function openRenewForm(row, userPackageId, customerId, packageId, rentalCommission, saleCommission) {
            console.log('Opening renew form with data', {row, userPackageId, customerId, packageId, rentalCommission, saleCommission});
            
            // Open the edit modal
            $('#editModal').modal('show');
            
            // Mark this as a renewal action
            $('#edit-commission-id').val(row.commission_id || '');
            $('#edit-user-package-id').val(userPackageId);
            $('#edit-customer-id').val(customerId);
            $('#edit-package-id').val(packageId);
            
            // Pre-fill customer and package names
            $('#edit-customer-name').val(row.customer_name);
            $('#edit-package-name').val(row.package_name);
            
            // Pre-fill commission percentages (use existing values or defaults)
            $('#edit-rental_commission_percentage').val(rentalCommission || 50);
            $('#edit-sale_commission_percentage').val(saleCommission || 5);
            
            // Set start date to today for renewal
            const today = new Date().toISOString().split('T')[0];
            $('#edit-start_date').val(today);
            
            // Clear notes or set renewal message
            $('#edit-notes').val('Plan renewed on ' + today);
            
            console.log('✅ Renew form pre-filled successfully');
        }

        // Custom form submission handler for commission config
        // This handler runs first and prevents any other handlers from executing
        $(document).on('submit', '.commission-config-form', function(e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            e.stopPropagation(); // Also stop propagation to prevent other handlers
            
            let formElement = $(this);
            let submitButtonElement = formElement.find('button[type="submit"]');
            let submitButtonText = submitButtonElement.text();
            let formData = new FormData(this);
            
            // Don't add _method: PUT, use POST directly
            submitButtonElement.text('Please Wait...').attr('disabled', true);
            
            if (!formElement.parsley().isValid()) {
                submitButtonElement.text(submitButtonText).removeAttr('disabled');
                formElement.parsley().validate();
                return false;
            }
            
            $.ajax({
                url: formElement.attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    submitButtonElement.text(submitButtonText).removeAttr('disabled');
                    if (response.error === false) {
                        Toastify({
                            text: response.message || 'Commission Configuration Saved Successfully',
                            duration: 6000,
                            close: !0,
                            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
                        }).showToast();
                        
                        // Close modal and refresh table
                        setTimeout(function() {
                            $('#editModal').modal('hide');
                            $('#table_list').bootstrapTable('refresh');
                            formElement[0].reset();
                            $("#edit-commission-id").val('');
                            $("#edit-customer-id").val('');
                            $("#edit-package-id").val('');
                        }, 1000);
                        
                        if (typeof formSuccessFunction === 'function') {
                            formSuccessFunction();
                        }
                    } else {
                        Toastify({
                            text: response.message || 'Something went wrong',
                            duration: 6000,
                            close: !0,
                            backgroundColor: '#dc3545'
                        }).showToast();
                    }
                },
                error: function(xhr) {
                    let errorMessage = "Something went wrong";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    Toastify({
                        text: errorMessage,
                        duration: 6000,
                        close: !0,
                        backgroundColor: '#dc3545'
                    }).showToast();
                    submitButtonElement.text(submitButtonText).removeAttr('disabled');
                }
            });
            return false; // Ensure we don't continue with default form submission
        });

        // Reset modal on close
        $('#editModal').on('hidden.bs.modal', function () {
            $(this).find('form')[0].reset();
            $("#edit-commission-id").val('');
            $("#edit-customer-id").val('');
            $("#edit-package-id").val('');
        });

        let formSuccessFunction = () => {
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        }
    </script>
@endsection