@extends('layout.super-admin-app')

@section('title', 'License Generator')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Super Admin</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            License Generator
        </li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <a href="{{ route('super-admin.license-generator.create') }}" class="btn btn-sm btn-primary">
            <i class="ri-key-2-line me-1"></i> Generate New License
        </a>
    </div>
</div>

<div class="app-body">
    <div class="row gx-3">
        <div class="col-sm-12 col-12">
            <div class="card mb-3">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0">Issued Desktop Licenses</h5>
                    <span class="text-muted small">Manage client machine authorizations, business model, and vehicle limits</span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table m-0 align-middle" id="licensesTable">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">S.No.</th>
                                    <th>Customer / Company</th>
                                    <th>Machine ID</th>
                                    <th>Business Model</th>
                                    <th>Vehicle Limit</th>
                                    <th>Expiry Date</th>
                                    <th>Status</th>
                                    <th style="width: 140px;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal: View Full License Key -->
<div class="modal fade" id="licenseModal" tabindex="-1" aria-labelledby="licenseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="licenseModalLabel"><i class="ri-key-line text-primary me-1"></i> Desktop License Key</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-semibold text-muted">Customer Name</label>
                    <div id="modal_customer" class="fw-bold text-dark"></div>
                </div>
                <div class="row mb-3">
                    <div class="col-6">
                        <label class="form-label small fw-semibold text-muted">Machine ID</label>
                        <div id="modal_machine_id" class="small font-monospace text-primary"></div>
                    </div>
                    <div class="col-6">
                        <label class="form-label small fw-semibold text-muted">Business Model</label>
                        <div id="modal_business_model" class="small fw-bold text-dark"></div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-6">
                        <label class="form-label small fw-semibold text-muted">Vehicle Limit</label>
                        <div id="modal_limit" class="small fw-bold"></div>
                    </div>
                    <div class="col-6">
                        <label class="form-label small fw-semibold text-muted">Expiry Date</label>
                        <div id="modal_expiry" class="small fw-bold"></div>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold text-muted">License Key (Base64 Envelope)</label>
                    <textarea id="modal_key_textarea" class="form-control font-monospace small bg-light" rows="5" readonly></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" onclick="copyModalKey()">
                    <i class="ri-file-copy-line me-1"></i> Copy Key
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#licensesTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: '{{ route('super-admin.license-generator.getData') }}',
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false},
                    {data: 'customer_name', name: 'customer_name'},
                    {data: 'machine_id', name: 'machine_id'},
                    {data: 'business_model', name: 'business_model'},
                    {data: 'vehicle_limit', name: 'vehicle_limit'},
                    {data: 'expires_at', name: 'expires_at'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                order: [[0, 'desc']]
            });
        });

        // Quick Copy Key directly from row
        function quickCopyKey(key) {
            navigator.clipboard.writeText(key).then(function() {
                Command: toastr["success"]("License Key copied to clipboard!", "Copied");
            }).catch(function(err) {
                // Fallback copy
                var tempInput = document.createElement("textarea");
                tempInput.value = key;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand("copy");
                document.body.removeChild(tempInput);
                Command: toastr["success"]("License Key copied to clipboard!", "Copied");
            });
        }

        // View Key Modal
        function viewLicenseKey(data) {
            $('#modal_customer').text(data.customer);
            $('#modal_machine_id').text(data.machine_id);
            $('#modal_business_model').text(data.business_model);
            $('#modal_limit').text(data.limit);
            $('#modal_expiry').text(data.expiry);
            $('#modal_key_textarea').val(data.key);
            $('#licenseModal').modal('show');
        }

        function copyModalKey() {
            var copyText = document.getElementById("modal_key_textarea");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value).then(function() {
                Command: toastr["success"]("License Key copied to clipboard!", "Copied");
            });
        }
    </script>
@endpush