@extends('dashboard.layouts.master')
@section('title', 'Commission Configuration | Admin Panel')

@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
<style>
    .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
    .badge-success { background: #d4edda; color: #155724; }
    .badge-secondary { background: #e2e3e5; color: #383d41; }
    
    /* Overrides to match City module transparency and theme */
    .table_data .dataTables_wrapper .dataTables_filter input,
    .table_data .dataTables_wrapper .dataTables_length select {
        background-color: transparent !important;
        border: 1px solid #dfdfdf !important;
        color: inherit !important;
        border-radius: 5px;
        padding: 5px 10px;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: transparent !important;
        border: none !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #070004 !important;
        color: #fff !important;
        border-radius: 5px !important;
    }
</style>
@endpush

@section('content')
    @include('sweetalert::alert')
    @if(\Helper::canAccessModule('commission_configuration'))
<div class="padding website-label">
    <div class="box">
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">Commission Configuration</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <span>Commission Management</span> /
                    <span>Commission Config</span>
                </small>
            </div>
            @if(\Helper::checkPermission('commission_configuration', 'create'))
            <div class="box-header-right">
                <div class="box-tool">
                    <ul class="nav">
                        <a class="solid-button" data-toggle="modal" data-target="#addModal">
                            <i class="material-icons">&#xe02e;</i>
                            &nbsp; Add Rule
                        </a>
                    </ul>
                </div>
            </div>
            @endif
        </div>

        <div class="padding success_message" style="margin-bottom: 10px;"></div>
        <div id="success_file_popup" style="margin-bottom: 10px;"></div>

        @if(\Helper::checkPermission('commission_configuration', 'active') || \Helper::checkPermission('commission_configuration', 'delete'))
        {{ Form::open(['route' => 'commission-configs.bulk-action', 'method' => 'post', 'id' => 'updateAll']) }}
        <div class="single-action">
            <div class="bulk-action">
                <select name="action" id="action" class="form-control c-select w-sm inline v-middle">
                    <option value="no">{{ __('backend.bulkAction') }}</option>
                    @if(\Helper::checkPermission('commission_configuration', 'active'))
                        <option value="1">{{ __('backend.activeSelected') }}</option>
                        <option value="0">{{ __('backend.blockSelected') }}</option>
                    @endif
                    @if(\Helper::checkPermission('commission_configuration', 'delete'))
                        <option value="2">{{ __('backend.deleteSelected') }}</option>
                    @endif
                </select>
                <button type="submit" id="submit_all" class="btn white">{{ __('backend.apply') }}</button>
            </div>
        </div>
        @endif

        <div class="table-responsive table_data">
            <table class="table table-bordered m-a-0" id="label">
                <thead class="dker">
                    <tr>
                        <th class="width20 dker no-sort">
                            <label class="ui-check m-a-0">
                                <input id="checkAll" type="checkbox"><i></i>
                            </label>
                        </th>
                        <th>Type</th>
                        <th>Target (Category/Business)</th>
                        <th>Percentage</th>
                        <th>Status</th>
                        <th class="text-center">Options</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        {{ Form::close() }}
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="storeForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Commission Rule</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Target Type <span class="text-danger">*</span></label>
                        <select name="target_type" id="target_type" class="form-control">
                            <option value="global">Global (Default)</option>
                            <option value="category">Category-Specific</option>
                            <option value="business">Business-Specific</option>
                            <option value="supplier">Supplier Transactions</option>
                        </select>
                        <span class="text-danger error-text target_type_error"></span>
                    </div>
                    <div class="form-group" id="category_div" style="display:none;">
                        <label>Select Category <span class="text-danger">*</span></label>
                        <select name="target_id_category" id="target_id_category" class="form-control">
                            <option value="">-- Choose Category --</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger error-text target_id_error"></span>
                    </div>
                    <div class="form-group" id="business_div" style="display:none;">
                        <label>Select Business <span class="text-danger">*</span></label>
                        <select name="target_id_business" id="target_id_business" class="form-control">
                            <option value="">-- Choose Business --</option>
                            @foreach($businesses as $biz)
                                <option value="{{ $biz->id }}">{{ $biz->business_name }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger error-text target_id_error"></span>
                    </div>
                    <div class="form-group">
                        <label>Percentage (%) <span class="text-danger">*</span></label>
                        <input type="number" name="percentage" class="form-control" step="0.01" min="0" max="100">
                        <span class="text-danger error-text percentage_error"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn white" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn primary" id="addSubmitBtn">Save Rule</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="updateForm">
                @csrf
                <input type="hidden" name="id" id="edit_id">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Commission Rule</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Target Type <span class="text-danger">*</span></label>
                        <select name="target_type" id="edit_target_type" class="form-control">
                            <option value="global">Global (Default)</option>
                            <option value="category">Category-Specific</option>
                            <option value="business">Business-Specific</option>
                            <option value="supplier">Supplier Transactions</option>
                        </select>
                        <span class="text-danger error-text target_type_error"></span>
                    </div>
                    <div class="form-group" id="edit_category_div" style="display:none;">
                        <label>Select Category <span class="text-danger">*</span></label>
                        <select name="target_id_category" id="edit_target_id_category" class="form-control">
                            <option value="">-- Choose Category --</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger error-text target_id_error"></span>
                    </div>
                    <div class="form-group" id="edit_business_div" style="display:none;">
                        <label>Select Business <span class="text-danger">*</span></label>
                        <select name="target_id_business" id="edit_target_id_business" class="form-control">
                            <option value="">-- Choose Business --</option>
                            @foreach($businesses as $biz)
                                <option value="{{ $biz->id }}">{{ $biz->business_name }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger error-text target_id_error"></span>
                    </div>
                    <div class="form-group">
                        <label>Percentage (%) <span class="text-danger">*</span></label>
                        <input type="number" name="percentage" id="edit_percentage" class="form-control" step="0.01" min="0" max="100">
                        <span class="text-danger error-text percentage_error"></span>
                    </div>
                    <div class="form-group">
                        <label>Status <span class="text-danger">*</span></label>
                        <select name="is_active" id="edit_status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                        <span class="text-danger error-text is_active_error"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn white" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn primary" id="updateSubmitBtn">Update Rule</button>
                </div>
            </form>
        </div>
    </div>
</div>

    @else
<input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
<script type="text/javascript">
var redirect_url = $('#redirect_url').val();
window.location.replace(redirect_url);
</script>
    @endif
@endsection

@push('after-scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
    $(document).ready(function() {
        var table = $('#label').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ordering: true,
            columnDefs: [{
                'bSortable': false,
                'aTargets': [0, 4, 5]
            }],
            ajax: {
                url: "{{ route('commission-configs.anyData') }}",
                type: 'POST',
                data: { _token: "{{ csrf_token() }}" }
            },
            columns: [
                { data: 'checkbox', name: 'checkbox', orderable: false, searchable: false },
                { data: 'target_type', name: 'target_type' },
                { data: 'target_name', name: 'target_name' },
                { data: 'percentage', name: 'percentage' },
                { data: 'is_active', name: 'is_active' },
                { data: 'options', name: 'options', orderable: false, searchable: false, className: 'text-center' }
            ],
            order: [1, 'asc']
        });

        $("#checkAll").click(function() {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });

        $('#target_type').change(function() {
            var type = $(this).val();
            $('#category_div, #business_div').hide();
            $('#target_id_category, #target_id_business').val('');

            if (type === 'category') $('#category_div').show();
            else if (type === 'business') $('#business_div').show();
            // Re-validate when type changes
            $("#storeForm").valid();
        });

        $('#edit_target_type').change(function() {
            var type = $(this).val();
            $('#edit_category_div, #edit_business_div').hide();
            $('#edit_target_id_category, #edit_target_id_business').val('');

            if (type === 'category') $('#edit_category_div').show();
            else if (type === 'business') $('#edit_business_div').show();
            // Re-validate when type changes
            $("#updateForm").valid();
        });

        // jQuery Validation
        var validator = $("#storeForm").validate({
            rules: {
                target_type: { required: true },
                target_id_category: {
                    required: function() { return $('#target_type').val() === 'category'; }
                },
                target_id_business: {
                    required: function() { return $('#target_type').val() === 'business'; }
                },
                percentage: { required: true, min: 0, max: 100 }
            },
            messages: {
                target_type: { required: "Please select a target type." },
                target_id_category: { required: "Please select a category." },
                target_id_business: { required: "Please select a business." },
                percentage: {
                    required: "Percentage is required.",
                    min: "Percentage cannot be less than 0.",
                    max: "Percentage cannot exceed 100."
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('text-danger');
                element.closest('.form-group').append(error);
            },
            submitHandler: function(form) {
                $('.error-text').text('');
                var formData = $(form).serializeArray();

                // Consolidate target_id
                var targetType = $('#target_type').val();
                var targetId = '';
                if (targetType === 'category') targetId = $('#target_id_category').val();
                else if (targetType === 'business') targetId = $('#target_id_business').val();

                formData.push({name: 'target_id', value: targetId});

                $.ajax({
                    url: "{{ route('commission-configs.store') }}",
                    type: 'POST',
                    data: formData,
                    beforeSend: function() { $('#addSubmitBtn').prop('disabled', true).text('Saving...'); },
                    success: function(res) {
                        $('#addSubmitBtn').prop('disabled', false).text('Save Rule');
                        if (res.success) {
                            $('#addModal').modal('hide');
                            table.draw();
                            $(form)[0].reset();
                            $('#category_div, #business_div').hide();
                        } else {
                            alert(res.message);
                        }
                    },
                    error: function(xhr) {
                        $('#addSubmitBtn').prop('disabled', false).text('Save Rule');
                        if (xhr.status === 422) {
                            var errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, val) {
                                $('.' + key + '_error').text(val[0]);
                            });
                        } else {
                            alert('Something went wrong!');
                        }
                    }
                });
            }
        });

        $(document).on('click', '.edit-setting', function() {
            var d = $(this).data();
            $('#edit_id').val(d.id);
            $('#edit_target_type').val(d.targetType);

            $('#edit_category_div, #edit_business_div').hide();
            if (d.targetType === 'category') {
                $('#edit_category_div').show();
                $('#edit_target_id_category').val(d.targetId);
            } else if (d.targetType === 'business') {
                $('#edit_business_div').show();
                $('#edit_target_id_business').val(d.targetId);
            }

            $('#edit_percentage').val(d.percentage);
            $('#edit_status').val(d.isActive);
            // Clear previous validation errors
            updateValidator.resetForm();
            $('.error-text').text('');
            $('#editModal').modal('show');
        });

        // Edit Form Validation
        var updateValidator = $("#updateForm").validate({
            rules: {
                target_type: { required: true },
                target_id_category: {
                    required: function() { return $('#edit_target_type').val() === 'category'; }
                },
                target_id_business: {
                    required: function() { return $('#edit_target_type').val() === 'business'; }
                },
                percentage: { required: true, min: 0, max: 100 },
                is_active: { required: true }
            },
            messages: {
                target_type: { required: "Please select a target type." },
                target_id_category: { required: "Please select a category." },
                target_id_business: { required: "Please select a business." },
                percentage: {
                    required: "Percentage is required.",
                    min: "Percentage cannot be less than 0.",
                    max: "Percentage cannot exceed 100."
                },
                is_active: { required: "Please select a status." }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('text-danger');
                element.closest('.form-group').append(error);
            },
            submitHandler: function(form) {
                $('.error-text').text('');
                var formData = $(form).serializeArray();

                // Consolidate target_id
                var targetType = $('#edit_target_type').val();
                var targetId = '';
                if (targetType === 'category') targetId = $('#edit_target_id_category').val();
                else if (targetType === 'business') targetId = $('#edit_target_id_business').val();

                formData.push({name: 'target_id', value: targetId});

                $.ajax({
                    url: "{{ route('commission-configs.update') }}",
                    type: 'POST',
                    data: formData,
                    beforeSend: function() { $('#updateSubmitBtn').prop('disabled', true).text('Updating...'); },
                    success: function(res) {
                        $('#updateSubmitBtn').prop('disabled', false).text('Update Rule');
                        if (res.success) {
                            $('#editModal').modal('hide');
                            table.draw(false);
                            Swal.fire('Updated!', res.message, 'success');
                        } else {
                            alert(res.message);
                        }
                    },
                    error: function(xhr) {
                        $('#updateSubmitBtn').prop('disabled', false).text('Update Rule');
                        if (xhr.status === 422) {
                            var errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, val) {
                                $('.' + key + '_error').text(val[0]);
                            });
                        } else {
                            alert('Something went wrong!');
                        }
                    }
                });
            }
        });

        $(document).on('click', '.status_active', function(e) {
            var id = $(this).attr('data-id');
            Swal.fire({
                title: "Deactivate",
                text: "Are you sure you want to deactivate this rule?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#BF0A30",
                confirmButtonText: "Deactivate",
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('commission-configs.status_active') }}",
                        type: 'POST',
                        data: { _token: "{{ csrf_token() }}", id: id },
                        success: function(response) {
                            table.draw(false);
                            Swal.fire('Deactivated!', 'Rule deactivated successfully.', 'success');
                        },
                        error: function(xhr) { alert(xhr.responseText); }
                    });
                }
            });
        });

        $(document).on('click', '.status_inactive', function(e) {
            var id = $(this).attr('data-id');
            Swal.fire({
                title: "Activate",
                text: "Are you sure you want to activate this rule?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#002868",
                confirmButtonText: "Activate",
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('commission-configs.status_inactive') }}",
                        type: 'POST',
                        data: { _token: "{{ csrf_token() }}", id: id },
                        success: function(response) {
                            table.draw(false);
                            Swal.fire('Activated!', 'Rule activated successfully.', 'success');
                        },
                        error: function(xhr) { alert(xhr.responseText); }
                    });
                }
            });
        });

        $(document).on('submit', '#updateAll', function(e) {
            e.preventDefault();
            var allVals = [];
            var type = $('#action').val();

            if (type == 'no') {
                $('#alert_confirm').modal('show');
                $('.alert_dynamic_message').text("Please select an action.");
            } else {
                $(".has-value:checked").each(function() {
                    var idvalue = $(this).attr('data-id');
                    if (idvalue) allVals.push(idvalue);
                });

                if (allVals.length <= 0) {
                    $('#alert_confirm').modal('show');
                    $('.alert_dynamic_message').text("Please select at least one row.");
                } else {
                    var msg = "";
                    if (type == 0) msg = "Are you sure you want to deactivate selected rules?";
                    else if (type == 1) msg = "Are you sure you want to activate selected rules?";
                    else msg = "Are you sure you want to delete selected rules?";

                    $('#default_confirm').modal('show');
                    $('.dynamic_message').text(msg);
                    $('.checkbox_data').val(allVals.join(","));
                    $('.checkbox_type').val(type);
                }
            }
        });

        $(document).on('click', '.yes_click', function(e) {
            var ids = $('.checkbox_data').val();
            var type = $('.checkbox_type').val();
            ajaxUpdateAll(ids, type);
        });

        function ajaxUpdateAll(ids, type) {
            $.ajax({
                url: "{{ route('commission-configs.bulk-action') }}",
                type: 'POST',
                data: { _token: "{{ csrf_token() }}", ids: ids, action: type },
                beforeSend: function() { /* Optional: show loader */ },
                success: function(data) {
                    if (data.success) {
                        $('#default_confirm').modal('hide');
                        $('#success_file_popup').empty().append('<div class="alert alert-success m-b-0">' + data.msg + '</div>');
                        setTimeout(function() { $('#success_file_popup').empty(); }, 5000);
                        table.ajax.reload(null, false);
                        $("#checkAll").prop('checked', false);
                        $('#action').val('no');
                    } else {
                        alert(data.msg);
                    }
                },
                error: function(xhr) { alert(xhr.responseText); }
            });
        }

        $(document).on('click', '.delete-setting', function() {
            if (confirm('Are you sure you want to delete this rule?')) {
                var id = $(this).data('id');
                $.post("{{ route('commission-configs.delete') }}", { _token: "{{ csrf_token() }}", id: id }, function(res) {
                    table.draw();
                });
            }
        });
    });
</script>
@endpush