@extends('layouts.app')
@section('title', 'Create Product')

@section('content')
    <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Create Product</div>
        <div>
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"
                data-toggle="tooltip" data-placement="top" title="Add"></i>
            <i id="submitForm"
                class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" data-placement="top" title="Save"></i>
            <i class="fa-regular fa-edit fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" data-placement="top" title="Edit"></i>
            <i class="fa-regular fa-trash-can fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" data-placement="top" title="Delete"></i>
            <a href="{{ route('products.index') }}">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center ms-1"
                    data-toggle="tooltip" data-placement="top" title="Cancel"></i>
            </a>
        </div>
    </div>

    <div class="row mt-3 mb-5">
        <div class="col-md-6">
            <div class="card">
                <h5 class="card-title">Create Product</h5>
                <div class="card-body">
                    <form id="createProductForm" action="{{ route('products.store') }}" method="POST">
                        @csrf

                        <!-- Product Name -->
                        <div class="mb-3">
                            <label for="product_name" class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('product_name') is-invalid @enderror"
                                id="product_name" name="product_name" value="{{ old('product_name') }}" maxlength="50"
                                required>
                            @error('product_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Category -->
                        <div class="mb-3">
                            <label for="category_id" class="form-label">Category <span class="text-danger">*</span></label>
                            <select class="form-control @error('category_id') is-invalid @enderror" id="category_id"
                                name="category_id" required>
                                <option value="">Select Category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" @if (old('category_id', $product->category_id ?? '') == $category->id) selected @endif>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Description -->
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                                rows="3" maxlength="1500">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Zap Product ID -->
                        <div class="mb-3">
                            <label for="zap_product_id" class="form-label">Zap Product ID</label>
                            <input type="text" class="form-control @error('zap_product_id') is-invalid @enderror"
                                id="zap_product_id" name="zap_product_id" value="{{ old('zap_product_id') }}"
                                maxlength="255" placeholder="Enter Zap Product ID (optional)">
                            @error('zap_product_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Status -->
                        <div class="mb-3">
                            <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input @error('status') is-invalid @enderror" type="radio"
                                        id="statusEnable" name="status" value="enabled"
                                        {{ old('status') == 'enabled' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="statusEnable">Enable</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input @error('status') is-invalid @enderror" type="radio"
                                        id="statusDisable" name="status" value="disabled"
                                        {{ old('status') == 'disabled' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="statusDisable">Disable</label>
                                </div>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        // Submit form when the save button is clicked
        document.getElementById('submitForm').addEventListener('click', function() {
            document.getElementById('createProductForm').submit();
        });

        // Validate product name input
        function validateText(input) {
            input.value = input.value.replace(/[^a-zA-Z\s]/g, '');
        }

        // Validate description input
        function validateDescription(input) {
            input.value = input.value.replace(/[^a-zA-Z0-9\s.,]/g, '');
        }
    </script>
@endpush