@extends('main.layouts.app')
@section('content')

<style>

.date h3{
        font-size: 11px;
        line-height: 11px;
        color: #1f365c;
        font-weight:bold;
        margin-bottom: 5px;
    }

    .date span {
    font-size: 10px;
}


.section .section-header {
    flex-wrap: wrap;
    margin-bottom: 20px !important;
}


.br-20 {
        border-radius: 20px;
    }

    .align-middle {
        vertical-align: middle;
    }

    div.clock {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }

    .autopull-header h5 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .autopull-header h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }



    .card .card-header {
        width: 100%;
        min-height: 0px;
    }


    .card .card-header h4 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .bg_blue_color {
        border-radius: 20px !important;
        background-color: #0E194D !important;
    }

    .depo {
        font-size: 14px;
    }

    .dash-text {
        text-align: center;
    }

    @media (max-width:767px) {
        .autopull-header h3 {
            font-size: 13px;
            line-height: 14px;
            color: #1f365c;
        }

        .depo {
            font-size: 15px;
        }

        .autopull-header h5 {
            font-size: 13px;
            line-height: 15px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }
    }
    
    .card .card-header h4 {
        font-size: 24px;
    }

    #buybtn {
        padding: 10px 40px;
        border-radius: 10px;
        font-size: 20px;
    }

    .table_plan {
        border: 1px dashed;
    }

    /* .table_plan thead th{

} */

    .table:not(.table-sm) thead th {
        background-color: #333;
        color: #fff;
    }
