@extends('layouts.admin')


@push('styles')

  <link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
  <link rel="stylesheet" href="{{asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
  <link rel="stylesheet" href="{{asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">


  <link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
  <link rel="stylesheet" href="{{asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">


  <link rel="stylesheet" href="{{asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css')}}">


<style type="text/css">
	.btn_mt{
		margin-top: 31px;
	}
</style>


@endpush


@section('content')

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid pt-2">

        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-info">

              <!-- form start -->
              <form method="GET" action="{{route('recipe.index')}}">
                <div class="card-body">

					<div class="row">

						<!-- <div class="col-sm-3">
						  <div class="form-group">
						    	<label for="formdate">From Date</label>
                    <div class="input-group date" id="formdate" data-target-input="nearest">
                        <input type="text" class="form-control form-control-sm datetimepicker-input" data-target="#formdate" name="formdate" id="formdate" value="{{$formdate}}" placeholder="Enter Date" required />
                        <div class="input-group-append" data-target="#formdate" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>

						  </div>
						</div>

						<div class="col-sm-3">
						  <div class="form-group">
						    	<label for="todate">To Date</label>
                    <div class="input-group date" id="todate" data-target-input="nearest">
                        <input type="text" class="form-control form-control-sm datetimepicker-input" data-target="#todate" name="todate" id="todate" value="{{$todate}}" placeholder="Enter Date" required />
                        <div class="input-group-append" data-target="#todate" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>

						  </div>
						</div> -->



						<div class="col-sm-3">
                            <div class="form-group">
                                <label for="product_id">Product</label>

                                <select id="product_id" name="product_id" class="form-control form-control-sm select2" value="" style="width: 100%;">
                                    <option value="">Select Product</option>
                                    @foreach($products as $v)
                                    <option value="{{$v->id}}" {{( isset($product_id) && ($product_id == $v->id)) ? "selected" : "" }}>{{$v->product_name}}</option>
                                    @endforeach

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


						<div class="col-sm-3">


						    <button type="submit" style="margin-top: 32px;" class="btn btn-sm btn-primary btn_mt">Search</button>
						    <a href="{{route('recipe.index')}}" style="margin-top: 32px;" class="btn btn-sm btn-secondary btn_mt">Refresh</a>

						</div>



					</div>
<!--
					<div class="card-footer" style="padding: 0;background: #fff;text-align: right;">
						    <button type="submit" style="margin-top: 0;" class="btn btn-primary btn_mt">Search</button>
						    <a href="{{route('product.index')}}" style="margin-top: 0;" class="btn btn-secondary btn_mt">Refresh</a>
					</div>
 -->


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

            <!-- /.card -->

        <div class="row">
          <!-- left column -->
          <div class="col-md-12">

	            <div class="card card-info">
	              <div class="card-header">
	                <h3 class="card-title">Recipe List</h3>

	                <a href="{{route('recipe.create')}}" style="float: right;padding: 3px 26px;" class="btn btn-outline-dark btn-flat">New Recipe</a>

	              </div>
	              <!-- /.card-header -->
	              <div class="card-body">
	                <table id="example1" class="table table-bordered table-striped">
	                  <thead>
	                  <tr>
	                    <th>SL</th>
	                    <th>Date</th>
	                    <th>Product</th>
                      <th>Type</th>
                      <th>Unit</th>
                      <th>Prod. Qty</th>
                      <th>Total Qty</th>
	                    <th>Total Cost</th>
	                    <th>Per Kg Cost</th>
                     <!--  <th>Total Wastag</th>    -->
	                    <th style="width: 100px;">Action</th>
	                  </tr>
	                  </thead>
	                  <tbody>
            						@if(count($itemList) > 0)
            						@php
            						$sl=1;
            						@endphp
            						@foreach($itemList as $key => $rec)

                        @php

                          if($rec->recipe_type == 3){

                            $recipe_type = 'Sub Recipe';

                          }else{

                            $recipe_type = 'Final Recipe';
                            
                          }

                        @endphp
            						  <tr>
            						    <td>{{$sl++}}</td>
            						    <td>{{Helper::dateFormate($rec->recipe_date)}}</td>
            						    <td>{{$rec->product_name}}</td>
                            <td>{{$recipe_type}}</td>
            						    <td>{{$rec->unit_name}}</td>
            						    <td>{{$rec->prod_qty}}</td>
            						    <td>{{$rec->total_qty}}</td>
            						    <td>{{$rec->total_amt}}</td>
            						    <td>{{$rec->pre_kg_cost}}</td>
                            <!-- <td>{{$rec->total_wastage}}</td> -->

            						    <td>



            						    	<button type="submit" data-id="{{$rec->recipe_id}}" data-toggle="modal" data-target="#modal-lg" class="btn btn-primary btn-xs view_item">View</button>

            						    	<a href="{{ route('recipe.edit', $rec->recipe_id ) }}" class="btn btn-info btn-xs edit_item">Edit</a>
            						   		<a href="{{ route('recipe.destroy', $rec->recipe_id ) }}" class="btn btn-danger btn-xs delete_item" data-confirm-delete="true">Delete</a>

            						    </td>
            						  </tr>
            						@endforeach

            						@endif
	                  </tfoot>
	                </table>
	              </div>
	              <!-- /.card-body -->
	            </div>



            <!-- /.card -->
            </div>
          <!--/.col (left) -->
          <!-- right column -->
          <div class="col-md-6">

          </div>
          <!--/.col (right) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->

    <!-- /.modal -->

  <div class="modal fade" id="modal-lg">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Recipe Details</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <table class="table table-head-fixed text-nowrap">
              <thead>
                  <tr>
                    <th style="width: 10px">Sl</th>
                    <th style="width:200px">Ingredients</th>
                    <th>Unit</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Amount</th>
                  </tr>
              </thead>
              <tbody id="view_info">


              </tbody>
            </table>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>




@endsection

@push('scripts')

<script src="{{asset('plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>

<script src="{{asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
<script src="{{asset('plugins/moment/moment.min.js')}}"></script>
<script src="{{asset('plugins/inputmask/jquery.inputmask.min.js')}}"></script>

<script>
  $(function () {

  	$(".view_item").click(function(){

		var pur_id = $(this).data("id");

		var url = '{{ route("recipe.show", ":id") }}';
		url = url.replace(':id', pur_id);

      var jqxhr = $.get(url, function(data) {
          if(!data){
            alert('No supplier found!');
          }
      })
        .done(function(data) {


        console.log(data);

          $("#view_info").html(data);


        })
        .fail(function() {

        })
        .always(function() {

        });

      jqxhr.always(function() {

      });



  	});


    $('#formdate').datetimepicker({
        format: 'DD-MM-YYYY'
    });

    $('#todate').datetimepicker({
        format: 'DD-MM-YYYY'
    });


    $('.select2').select2();

    $('.select2bs4').select2({
      theme: 'bootstrap4'
    });


    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
              buttons: [
            {
                extend: 'excel',
                title: 'Product List',
                exportOptions: {
                    columns: [ 8, ':visible' ]
                }
            },
            {
                extend: 'pdf',
                title: 'Product List',
                exportOptions: {
                    columns: [ 8, ':visible' ]
                }
            },
            {
                extend: 'print',
                title: 'Product List',
                exportOptions: {
                    columns: [ 8, ':visible' ]
                }
            },
            'colvis'
        ]

    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });

  });




</script>

@endpush