@extends('layouts.app')

@section('title', 'New Item')
@section('page-title', 'Create New Item')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-12">
        <form action="{{ route('items.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <!-- 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') }}" placeholder="Item Name" required>
                                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label d-block">Type <span
                                            class="text-danger">*</span></label>
                                    <div class="btn-group w-100 gap-2" role="group">

                                        <input type="radio"  name="type" id="type_goods" value="goods" {{
                                            old('type', 'goods' )=='goods' ? 'checked' : '' }}>
                                        <label class="" for="type_goods">Goods</label>

                                        <input type="radio" name="type" id="type_service" value="service" {{
                                            old('type')=='service' ? 'checked' : '' }}>
                                        <label class="" for="type_service">Service</label>

                                    </div>
                                    @error('type') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">Unit</label>
                                    <select name="unit" class="form-select">
                                        <option value="pcs">pcs</option>
                                        <option value="kg">kg</option>
                                        <option value="mtr">mtr</option>
                                        <option value="box">box</option>
                                        <option value="hrs">hrs</option>
                                        <option value="nos">nos</option>
                                    </select>
                                </div>
                                <div class="col-lg-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', '0.00') }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Item Image</label>
                           <div class="upload-box mt-2">
                                <div id="image-preview" class="d-none">
                                    <img src="" class="img-fluid rounded shadow-sm preview-img">
                                </div>
                                <div id="upload-placeholder">
                                    <i class="fas fa-image upload-icon"></i>
                                    <p class="upload-text">
                                        Drag images here or 
                                    </p>
                                    <span class="browse-text">Browse images</span>
                                </div>
                                <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" checked>
                            </div>
                        </div>
                        <div class="inner-pages-body" id="sales_section">
                            <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', '0.00') }}">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Sales Account</label>
                                <select name="sales_account" class="form-select">
                                    <option value="Sales">Sales</option>
                                    <option value="Other Income">Other Income</option>
                                </select>
                            </div>
                            <div class="mb-0">
                                <label class="form-label">Description</label>
                                <textarea name="sales_description" class="form-control" rows="3"
                                    placeholder="Sales description for invoice...">{{ old('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>Purchase Information</h6>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="enable_purchase" id="enable_purchase" checked>
                            </div>
                        </div>
                        <div class="inner-pages-body" id="purchase_section">
                            <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', '0.00') }}">
                                </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">
                                        <option value="Cost of Goods Sold">Cost of Goods Sold</option>
                                        <option value="Materials">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">
                                        <option value="">Select Vendor</option>
                                        @foreach($vendors as $vendor)
                                        <option value="{{ $vendor->id }}">{{ $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"
                                    placeholder="Purchase description for bill...">{{ old('purchase_description') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="my-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary">Save</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];

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

            reader.onload = function (e) {
                imagePreview.querySelector('img').src = e.target.result;

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

            reader.readAsDataURL(file);
        } else {
            // invalid file
            alert("Please select a valid image file");
            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