@extends('layouts.admin.admin')
@section('title', 'Global Settings')
@section('content')
<main>
    <div class="container-fluid p-0">
        <div class="row g-0">
            @include('partials.header')
            @include('layouts.admin.sidebar')
            <section class="content-section col primary-bg-light p-xl-4 p-3">
                    <div class="bg-white rounded-3 shadow-sm p-3">
                        <div class="row">
                            <div class="col-12">
                                <div class="small fw-medium d-flex flex-wrap">System Settings<span><i
                                    class="bi bi-chevron-right"></i></span>Global Settings</div>
                                <hr class="mb-4">
                                <h5>System Settings</h5>
                                @if(session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <strong>Success!</strong> {{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                                @endif
                                 @if(session('error'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <strong>Success!</strong> {{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                                @endif
                                <form action="{{route('global.settings.update')}}" class="mb-5" method="POST">
                                    @csrf
                                     @method('PUT')
                                    <div class="row d-flex flex-column g-2 gy-3">
                                        <div class="col-sm-6">
                                            <label for="inputNotifyDays" class="form-label fw-semibold">Number of days before notification to be sent for re calibration<span class="text-red">*</span></label>
                                            <input type="number" class="form-control shadow-none cal-icon shadow-none" id="inputNotifyDays" placeholder="" name="notification_days" value="{{ old('notification_days', $globalDetails?->notification_days) }}">
                                             @if ($errors->has('notification_days'))
                                                <span class="text-danger">{{ $errors->first('notification_days') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-sm-6">
                                            <label for="inputCalibFrqnz" class="form-label fw-semibold">Re calibration frequency (In Months)<span class="text-red">*</span></label>
                                            <input type="number" class="form-control shadow-none cal-icon shadow-none" id="inputCalibFrqnz" placeholder="" name="recalibration_months" value="{{ old('recalibration_months', $globalDetails?->recalibration_months) }}">
                                             @if ($errors->has('recalibration_months'))
                                                <span class="text-danger">{{ $errors->first('recalibration_months') }}</span>
                                             @endif
                                        </div>
                                        <div class="col-12 mt-4">
                                            <button type="submit" class="btn btn-type1 px-5 border-0 shadow-sm">Update Settings</button>
                                        </div>
                                    </div>
                                </form>
                                <hr>
                                <!-- API Token-->
                                <h5>API Token</h5>
                                {{-- <form action=""> --}}
                                    <div class="row">
                                        <div class="col-xl-8">
                                            <div class="d-flex flex-sm-nowrap flex-wrap gap-2 gy-3">
                                                <div class="d-flex flex-nowrap w-100">
                                                    <div class="form-group w-100 position-relative">
                                                        <input type="password" id="apiToken" class="form-control shadow-none h-100 pe-5" value="{{ $apiToken->api_token ?? 'API Token' }}">
                                                        <i class="toggle-password bi bi-eye-slash lh-1"></i>
                                                    </div>
                                                    <button type="button" class="btn border-0" id="copyText" title="Copy API Token" style="display: none;"><i class="bi bi-copy lh-1"></i></button>
                                                </div>
                                                <button type="button" class="btn btn-type1 px-5 border-0 shadow-sm text-nowrap" data-bs-toggle="modal" data-bs-target="#confirmRefresh">Refresh Token</button>
                                                <div class="modal fade" id="confirmRefresh" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                                    aria-labelledby="confirmRefreshLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header border-0">
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body py-0">
                                                                <h5>Confirm Token Refresh</h5>
                                                                <b>Are you sure you want to refresh the API Token?</b>
                                                                <p><i class="bi bi-exclamation-triangle-fill me-1 text-warning"></i>This action will immediately invalidate the existing token and generate a new one.</p>
                                                                <p><i class="bi bi-exclamation-triangle-fill me-1 text-warning"></i>If the current token is being used in any live integration, those services will stop working until the new token is updated on the client side.</p>
                                                                <b>Do you want to proceed?</b>
                                                            </div>
                                                            <form action="{{ route('generate.api.token') }}" method="POST">
                                                            @csrf
                                                            <div class="modal-footer border-0">
                                                                <button type="button" class="btn btn-dark border-0 shadow-sm" data-bs-dismiss="modal">Cancel</button>
                                                                <button type="submit" class="btn btn-type1 border-0 shadow-sm">Yes, Refresh Token</button>
                                                            </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {{-- </form> --}}
                            </div>
                        </div>
                    </div>
            </section>
        </div>
    </div>
</main>
@push('script')
<!-- Toastr CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">

<!-- Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script>
        $(".toggle-password").click(function () {
            $(this).toggleClass("bi bi-eye");
            input = $(this).parent().find("input");
            if (input.attr("type") == "password") {
                input.attr("type", "text");
            } else {
                input.attr("type", "password");
            };
            if(input.attr("type") == "text"){
                $('#copyText').css("display","block")
            } else {
                $('#copyText').css("display","none")
            }
        });
        // $('#copyText').click(function () {
        //     const $input = $('#apiToken');
        //     $input.select();
        //     document.execCommand('copy');
        //     // alert('Copied: ' + $input.val());
        // });
         $('#copyText').click(function () {
        const token = $('#apiToken').val();
        navigator.clipboard.writeText(token).then(function () {
            toastr.success('Token copied to clipboard!');
        }).catch(function (err) {
            console.error('Copy failed', err);
            toastr.error('Failed to copy token!');
        });
    });
    </script>  
@endpush
@stop