@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>
                Edit Product
            </h5>
        </div>
    </div>

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

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card border-0 shadow-sm">

                <div class="card-header py-3">
                    <h4 class="fw-bold mb-1">Edit Product</h4>
                    <p class="text-muted mb-0">Update clinic inventory product information</p>
                </div>

                <div class="card-body p-4">

                    {{-- Update Form --}}
                  <form id="productEditForm" enctype="multipart/form-data">
    @csrf
    @method('PUT')

                        {{-- 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-2">
                                <label class="form-label">Product ID</label>
                                <input type="text" class="form-control bg-light" value="{{ $product->id }}" readonly>
                            </div>
                            <div class="col-md-5">
                                <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-5">
                                <label class="form-label">Product Code / SKU *</label>
                                <input type="text" name="product_code"
                                       class="form-control @error('product_code') is-invalid @enderror"
                                       value="{{ old('product_code', $product->product_code) }}">
                                @error('product_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Category *</label>
                                <select name="category" class="form-select @error('category') is-invalid @enderror">
                                    <option value="">Select Category</option>
                                    @foreach($categories as $cat)
                                        <option value="{{ $cat->name }}"
                                            {{ old('category', $product->category) == $cat->name ? 'selected' : '' }}>
                                            {{ $cat->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('category')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Brand</label>
                                <input type="text" name="brand" class="form-control"
                                       value="{{ old('brand', $product->brand) }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Manufacturer</label>
                                <input type="text" name="manufacturer" class="form-control"
                                       value="{{ old('manufacturer', $product->manufacturer) }}">
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-12">
                                <label class="form-label">Description</label>
                                <textarea rows="3" name="description" class="form-control">{{ old('description', $product->description) }}</textarea>
                            </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 g-3 mb-3">
                            <div class="col-md-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', $product->purchase_price) }}">
                                @error('purchase_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-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', $product->selling_price) }}">
                                @error('selling_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tax (%)</label>
                                <input type="number" name="tax" step="0.01" class="form-control"
                                       value="{{ old('tax', $product->tax) }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Discount (%)</label>
                                <input type="number" name="discount" step="0.01" class="form-control"
                                       value="{{ old('discount', $product->discount) }}">
                            </div>
                        </div>

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

                        <div class="row g-3 mb-3">
                            <div class="col-md-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', $product->current_stock) }}">
                                @error('current_stock')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-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', $product->minimum_stock) }}">
                                @error('minimum_stock')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Unit</label>
                                <select name="unit" class="form-select">
                                    <option value="">Select Unit</option>
                                    @foreach(['Box','Bottle','Strip','Piece','Pack'] as $unit)
                                        <option value="{{ $unit }}"
                                            {{ old('unit', $product->unit) == $unit ? 'selected' : '' }}>
                                            {{ $unit }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Batch Number</label>
                                <input type="text" name="batch_number" class="form-control"
                                       value="{{ old('batch_number', $product->batch_number) }}">
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Expiry Date</label>
                                <input type="date" name="expiry_date" class="form-control"
                                       value="{{ old('expiry_date', $product->expiry_date) }}">
                            </div>
                            <div class="col-md-6">
                                <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>

                        {{-- Additional Settings --}}
                        <div class="section-title my-4">
                            <h5><i class="ti tabler-settings me-2"></i>Additional Settings</h5>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Prescription Required</label>
                                <select name="prescription_required" class="form-select">
                                    <option value="No"  {{ old('prescription_required', $product->prescription_required) == 'No'  ? 'selected' : '' }}>No</option>
                                    <option value="Yes" {{ old('prescription_required', $product->prescription_required) == 'Yes' ? 'selected' : '' }}>Yes</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Replace Product Image</label>
                                <input type="file" name="product_image" class="form-control">
                            </div>

                            @if($product->product_image)
                            <div class="col-12">
                                <label class="form-label d-block mb-2">Current Product Image</label>
                                <div class="product-preview">
                                    <img src="{{ asset('storage/' . $product->product_image) }}" alt="Product">
                                </div>
                            </div>
                            @endif
                        </div>

                        <hr class="my-4">

                        <div class="d-flex justify-content-between align-items-center">
                            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">
                                <i class="ti tabler-trash me-1"></i> Delete Product
                            </button>
                            <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>

                    {{-- Delete form outside main form --}}
                    <form id="deleteForm" action="{{ url('admin/product/' . $product->id . '/delete') }}" method="POST">
                        @csrf
                        @method('DELETE')
                    </form>

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

    {{-- Delete Confirmation Modal --}}
    <div class="modal fade" id="confirmDeleteModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content" style="border-radius: 16px; overflow: hidden;">
                <div class="modal-body text-center p-4">
                    <div class="mb-3">
                        <div style="width: 60px; height: 60px; background: #fff0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                            <i class="ti tabler-trash" style="font-size: 28px; color: #dc3545;"></i>
                        </div>
                    </div>
                    <h5 class="fw-bold mb-1">Delete Product</h5>
                    <p class="text-muted mb-4">Are you sure you want to delete <strong>{{ $product->product_name }}</strong>? This action cannot be undone.</p>
                    <div class="d-flex gap-2 justify-content-center">
                        <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger px-4"
                                onclick="document.getElementById('deleteForm').submit();">
                            <i class="ti tabler-trash me-1"></i> Yes, Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .card { border-radius: 18px; }
        .form-control, .form-select { min-height: 46px; border-radius: 10px; }
        .form-control:focus, .form-select:focus { border-color: #696cff; box-shadow: none; }
        .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; }
        .product-preview { width: 150px; height: 150px; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; }
        .product-preview img { width: 100%; height: 100%; object-fit: cover; }
    </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('');
    }

    $('#productEditForm').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);
        formData.append('_method', 'PUT');

        $.ajax({
            url: '{{ url("admin/product/" . $product->id) }}',
            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 Changes');

                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