@extends('layouts.admin.app')

@section('title', translate('Handling & Convenience Fee Slabs'))

@section('content')
    <div class="content container-fluid">
        <!-- Page Title -->
        <div class="mb-4 pb-2">
            <h2 class="h1 mb-0 text-capitalize d-flex align-items-center gap-2">
                <img width="24" src="{{ dynamicAsset('/public/assets/admin/img/money.png') }}" alt="" onerror="this.src='{{ dynamicAsset('/public/assets/admin/img/160x160/img1.jpg') }}'">
                {{ translate('Handling & Convenience Fee Slabs') }}
            </h2>
            <p class="text-muted mb-0">
                {{ translate('Define tiered fee slabs applied to orders based on food subtotal: (percent / 100 x food_subtotal) + fixed_fee.') }}
            </p>
        </div>
        <!-- End Page Title -->

        <!-- Scope Warning Banners -->
        @if(!empty($warnings))
            @foreach($warnings as $scopeName => $scopeErrors)
                <div class="alert alert-warning d-flex align-items-start gap-3 mb-3" role="alert">
                    <i class="tio-warning-outlined font-size-xl mt-1"></i>
                    <div>
                        <h5 class="alert-heading mb-1">{{ translate('Continuity Warning for Scope') }}: <strong>{{ $scopeName }}</strong></h5>
                        <ul class="mb-0 pl-3">
                            @foreach($scopeErrors as $err)
                                <li>{{ $err }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endforeach
        @endif

        @if($errors->any())
            <div class="alert alert-danger" role="alert">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row g-3 mb-4">
            <!-- Add New Slab Card -->
            <div class="col-lg-7">
                <div class="card h-100">
                    <div class="card-header">
                        <h4 class="card-title m-0">
                            <i class="tio-add-circle-outlined mr-1"></i> {{ translate('Add Fee Slab') }}
                        </h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.business-settings.fee-slabs.store') }}" method="POST">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <div class="form-group mb-0">
                                        <label class="input-label" for="zone_id">{{ translate('Zone Scope') }}</label>
                                        <select name="zone_id" id="zone_id" class="form-control js-select2-custom">
                                            <option value="">{{ translate('Global (All Zones Default)') }}</option>
                                            @foreach($zones as $zone)
                                                <option value="{{ $zone->id }}" {{ old('zone_id') == $zone->id ? 'selected' : '' }}>
                                                    {{ $zone->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-muted">{{ translate('Zone slabs override global slabs. If a zone has no active slabs, global slabs apply.') }}</small>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <label class="input-label" for="min_amount">{{ translate('Min Food Subtotal') }} ({{ \App\CentralLogics\Helpers::currency_symbol() }}) <span class="text-danger">*</span></label>
                                        <input type="number" step="0.01" min="0" name="min_amount" id="min_amount" class="form-control" value="{{ old('min_amount', '0.00') }}" required placeholder="0.00">
                                        <small class="text-muted">{{ translate('Inclusive: subtotal >= Min Amount') }}</small>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <label class="input-label" for="max_amount">{{ translate('Max Food Subtotal') }} ({{ \App\CentralLogics\Helpers::currency_symbol() }})</label>
                                        <input type="number" step="0.01" min="0" name="max_amount" id="max_amount" class="form-control" value="{{ old('max_amount') }}" placeholder="{{ translate('Empty for open-ended top slab') }}">
                                        <small class="text-muted">{{ translate('Exclusive: subtotal < Max Amount (empty = top slab)') }}</small>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <label class="input-label" for="percent">{{ translate('Percentage Fee') }} (%)</label>
                                        <input type="number" step="0.01" min="0" max="100" name="percent" id="percent" class="form-control" value="{{ old('percent', '0.00') }}" placeholder="0.00">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <label class="input-label" for="fixed_fee">{{ translate('Fixed Fee') }} ({{ \App\CentralLogics\Helpers::currency_symbol() }})</label>
                                        <input type="number" step="0.01" min="0" name="fixed_fee" id="fixed_fee" class="form-control" value="{{ old('fixed_fee', '0.00') }}" placeholder="0.00">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group mb-0 d-flex align-items-center">
                                        <label class="toggle-switch toggle-switch-sm d-flex align-items-center mb-0 mr-2" for="is_active">
                                            <input type="checkbox" name="is_active" value="1" class="toggle-switch-input" id="is_active" checked>
                                            <span class="toggle-switch-label">
                                                <span class="toggle-switch-indicator"></span>
                                            </span>
                                        </label>
                                        <label for="is_active" class="cursor-pointer mb-0 font-weight-bold">{{ translate('Active Status') }}</label>
                                    </div>
                                </div>

                                <div class="col-12 text-right">
                                    <button type="reset" class="btn btn--secondary mr-2">{{ translate('Reset') }}</button>
                                    <button type="submit" class="btn btn--primary">{{ translate('Submit') }}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Fee Live Preview Card -->
            <div class="col-lg-5">
                <div class="card h-100">
                    <div class="card-header bg-light">
                        <h4 class="card-title m-0">
                            <i class="tio-calculator mr-1"></i> {{ translate('Fee Live Preview') }}
                        </h4>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">
                            {{ translate('Test fee calculation in real time via the server-side FeeCalculator engine.') }}
                        </p>
                        <div class="form-group mb-2">
                            <label class="input-label" for="preview_zone_id">{{ translate('Test Zone') }}</label>
                            <select id="preview_zone_id" class="form-control js-select2-custom">
                                <option value="global">{{ translate('Global (Default)') }}</option>
                                @foreach($zones as $zone)
                                    <option value="{{ $zone->id }}">{{ $zone->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label class="input-label" for="preview_food_subtotal">{{ translate('Sample Food Subtotal') }} ({{ \App\CentralLogics\Helpers::currency_symbol() }})</label>
                            <input type="number" step="0.01" min="0" id="preview_food_subtotal" class="form-control" placeholder="e.g. 250.00" value="250.00">
                        </div>
                        <button type="button" id="btn-calculate-preview" class="btn btn--primary btn-block mb-3">
                            <i class="tio-play mr-1"></i> {{ translate('Calculate Fee') }}
                        </button>

                        <div id="preview-result-box" class="p-3 bg-light rounded border" style="display: none;">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-muted">{{ translate('Matched Slab ID') }}:</span>
                                <strong id="preview-slab-id">-</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-muted">{{ translate('Basis Subtotal') }}:</span>
                                <strong id="preview-basis">-</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-muted">{{ translate('Percent Fee') }}:</span>
                                <span id="preview-percent">-</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-muted">{{ translate('Fixed Fee') }}:</span>
                                <span id="preview-fixed">-</span>
                            </div>
                            <hr class="my-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="font-weight-bold">{{ translate('Final Handling Fee') }}:</span>
                                <span class="h4 text-success mb-0" id="preview-final-fee">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slabs List Card -->
        <div class="card">
            <div class="card-header flex-wrap gap-3">
                <div class="d-flex align-items-center gap-2">
                    <h4 class="card-title m-0">{{ translate('Configured Fee Slabs') }}</h4>
                    <span class="badge badge-soft-dark">{{ $slabs->total() }}</span>
                </div>

                <!-- Zone Filter -->
                <div class="d-flex align-items-center gap-2">
                    <label class="mb-0 text-nowrap font-weight-bold" for="filter_zone">{{ translate('Filter Scope') }}:</label>
                    <select id="filter_zone" class="form-control js-select2-custom" onchange="filterByZone(this.value)">
                        <option value="all" {{ $zoneId === 'all' ? 'selected' : '' }}>{{ translate('All Scopes') }}</option>
                        <option value="global" {{ $zoneId === null ? 'selected' : '' }}>{{ translate('Global Slabs Only') }}</option>
                        @foreach($zones as $zone)
                            <option value="{{ $zone->id }}" {{ (string)$zoneId === (string)$zone->id ? 'selected' : '' }}>
                                {{ $zone->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="table-responsive datatable-custom">
                <table class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
                    <thead class="thead-light">
                        <tr>
                            <th>{{ translate('Sl') }}</th>
                            <th>{{ translate('Scope / Zone') }}</th>
                            <th>{{ translate('Subtotal Range') }}</th>
                            <th>{{ translate('Percent') }}</th>
                            <th>{{ translate('Fixed Fee') }}</th>
                            <th>{{ translate('Formula Summary') }}</th>
                            <th>{{ translate('Status') }}</th>
                            <th class="text-center">{{ translate('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($slabs as $key => $slab)
                            <tr>
                                <td>{{ $slabs->firstItem() + $key }}</td>
                                <td>
                                    @if($slab->zone)
                                        <span class="badge badge-soft-info">{{ $slab->zone->name }}</span>
                                    @else
                                        <span class="badge badge-soft-primary">{{ translate('Global') }}</span>
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ \App\CentralLogics\Helpers::format_currency($slab->min_amount) }}</strong>
                                    -
                                    @if($slab->max_amount !== null)
                                        <strong>{{ \App\CentralLogics\Helpers::format_currency($slab->max_amount) }}</strong>
                                    @else
                                        <span class="badge badge-soft-success">&infin; {{ translate('Above') }}</span>
                                    @endif
                                    <small class="text-muted d-block">[{{ $slab->min_amount }} - {{ $slab->max_amount ?? '&infin;' }})</small>
                                </td>
                                <td>{{ $slab->percent }}%</td>
                                <td>{{ \App\CentralLogics\Helpers::format_currency($slab->fixed_fee) }}</td>
                                <td>
                                    <code>({{ $slab->percent }}% &times; subtotal) + {{ $slab->fixed_fee }}</code>
                                </td>
                                <td>
                                    <label class="toggle-switch toggle-switch-sm" for="status-{{ $slab->id }}">
                                        <input type="checkbox"
                                               class="toggle-switch-input status-toggle"
                                               id="status-{{ $slab->id }}"
                                               data-id="{{ $slab->id }}"
                                               {{ $slab->is_active ? 'checked' : '' }}>
                                        <span class="toggle-switch-label">
                                            <span class="toggle-switch-indicator"></span>
                                        </span>
                                    </label>
                                </td>
                                <td>
                                    <div class="btn--container justify-content-center">
                                        <a class="btn action-btn btn--primary btn-outline-primary"
                                           href="{{ route('admin.business-settings.fee-slabs.edit', [$slab->id]) }}"
                                           title="{{ translate('Edit Slab') }}">
                                            <i class="tio-edit"></i>
                                        </a>
                                        <form action="{{ route('admin.business-settings.fee-slabs.delete', [$slab->id]) }}"
                                              method="POST"
                                              onsubmit="return confirm('{{ translate('Are you sure you want to delete this fee slab?') }}')"
                                              style="display: inline-block;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn action-btn btn--danger btn-outline-danger" title="{{ translate('Delete Slab') }}">
                                                <i class="tio-delete-outlined"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <img class="mb-3 w-7rem" src="{{ dynamicAsset('/public/assets/admin/svg/illustrations/sorry.svg') }}" alt="Image Description">
                                    <p class="mb-0 text-muted">{{ translate('No fee slabs configured yet.') }}</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="card-footer">
                {!! $slabs->links() !!}
            </div>
        </div>
    </div>
@endsection

@push('script_2')
<script>
    function filterByZone(zoneId) {
        let url = new URL(window.location.href);
        url.searchParams.set('zone_id', zoneId);
        window.location.href = url.toString();
    }

    // Status toggle AJAX
    $(document).on('change', '.status-toggle', function () {
        let id = $(this).data('id');
        let checkbox = $(this);

        $.ajax({
            url: "{{ route('admin.business-settings.fee-slabs.status') }}",
            method: 'GET',
            data: { id: id },
            success: function (response) {
                toastr.success(response.message || '{{ translate('Status updated successfully') }}');
            },
            error: function (xhr) {
                checkbox.prop('checked', !checkbox.prop('checked'));
                toastr.error(xhr.responseJSON?.message || '{{ translate('Failed to update status') }}');
            }
        });
    });

    // Preview AJAX
    $('#btn-calculate-preview').on('click', function () {
        let subtotal = $('#preview_food_subtotal').val();
        let zoneId = $('#preview_zone_id').val();

        if (subtotal === '' || subtotal < 0) {
            toastr.warning('{{ translate('Please enter a valid subtotal amount.') }}');
            return;
        }

        $.ajax({
            url: "{{ route('admin.business-settings.fee-slabs.preview') }}",
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                food_subtotal: subtotal,
                zone_id: zoneId
            },
            success: function (res) {
                if (res.status && res.data) {
                    let d = res.data;
                    $('#preview-slab-id').text(d.slab_id ? '#' + d.slab_id : '{{ translate('No matching slab') }}');
                    $('#preview-basis').text(d.basis_amount.toFixed(2));
                    $('#preview-percent').text(d.percent + '%');
                    $('#preview-fixed').text(d.fixed_fee.toFixed(2));
                    $('#preview-final-fee').text(d.fee.toFixed(2));
                    $('#preview-result-box').slideDown();
                }
            },
            error: function () {
                toastr.error('{{ translate('Preview calculation failed.') }}');
            }
        });
    });
</script>
@endpush