<div href="product-details.php" class="product-card-wide-cancel flex-column base-border-light base-border-radius p-2 mb-2">

    <div class="flex-start gap-3">

        <div class="flex-center">
            <div class="custom-control custom-checkbox custom-control-inline m-0">
                <input type="checkbox" class="custom-control-input m-0 select-product" id="select-product-<?php echo $i ?>">
                <label class="custom-control-label cursor-pointer m-0" for="select-product-<?php echo $i ?>"></label>
            </div>
        </div>

        <div class="start">
            <a href="product-details.php">
                <img src="assets/img/thumbs/products/0<?php echo $i ?>.jpg" class="product-image">
            </a>
        </div>

        <div class="end d-flex flex-column justify-content-between">
            <div class="d-block">
                <a href="product-details.php">
                    <p class="m-0 product-name show-lines-1 mb-1"> FUGIFILM XT10 Camera Shutter 30000 67mB all FUGIFILM FUGIFILM FUGIFILM FUGIFILM FUGIFILM FUGIFILM FUGIFILM </p>
                </a>
                <p class="product-old-price color-primary m-0 mb-1"> 522.000 KWD </p>

            </div>
            <div class="flex-start gap-3">

                <div class="change-quantity-wrapper">
                    <div class="counter">
                        <span class="down" onClick='decreaseCount(event, this)'> <i class="icon icon-minus"></i> </span>
                        <input type="text" value="4">
                        <span class="up" onClick='increaseCount(event, this)'> <i class="icon icon-plus"></i></span>
                    </div> <!-- counter -->
                </div><!-- change-quantity-wrapper -->

                <p class="m-0 small color-gray "> Amount to be Cancelled </p>

            </div>
        </div>

    </div>


    <div class="dropdown w-100 prevent-auto-close select-reason-dropdown">

        <button class="base-border-light base-border-radius p-2 w-100 reset-btn flex-between" type="button" data-toggle="dropdown">
            <span class="selected-reason-text"> Select Reason </span>
            <i class="icon icon-chevron-down icon-xs color-gray"></i>
        </button>

        <div class="dropdown-menu w-100 p-3 base-border-radius">

            <div class="custom-radio-wrapper">

                <div class="custom-control custom-radio mb-1">
                    <input type="radio" id="customRadioInline<?php echo $i ?>-1" name="select-reason<?php echo $i ?>" class="custom-control-input" data-auto-close="true" value="1" checked>
                    <label class="custom-control-label cursor-pointer" for="customRadioInline<?php echo $i ?>-1"> Changed my mind</label>
                </div>

                <div class="custom-control custom-radio mb-1">
                    <input type="radio" id="customRadioInline<?php echo $i ?>-2" name="select-reason<?php echo $i ?>" class="custom-control-input" data-auto-close="true" value="2">
                    <label class="custom-control-label cursor-pointer" for="customRadioInline<?php echo $i ?>-2"> item is fake</label>
                </div>


                <div class="custom-control custom-radio mb-1">
                    <input type="radio" id="customRadioInline<?php echo $i ?>-3" name="select-reason<?php echo $i ?>" class="custom-control-input" data-auto-close="true" value="3">
                    <label class="custom-control-label cursor-pointer" for="customRadioInline<?php echo $i ?>-3"> item is taking too long to deliver</label>
                </div>


                <div class="custom-control custom-radio mb-1" id="toggle-other-option">
                    <input type="radio" id="customRadioInline<?php echo $i ?>-4" name="select-reason<?php echo $i ?>" class="custom-control-input other-option" data-auto-close="false" value="">
                    <label class="custom-control-label cursor-pointer" for="customRadioInline<?php echo $i ?>-4"> Other </label>
                </div>


                <div class="other-reason-container d-none">

                    <textarea placeholder="Write A Reason ... " class="form-control" name="report-reason-other" id="report-reason-other"></textarea>

                    <div class="text-center mt-3">
                        <a class="btn btn-primary btn-sm w-100 close-dropdown submit-other"> Submit </a>
                    </div><!-- text-center -->

                </div><!-- other-reason-container -->


            </div> <!-- custom-radio-wrapper -->

        </div>
    </div>


</div>