@extends('layout.admin.list_master')
@section('content')
    <style>
        .btn-light{
          padding-left:10px;
        }
    </style>
    <div class="content-body">
        <div class="container-fluid">
            <div class="page-titles mb-n5">
				<ol class="breadcrumb">
                    @section('titleBar')
                    <span class="ml-2 text-white">Add Categories</span>
                    @endsection
				</ol>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="form-validation">
                                <form class="form-valide" action="{{ url('admin/categories_add_save') }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-xl-6 form-group">
                                            <label class="col-lg-12" for="val-username"> Name <span class="text-danger">*</span> </label>
                                            <div class="col-lg-12">
                                                <input type="text" class="form-control" id="name" name="name" placeholder="Enter a Name" required>
                                            </div>
                                        </div>

                                        <div class="col-xl-6 form-group">
                                            <label class="col-lg-12" for="val-username"> Images <span class="text-danger">*</span> </label>
                                            <div class="col-lg-12">
                                                <input type="file" class="form-control" id="images" name="images" required>                                                                                              
                                            </div>
                                            
                                            <div id="image-preview-container" class="col-xl-12"></div>
                                        </div>

                                        <div class="col-xl-12 form-group">
                                            <label class="col-lg-12" for="val-username"> Description <span class="text-danger">*</span> </label>
                                            <div class="col-lg-12">
                                                <textarea class="form-control" id="description" name="description" placeholder="Enter a Description" rows="10" required></textarea>
                                            </div>
                                        </div>

                                        <div class="col-xl-12 form-group">
                                            <label class="col-lg-12" for="val-username"> Status <span class="text-danger">*</span> </label>
                                            <div class="col-lg-12">
                                                <select class="form-control" id="status" name="status" required>
                                                    <option value="Active">Active</option>
                                                    <option value="Inactive">Inactive</option>
                                                </select>                                                
                                            </div>
                                        </div>

                                        <div class="col-lg-12 form-group text-right">
                                                <button type="submit" name="add" class="btn btn-primary rounded-pill mt-4 col-lg-4 col-md-6">Add</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
          	</div>
        </div>
    </div>
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Listen for change in the file input
        $('#images').on('change', function(e) {
            // Clear previous previews
            $('#image-preview-container').empty();

            // Loop through selected files
            for (let i = 0; i < e.target.files.length; i++) {
                // Create a FileReader object
                let reader = new FileReader();

                // Listen for FileReader's load event
                reader.onload = function(event) {
                    // Create an image element and set its source to the FileReader result
                    let image = $('<img>').attr('src', event.target.result).addClass('preview-image');

                    // Append the image to the preview container
                    $('#image-preview-container').append(image);
                };

                // Read the selected file as a data URL
                reader.readAsDataURL(e.target.files[i]);
            }
        });
    });
</script>

<style>
    .preview-image {
        max-width: 100px;
        max-height: 100px;
        margin: 5px;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var usersBusinessId = document.getElementById('users_business_id');
        var discountPercentageDiv = document.getElementById('discountPercentageDiv');

        // Function to handle the change event
        function handleBusinessIdChange() {
            var selectedBusinessId = usersBusinessId.value;
            console.log(selectedBusinessId);
            // Check if the selected business id is Crowd Admin (id 27)
            if (selectedBusinessId == 27) {
                discountPercentageDiv.style.display = 'none'; 
            } else {
                discountPercentageDiv.style.display = 'block'; 
            }
        }

        // Add event listener for the change event
        usersBusinessId.addEventListener('change', handleBusinessIdChange);

        // Trigger the change event manually after the page is loaded
        handleBusinessIdChange();
    });
</script>