@extends('admin.layouts')
@section('title', 'Add Product')
@section('header')


<!-- Page CSS -->
<link rel="stylesheet" type="text/css" href="{{asset('/assets')}}/css/formILY.css">

@endsection
@section('content')



<div class="container-fluid page-wrapper category-container">

   <div class="row">
        <div class="d-flex align-items-center">
            <h3 class="page-top-heading">Add Product</h3>
        </div>
    </div>

    <div class="row d-flex justify-content-center mt-4">
        <div class="col-lg-12">
            <div class="card ILY-form-card">
                <div class="card-header d-none">
                    <h5 class="card-title">Add Product</h5>
                </div>
                <div class="card-body">
                    <form action="{{route('upload_product')}}" method="POST" enctype="multipart/form-data">
                        @csrf 
                        <div class="row">
                            <div class="col-lg-6">
                               <div class="form-group mb-3">
                                    <label for="category_select" class="form-label">Select Category</label>
                                    <select class="form-select" name="category" aria-label="Category Select">
                                        <option selected="">Select</option>
                                        @foreach($category as $categorys)
                                            <option value="{{ $categorys->id}}">{{ $categorys->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>    
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    <label for="category_img" class="form-label">Choose Image</label>
                                    <input class="form-control custom-file-input" name="category_img" type="file" id="category_img">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group mb-3">
                                    <label for="product_title" class="form-label">Title</label>
                                    <input type="text" name="product_title" class="form-control" id="product_title" placeholder="Enter Product Title">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group mb-3">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea type="text" name="description" class="form-control" id="description" rows="3" placeholder="Write Here"></textarea>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    <label for="discount" class="form-label">Discount</label>
                                    <input type="text" name="discount" class="form-control" id="discount" placeholder="%">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    <label for="mrp" class="form-label">MRP</label>
                                    <input type="text" name="mrp" class="form-control" id="mrp" placeholder="₹0.00">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    <label for="price" class="form-label">Price</label>
                                    <input type="text" name="price" class="form-control" id="price" placeholder="₹0.00" readonly>
                                </div>
                            </div>
                            <input type="hidden" name="notify_user" id="notify_user" value="0"> <!-- Hidden input for notification status -->

                            <div class="col-lg-12">
                                <div class="form-check mb-3 mt-2">
                                    <input class="form-check-input" type="checkbox" value="" id="notify_check">
                                    <label class="form-check-label ms-2 mt-1" for="notify_check">
                                      Are you certain you would like to notify the user?
                                    </label>
                                </div>
                            </div>
                            <div class="button-container mt-3">
                                <button type="submit" class="btn btn-primary submit-btn"><i class="fa-regular fa-circle-check me-2"></i>Submit</button>
                            </div>
                        </div>
                        <!-- Card row ends.. -->
                    </form>
                    <!-- form ends... -->
                </div>
            </div>
        </div>
    </div>
    <!-- Row Ends.. -->

  
</div>
<!-- end container fluid -->




@endsection
@section('footer')

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const mrpInput = document.getElementById('mrp');
        const discountInput = document.getElementById('discount');
        const priceInput = document.getElementById('price');

        function calculatePrice() {
            const mrp = parseFloat(mrpInput.value) || 0;
            const discount = parseFloat(discountInput.value) || 0;

            // Calculate the price after discount
            const price = mrp - (mrp * (discount / 100));
            priceInput.value = price.toFixed(2); // Set the calculated price with two decimal points
        }

        mrpInput.addEventListener('input', calculatePrice);
        discountInput.addEventListener('input', calculatePrice);
    });
</script>
<script>
    document.getElementById('notify_check').addEventListener('change', function() {
    const notifyUserInput = document.getElementById('notify_user');

    if (this.checked) {
        notifyUserInput.value = '1'; 
    } else {
        notifyUserInput.value = '0'; 
    }
});
</script>

@endsection