@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')
<div id="alertBox" style="display:none;"></div>
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('product') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Add Product
            </h5>
        </div>
    </div>

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="card border-0 shadow-lg">
        <div class="card-header py-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h4 class="mb-1 fw-bold">Add New Product</h4>
                    <p class="text-muted mb-0">Manage clinic inventory and medicines</p>
                </div>
            </div>
        </div>

        <div class="card-body p-4">
           <form id="productForm" enctype="multipart/form-data">
    @csrf

                <div class="section-title mb-4">
                    <h5><i class="ti tabler-package me-2"></i>Product Information</h5>
                </div>
<div class="row">
      <div class="col-md-3 mb-3">
                        <label class="form-label">Product Name *</label>
                        <input type="text" name="product_name"
                               class="form-control @error('product_name') is-invalid @enderror"
                               placeholder="Enter product name" value="{{ old('product_name') }}">
                        @error('product_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
  <div class="col-md-3 mb-3">
                        <label class="form-label">Category Name *</label>
                        <select name="cat_name"
                               class="form-select"><option value="Select">Select</option><option value="Tablets">Tablets</option></select>                        
                    </div>

  
   <div class="col-md-3 mb-3">
                        <label class="form-label">Brand *</label>
                        <input type="text" name="brand"
                               class="form-control @error('brand') is-invalid @enderror"
                               placeholder="Enter" value="{{ old('brand') }}">
                        @error('brand') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                   
                       <div class="col-md-3 mb-3">
                        <label class="form-label">HSN Code *</label>
                        <input type="text" name="hsn_code"
                               class="form-control @error('hsn_code') is-invalid @enderror"
                               placeholder="Enter" value="{{ old('hsn_code') }}">
                        @error('hsn_code') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                       
                    <div class="col-12 mb-3">
                        <label class="form-label">Description</label>
                        <textarea rows="4" name="description" class="form-control"
                                  placeholder="Product description">{{ old('description') }}</textarea>
                    </div>

</div>
 <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-4 mb-3">
                        <label class="form-label">Purchase Price *</label>
                        <input type="number" name="purchase_price" step="0.01"
                               class="form-control @error('purchase_price') is-invalid @enderror"
                               value="{{ old('purchase_price') }}">
                        @error('purchase_price') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

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

                    <div class="col-md-4 mb-3">
                        <label class="form-label">GST (Optional)</label>
                        <input type="number" name="tax" step="0.01" class="form-control"
                               value="{{ old('tax') }}">
                    </div>

                   
                </div>

   <div class="section-title my-4">
                    <h5><i class="ti tabler-building-warehouse me-2"></i>Inventory</h5>
                </div>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Current Stock *</label>
                        <input type="number" name="current_stock"
                               class="form-control @error('current_stock') is-invalid @enderror"
                               value="{{ old('current_stock') }}">
                        @error('current_stock') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label">Minimum Stock Alert *</label>
                        <input type="number" name="minimum_stock"
                               class="form-control @error('minimum_stock') is-invalid @enderror"
                               value="{{ old('minimum_stock') }}">
                        @error('minimum_stock') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
    <div class="col-md-4 mb-3">
                       <label class="form-label">Strength value *</label>
                        <input type="text" name="st_val"
                               class="form-control @error('st_val') is-invalid @enderror"
                               placeholder="mg/g" value="{{ old('st_val') }}">
                        @error('st_val') <div class="invalid-feedback">{{ $message }}</div> @enderror
                   
                    </div>
                    <div class="col-md-4 mb-3">
                       <label class="form-label">Strength Unit *</label>
                        <input type="text" name="st_unit"
                               class="form-control @error('st_unit') is-invalid @enderror"
                               placeholder="mg/g" value="{{ old('st_unit') }}">
                        @error('st_unit') <div class="invalid-feedback">{{ $message }}</div> @enderror
                   
                    </div>


                    <div class="col-md-4 mb-3">
                        <label class="form-label">Batch Number</label>
                        <input type="text" name="batch_number" class="form-control"
                               value="{{ old('batch_number') }}">
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label">Expiry Date</label>
                        <input type="date" name="expiry_date" class="form-control"
                               value="{{ old('expiry_date') }}">
                    </div>

                    
                </div>
              

                <hr class="my-4">

                <div class="d-flex justify-content-center 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 Product</span>
</button>
                </div>

            </form>
        </div>
    </div>

    <style>
        .card { border-radius: 18px; }
        .form-control, .form-select { min-height: 50px; border-radius: 12px; }
        .form-control:focus, .form-select:focus { box-shadow: none; border-color: #696cff; }
        .section-title { border-left: 4px solid #696cff; padding-left: 12px; }
        .section-title h5 { margin: 0; font-weight: 700; }
        .card-header { border-bottom: 1px solid #edf1f7; }
    </style>
    <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('');
    }

    $('#productForm').on('submit', function(e) {
        e.preventDefault();

        clearErrors();

        const submitBtn  = $('#submitBtn');
        const submitText = $('#submitText');

        submitBtn.prop('disabled', true);
        submitText.text('Saving...');

        const formData = new FormData(this);

        $.ajax({
            url: '{{ route("store_product") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    $('#alertBox')
                        .html(`<div class="alert alert-success">${response.message}</div>`)
                        .show();
                    Toast.fire({icon: 'success',title: response.message});
                    setTimeout(function() {
                        window.location.href = '{{ route("product") }}';
                    }, 1000);
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false);
                submitText.text('Save Product');

                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(field, messages) {
                        $(`[name="${field}"]`).addClass('is-invalid');
                        $(`[name="${field}"]`).siblings('.invalid-feedback').text(messages[0]);
                    });
                } else {
                    $('#alertBox')
                        .html(`<div class="alert alert-danger">Something went wrong. Please try again.</div>`)
                        .show();
                        Toast.fire({icon: 'error',title: response.message});
                }
            }
        });
    });

});
</script>
@endsection