@extends('layouts.app')

@section('title', 'Edit Item')
@section('page-title', 'Edit Item')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-12">
        <form action="{{ route('items.update', $item->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <!-- A. Basic Information -->
           <div class="inner-pages-div">
                <div class="inner-pages-header">
                    <h6>Basic Information</h6>
                </div>
                <div class="inner-pages-body">
                    <div class="row g-4">
                        <div class="col-md-8">
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label class="form-label">Name <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                        value="{{ old('name', $item->name) }}" required>
                                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label d-block">Type <span
                                            class="text-danger">*</span></label>
                                    <div class="btn-group gap-2" role="group">
                                        <input type="radio" name="type" id="type_goods" value="goods" {{
                                            old('type', $item->type) == 'goods' ? 'checked' : '' }}>
                                        <label for="type_goods">Goods</label>

                                        <input type="radio" name="type" id="type_service" value="service" {{
                                            old('type', $item->type) == 'service' ? 'checked' : '' }}>
                                        <label for="type_service">Service</label>
                                    </div>
                                    @error('type') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Unit</label>
                                    <select name="unit" class="form-select">
                                        @foreach(['pcs', 'kg', 'mtr', 'box', 'hrs', 'nos'] as $u)
                                        <option value="{{ $u }}" {{ old('unit', $item->unit) == $u ? 'selected' : '' }}>{{ $u }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12" id="stock_field">
                                    <label class="form-label">Opening Stock</label>
                                    <input type="number" step="0.01" name="opening_stock" class="form-control"
                                        value="{{ old('opening_stock', $item->opening_stock) }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Item Image</label>
                            <div class="upload-box mt-2">

                            <!-- Preview -->
                            <div id="image-preview" class="{{ $item->image ? '' : 'd-none' }}">
                                <img src="{{ $item->image ? asset('storage/' . $item->image) : '' }}" class="preview-img">
                            </div>

                            <!-- Placeholder -->
                            <div id="upload-placeholder" class="{{ $item->image ? 'd-none' : '' }}">
                                <i class="fas fa-image upload-icon"></i>
                                <p class="upload-text">
                                    Drag image(s) here or <br>
                                    <span class="browse-text">Browse images</span>
                                </p>
                            </div>

                            <!-- Change overlay (only when image exists) -->
                            @if($item->image)
                            <div class="change-overlay">
                                <span>Change Image</span>
                            </div>
                            @endif

                            <input type="file" name="image" id="image-input" accept="image/*">
                        </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- B. Sales Information -->
               <div class="col-md-6 mt-4">
                    <div class="inner-pages-div">
                        <div class="inner-pages-header">
                            <h6>Sales Information</h6>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="enable_sales" id="enable_sales" {{
                                    $item->enable_sales ? 'checked' : '' }}>
                            </div>
                        </div>
                        <div class="inner-pages-body" id="sales_section" style="{{ $item->enable_sales ? '' : 'opacity: 0.4;' }}">
                            <div class="mb-3">
                                <label class="form-label">Selling Price ({{
                                    config('app.currency_code', 'INR') }})</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">{{ getCurrencySymbol() }}</span>
                                    <input type="number" step="0.01" name="sales_price" class="form-control border-start-0"
                                        value="{{ old('sales_price', $item->sales_price) }}" {{ $item->enable_sales ? '' : 'disabled'
                                    }}>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Sales Account</label>
                                <select name="sales_account" class="form-select" {{ $item->enable_sales ? '' : 'disabled' }}>
                                    <option value="Sales" {{ old('sales_account', $item->sales_account) == 'Sales' ? 'selected' : ''
                                        }}>Sales</option>
                                    <option value="Other Income" {{ old('sales_account', $item->sales_account) == 'Other Income' ?
                                        'selected' : '' }}>Other Income</option>
                                </select>
                            </div>
                            <div class="mb-0">
                                <label class="form-label">Description</label>
                                <textarea name="sales_description" class="form-control" rows="3" {{
                                    $item->enable_sales ? '' : 'disabled' }}>{{ old('sales_description', $item->sales_description) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- C. Purchase Information -->
               <div class="col-md-6 mt-4">
                <div class="inner-pages-div">
                    <div class="inner-pages-header">
                        <h6>Sales Information</h6>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="enable_purchase" id="enable_purchase" {{
                                $item->enable_purchase ? 'checked' : '' }}>
                        </div>
                    </div>
                    <div class="inner-pages-body"id="purchase_section" style="{{ $item->enable_purchase ? '' : 'opacity: 0.4;' }}">
                        <div class="mb-3">
                            <label class="form-label">Cost Price ({{
                                config('app.currency_code', 'INR') }})</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white border-end-0">{{ getCurrencySymbol() }}</span>
                                <input type="number" step="0.01" name="purchase_price" class="form-control border-start-0"
                                    value="{{ old('purchase_price', $item->purchase_price) }}" {{ $item->enable_purchase ? '' :
                                'disabled' }}>
                            </div>
                        </div>
                        <div class="row"> 
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Purchase Account</label>
                                <select name="purchase_account" class="form-select" {{ $item->enable_purchase ? '' : 'disabled' }}>
                                    <option value="Cost of Goods Sold" {{ old('purchase_account', $item->purchase_account) == 'Cost of
                                        Goods Sold' ? 'selected' : '' }}>Cost of Goods Sold</option>
                                    <option value="Materials" {{ old('purchase_account', $item->purchase_account) == 'Materials' ?
                                        'selected' : '' }}>Materials</option>
                                </select>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Preferred Vendor</label>
                                <select name="preferred_vendor_id" class="form-select" {{ $item->enable_purchase ? '' : 'disabled' }}>
                                    <option value="">Select Vendor</option>
                                    @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}" {{ old('preferred_vendor_id', $item->preferred_vendor_id) ==
                                        $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="mb-0">
                            <label class="form-label">Description</label>
                            <textarea name="purchase_description" class="form-control" rows="3" {{
                                $item->enable_purchase ? '' : 'disabled' }}>{{ old('purchase_description', $item->purchase_description) }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
            </div>

            <div class="my-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary">Update Item</button>
                <a href="{{ route('items.index') }}" class="btn btn-light">Cancel</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Image Preview
    const imageInput = document.getElementById('image-input');
    const imagePreview = document.getElementById('image-preview');
    const uploadPlaceholder = document.getElementById('upload-placeholder');

    imageInput.addEventListener('change', function () {
        const file = this.files[0];

        // ✅ file check
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();

            reader.onload = function (e) {
                const img = imagePreview.querySelector('img');

                if (img) {
                    img.src = e.target.result;
                }

                imagePreview.classList.remove('d-none');
                uploadPlaceholder.classList.add('d-none');
            };

            reader.readAsDataURL(file);
        } else {
            alert("Please select a valid image");
            imageInput.value = "";
        }
    });

    // Toggle Sections
    const salesToggle = document.getElementById('enable_sales');
    const salesSection = document.getElementById('sales_section');
    salesToggle.addEventListener('change', function() {
        salesSection.style.opacity = this.checked ? '1' : '0.4';
        salesSection.querySelectorAll('input, select, textarea').forEach(el => el.disabled = !this.checked);
    });

    const purchaseToggle = document.getElementById('enable_purchase');
    const purchaseSection = document.getElementById('purchase_section');
    purchaseToggle.addEventListener('change', function() {
        purchaseSection.style.opacity = this.checked ? '1' : '0.4';
        purchaseSection.querySelectorAll('input, select, textarea').forEach(el => el.disabled = !this.checked);
    });

    // Stock Field Toggle
    const typeGoods = document.getElementById('type_goods');
    const typeService = document.getElementById('type_service');
    const stockField = document.getElementById('stock_field');

    function toggleStockField() {
        stockField.style.display = typeGoods.checked ? 'block' : 'none';
        stockField.querySelector('input').disabled = !typeGoods.checked;
    }

    typeGoods.addEventListener('change', toggleStockField);
    typeService.addEventListener('change', toggleStockField);
    toggleStockField();
});
</script>
@endpush
@endsection