@extends('layouts.app')

@section('content')


    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="row">
            <h4 class="py-3 breadcrumb-wrapper mb-4">
            <a href="{{ route('dashboard') }}" class="text-muted fw-light">Dashboard /</a> Security
        </h4>
        <div class="card">
             <h5 class="card-header">{{ __('Generate Security Key') }}</h5>

                      <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                @if (session('success'))
                                    <div class="alert alert-success alert-dismissible d-flex align-items-center" role="alert">
                                    <i class="bx bx-xs bx-command align-top me-2"></i>
                                   {{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                    </button>
                                    </div>
                                @endif
                                @if (Session::has('status'))
                                    <div class="alert alert-success">

                                        {{ Session::get('status') }}

                                    </div>
                                @endif
                                @if (Session::has('error'))
                                    <div class="alert alert-danger">

                                        {{ Session::get('error') }}

                                    </div>
                                @endif
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div>
                        {{-- Generate New Key Form --}}
                        <form method="POST" action="{{ route('security.store') }}" class="space-y-4 mb-2">
                            @csrf
                            <div class="col-12 fv-plugins-icon-container">
                                <label class="form-label" for="token_name">{{ __('Token Name') }}</label>
                                <input type="text" name="token_name" id="token_name" class="form-control" placeholder="Enter token name" value="{{ old('token_name') }}" required />
                                <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    @if ($errors->has('token_name'))
                                        {{ $errors->first('token_name') }}
                                    @endif
                                </div>
                            </div>

                            <button type="submit" class="btn btn-secondary create-new btn-primary mt-2">
                                <span><i class="bx bx-plus me-sm-1"></i> <span class="d-none d-sm-inline-block">{{ __('Generate Token') }}</span></span>
                            </button>

                        </form>

                         <div class="card-datatable table-responsive">
                        <table id="token-table" class="dt-row-grouping table table-bordered">
                            <thead class="text-xs text-gray-600 uppercase bg-gray-100 border-b">
                                <tr>
                                    <th class="px-4 py-3">Name</th>
                                    <th class="px-4 py-3">Key</th>
                                    <th class="px-4 py-3">Created At</th>
                                    <th class="px-4 py-3">Action</th>
                                </tr>
                            </thead>
                        </table>
                        </div>
                      </div>

                    </div>

            </div>

        </div>

    </div>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#token-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('tokens.data') }}',
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'key',
                        name: 'key',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // Form validation using jQuery Validate
            $('form').validate({
                rules: {
                    token_name: {
                        required: true,
                        maxlength: 255
                    },
                    url: {
                        url: true,
                        maxlength: 255
                    }
                },
                messages: {
                    token_name: {
                        required: "Please enter a token name",
                        maxlength: "Token name cannot exceed 255 characters"
                    },
                    url: {
                        url: "Please enter a valid URL",
                        maxlength: "URL cannot exceed 255 characters"
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.closest('.fv-plugins-icon-container').find('.fv-plugins-message-container'));
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').addClass('fv-plugins-message-container--enabled');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').removeClass('fv-plugins-message-container--enabled').empty();
                }
            });
        });

        function toggleToken(id) {
            const input = document.getElementById(`token_${id}`);
            const showIcon = document.getElementById(`eye-show-${id}`);
            const hideIcon = document.getElementById(`eye-hide-${id}`);

            if (!input) return;

            if (input.value.includes("•")) {
                input.value = input.dataset.token;
                showIcon.classList.add('hidden');
                hideIcon.classList.remove('hidden');
            } else {
                input.value = '••••••••';
                showIcon.classList.remove('hidden');
                hideIcon.classList.add('hidden');
            }
        }
    </script>
@endsection