@extends('admin.layouts.master')
@section('title', 'Site Settings')

@section('content')
<div class="page-title-head">
    <h4 class="page-main-title">Site Settings</h4>
    <div class="hidden items-center gap-1.25 text-sm md:flex">
        <a href="{{ route('dashboard') }}" class="text-sm">Dashboard</a>
        <i class="iconify tabler--chevron-right text-sm"></i>
        <span class="text-default-400">Site Settings</span>
    </div>
</div>

<div class="container-fluid">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-base">

        <!-- Whitelist table -->
        <div class="card lg:col-span-2">
            <div class="card-header flex items-center justify-between">
                <h5 class="card-title flex items-center gap-2">
                    <i class="iconify tabler--list-check text-primary"></i>
                    Whitelisted IPs
                </h5>
                <span class="badge bg-success/15 text-success text-xs">{{ $whitelistedIps->count() }} IPs</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>IP Address</th>
                                <th>Label</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($whitelistedIps as $i => $wl)
                            <tr>
                                <td class="text-default-400">{{ $i + 1 }}</td>
                                <td><code class="text-success text-xs">{{ $wl->ip_address }}</code></td>
                                <td class="text-sm">{{ $wl->label ?? '—' }}</td>
                                <td>
                                    <button class="btn btn-sm btn-danger delete-wl-btn"
                                        data-id="{{ $wl->id }}"
                                        data-ip="{{ $wl->ip_address }}">
                                        <i class="iconify tabler--trash text-sm"></i>
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="4" class="text-center text-default-400 py-5">No whitelisted IPs</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Add IP form -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title flex items-center gap-2">
                    <i class="iconify tabler--shield-plus text-success"></i>
                    Add New IP
                </h5>
            </div>
            <div class="card-body">
                <p class="text-xs text-default-400 mb-5">
                    Whitelisted IPs bypass all clocker blocking rules and are checked first.
                </p>
                <form id="addWhitelistForm">
                    <div class="mb-4">
                        <label class="form-label" for="wl_ip">IP Address</label>
                        <div class="input-icon-group">
                            <i class="iconify tabler--network input-icon text-default-400"></i>
                            <input type="text" id="wl_ip" class="form-input" placeholder="e.g. 192.168.1.1" required>
                        </div>
                    </div>
                    <div class="mb-5">
                        <label class="form-label" for="wl_label">Label <span class="text-default-400 text-xs">(optional)</span></label>
                        <input type="text" id="wl_label" class="form-input" placeholder="e.g. My Office">
                    </div>
                    <button type="submit" class="btn btn-success w-full" id="addWlBtn">
                        <i class="iconify tabler--plus me-1"></i>
                        Add to Whitelist
                    </button>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection

@section('script')
<script>
$(document).ready(function () {

    $('#addWhitelistForm').submit(function (e) {
        e.preventDefault();
        var btn = $('#addWlBtn');
        btn.prop('disabled', true).html('<i class="iconify tabler--loader-2 animate-spin me-1"></i> Adding...');
        var data = new FormData();
        data.append('ip_address', $('#wl_ip').val().trim());
        data.append('label', $('#wl_label').val().trim());
        $.ajax({
            url: '{{ route("settings.whitelist-ip") }}',
            type: 'POST', processData: false, contentType: false, data: data,
            success: function (res) {
                if (res.status == 'true') {
                    Swal.fire({ icon: 'success', title: 'Success', text: res.message }).then(() => window.location.reload());
                } else {
                    Swal.fire({ icon: res.icon, title: 'Failed', text: res.message });
                }
                btn.prop('disabled', false).html('<i class="iconify tabler--plus me-1"></i> Add to Whitelist');
            },
            error: function (xhr) {
                var msg = xhr.responseJSON?.errors ? Object.values(xhr.responseJSON.errors).flat().join('\n') : 'An error occurred';
                Swal.fire({ icon: 'error', title: 'Error', text: msg });
                btn.prop('disabled', false).html('<i class="iconify tabler--plus me-1"></i> Add to Whitelist');
            }
        });
    });

    $(document).on('click', '.delete-wl-btn', function () {
        var id = $(this).data('id');
        var ip = $(this).data('ip');
        Swal.fire({
            title: 'Remove IP?',
            text: 'Remove "' + ip + '" from the whitelist?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: 'Yes, remove',
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/admin/settings/whitelist-ip/' + id,
                    type: 'DELETE',
                    success: function (res) {
                        if (res.status == 'true') {
                            Swal.fire({ icon: 'success', title: 'Removed', text: res.message }).then(() => window.location.reload());
                        } else {
                            Swal.fire({ icon: 'error', title: 'Failed', text: res.message });
                        }
                    },
                });
            }
        });
    });

});
</script>
@endsection