@extends('layouts.app')

@section('title', 'Add Product')

@section('content')
    @php
        $routePrefix = strtolower(auth()->user()->role->name);
    @endphp

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <h3 class="mb-0">Add New Product</h3>
            <span class="text-secondary fs-13">Create a pharmaceutical product using the CRM theme form layout.</span>
        </div>

        <a href="{{ route($routePrefix . '.products.index') }}" class="btn btn-outline-secondary py-1 px-2 px-sm-4 fs-14 fw-medium rounded-3">
            <span class="py-sm-1 d-block">
                <i class="ri-arrow-left-line d-none d-sm-inline-block"></i>
                <span>Back to Products</span>
            </span>
        </a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0 ps-3">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route($routePrefix . '.products.store') }}" enctype="multipart/form-data">
        @csrf

        <div class="row">
            <div class="col-xxl-8">
                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <div class="border-bottom pb-3 mb-4">
                            <h5 class="mb-1">Product Information</h5>
                            <span class="text-secondary fs-13">Basic details for the pharmaceutical product.</span>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Brand Name <span class="text-danger">*</span></label>
                                <input type="text" name="brand_name" value="{{ old('brand_name') }}" class="form-control @error('brand_name') is-invalid @enderror" placeholder="e.g. Amoxin 500" required>
                                @error('brand_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Composition <span class="text-danger">*</span></label>
                                <input type="text" name="composition" value="{{ old('composition') }}" class="form-control @error('composition') is-invalid @enderror" placeholder="e.g. Amoxicillin 500mg" required>
                                @error('composition')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Dosage Form <span class="text-danger">*</span></label>
                                <select name="dosage_form" class="form-control form-select @error('dosage_form') is-invalid @enderror" required>
                                    <option value="">Select Dosage Form</option>
                                    @php
                                        $dosageForms = [
                                            'Tablet', 'Capsule', 'Syrup', 'Suspension', 'Injection',
                                            'Cream', 'Ointment', 'Gel', 'Drops', 'Inhaler',
                                            'Powder', 'Sachet', 'Patch', 'Lotion', 'Spray', 'Other'
                                        ];
                                        $selected = old('dosage_form');
                                    @endphp
                                    @foreach($dosageForms as $form)
                                        <option value="{{ $form }}" @selected($selected === $form)>{{ $form }}</option>
                                    @endforeach
                                </select>
                                @error('dosage_form')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Packing Type <span class="text-danger">*</span></label>
                                <input type="text" name="packing_type" value="{{ old('packing_type') }}" class="form-control @error('packing_type') is-invalid @enderror" placeholder="e.g. 10×10 Alu-Alu, 60ml Bottle" required>
                                @error('packing_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Pack Size</label>
                                <input type="text" name="pack_size" value="{{ old('pack_size') }}" class="form-control @error('pack_size') is-invalid @enderror" placeholder="e.g. 100 tablets per box">
                                @error('pack_size')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Therapeutic Category</label>
                                <input type="text" name="therapeutic_category" value="{{ old('therapeutic_category') }}" class="form-control @error('therapeutic_category') is-invalid @enderror" placeholder="e.g. Antibiotics">
                                @error('therapeutic_category')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Dossier / Documents</label>
                                <input type="file" name="dossier" class="form-control @error('dossier') is-invalid @enderror">
                                @error('dossier')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Status</label>
                                <select name="status" class="form-control form-select @error('status') is-invalid @enderror">
                                    <option value="Active" @selected(old('status') === 'Active')>Active</option>
                                    <option value="Discontinued" @selected(old('status') === 'Discontinued')>Discontinued</option>
                                    <option value="Under Registration" @selected(old('status') === 'Under Registration')>Under Registration</option>
                                </select>
                                @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <div class="border-bottom pb-3 mb-4">
                            <h5 class="mb-1">Pricing & Compliance</h5>
                            <span class="text-secondary fs-13">MRP, GST rates, and regulatory information.</span>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">MRP (₹) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">₹</span>
                                    <input type="number" name="mrp" step="0.01" min="0" value="{{ old('mrp') }}" class="form-control @error('mrp') is-invalid @enderror" placeholder="0.00" required>
                                    @error('mrp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">HSN Code <span class="text-danger">*</span></label>
                                <input type="text" name="hsn_code" value="{{ old('hsn_code') }}" class="form-control @error('hsn_code') is-invalid @enderror" placeholder="e.g. 30049011" maxlength="20" required>
                                @error('hsn_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <div class="form-text">Refer to the Indian Customs Tariff for pharma HSN codes.</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">GST Rate (%) <span class="text-danger">*</span></label>
                                <select name="gst_rate" class="form-control form-select @error('gst_rate') is-invalid @enderror" required>
                                    <option value="">Select GST %</option>
                                    @php
                                        $gstRates = [0, 5, 12, 18, 28];
                                        $selectedGst = old('gst_rate');
                                    @endphp
                                    @foreach($gstRates as $rate)
                                        <option value="{{ $rate }}" @selected((string)$selectedGst === (string)$rate)>{{ $rate }}%</option>
                                    @endforeach
                                </select>
                                @error('gst_rate')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        {{-- Price Preview --}}
                        <div class="alert alert-light border rounded-3 mt-3" id="price-preview" style="display:none">
                            <small class="text-muted">
                                MRP incl. GST: <strong id="price-preview-val">—</strong>
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xxl-4">
                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <h5 class="mb-3">Publishing</h5>
                        <div class="mb-3">
                            <span class="text-secondary fs-13 d-block">Role Context</span>
                            <strong>{{ \Illuminate\Support\Str::of(auth()->user()->role->name)->replace('_', ' ')->title() }}</strong>
                        </div>
                        <div class="mb-3">
                            <span class="text-secondary fs-13 d-block">Company</span>
                            <strong>{{ auth()->user()->company->name ?? env('APP_NAME') }}</strong>
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary py-2">Save Product</button>
                            <a href="{{ route($routePrefix . '.products.index') }}" class="btn btn-outline-secondary py-2">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

@endsection

@push('script')
    <script>
        (function () {
            const mrpInput  = document.querySelector('[name="mrp"]');
            const gstSelect = document.querySelector('[name="gst_rate"]');
            const preview   = document.getElementById('price-preview');
            const previewVal= document.getElementById('price-preview-val');

            function update() {
                const mrp = parseFloat(mrpInput.value);
                const gst = parseFloat(gstSelect.value);
                if (!isNaN(mrp) && mrp > 0 && !isNaN(gst)) {
                    const total = (mrp * (1 + gst / 100)).toFixed(2);
                    previewVal.textContent = '₹' + parseFloat(total).toLocaleString('en-IN', { minimumFractionDigits: 2 });
                    preview.style.display = '';
                } else {
                    preview.style.display = 'none';
                }
            }

            mrpInput.addEventListener('input', update);
            gstSelect.addEventListener('change', update);
            update();
        })();
    </script>
@endpush