@extends('root')
@section('title', 'Client Overrides')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Client Overrides',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.packages.index'), 'label' => 'Packages'],
        ],
        'current' => 'Client Overrides'
    ])

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="ti ti-adjustments me-2"></i>Client Overrides</h5>
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addOverrideModal">
                        <i class="ti ti-plus me-1"></i> Add Override
                    </button>
                </div>
                <div class="card-body">
                    {{-- Filter --}}
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <select class="form-select" id="filter-client">
                                <option value="">All Clients</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}">{{ $client->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped" id="datatable">
                            <thead>
                                <tr>
                                    <th>Client</th>
                                    <th>Override Code</th>
                                    <th>Value</th>
                                    <th>Notes</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card bg-light-warning">
                <div class="card-body">
                    <h6><i class="ti ti-alert-circle me-2"></i>Override Priority</h6>
                    <p class="small mb-0">
                        Overrides have the <strong>highest priority</strong> and will supersede package settings.
                        Use this for enterprise clients who need custom limits.
                    </p>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Available Codes</h6>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-2"><strong>Features (true/false):</strong></p>
                    <ul class="small mb-3">
                        @foreach($featureCodes as $code => $label)
                        <li><code>{{ $code }}</code> - {{ $label }}</li>
                        @endforeach
                    </ul>
                    <p class="text-muted small mb-2"><strong>Quotas (number):</strong></p>
                    <ul class="small mb-0">
                        @foreach($quotaCodes as $code => $label)
                        <li><code>{{ $code }}</code> - {{ $label }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Add Override Modal --}}
<div class="modal fade" id="addOverrideModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Client Override</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addOverrideForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Client <span class="text-danger">*</span></label>
                        <select class="form-select" name="client_id" required>
                            <option value="">Select Client</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }} ({{ $client->account_name }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Override Code <span class="text-danger">*</span></label>
                        <select class="form-select" name="override_code" required>
                            <option value="">Select Code</option>
                            <optgroup label="Features (true/false)">
                                @foreach($featureCodes as $code => $label)
                                    <option value="{{ $code }}">{{ $code }} - {{ $label }}</option>
                                @endforeach
                            </optgroup>
                            <optgroup label="Quotas (number)">
                                @foreach($quotaCodes as $code => $label)
                                    <option value="{{ $code }}">{{ $code }} - {{ $label }}</option>
                                @endforeach
                            </optgroup>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Value <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="override_value" required placeholder="true, false, or number">
                        <small class="text-muted">For features: true/false. For quotas: number (-1 = unlimited)</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <textarea class="form-control" name="notes" rows="2" placeholder="Optional notes"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Override</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Edit Override Modal --}}
<div class="modal fade" id="editOverrideModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Override</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editOverrideForm">
                <input type="hidden" name="override_id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Override Code</label>
                        <input type="text" class="form-control" id="edit_code" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Value <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="override_value" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <textarea class="form-control" name="notes" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route('admin.client-overrides.data') }}',
            data: function(d) {
                d.client_id = $('#filter-client').val();
            }
        },
        columns: [
            { data: 'client_name' },
            { 
                data: 'override_code',
                render: function(data) {
                    return '<code>' + data + '</code>';
                }
            },
            { 
                data: 'override_value',
                render: function(data) {
                    if (data === 'true') return '<span class="badge bg-success">true</span>';
                    if (data === 'false') return '<span class="badge bg-danger">false</span>';
                    if (data === '-1') return '<span class="badge bg-info">Unlimited</span>';
                    return '<span class="badge bg-primary">' + data + '</span>';
                }
            },
            { 
                data: 'notes',
                render: function(data) {
                    return data || '<span class="text-muted">-</span>';
                }
            },
            { data: 'created_at' },
            {
                data: null,
                orderable: false,
                className: 'text-center',
                render: function(data, type, row) {
                    return `
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-warning btn-edit" data-id="${row.id}" 
                                    data-code="${row.override_code}" data-value="${row.override_value}" 
                                    data-notes="${row.notes || ''}" title="Edit">
                                <i class="ti ti-pencil"></i>
                            </button>
                            <button class="btn btn-danger btn-delete" data-id="${row.id}" title="Delete">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        order: [[0, 'asc']]
    });

    $('#filter-client').on('change', function() {
        table.ajax.reload();
    });

    // Add Override
    $('#addOverrideForm').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: '{{ route('admin.client-overrides.store') }}',
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: $(this).serialize(),
            success: function(res) {
                $('#addOverrideModal').modal('hide');
                $('#addOverrideForm')[0].reset();
                table.ajax.reload();
                toastr.success('Override added successfully');
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.meta?.message || 'Failed to add override');
            }
        });
    });

    // Edit Override
    $(document).on('click', '.btn-edit', function() {
        var id = $(this).data('id');
        var code = $(this).data('code');
        var value = $(this).data('value');
        var notes = $(this).data('notes');

        $('#editOverrideForm input[name="override_id"]').val(id);
        $('#edit_code').val(code);
        $('#editOverrideForm input[name="override_value"]').val(value);
        $('#editOverrideForm textarea[name="notes"]').val(notes);
        $('#editOverrideModal').modal('show');
    });

    $('#editOverrideForm').on('submit', function(e) {
        e.preventDefault();
        var id = $('input[name="override_id"]').val();
        $.ajax({
            url: '{{ route('admin.client-overrides.update', ':id') }}'.replace(':id', id),
            type: 'PUT',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: $(this).serialize(),
            success: function(res) {
                $('#editOverrideModal').modal('hide');
                table.ajax.reload();
                toastr.success('Override updated successfully');
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.meta?.message || 'Failed to update override');
            }
        });
    });

    // Delete Override
    $(document).on('click', '.btn-delete', function() {
        if (!confirm('Delete this override?')) return;
        var id = $(this).data('id');
        $.ajax({
            url: '{{ route('admin.client-overrides.destroy', ':id') }}'.replace(':id', id),
            type: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                table.ajax.reload();
                toastr.success('Override deleted successfully');
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.meta?.message || 'Failed to delete override');
            }
        });
    });
});
</script>
@endpush