@extends('layouts.cork')
@section('title',  $title)

@section('page-css')
    <style>
        .asset-tag-container {
            position: relative;
        }
        .asset-tag-status {
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
        .asset-tag-status.available {
            color: #28a745;
        }
        .asset-tag-status.unavailable {
            color: #dc3545;
        }
        .generate-btn {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: #007bff;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            cursor: pointer;
        }
        .generate-btn:hover {
            background: #0056b3;
        }
        .generate-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }
    </style>
@endsection

@section('breadcrumb')
<div class="page-meta">
    <nav class="breadcrumb-style-one" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('equipment.index') }}">Equipment</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
        </ol>
    </nav>
</div>
@endsection

@section('content')
<form method="post" action="@if($action == 'create'){{ route('equipment.store') }}@else{{ route('equipment.update', $equipment->id) }}@endif">
    @csrf
    @if($action == 'edit') @method('PUT') @endif
    
    <div class="form-group">
        <label for="name">Name*</label>
        <div class="form-row">
            <div class="col-md-6 mb-4">
                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" aria-describedby="basic-addon3" value="{{ $equipment->name ?? old('name') }}">
                @error('name')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('name') }}
                </div>
                @enderror
            </div>
        </div>
    </div>
    
    <div class="form-group">
        <label for="department_id">Department*</label>
        <div class="form-row">
            <div class="col-md-6 mb-4">
                <select name="department_id" id="department_id" class="form-select @error('department_id') is-invalid @enderror">
                    <option value="">Select Department</option>
                    @foreach ($departments as $department)
                        <option value="{{ $department->id }}" @if(isset($equipment) && $equipment->department_id == $department->id) selected @elseif(old('department_id') == $department->id) selected @endif>{{ $department->name }}</option>
                    @endforeach
                </select>
                @error('department_id')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('department_id') }}
                </div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="asset_tag">Asset Tag*</label>
        <div class="form-row">
            <div class="col-md-6 mb-4">
                <div class="asset-tag-container">
                    <input type="text" class="form-control @error('asset_tag') is-invalid @enderror" id="asset_tag" name="asset_tag" aria-describedby="basic-addon3" value="{{ $equipment->asset_tag ?? old('asset_tag') }}">
                    <button type="button" id="generateAssetTag" class="generate-btn" disabled>Generate</button>
                </div>
                <div id="assetTagStatus" class="asset-tag-status"></div>
                @error('asset_tag')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('asset_tag') }}
                </div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="serial_num">Serial #*</label>
        <div class="form-row">
            <div class="col-md-6 mb-4">
                <input type="text" class="form-control @error('serial_num') is-invalid @enderror" id="serial_num" name="serial_num" aria-describedby="basic-addon3" value="{{ $equipment->serial_num ?? old('serial_num') }}">
                @error('serial_num')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('serial_num') }}
                </div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="model">Model</label>
        <div class="form-row">
            <div class="col-md-6 mb-4">
                <input type="text" class="form-control @error('model') is-invalid @enderror" id="model" name="model" aria-describedby="basic-addon3" value="{{ $equipment->model ?? old('model') }}">
                @error('model')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('model') }}
                </div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="condition">Condition*</label>
        <div class="form-row">
            <div class="col-md-6 mb-4">
                <select name="condition" id="condition" class="form-select @error('condition') is-invalid @enderror">
                    <option value="">Select Condition</option>
                    <option value="E" @if((isset($equipment) && $equipment->condition == 'E') || old('condition') == 'E') selected @endif>Excellent</option>
                    <option value="G" @if((isset($equipment) && $equipment->condition == 'G') || old('condition') == 'G') selected @endif>Good</option>
                    <option value="F" @if((isset($equipment) && $equipment->condition == 'F') || old('condition') == 'F') selected @endif>Fair</option>
                    <option value="P" @if((isset($equipment) && $equipment->condition == 'P') || old('condition') == 'P') selected @endif>Poor</option>
                </select>
                @error('condition')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('condition') }}
                </div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="purchase_date">Purchase Date*</label>
        <div class="form-row">
            <div class="col-md-6 mb-4">
                <input type="date" class="form-control @error('purchase_date') is-invalid @enderror" id="purchase_date" name="purchase_date" value="{{ isset($equipment) ? $equipment->purchase_date?->format('Y-m-d') : old('purchase_date') }}">
                @error('purchase_date')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('purchase_date') }}
                </div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="purchase_price">Purchase Price*</label>
        <div class="form-row">
            <div class="col-md-6 mb-4">
                <input type="number" step="0.01" class="form-control @error('purchase_price') is-invalid @enderror" id="purchase_price" name="purchase_price" value="{{ $equipment->purchase_price ?? old('purchase_price') }}">
                @error('purchase_price')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('purchase_price') }}
                </div>
                @enderror
            </div>
        </div>
    </div>
    
    <div class="form-group">
        <label for="description">Description</label>
        <div class="form-row">
            <div class="col-md-12 mb-4">
                <textarea class="form-control @error('description') is-invalid @enderror" name="description" id="description" aria-describedby="basic-addon3" rows="3">{{ $equipment->description ?? old('description')}}</textarea>
                @error('description')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('description') }}
                </div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="notes">Notes</label>
        <div class="form-row">
            <div class="col-md-12 mb-4">
                <textarea class="form-control @error('notes') is-invalid @enderror" name="notes" id="notes" aria-describedby="basic-addon3" rows="3">{{ $equipment->notes ?? old('notes')}}</textarea>
                @error('notes')
                <div class="invalid-feedback" style="display: block !important;">
                    {{ $errors->first('notes') }}
                </div>
                @enderror
            </div>
        </div>
    </div>
    
    <div class="form-row">
        <div class="input-group mb-4">
            <input type="submit" name="txt" class="mt-4 btn btn-primary" value="@if($action == 'create') Add @else Update @endif">
        </div>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const departmentSelect = document.getElementById('department_id');
    const assetTagInput = document.getElementById('asset_tag');
    const generateBtn = document.getElementById('generateAssetTag');
    const statusDiv = document.getElementById('assetTagStatus');
    const equipmentId = {{ isset($equipment) ? $equipment->id : 'null' }};
    
    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    
    if (!csrfToken) {
        console.error('CSRF token not found');
        return;
    }
    
    // Enable/disable generate button based on department selection
    departmentSelect.addEventListener('change', function() {
        if (this.value) {
            generateBtn.disabled = false;
            // Auto-generate on department change if asset tag is empty (for new equipment)
            if (!assetTagInput.value.trim() && !equipmentId) {
                generateAssetTag();
            }
        } else {
            generateBtn.disabled = true;
            assetTagInput.value = '';
            statusDiv.textContent = '';
            statusDiv.className = 'asset-tag-status';
        }
    });
    
    // Generate asset tag button click
    generateBtn.addEventListener('click', generateAssetTag);
    
    // Check asset tag availability when manually typed
    let checkTimeout;
    assetTagInput.addEventListener('input', function() {
        clearTimeout(checkTimeout);
        if (this.value.trim()) {
            checkTimeout = setTimeout(() => checkAssetTagAvailability(this.value), 500);
        } else {
            statusDiv.textContent = '';
            statusDiv.className = 'asset-tag-status';
        }
    });
    
    // Initial check if editing existing equipment
    if (equipmentId && assetTagInput.value.trim()) {
        checkAssetTagAvailability(assetTagInput.value);
    }
    
    // Enable generate button if department already selected (edit mode)
    if (departmentSelect.value) {
        generateBtn.disabled = false;
    }
    
    function generateAssetTag() {
        const departmentId = departmentSelect.value;
        if (!departmentId) return;
        
        generateBtn.disabled = true;
        generateBtn.textContent = 'Loading...';
        
        fetch('{{ route("equipment.generate-asset-tag") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
                department_id: departmentId,
                equipment_id: equipmentId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.asset_tag) {
                assetTagInput.value = data.asset_tag;
                statusDiv.textContent = 'Generated asset tag';
                statusDiv.className = 'asset-tag-status available';
            } else {
                statusDiv.textContent = data.error || 'Error generating asset tag';
                statusDiv.className = 'asset-tag-status unavailable';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            statusDiv.textContent = 'Error generating asset tag';
            statusDiv.className = 'asset-tag-status unavailable';
        })
        .finally(() => {
            generateBtn.disabled = false;
            generateBtn.textContent = 'Generate';
        });
    }
    
    function checkAssetTagAvailability(assetTag) {
        fetch('{{ route("equipment.check-asset-tag") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
                asset_tag: assetTag,
                equipment_id: equipmentId
            })
        })
        .then(response => response.json())
        .then(data => {
            statusDiv.textContent = data.message;
            statusDiv.className = 'asset-tag-status ' + (data.available ? 'available' : 'unavailable');
        })
        .catch(error => {
            console.error('Error:', error);
            statusDiv.textContent = 'Error checking availability';
            statusDiv.className = 'asset-tag-status unavailable';
        });
    }
});
</script>
@endsection