@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Create Purchase</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }

    .fileBtn:hover {
        cursor: progress;
        color: red;
    }
</style>

@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Create Purchase </h2>
    </div>
    {{-- <div class="grid grid-cols-12 gap-6"> --}}
    <div class="box ">

        <div class="col-span-12 lg:col-span-8 2xl:col-span-9 ">
            <form id="studentForm" action="{{ route('purchase.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                @method('post')
                <!-- BEGIN: Display Information -->

                <div class="intro-y box lg:mt-5">
                    <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                        style="background-color: #292727; border-radius: 4px;">
                        <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Purchase Information</h2>
                    </div>
                    <div class="p-5 box bg-primary/10">
                        <div class="flex flex-col-reverse xl:flex-row flex-col">
                            <div class="flex-1 mt-6 xl:mt-0">


                                <div class="grid grid-cols-12 gap-2">
                                    <div class="form-control col-span-4">
                                        <label for="input-wizard-1" class="form-label">Title</label><br>
                                        <input id="input-wizard-1" required type="text" name="title"
                                            value="{{ old('title') }}" class="form-control col-span-4"
                                            placeholder="First Name">
                                    </div>
                                    <div class="form-control col-span-4">
                                        <label for="input-wizard-1" class="form-label">Date</label><br>
                                        <input id="input-wizard-1" required type="date" name="date"
                                            value="{{ old('date') }}" class="form-control col-span-4">
                                    </div>
                                    
                                    <div class="form-control col-span-6">
                                        <div class="mt-3">
                                            <label for="update-profile-form-5" class="form-label">Description</label>
                                            <textarea id="update-profile-form-5" name="description" class="form-control" placeholder="Description......"></textarea>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>
                    <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                        style="background-color: #292727; border-radius: 4px;">
                        <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Purchase Items</h2>
                        <p class="btn btn-success w-24 mr-1 mb-2" style="float: right;" id="add-btn">Add</p>
                    </div>

                    <div class="p-5 box bg-primary/10 ">
                        <div class="flex flex-col-reverse xl:flex-row flex-col">
                            <div class="flex-1 mt-6 xl:mt-0">

                                <div class="overflow-x-auto">
                                        <table class="table table-sm" >
                                         
                                            <tbody id="dynamicAddRemove">
                                            </tbody>
                                </table>
                                  
                                </div>

                                <button type="submit" class="btn btn-primary mt-5" style="float: right;">Save</button>

                            </div>

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

    </div>
    <!-- END: Display Information -->

    </form>
    </div>
@endsection

@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>

    <script>
  $(document).ready(function() {
    var html = "";
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/books/purchase') }}",
                success: function(response) {
                    // jQuery('#books').html(response[0]);
                    console.log(response);
                    html+=response;
                }
            });
 
          //Purchanse Items Dynamic Form Filed Add
          var i = 0;
                $("#add-btn").click(function(){
                    
                $("#dynamicAddRemove").append('<tr>'+
                    '<td> <select name="moreFields['+i+'][book_id]" class="form-control">'+html+'</select></td>'+
                    '<td> <input type="text" class="form-control" placeholder="Enter Quantity" name="moreFields['+i+'][quantity]"/></td>'+
                    '<td> <input type="text" class="form-control" placeholder="Enter Amount" name="moreFields['+i+'][amount]"/></td>'+
                    '<td><button title="Remove Fields" class="remove-tr btn btn-sm btn-danger mr-1 mb-2">Remove</button></td>'+
                    '</tr>'
                    );
                    ++i;
                });
                
                $(document).on('click', '.remove-tr', function(){
                $(this).parents('tr').remove();
                });
            //End of Purchanse Items Dynamic Form Filed Add
  });
    </script>
@endsection