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

@section('title', 'Generate Desktop License')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <style>
        /* Modern Input Styling for License Generator Form */
        .modern-input-group {
            position: relative;
            display: flex;
            align-items: center;
            background-color: #ffffff !important;
            border: 1px solid #d8e0e9 !important;
            border-radius: 10px !important;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
            height: 44px;
            overflow: hidden;
        }

        .modern-input-group:hover {
            border-color: #94a3b8 !important;
        }

        .modern-input-group:focus-within {
            border-color: #f97316 !important;
            box-shadow: 0 0 0 3.5px rgba(249, 115, 22, 0.16) !important;
            background-color: #ffffff !important;
        }

        .modern-input-group .modern-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 18px;
            line-height: 1;
            pointer-events: none;
            z-index: 3;
            transition: color 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .modern-input-group:focus-within .modern-icon {
            color: #f97316 !important;
        }

        .modern-input-group .form-control,
        .modern-input-group .form-select {
            height: 100% !important;
            border: none !important;
            background-color: transparent !important;
            box-shadow: none !important;
            padding: 0 14px 0 42px !important;
            font-size: 13.5px !important;
            font-weight: 500 !important;
            color: #0f172a !important;
            border-radius: 10px !important;
            width: 100% !important;
        }

        .modern-input-group .form-select {
            padding-right: 36px !important;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right 14px center !important;
            background-size: 14px 12px !important;
        }

        .modern-input-group .form-control:focus,
        .modern-input-group .form-select:focus {
            border: none !important;
            box-shadow: none !important;
            background-color: transparent !important;
            outline: none !important;
        }

        .modern-input-group .form-control::placeholder {
            color: #94a3b8 !important;
            font-size: 13px !important;
            font-weight: 400 !important;
        }

        .modern-input-group .form-control.font-monospace {
            font-family: 'JetBrains Mono', monospace !important;
            letter-spacing: 0.5px;
            font-size: 13px !important;
        }

        .modern-input-group.is-date,
        .modern-input-group.is-date input {
            cursor: pointer;
        }

        .modern-input-group.has-error,
        .modern-input-group:has(.is-invalid) {
            border-color: #ef4444 !important;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
        }

        .modern-input-group.has-error .modern-icon,
        .modern-input-group:has(.is-invalid) .modern-icon {
            color: #ef4444 !important;
        }

        .field-hint {
            font-size: 12px;
            color: #64748b;
            margin-top: 6px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .field-hint i {
            font-size: 13px;
            color: #94a3b8;
        }
    </style>
@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">
            <a href="{{ route('super-admin.license-generator.index') }}">License Generator</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Generate New License
        </li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <a href="{{ route('super-admin.license-generator.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="ri-arrow-left-line me-1"></i> Back to Licenses
        </a>
    </div>
</div>

<div class="app-body">
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show mb-3" role="alert">
            <h6 class="alert-heading mb-1"><i class="ri-error-warning-line me-1"></i> Please correct the following errors:</h6>
            <ul class="mb-0 ps-3">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">Generate Desktop App License</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('super-admin.license-generator.store') }}" method="POST" id="licenseForm">
                @csrf

                <!-- Section 1: Customer & Machine -->
                <div class="row g-3 mb-4">
                    <div class="col-md-6 col-12">
                        <label for="customer_name" class="form-label fw-semibold">
                            Customer / Company Name <span class="text-danger">*</span>
                        </label>
                        <div class="modern-input-group @error('customer_name') has-error @enderror">
                            <span class="modern-icon"><i class="ri-building-line"></i></span>
                            <input type="text" 
                                   name="customer_name" 
                                   id="customer_name" 
                                   class="form-control @error('customer_name') is-invalid @enderror" 
                                   value="{{ old('customer_name') }}" 
                                   placeholder="e.g. Saini Transport, Delhi" 
                                   required>
                        </div>
                        <div class="field-hint"><i class="ri-information-line"></i> Business name of the desktop customer.</div>
                    </div>

                    <div class="col-md-6 col-12">
                        <label for="machine_id" class="form-label fw-semibold">
                            Machine ID (Hardware Lock) <span class="text-danger">*</span>
                        </label>
                        <div class="modern-input-group @error('machine_id') has-error @enderror">
                            <span class="modern-icon"><i class="ri-computer-line"></i></span>
                            <input type="text" 
                                   name="machine_id" 
                                   id="machine_id" 
                                   class="form-control font-monospace @error('machine_id') is-invalid @enderror" 
                                   value="{{ old('machine_id') }}" 
                                   placeholder="FLEET-1A2B-3C4D-5E6F-7A8B" 
                                   style="text-transform: uppercase;"
                                   required>
                        </div>
                        <div class="field-hint"><i class="ri-information-line"></i> Customer copies this from their desktop activation screen.</div>
                    </div>
                </div>

                <!-- Section 2: Business Model, Expiry Date & Vehicle Limit -->
                <div class="row g-3 mb-4">
                    <!-- Business Model -->
                    <div class="col-md-4 col-12">
                        <label for="business_model" class="form-label fw-semibold">
                            Business Model <span class="text-danger">*</span>
                        </label>
                        <div class="modern-input-group @error('business_model') has-error @enderror">
                            <span class="modern-icon"><i class="ri-briefcase-4-line"></i></span>
                            <select name="business_model" id="business_model" class="form-select @error('business_model') is-invalid @enderror" required>
                                <option value="ENTERPRISE" {{ old('business_model', 'ENTERPRISE') == 'ENTERPRISE' ? 'selected' : '' }}>Case 4: Enterprise (Full Fleet & Accounts)</option>
                                <option value="TRANSPORT_WITH_FLEET" {{ old('business_model') == 'TRANSPORT_WITH_FLEET' ? 'selected' : '' }}>Case 3: Transport with Own Fleet</option>
                                <option value="TRANSPORT_NO_FLEET" {{ old('business_model') == 'TRANSPORT_NO_FLEET' ? 'selected' : '' }}>Case 2: Transport without Own Fleet</option>
                                <option value="TRADING" {{ old('business_model') == 'TRADING' ? 'selected' : '' }}>Case 1: Trading (Accounts + Stock)</option>
                            </select>
                        </div>
                        <div class="field-hint"><i class="ri-information-line"></i> Select operational edition for desktop.</div>
                    </div>

                    <!-- Expiry Date -->
                    <div class="col-md-4 col-12">
                        <label for="license_expiry" class="form-label fw-semibold">
                            License Expiry Date <span class="text-danger">*</span>
                        </label>
                        <div class="modern-input-group is-date @error('expires_at') has-error @enderror">
                            <span class="modern-icon"><i class="ri-calendar-event-line"></i></span>
                            <input type="text" 
                                   name="expires_at" 
                                   id="license_expiry" 
                                   class="form-control @error('expires_at') is-invalid @enderror" 
                                   value="{{ old('expires_at') }}" 
                                   placeholder="DD-MM-YYYY"
                                   required>
                        </div>
                        <div class="field-hint"><i class="ri-information-line"></i> Select license validity expiration.</div>
                    </div>

                    <!-- Vehicle Limit -->
                    <div class="col-md-4 col-12">
                        <label for="vehicle_limit" class="form-label fw-semibold">
                            Vehicle Limit <span class="text-danger">*</span>
                        </label>
                        <div class="modern-input-group @error('vehicle_limit') has-error @enderror">
                            <span class="modern-icon"><i class="ri-truck-line"></i></span>
                            <input type="number" 
                                   name="vehicle_limit" 
                                   id="vehicle_limit" 
                                   class="form-control @error('vehicle_limit') is-invalid @enderror" 
                                   value="{{ old('vehicle_limit') }}" 
                                   min="1" 
                                   placeholder="Enter limit (e.g. 10, 25, 50)" 
                                   required>
                        </div>
                        <div class="field-hint"><i class="ri-information-line"></i> Maximum fleet vehicles customer can create.</div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="d-flex align-items-center gap-2 pt-2 border-top">
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="ri-shield-keyhole-line me-1"></i> Generate License Key
                    </button>
                    <a href="{{ route('super-admin.license-generator.index') }}" class="btn btn-outline-secondary">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(document).ready(function() {
            var defaultDate = moment().add(1, 'year').format('DD-MM-YYYY');
            var existingVal = $('#license_expiry').val();
            
            $('#license_expiry').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                autoApply: true,
                minDate: moment().format('DD-MM-YYYY'),
                startDate: existingVal ? existingVal : defaultDate,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });

            if (!existingVal) {
                $('#license_expiry').val(defaultDate);
            }

            // Auto uppercase Machine ID
            $('#machine_id').on('input', function() {
                $(this).val($(this).val().toUpperCase());
            });

            // Focus input when clicking anywhere on wrapper
            $('.modern-input-group').on('click', function(e) {
                if (!$(e.target).is('input, select, textarea, button')) {
                    $(this).find('input, select, textarea').first().focus();
                }
            });
        });
    </script>
@endpush