@extends('layouts.app')
@section('title', isset($printer) ? 'Edit Printer' : 'Register Printer')
@section('header_title', isset($printer) ? 'Edit Printer Details' : 'Register New Hardware')

@push('styles')
<style>
    .form-card {
        background: white;
        border-radius: 16px;
        border: 1px solid #eef2f6;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
        padding: 2rem;
        max-width: 800px;
        margin: 0 auto;
    }
    .form-label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #475569;
        margin-bottom: 4px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    .form-control {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        font-size: 14px;
        color: #1e293b;
        background: #f8fafc;
        transition: all 0.2s ease;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    .form-control:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
        background: white;
    }
    .form-control:disabled {
        background: #e2e8f0;
        color: #94a3b8;
        cursor: not-allowed;
    }
    .form-control::placeholder {
        color: #94a3b8;
    }
    .form-hint {
        font-size: 11px;
        color: #94a3b8;
        margin-top: 4px;
    }
    .form-section-title {
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .form-section-title .icon {
        width: 24px;
        height: 24px;
        background: #eef2ff;
        color: #4338ca;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .form-grid .full-width {
        grid-column: 1 / -1;
    }
    .checkbox-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding: 6px 0;
    }
    .checkbox-wrapper input[type="checkbox"] {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 2px solid #cbd5e1;
        accent-color: #3b82f6;
        cursor: pointer;
        flex-shrink: 0;
    }
    .checkbox-wrapper input[type="checkbox"]:checked {
        border-color: #3b82f6;
    }
    .checkbox-label {
        font-size: 13px;
        font-weight: 600;
        color: #334155;
    }
    .form-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        padding-top: 20px;
        margin-top: 8px;
        border-top: 1px solid #f1f5f9;
    }
    .btn-cancel {
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        border-radius: 10px;
        transition: all 0.2s ease;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    .btn-cancel:hover {
        color: #1e293b;
        background: #f1f5f9;
    }
    .btn-submit {
        padding: 10px 28px;
        font-size: 13px;
        font-weight: 700;
        color: white;
        background: #1e293b;
        border: none;
        border-radius: 10px;
        transition: all 0.2s ease;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .btn-submit:hover {
        background: #0f172a;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .btn-submit.primary {
        background: #2563eb;
    }
    .btn-submit.primary:hover {
        background: #1d4ed8;
    }
    .location-locked {
        padding: 10px 14px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        font-size: 14px;
        color: #475569;
        font-weight: 500;
    }
    .location-locked .lock-icon {
        margin-right: 6px;
    }
    
    @media (max-width: 640px) {
        .form-card {
            padding: 1.25rem;
        }
        .form-grid {
            grid-template-columns: 1fr;
        }
        .form-actions {
            flex-direction: column-reverse;
            align-items: stretch;
        }
        .btn-cancel, .btn-submit {
            text-align: center;
            justify-content: center;
        }
    }
</style>
@endpush

@section('content')
<div class="form-card">

    <form action="{{ isset($printer) ? route('printers.update', $printer->id) : route('printers.store') }}" method="POST">
        @csrf
        @if(isset($printer)) @method('PUT') @endif

        <div class="mb-5">
            <label class="form-label">Branch Location</label>
            @hasanyrole('Super Admin|Executive')
                <select name="location_id" id="location_id" required class="form-control">
                    @foreach($locations as $loc)
                        <option value="{{ $loc->id }}" {{ (old('location_id', $printer->location_id ?? '') == $loc->id) ? 'selected' : '' }}>
                            {{ $loc->name }}
                        </option>
                    @endforeach
                </select>
            @else
                <div class="location-locked">
                    <span class="lock-icon">🔒</span> {{ auth()->user()->location->name ?? 'Unassigned' }}
                    <input type="hidden" name="location_id" id="location_id" value="{{ auth()->user()->location_id }}">
                </div>
                <p class="form-hint">Locked to your assigned location.</p>
            @endhasanyrole
        </div>

        <div class="form-group mb-5">
            <label for="sub_location_id" class="form-label">Select Sub-Location</label>
            <select name="sub_location_id" id="sub_location_id" class="form-control">
                <option value="">-- First select a location --</option>
            </select>
        </div>

        <div class="mb-6">
            <div class="form-section-title">
                <svg class="inline-block w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                </svg>
                Printer Details
            </div>
            
            <div class="form-grid">
                <!-- Row 1 -->
                <div>
                    <label class="form-label">Exact Printer Name <span class="text-red-500">*</span></label>
                    <input type="text" name="printer_name" value="{{ old('printer_name', $printer->printer_name ?? '') }}" 
                           required placeholder="e.g. HP LaserJet Pro MFP"
                           class="form-control">
                    <p class="form-hint">Must exactly match the name the Python Agent sends.</p>
                </div>
                
                <div>
                    <label class="form-label">Hardware Serial Number <span class="text-slate-400 font-normal">(Highly Recommended)</span></label>
                    <input type="text" name="serial_number" value="{{ old('serial_number', $printer->serial_number ?? '') }}" 
                           placeholder="e.g. CNB1N2K3YF"
                           class="form-control font-mono">
                    <p class="form-hint">Used as the absolute source of truth to track jobs.</p>
                </div>

                <!-- Row 2 -->
                <div>
                    <label class="form-label">IP Address <span class="text-slate-400 font-normal">(Optional)</span></label>
                    <input type="text" name="ip_address" value="{{ old('ip_address', $printer->ip_address ?? '') }}" 
                           placeholder="192.168.x.x"
                           class="form-control font-mono">
                </div>

                <!-- Printer Type -->
                <div>
                    <label class="form-label">Color Capability <span class="text-red-500">*</span></label>
                    <select name="printer_type" id="printer_type" class="form-control" required>
                        <option value="both" {{ old('printer_type', $printer->printer_type ?? 'both') == 'both' ? 'selected' : '' }}>
                            Color & B&W Supported
                        </option>
                        <option value="bw" {{ old('printer_type', $printer->printer_type ?? 'both') == 'bw' ? 'selected' : '' }}>
                            Monochrome (B&W) Only
                        </option>
                    </select>
                    <p class="form-hint text-blue-600 font-medium mt-1">Forces jobs to B&W if hardware doesn't support color.</p>
                </div>
            </div>
        </div>

        <div class="mb-6">
            <label class="checkbox-wrapper">
                <input type="checkbox" name="is_active" value="1"
                       {{ old('is_active', $printer->is_active ?? true) ? 'checked' : '' }}>
                <span class="checkbox-label">Printer is Active</span>
            </label>
        </div>

        <!-- NEW PRICING CONFIGURATION SECTION -->
        <div class="mb-6">
            <div class="form-section-title">
                <svg class="inline-block w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Pricing Configuration
            </div>

            <div class="form-grid">
                <div class="full-width mb-2">
                    <label class="form-label">Lifetime Page Capacity</label>
                    <input type="number" name="lifetime_page_limit" id="lifetime_page_limit" 
                           class="form-control" placeholder="e.g., 100000" 
                           value="{{ old('lifetime_page_limit', $printer->lifetime_page_limit ?? '') }}">
                    <p class="form-hint">Total expected prints before hardware replacement.</p>
                </div>

                <!-- A4 Pricing Box -->
                <div class="p-4 border border-slate-200 rounded-xl bg-slate-50">
                    <h4 class="font-bold text-slate-700 mb-4 border-b pb-2">A4 Paper Costs</h4>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-600 mb-1 uppercase tracking-wide">B&W A4 Cost (Rs.) <span class="text-red-500">*</span></label>
                            <input type="number" step="0.01" name="bw_a4_cost" class="form-control" required placeholder="0.50"
                                   value="{{ old('bw_a4_cost', $printer->bw_a4_cost ?? '0.00') }}">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-600 mb-1 uppercase tracking-wide">Color A4 Cost (Rs.)</label>
                            <input type="number" step="0.01" name="color_a4_cost" class="form-control color-cost-input" placeholder="2.50"
                                   value="{{ old('color_a4_cost', $printer->color_a4_cost ?? '0.00') }}">
                        </div>
                    </div>
                </div>

                <!-- A3 Pricing Box -->
                <div class="p-4 border border-slate-200 rounded-xl bg-slate-50">
                    <h4 class="font-bold text-slate-700 mb-4 border-b pb-2">A3 Paper Costs</h4>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-600 mb-1 uppercase tracking-wide">B&W A3 Cost (Rs.) <span class="text-red-500">*</span></label>
                            <input type="number" step="0.01" name="bw_a3_cost" class="form-control" required placeholder="1.00"
                                   value="{{ old('bw_a3_cost', $printer->bw_a3_cost ?? '0.00') }}">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-600 mb-1 uppercase tracking-wide">Color A3 Cost (Rs.)</label>
                            <input type="number" step="0.01" name="color_a3_cost" class="form-control color-cost-input" placeholder="5.00"
                                   value="{{ old('color_a3_cost', $printer->color_a3_cost ?? '0.00') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="form-actions">
            <a href="{{ route('printers.index') }}" class="btn-cancel">Cancel</a>
            <button type="submit" class="btn-submit primary">
                {{ isset($printer) ? 'Update Hardware' : 'Register Hardware' }}
            </button>
        </div>

    </form>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const locationSelect = document.getElementById('location_id');
    const subLocationSelect = document.getElementById('sub_location_id');
    const printerTypeSelect = document.getElementById('printer_type');
    const colorCostInputs = document.querySelectorAll('.color-cost-input'); // Selects both A4 and A3 color inputs
    
    // Grab the existing saved sub-location ID from Laravel so we can re-select it
    const savedSubLocationId = "{{ $printer->sub_location_id ?? '' }}";

    // Create a reusable function to fetch the data
    function fetchSubLocations(locationId, selectedId = null) {
        subLocationSelect.innerHTML = '<option value="">Loading...</option>';

        if (locationId) {
            fetch(`/api/locations/${locationId}/sub-locations`)
                .then(response => response.json())
                .then(data => {
                    subLocationSelect.innerHTML = '<option value="">-- Select Sub-Location --</option>';
                    
                    if(data.length === 0) {
                        subLocationSelect.innerHTML = '<option value="">No sub-locations found</option>';
                    } else {
                        data.forEach(sub => {
                            // Check if this sub-location matches the one saved in the database
                            const isSelected = (selectedId && selectedId == sub.id) ? 'selected' : '';
                            subLocationSelect.innerHTML += `<option value="${sub.id}" ${isSelected}>${sub.name}</option>`;
                        });
                    }
                })
                .catch(error => {
                    console.error('Error fetching sub-locations:', error);
                    subLocationSelect.innerHTML = '<option value="">Error loading data</option>';
                });
        } else {
            subLocationSelect.innerHTML = '<option value="">-- First select a location --</option>';
        }
    }

    // 1. FIRE ON PAGE LOAD: Fetch sub-locations for the pre-selected location
    if (locationSelect.value) {
        fetchSubLocations(locationSelect.value, savedSubLocationId);
    }

    // 2. FIRE ON CHANGE: Fetch new sub-locations if the user changes the location
    locationSelect.addEventListener('change', function() {
        // We pass 'null' here because if they change the main location, 
        // the old sub-location is no longer valid.
        fetchSubLocations(this.value, null); 
    });

    // 3. PRINTER TYPE LOGIC: Disable Color Costs if B&W Only is selected
    function handlePrinterTypeChange() {
        const isMonochrome = printerTypeSelect.value === 'bw';
        
        colorCostInputs.forEach(input => {
            if (isMonochrome) {
                input.value = '0.00';
                input.disabled = true;
                input.title = 'Color cost is disabled for Monochrome printers.';
            } else {
                input.disabled = false;
                input.title = '';
            }
        });
    }

    // Fire on load and on change
    handlePrinterTypeChange();
    printerTypeSelect.addEventListener('change', handlePrinterTypeChange);
});
</script>
@endsection