@extends('layouts/contentNavbarLayout')

@section('title', ' Create - Create New Product')

@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="{{ route('products') }}" class="text-muted text-decoration-none">Product</a> /
        </span>
        Create
    </h4>
    <!-- Basic Layout -->
    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Create Product</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('product.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-floating form-floating-outline mb-4">
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                id="basic-default-username" placeholder="Product Name" name="name"
                                value="{{ old('name') }}" required />
                            <label for="basic-default-username">Product Name</label>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <div class="input-group input-group-merge">
                                <div class="form-floating form-floating-outline">
                                    <input type="number" id="price"
                                        class="form-control @error('price') is-invalid @enderror" name="price"
                                        placeholder="" aria-describedby="price" required />
                                    <label for="price">Price</label>
                                </div>
                            </div>
                            @error('price')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-floating form-floating-outline mb-4">
                            <input type="file" class="form-control @error('photo') is-invalid @enderror"
                                id="upload-photo" accept=".jpg, .jpeg, .png" name="photo" onchange="validateFile(this)" required>
                            <label class="input-group-text" for="upload-photo">Upload Image</label>
                            <div class="form-text"> Allowed file types: .jpg, .jpeg, .png. Max file size: 2MB. </div>
                            @error('photo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-floating form-floating-outline mb-4">
                            <textarea class="form-control @error('description') is-invalid @enderror" name="description" id="" cols="30"
                                rows="10" placeholder="Description" required>{{ old('description') }}</textarea>
                            <label for="basic-default-username">Product Description</label>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Confirm Password -->
                        {{-- <div class="form-floating form-floating-outline mb-3">
            <input type="text" class="form-control @error('referral_code') is-invalid @enderror" id="referral_code"
              name="referral_code" placeholder="Enter your Referral code">
            <label for="referral_code">Referral code (Optional)</label>
            @error('referral_code')
            <div class="text-danger mt-1">{{ $message }}</div>
            @enderror
          </div> --}}

                        <button type="submit" class="btn btn-primary">Create</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        function validateFile(input) {
            const file = input.files[0];
            const maxSize = 2 * 1024 * 1024; // 2MB in bytes

            if (file) {
                const fileType = file.type;
                const validTypes = ["image/jpeg", "image/jpg", "image/png"];

                if (!validTypes.includes(fileType)) {
                    alert("Only JPG, JPEG, and PNG files are allowed.");
                    input.value = ''; // Clear the input
                    return;
                }

                if (file.size > maxSize) {
                    alert("File size must be less than 2MB.");
                    input.value = ''; // Clear the input
                    return;
                }
            }
        }

        document.getElementById('basic-default-phone').addEventListener('input', function() {
            // Check if the field has an error class and remove the error message
            if (this.classList.contains('is-invalid')) {
                this.classList.remove('is-invalid'); // Remove the error class
                let errorFeedback = this.closest('.form-floating').querySelector('.invalid-feedback');
                if (errorFeedback) {
                    errorFeedback.remove(); // Remove the error message
                }
            }
        });

        document.getElementById('upload-photo').addEventListener('change', function() {
            // Check if the file input has an error class and remove the error message
            if (this.classList.contains('is-invalid')) {
                this.classList.remove('is-invalid'); // Remove the error class
                let errorFeedback = this.closest('.form-floating').querySelector('.invalid-feedback');
                if (errorFeedback) {
                    errorFeedback.remove(); // Remove the error message
                }
            }
        });

        document.addEventListener("DOMContentLoaded", function() {
            // Select all input fields and select elements
            const inputs = document.querySelectorAll('input, select, textarea');

            // Loop through each input field
            inputs.forEach(input => {
                // Add an event listener for 'input' (whenever the user types)
                input.addEventListener('input', function() {
                    // Find the closest parent element with the 'form-floating' class
                    const formGroup = this.closest('.form-floating');

                    // Find the error message within the closest form group
                    const errorMessage = formGroup.querySelector('.invalid-feedback, .text-danger');

                    // If there's an error message and the input is no longer empty
                    if (errorMessage && this.value !== '') {
                        // Remove the error message
                        errorMessage.remove();
                    }

                    // Remove the 'is-invalid' class from the input field
                    if (this.classList.contains('is-invalid') && this.value !== '') {
                        this.classList.remove('is-invalid');
                    }
                });
            });
        });
    </script>
@endsection