@extends('Admin.layout')
<link rel="stylesheet" href="{{ asset('assets/css/form.css') }}">
<!-- SweetAlert2 CSS for nice Toast messages -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

@section('content')

<style>
    .border-brand {
        border-color: var(--primary) !important;
    }
</style>

<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('medicines') }}"
        class="btn btn-icon btn-white border rounded-3 d-flex align-items-center justify-content-center btn-back shadow-sm"
        style="width: 42px; height: 42px; transition: all .2s ease;">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left" style="transition: stroke .2s ease;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M15 6l-6 6l6 6"></path>
        </svg>
    </a>
    <h5 class="mb-0 fw-bold border-start border-4 border-brand ps-3">Medicines</h5>
</div>

<div class="card border-0 shadow-lg rounded-4 overflow-hidden">
    <div class="card-header bg-brand-gradient border-0 py-4 px-4">
        <h4 class="mb-1 text-white fw-bold">Edit Medicines</h4>
    </div>

    <div class="card-body p-4">
        <!-- Form ID added and dynamic action route passed -->
                <form id="productEditForm"
                    action="{{ route('update_product', $product->id) }}"
                    method="POST"
                    enctype="multipart/form-data">

                    @csrf

                    {{-- Product Information --}}
                    <div class="section-title mb-4">
                        <h5><i class="ti tabler-package me-2"></i>Product Information</h5>
                    </div>

                    <div class="row g-3 mb-3">

                        <div class="col-md-4 mb-3">
                            <label class="form-label">Category *</label>
                            <select name="category_id" class="form-select @error('category_id') is-invalid @enderror">
                                <option value="">Select Category</option>
                                @foreach($categories as $cat)
                                <option value="{{ $cat->id }}"
                                    {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">Product Name *</label>
                            <input type="text" name="product_name"
                                class="form-control @error('product_name') is-invalid @enderror"
                                value="{{ old('product_name',$product->product_name) }}">
                            @error('product_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">Brand *</label>
                            <input type="text" name="brand" class="form-control @error('brand') is-invalid @enderror"
                                value="{{ old('brand',$product->brand) }}">
                            @error('brand')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- <div class="col-md-3">
                            <label class="form-label">HSN Code *</label>
                            <input type="text" name="hsn_code"
                                class="form-control @error('hsn_code') is-invalid @enderror"
                                value="{{ old('hsn_code',$product->hsn_code) }}">
                            @error('hsn_code')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div> -->

                        <!-- <div class="col-12">
                            <label class="form-label">Description</label>
                            <textarea rows="4" name="description"
                                class="form-control">{{ old('description',$product->description ?? '-') }}</textarea>
                        </div> -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Minimum Stock Alert <span class="text-danger">*</span></label>
                            <input type="number" name="minimum_stock"
                                class="form-control @error('minimum_stock') is-invalid @enderror"
                                value="{{ old('minimum_stock', $product->minimum_stock) }}">

                            @error('minimum_stock')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Strength Unit <span class="text-danger">*</span></label>
                            <input type="text" 
                                name="st_val" 
                                class="form-control @error('st_val') is-invalid @enderror"
                                placeholder="25 mg"
                                value="{{ old('st_val', $product->st_val) }}">

                            @error('st_val')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- <div class="col-md-4 mb-3">
                            <label class="form-label">Unit <span class="text-danger">*</span></label>
                            <input type="text" 
                                name="st_unit" 
                                class="form-control @error('st_unit') is-invalid @enderror"
                                placeholder="mg/g"
                                value="{{ old('st_unit', $product->st_unit) }}">

                            @error('st_unit')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div> -->
                    </div>

                    {{-- Pricing --}}
                    <div class="section-title my-4">
                        <h5><i class="ti tabler-currency-rupee me-2"></i>Pricing</h5>
                    </div>

                    <div class="row">

                        <div class="col-md-3 mb-3">
                            <label class="form-label">Purchase Price *</label>
                            <input type="number" name="purchase_price" step="1"
                                class="form-control @error('purchase_price') is-invalid @enderror"
                                value="{{ old('purchase_price',$product->purchase_price) }}">
                            @error('purchase_price')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label class="form-label">Selling Price *</label>
                            <input type="number" name="selling_price" step="1"
                                class="form-control @error('selling_price') is-invalid @enderror"
                                value="{{ old('selling_price',$product->selling_price) }}">
                            @error('selling_price')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label class="form-label">GST</label>
                            <input type="number" name="tax" step="0.01" class="form-control"
                                value="{{ old('tax',$product->tax) }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="Active" {{ old('status',$product->status)=='Active' ? 'selected' : '' }}>
                                    Active
                                </option>
                                <option value="Inactive"
                                    {{ old('status',$product->status)=='Inactive' ? 'selected' : '' }}>
                                    Inactive
                                </option>
                            </select>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="d-flex justify-content-center align-items-center">
                        
                        <div class="d-flex gap-2">
                            <a href="{{ route('product') }}" class="btn btn-light px-4">Cancel</a>
                            <button type="submit" class="btn btn-primary px-4" id="submitBtn">
                                <i class="ti tabler-device-floppy me-1"></i>
                                <span id="submitText">Save Changes</span>
                            </button>
                        </div>
                    </div>

                </form>

    </div>
</div>

<!-- Scripts Section -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {

    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

    function clearErrors() {
        $('.form-control, .form-select').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }
    
$('#productEditForm').on('submit', function () {

    $('#submitBtn').prop('disabled', true);

    $('#submitText').html(`
        <span class="spinner-border spinner-border-sm me-1"></span>
        Processing...
    `);

});

});
</script>

@endsection