</style>
<div class="main-content">
    <section class="section">

        <div class="section-header d-block bg_blue_color mb-0">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="dash-text">
                                <h5 class="text-white depo mb-0">
                                    <a href="/admin/dashboard"><img src="/img/homepage.png" alt="image"> </a> 
                                    Collections
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        <div class="">
            @if (session()->has('success_message'))
            <div class="spacer"></div>
            <div class="alert alert-success">
                {{ session()->get('success_message') }}
            </div>
            @endif

            @if (count($errors) > 0)
            <div class="spacer"></div>
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{!! $error !!}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            <div class="section-body">
                <form name="storeCheckout" action="/admin/store-collection" method="POST" id="payment-form">
                    {{ csrf_field() }}

                    <div class="card card-primary">
                        <div class="card-header">
                            <h4>Add Collections</h4>
                        </div>
                        <div class="card-body">

                            <div class="form-row">
                                <div class="form-group col-lg-6">
                                    <label for="email">Email Address<span class="red text-danger">*</span></label>
                                    <input type="email" class="form-control" placeholder="Type User Email to Get User Data" id="memberEmail" name="email" value="" required>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="name">Name<span class="red text-danger">*</span></label>
                                    <input readonly type="text" class="form-control" id="name" name="name" value="" placeholder="Name" required>
                                    <div class="errormsg" id="error_name"></div>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="name">Payment type<span class="red text-danger">*</span></label>
                                    <select name="payment_type" class="form-control" id="payment_type" required>
                                        <option value="">Selct payment Type</option>
                                        <option value="cash">Cash</option>
                                        <option value="gpay">Gpay</option>
                                        <option value="ac">A/C</option>
                                    </select>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="name">Member Id<span class="red text-danger">*</span></label>
                                    <input readonly type="text" class="form-control" id="memberId" name="memberId" value="" placeholder="MemberId" required>
                                    <div class="errormsg" id="error_name"></div>
                                </div>

                            </div>


                            <div class="form-row">
                                <div class="form-group col-lg-6">
                                    <label for="phone">Phone<span class="red text-danger">*</span></label>
                                    <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" value="" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 10)" required>
                                    <div class="errormsg" id="error_phone"></div>
                                </div>

                                <div class="form-group col-lg-6">
                                    <label for="plan type">Plan Type<span class="red text-danger">*</span></label>
                                    <select name="plan_type" class="form-control" id="plantype" required>
                                        <option value="">Select Plan Type</option>
                                        <option value="membership_transaction">Membership</option>
                                        <option value="gold_plan_transaction">Gold Plan</option>
                                        <option value="product_transaction">Product</option>
                                        <option value="sip_transaction">SIP</option>
                                    </select>
                                </div>
                            </div>


                            <div class="form-row productmanage d-none">
                                <div class="form-group col-lg-6">
                                    <label for="product">Product<span class="red text-danger">*</span></label>
                                    <select name="product_id" class="form-control" id="product" required>
                                        <option value="">Selct Product Type</option>
                                        @foreach($products as $data)
                                        <option value="{{$data->id}}">{{$data->product_title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="product-quantity">Product Quantity<span class="red text-danger">*</span></label>
                                    <input type="number" class="form-control" placeholder="Product Quantity" id="productqty" name="quantity" value="">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-lg-6 productmanage d-none">
                                    <label for="name">Product Margin<span class="red text-danger">*</span></label>
                                    <input type="text" class="form-control" id="productmargin" name="manufacturing_cost" value="" placeholder="Product Margin">
                                    <div class="errormsg" id="error_amount"></div>
                                </div>

                                <div class="form-group col-lg-6 sipplans d-none">
                                    <label for="name">SIP Plans<span class="red text-danger">*</span></label>
                                    <select name="plan_id" class="form-control" id="sipplans">
                                        <option value="">Selct Plan Type</option>
                                        @foreach($sipplans as $data)
                                        <option value="{{$data->id}}">{{$data->name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-lg-6">
                                    <label for="name">Amount<span class="red text-danger">*</span></label>
                                    <input type="number" class="form-control" id="amount" name="amount" value="" placeholder="Amount" required>
                                    <div class="errormsg" id="error_amount"></div>
                                </div>

                                <!-- <div class="form-group col-lg-6">
                                    <label for="date">Date<span class="red text-danger">*</span></label>

                                    <input type="date" class="form-control" placeholder="Date" id="date" name="date" value="" required>
                                </div> -->
                            </div>
                        </div>
                        <div class="card-footer bg-whitesmoke">
                            <button id="complete-order" type='submit' class="btn btn-primary button-primary full-width border-0">Complete Order</button>

                        </div>
                    </div>
                </form>
            </div>

        </div>






    </section>
</div>

<script>
    $(document).ready(function() {
        $('#plantype').change(function() {
            var selectedValue = $(this).val();
            if (selectedValue === 'product_transaction') {
                $('.productmanage').removeClass('d-none');
                $('#product').attr('required', true);
                $('#productqty').attr('required', true);
                $('#productmargin').attr('required', true);

            } else {
                $('.productmanage').addClass('d-none');
                $('#product').removeAttr('required');
                $('#productqty').removeAttr('required');
                $('#productmargin').removeAttr('required');
                // $("#product").attr('value',' ');
                // $("#productqty").attr('value',' ');
                // $("#productmargin").attr('value',' ');
            }


            if (selectedValue === 'sip_transaction') {
                $('.sipplans').removeClass('d-none');
                $('#sipplans').attr('required', true);
            } else {
                $('.sipplans').addClass('d-none');
                $('#sipplans').removeAttr('required');
                // $("#sipplans").attr('value',' ');
            }


        });
    });
</script>
<script>
    $('#memberEmail').focusout(function() {
        email = document.getElementById('memberEmail').value;
        $.ajax({
            url: '/admin/get-user-data',
            type: 'get',
            data: 'email=' + email,
            success: function(data) {
                document.getElementById('name').value = data.data.name;
                document.getElementById('memberId').value = data.data.id;
                document.getElementById('phone').value = '';
                console.log(data.data.is_member);
                if (data.data.is_member == 1) {
                    $("#plantype option[value='membership_transaction']").remove();
                }
            }
        })
    })
</script>
@endsection