@extends('admin.dashboard.layout.app')
@section('style')
    <style>
        .dt-search {
            display: none;
        }

        #search-ip:active,
        #search-ip:focus {
            outline: 1px solid grey !important;
        }

        .form-control:focus,
        .form-control:active {
            box-shadow: none;
            /* Remove any box shadow */
            outline: none;
        }
    </style>
@endsection
@section('content')
    @include('admin.dashboard.layout.header',['title'=>'IP Whitelist'])
    <div class="card mt-3  px-4 pt-3">
        <form action="{{ route('admin.ipWhitelistPost') }}" method="POST" class="mb-3">
            @csrf
            <div class="row">
                <div class="col-md-11">
                    <input type="text" name="ip" value="{{old('ip')}}" class="form-control" placeholder="IP">
                    @error('ip')
                        <span class="fs-12 text-danger">{{$message}}</span>
                    @enderror
                </div>
                <div class="col-md-1 mt-md-0 mt-2">
                    <button class="btn btn-primary d-flex align-items-center gap-1 w-100" type="submit"><i class='bx  bx-plus-circle'></i>Add</button>
                </div>
            </div>
        </form>
        <div class="d-flex justify-content-md-end justify-content-center">
            <div class="wrapper mx-2" style="position: relative">
                <i class='bx bx-search bx-sm' style="position: absolute;top:25%;left:4%;color:grey;"></i>
                <input type="text" style="padding-left: 40px;width:300px;border:1px solid grey !important;"
                    class="py-2 rounded-3" name="search" id="search-ip" placeholder="Search IP Address">
            </div>
        </div>
        <table id="data-table" class="table align-middle w-100">
    <thead>
        <tr>
            <th class="text-muted" style="width:1%; white-space:nowrap;">Sr #</th>
            <th class="text-muted">IP</th>
            <th class="text-muted" style="width:1%; white-space:nowrap;">Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($ips as $index => $ip)
            <tr>
                <td>{{ $index + 1 }}</td>
                <td class="w-100"><span class="badge bg-secondary">{{ $ip }}</span></td>
                <td class="text-end">
                    <form action="{{ route('admin.ipWhitelistDelete') }}" method="POST">
                        @csrf
                        <input type="number" name="index" hidden value="{{ $index }}">
                        <button class="btn btn-danger d-flex align-items-center gap-1 ms-auto" type="submit">
                            <i class='bx bx-trash'></i> Delete
                        </button>
                    </form>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

    </div>
@endsection
@section('script')
    <script src="{{ asset('plugins/jquery/script.js') }}"></script>
    <script src="{{ asset('plugins/datatable/script.js') }}"></script>
    <script src="{{ asset('plugins/datatable/bootstrap.js') }}"></script>
    <script>
        var table
        $(document).ready(function() {
            table = $("#data-table").DataTable({
                lengthChange: false
            });
            $('#search-ip').on('keyup', function() {
                table.search(this.value).draw();
            });
        });
    </script>
@endsection